@transferwise/components 0.0.0-experimental-2dc78bc → 0.0.0-experimental-9ace8f1
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.
- package/build/common/panel/Panel.js +13 -3
- package/build/common/panel/Panel.js.map +1 -1
- package/build/common/panel/Panel.mjs +13 -3
- package/build/common/panel/Panel.mjs.map +1 -1
- package/build/tooltip/Tooltip.js +13 -3
- package/build/tooltip/Tooltip.js.map +1 -1
- package/build/tooltip/Tooltip.mjs +13 -3
- package/build/tooltip/Tooltip.mjs.map +1 -1
- package/build/types/common/panel/Panel.d.ts.map +1 -1
- package/build/types/tooltip/Tooltip.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/common/panel/Panel.tsx +8 -3
- package/src/tooltip/Tooltip.tsx +9 -3
|
@@ -75,7 +75,8 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
|
|
|
75
75
|
const {
|
|
76
76
|
refs,
|
|
77
77
|
floatingStyles,
|
|
78
|
-
placement
|
|
78
|
+
placement,
|
|
79
|
+
middlewareData
|
|
79
80
|
} = react.useFloating({
|
|
80
81
|
placement: position$1,
|
|
81
82
|
middleware,
|
|
@@ -84,6 +85,14 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
|
|
|
84
85
|
},
|
|
85
86
|
whileElementsMounted: react.autoUpdate
|
|
86
87
|
});
|
|
88
|
+
const arrowStyle = {
|
|
89
|
+
...(middlewareData.arrow?.x != null ? {
|
|
90
|
+
left: middlewareData.arrow.x
|
|
91
|
+
} : {}),
|
|
92
|
+
...(middlewareData.arrow?.y != null ? {
|
|
93
|
+
top: middlewareData.arrow.y
|
|
94
|
+
} : {})
|
|
95
|
+
};
|
|
87
96
|
const contentStyle = {
|
|
88
97
|
...(anchorWidth ? {
|
|
89
98
|
width: anchorRef.current?.clientWidth
|
|
@@ -102,7 +111,7 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
|
|
|
102
111
|
ref: refs.setFloating,
|
|
103
112
|
role: "dialog",
|
|
104
113
|
style: floatingStyles,
|
|
105
|
-
"data-placement": placement,
|
|
114
|
+
"data-popper-placement": placement,
|
|
106
115
|
className: clsx.clsx('np-panel', {
|
|
107
116
|
'np-panel--open': open
|
|
108
117
|
}, rest.className),
|
|
@@ -112,7 +121,8 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
|
|
|
112
121
|
className: clsx.clsx('np-panel__content'),
|
|
113
122
|
children: [children, arrow && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
114
123
|
ref: arrowRef,
|
|
115
|
-
className: clsx.clsx('np-panel__arrow')
|
|
124
|
+
className: clsx.clsx('np-panel__arrow'),
|
|
125
|
+
style: arrowStyle
|
|
116
126
|
})]
|
|
117
127
|
})
|
|
118
128
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.js","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import {\n arrow as arrowMiddleware,\n autoUpdate,\n flip as flipMiddleware,\n offset,\n type Placement,\n shift,\n useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n CSSProperties,\n HTMLAttributes,\n MutableRefObject,\n PropsWithChildren,\n SyntheticEvent,\n forwardRef,\n useContext,\n useRef,\n} from 'react';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<string, Placement[]> = {\n [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n arrow?: boolean;\n flip?: boolean;\n altAxis?: boolean;\n open?: boolean;\n onClose?: (event: Event | SyntheticEvent) => void;\n position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n anchorRef: MutableRefObject<Element | null>;\n anchorWidth?: boolean;\n considerHeight?: boolean;\n}> &\n HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n {\n arrow = false,\n flip = true,\n altAxis = false,\n children,\n open = false,\n onClose,\n position = Position.BOTTOM,\n anchorRef,\n anchorWidth = false,\n considerHeight = false,\n ...rest\n }: PanelProps,\n reference,\n) {\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const middleware = [];\n\n if (arrow) {\n middleware.push(offset(POPOVER_OFFSET));\n middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n }\n\n if (flip && fallbackPlacements[position]) {\n middleware.push(\n flipMiddleware({\n fallbackPlacements: fallbackPlacements[position],\n }),\n );\n }\n\n if (altAxis) {\n middleware.push(shift());\n }\n\n const { refs, floatingStyles, placement } = useFloating({\n placement: position,\n middleware,\n elements: {\n reference: anchorRef.current,\n },\n whileElementsMounted: autoUpdate,\n });\n\n const contentStyle: CSSProperties = {\n ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n };\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n <div\n id={overlayId}\n {...rest}\n ref={refs.setFloating}\n role=\"dialog\"\n style={floatingStyles}\n data-placement={placement}\n className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n >\n <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n {children}\n {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} />}\n </div>\n </div>\n </Dimmer>\n );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","middleware","push","offset","arrowMiddleware","element","padding","flipMiddleware","shift","refs","floatingStyles","placement","useFloating","elements","current","whileElementsMounted","autoUpdate","contentStyle","width","clientWidth","undefined","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","style","className","clsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAMA,cAAc,GAAG,EAAE;AAEzB;AACA;AACA;AACA,MAAMC,kBAAkB,GAAgC;AACtD,EAAA,CAACC,iBAAQ,CAACC,GAAG,GAAG,CAACD,iBAAQ,CAACE,MAAM,EAAEF,iBAAQ,CAACG,KAAK,EAAEH,iBAAQ,CAACI,IAAI,CAAC;AAChE,EAAA,CAACJ,iBAAQ,CAACE,MAAM,GAAG,CAACF,iBAAQ,CAACC,GAAG,EAAED,iBAAQ,CAACG,KAAK,EAAEH,iBAAQ,CAACI,IAAI,CAAC;AAChE,EAAA,CAACJ,iBAAQ,CAACI,IAAI,GAAG,CAACJ,iBAAQ,CAACG,KAAK,EAAEH,iBAAQ,CAACC,GAAG,EAAED,iBAAQ,CAACE,MAAM,CAAC;AAChE,EAAA,CAACF,iBAAQ,CAACG,KAAK,GAAG,CAACH,iBAAQ,CAACI,IAAI,EAAEJ,iBAAQ,CAACC,GAAG,EAAED,iBAAQ,CAACE,MAAM;CAChE;AAeD,MAAMG,KAAK,gBAAGC,gBAAU,CAA6B,SAASD,KAAKA,CACjE;AACEE,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ;AACRC,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;YACPC,UAAQ,GAAGb,iBAAQ,CAACE,MAAM;EAC1BY,SAAS;AACTC,EAAAA,WAAW,GAAG,KAAK;AACnBC,EAAAA,cAAc,GAAG,KAAK;EACtB,GAAGC;AAAI,CACI,EACbC,SAAS,EAAA;AAET,EAAA,MAAMC,QAAQ,GAAGC,YAAM,CAAwB,IAAI,CAAC;EAEpD,MAAMC,UAAU,GAAG,EAAE;AAErB,EAAA,IAAId,KAAK,EAAE;AACTc,IAAAA,UAAU,CAACC,IAAI,CAACC,YAAM,CAACzB,cAAc,CAAC,CAAC;AACvCuB,IAAAA,UAAU,CAACC,IAAI,CAACE,WAAe,CAAC;AAAEC,MAAAA,OAAO,EAAEN,QAAQ;AAAEO,MAAAA,OAAO,EAAE;AAAC,KAAE,CAAC,CAAC;AACrE,EAAA;AAEA,EAAA,IAAIlB,IAAI,IAAIT,kBAAkB,CAACc,UAAQ,CAAC,EAAE;AACxCQ,IAAAA,UAAU,CAACC,IAAI,CACbK,UAAc,CAAC;MACb5B,kBAAkB,EAAEA,kBAAkB,CAACc,UAAQ;AAChD,KAAA,CAAC,CACH;AACH,EAAA;AAEA,EAAA,IAAIJ,OAAO,EAAE;AACXY,IAAAA,UAAU,CAACC,IAAI,CAACM,WAAK,EAAE,CAAC;AAC1B,EAAA;EAEA,MAAM;IAAEC,IAAI;IAAEC,cAAc;AAAEC,IAAAA;
|
|
1
|
+
{"version":3,"file":"Panel.js","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import {\n arrow as arrowMiddleware,\n autoUpdate,\n flip as flipMiddleware,\n offset,\n type Placement,\n shift,\n useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n CSSProperties,\n HTMLAttributes,\n MutableRefObject,\n PropsWithChildren,\n SyntheticEvent,\n forwardRef,\n useContext,\n useRef,\n} from 'react';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<string, Placement[]> = {\n [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n arrow?: boolean;\n flip?: boolean;\n altAxis?: boolean;\n open?: boolean;\n onClose?: (event: Event | SyntheticEvent) => void;\n position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n anchorRef: MutableRefObject<Element | null>;\n anchorWidth?: boolean;\n considerHeight?: boolean;\n}> &\n HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n {\n arrow = false,\n flip = true,\n altAxis = false,\n children,\n open = false,\n onClose,\n position = Position.BOTTOM,\n anchorRef,\n anchorWidth = false,\n considerHeight = false,\n ...rest\n }: PanelProps,\n reference,\n) {\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const middleware = [];\n\n if (arrow) {\n middleware.push(offset(POPOVER_OFFSET));\n middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n }\n\n if (flip && fallbackPlacements[position]) {\n middleware.push(\n flipMiddleware({\n fallbackPlacements: fallbackPlacements[position],\n }),\n );\n }\n\n if (altAxis) {\n middleware.push(shift());\n }\n\n const { refs, floatingStyles, placement, middlewareData } = useFloating({\n placement: position,\n middleware,\n elements: {\n reference: anchorRef.current,\n },\n whileElementsMounted: autoUpdate,\n });\n\n const arrowStyle: CSSProperties = {\n ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n };\n\n const contentStyle: CSSProperties = {\n ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n };\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n <div\n id={overlayId}\n {...rest}\n ref={refs.setFloating}\n role=\"dialog\"\n style={floatingStyles}\n data-popper-placement={placement}\n className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n >\n <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n {children}\n {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n </div>\n </div>\n </Dimmer>\n );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","middleware","push","offset","arrowMiddleware","element","padding","flipMiddleware","shift","refs","floatingStyles","placement","middlewareData","useFloating","elements","current","whileElementsMounted","autoUpdate","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","undefined","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","style","className","clsx","_jsxs"],"mappings":"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"}
|
|
@@ -71,7 +71,8 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
|
|
|
71
71
|
const {
|
|
72
72
|
refs,
|
|
73
73
|
floatingStyles,
|
|
74
|
-
placement
|
|
74
|
+
placement,
|
|
75
|
+
middlewareData
|
|
75
76
|
} = useFloating({
|
|
76
77
|
placement: position,
|
|
77
78
|
middleware,
|
|
@@ -80,6 +81,14 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
|
|
|
80
81
|
},
|
|
81
82
|
whileElementsMounted: autoUpdate
|
|
82
83
|
});
|
|
84
|
+
const arrowStyle = {
|
|
85
|
+
...(middlewareData.arrow?.x != null ? {
|
|
86
|
+
left: middlewareData.arrow.x
|
|
87
|
+
} : {}),
|
|
88
|
+
...(middlewareData.arrow?.y != null ? {
|
|
89
|
+
top: middlewareData.arrow.y
|
|
90
|
+
} : {})
|
|
91
|
+
};
|
|
83
92
|
const contentStyle = {
|
|
84
93
|
...(anchorWidth ? {
|
|
85
94
|
width: anchorRef.current?.clientWidth
|
|
@@ -98,7 +107,7 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
|
|
|
98
107
|
ref: refs.setFloating,
|
|
99
108
|
role: "dialog",
|
|
100
109
|
style: floatingStyles,
|
|
101
|
-
"data-placement": placement,
|
|
110
|
+
"data-popper-placement": placement,
|
|
102
111
|
className: clsx('np-panel', {
|
|
103
112
|
'np-panel--open': open
|
|
104
113
|
}, rest.className),
|
|
@@ -108,7 +117,8 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
|
|
|
108
117
|
className: clsx('np-panel__content'),
|
|
109
118
|
children: [children, arrow$1 && /*#__PURE__*/jsx("div", {
|
|
110
119
|
ref: arrowRef,
|
|
111
|
-
className: clsx('np-panel__arrow')
|
|
120
|
+
className: clsx('np-panel__arrow'),
|
|
121
|
+
style: arrowStyle
|
|
112
122
|
})]
|
|
113
123
|
})
|
|
114
124
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.mjs","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import {\n arrow as arrowMiddleware,\n autoUpdate,\n flip as flipMiddleware,\n offset,\n type Placement,\n shift,\n useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n CSSProperties,\n HTMLAttributes,\n MutableRefObject,\n PropsWithChildren,\n SyntheticEvent,\n forwardRef,\n useContext,\n useRef,\n} from 'react';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<string, Placement[]> = {\n [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n arrow?: boolean;\n flip?: boolean;\n altAxis?: boolean;\n open?: boolean;\n onClose?: (event: Event | SyntheticEvent) => void;\n position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n anchorRef: MutableRefObject<Element | null>;\n anchorWidth?: boolean;\n considerHeight?: boolean;\n}> &\n HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n {\n arrow = false,\n flip = true,\n altAxis = false,\n children,\n open = false,\n onClose,\n position = Position.BOTTOM,\n anchorRef,\n anchorWidth = false,\n considerHeight = false,\n ...rest\n }: PanelProps,\n reference,\n) {\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const middleware = [];\n\n if (arrow) {\n middleware.push(offset(POPOVER_OFFSET));\n middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n }\n\n if (flip && fallbackPlacements[position]) {\n middleware.push(\n flipMiddleware({\n fallbackPlacements: fallbackPlacements[position],\n }),\n );\n }\n\n if (altAxis) {\n middleware.push(shift());\n }\n\n const { refs, floatingStyles, placement } = useFloating({\n placement: position,\n middleware,\n elements: {\n reference: anchorRef.current,\n },\n whileElementsMounted: autoUpdate,\n });\n\n const contentStyle: CSSProperties = {\n ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n };\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n <div\n id={overlayId}\n {...rest}\n ref={refs.setFloating}\n role=\"dialog\"\n style={floatingStyles}\n data-placement={placement}\n className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n >\n <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n {children}\n {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} />}\n </div>\n </div>\n </Dimmer>\n );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","middleware","push","offset","arrowMiddleware","element","padding","flipMiddleware","shift","refs","floatingStyles","placement","useFloating","elements","current","whileElementsMounted","autoUpdate","contentStyle","width","clientWidth","undefined","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","style","className","clsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAMA,cAAc,GAAG,EAAE;AAEzB;AACA;AACA;AACA,MAAMC,kBAAkB,GAAgC;AACtD,EAAA,CAACC,QAAQ,CAACC,GAAG,GAAG,CAACD,QAAQ,CAACE,MAAM,EAAEF,QAAQ,CAACG,KAAK,EAAEH,QAAQ,CAACI,IAAI,CAAC;AAChE,EAAA,CAACJ,QAAQ,CAACE,MAAM,GAAG,CAACF,QAAQ,CAACC,GAAG,EAAED,QAAQ,CAACG,KAAK,EAAEH,QAAQ,CAACI,IAAI,CAAC;AAChE,EAAA,CAACJ,QAAQ,CAACI,IAAI,GAAG,CAACJ,QAAQ,CAACG,KAAK,EAAEH,QAAQ,CAACC,GAAG,EAAED,QAAQ,CAACE,MAAM,CAAC;AAChE,EAAA,CAACF,QAAQ,CAACG,KAAK,GAAG,CAACH,QAAQ,CAACI,IAAI,EAAEJ,QAAQ,CAACC,GAAG,EAAED,QAAQ,CAACE,MAAM;CAChE;AAeD,MAAMG,KAAK,gBAAGC,UAAU,CAA6B,SAASD,KAAKA,CACjE;AACEE,SAAAA,OAAK,GAAG,KAAK;AACbC,QAAAA,MAAI,GAAG,IAAI;AACXC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ;AACRC,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;EACPC,QAAQ,GAAGb,QAAQ,CAACE,MAAM;EAC1BY,SAAS;AACTC,EAAAA,WAAW,GAAG,KAAK;AACnBC,EAAAA,cAAc,GAAG,KAAK;EACtB,GAAGC;AAAI,CACI,EACbC,SAAS,EAAA;AAET,EAAA,MAAMC,QAAQ,GAAGC,MAAM,CAAwB,IAAI,CAAC;EAEpD,MAAMC,UAAU,GAAG,EAAE;AAErB,EAAA,IAAId,OAAK,EAAE;AACTc,IAAAA,UAAU,CAACC,IAAI,CAACC,MAAM,CAACzB,cAAc,CAAC,CAAC;AACvCuB,IAAAA,UAAU,CAACC,IAAI,CAACE,KAAe,CAAC;AAAEC,MAAAA,OAAO,EAAEN,QAAQ;AAAEO,MAAAA,OAAO,EAAE;AAAC,KAAE,CAAC,CAAC;AACrE,EAAA;AAEA,EAAA,IAAIlB,MAAI,IAAIT,kBAAkB,CAACc,QAAQ,CAAC,EAAE;AACxCQ,IAAAA,UAAU,CAACC,IAAI,CACbK,IAAc,CAAC;MACb5B,kBAAkB,EAAEA,kBAAkB,CAACc,QAAQ;AAChD,KAAA,CAAC,CACH;AACH,EAAA;AAEA,EAAA,IAAIJ,OAAO,EAAE;AACXY,IAAAA,UAAU,CAACC,IAAI,CAACM,KAAK,EAAE,CAAC;AAC1B,EAAA;EAEA,MAAM;IAAEC,IAAI;IAAEC,cAAc;AAAEC,IAAAA;
|
|
1
|
+
{"version":3,"file":"Panel.mjs","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import {\n arrow as arrowMiddleware,\n autoUpdate,\n flip as flipMiddleware,\n offset,\n type Placement,\n shift,\n useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n CSSProperties,\n HTMLAttributes,\n MutableRefObject,\n PropsWithChildren,\n SyntheticEvent,\n forwardRef,\n useContext,\n useRef,\n} from 'react';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<string, Placement[]> = {\n [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n arrow?: boolean;\n flip?: boolean;\n altAxis?: boolean;\n open?: boolean;\n onClose?: (event: Event | SyntheticEvent) => void;\n position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n anchorRef: MutableRefObject<Element | null>;\n anchorWidth?: boolean;\n considerHeight?: boolean;\n}> &\n HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n {\n arrow = false,\n flip = true,\n altAxis = false,\n children,\n open = false,\n onClose,\n position = Position.BOTTOM,\n anchorRef,\n anchorWidth = false,\n considerHeight = false,\n ...rest\n }: PanelProps,\n reference,\n) {\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const middleware = [];\n\n if (arrow) {\n middleware.push(offset(POPOVER_OFFSET));\n middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n }\n\n if (flip && fallbackPlacements[position]) {\n middleware.push(\n flipMiddleware({\n fallbackPlacements: fallbackPlacements[position],\n }),\n );\n }\n\n if (altAxis) {\n middleware.push(shift());\n }\n\n const { refs, floatingStyles, placement, middlewareData } = useFloating({\n placement: position,\n middleware,\n elements: {\n reference: anchorRef.current,\n },\n whileElementsMounted: autoUpdate,\n });\n\n const arrowStyle: CSSProperties = {\n ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n };\n\n const contentStyle: CSSProperties = {\n ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n };\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n <div\n id={overlayId}\n {...rest}\n ref={refs.setFloating}\n role=\"dialog\"\n style={floatingStyles}\n data-popper-placement={placement}\n className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n >\n <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n {children}\n {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n </div>\n </div>\n </Dimmer>\n );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","middleware","push","offset","arrowMiddleware","element","padding","flipMiddleware","shift","refs","floatingStyles","placement","middlewareData","useFloating","elements","current","whileElementsMounted","autoUpdate","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","undefined","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","style","className","clsx","_jsxs"],"mappings":"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"}
|
package/build/tooltip/Tooltip.js
CHANGED
|
@@ -44,7 +44,8 @@ const Tooltip = ({
|
|
|
44
44
|
const {
|
|
45
45
|
refs,
|
|
46
46
|
floatingStyles,
|
|
47
|
-
placement
|
|
47
|
+
placement,
|
|
48
|
+
middlewareData
|
|
48
49
|
} = react.useFloating({
|
|
49
50
|
placement: position$1,
|
|
50
51
|
middleware: [react.offset(16), react.flip({
|
|
@@ -56,6 +57,14 @@ const Tooltip = ({
|
|
|
56
57
|
whileElementsMounted: react.autoUpdate,
|
|
57
58
|
open
|
|
58
59
|
});
|
|
60
|
+
const arrowStyle = {
|
|
61
|
+
...(middlewareData.arrow?.x != null ? {
|
|
62
|
+
left: middlewareData.arrow.x
|
|
63
|
+
} : {}),
|
|
64
|
+
...(middlewareData.arrow?.y != null ? {
|
|
65
|
+
top: middlewareData.arrow.y
|
|
66
|
+
} : {})
|
|
67
|
+
};
|
|
59
68
|
return /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
60
69
|
ref: refs.setReference,
|
|
61
70
|
className: "tw-tooltip-container",
|
|
@@ -69,7 +78,7 @@ const Tooltip = ({
|
|
|
69
78
|
ref: refs.setFloating,
|
|
70
79
|
className: clsx.clsx('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className),
|
|
71
80
|
style: floatingStyles,
|
|
72
|
-
"data-placement": placement,
|
|
81
|
+
"data-popper-placement": placement,
|
|
73
82
|
"aria-hidden": !open,
|
|
74
83
|
role: "tooltip",
|
|
75
84
|
id: `${tooltipId}-tooltip`,
|
|
@@ -77,7 +86,8 @@ const Tooltip = ({
|
|
|
77
86
|
className: "np-panel__content tooltip-inner",
|
|
78
87
|
children: [label, /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
79
88
|
ref: arrowRef,
|
|
80
|
-
className: clsx.clsx('np-panel__arrow')
|
|
89
|
+
className: clsx.clsx('np-panel__arrow'),
|
|
90
|
+
style: arrowStyle
|
|
81
91
|
})]
|
|
82
92
|
})
|
|
83
93
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n arrow as arrowMiddleware,\n autoUpdate,\n flip,\n offset,\n useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n AriaAttributes,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n cloneElement,\n useId,\n useRef,\n useState,\n} from 'react';\n\nimport { CommonProps, Position } from '../common';\nimport {\n PositionBottom,\n PositionLeft,\n PositionRight,\n PositionTop,\n} from '../common/propsValues/position';\n\nexport type TooltipProps = PropsWithChildren<{\n position?: PositionTop | PositionRight | PositionBottom | PositionLeft;\n label: ReactNode;\n id?: string;\n}> &\n CommonProps;\n\nconst Tooltip = ({\n position = Position.TOP,\n children = undefined,\n label,\n id,\n className,\n}: TooltipProps) => {\n const [open, setOpen] = useState(false);\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const fallbackId = useId();\n const tooltipId = id ?? fallbackId;\n\n const { refs, floatingStyles, placement } = useFloating({\n placement: position,\n middleware: [\n offset(16),\n flip({ fallbackPlacements: [Position.TOP] }),\n arrowMiddleware({ element: arrowRef, padding: 8 }),\n ],\n whileElementsMounted: autoUpdate,\n open,\n });\n\n return (\n <span\n ref={refs.setReference}\n className=\"tw-tooltip-container\"\n onMouseOver={() => setOpen(true)}\n onFocus={() => setOpen(true)}\n onMouseOut={() => setOpen(false)}\n onBlur={() => setOpen(false)}\n >\n {children\n ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {\n 'aria-describedby': `${tooltipId}-tooltip`,\n })\n : null}\n <div\n ref={refs.setFloating}\n className={clsx(\n 'np-tooltip',\n 'np-panel',\n open ? `np-panel--open np-tooltip--open` : null,\n className,\n )}\n style={floatingStyles}\n data-placement={placement}\n aria-hidden={!open}\n role=\"tooltip\"\n id={`${tooltipId}-tooltip`}\n >\n <div className=\"np-panel__content tooltip-inner\">\n {label}\n <div ref={arrowRef} className={clsx('np-panel__arrow')} />\n </div>\n </div>\n </span>\n );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","position","Position","TOP","children","undefined","label","id","className","open","setOpen","useState","arrowRef","useRef","fallbackId","useId","tooltipId","refs","floatingStyles","placement","useFloating","middleware","offset","flip","fallbackPlacements","arrowMiddleware","element","padding","whileElementsMounted","autoUpdate","_jsxs","ref","setReference","onMouseOver","onFocus","onMouseOut","onBlur","cloneElement","_jsx","setFloating","clsx","style","role"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n arrow as arrowMiddleware,\n autoUpdate,\n flip,\n offset,\n useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n AriaAttributes,\n CSSProperties,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n cloneElement,\n useId,\n useRef,\n useState,\n} from 'react';\n\nimport { CommonProps, Position } from '../common';\nimport {\n PositionBottom,\n PositionLeft,\n PositionRight,\n PositionTop,\n} from '../common/propsValues/position';\n\nexport type TooltipProps = PropsWithChildren<{\n position?: PositionTop | PositionRight | PositionBottom | PositionLeft;\n label: ReactNode;\n id?: string;\n}> &\n CommonProps;\n\nconst Tooltip = ({\n position = Position.TOP,\n children = undefined,\n label,\n id,\n className,\n}: TooltipProps) => {\n const [open, setOpen] = useState(false);\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const fallbackId = useId();\n const tooltipId = id ?? fallbackId;\n\n const { refs, floatingStyles, placement, middlewareData } = useFloating({\n placement: position,\n middleware: [\n offset(16),\n flip({ fallbackPlacements: [Position.TOP] }),\n arrowMiddleware({ element: arrowRef, padding: 8 }),\n ],\n whileElementsMounted: autoUpdate,\n open,\n });\n\n const arrowStyle: CSSProperties = {\n ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n };\n\n return (\n <span\n ref={refs.setReference}\n className=\"tw-tooltip-container\"\n onMouseOver={() => setOpen(true)}\n onFocus={() => setOpen(true)}\n onMouseOut={() => setOpen(false)}\n onBlur={() => setOpen(false)}\n >\n {children\n ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {\n 'aria-describedby': `${tooltipId}-tooltip`,\n })\n : null}\n <div\n ref={refs.setFloating}\n className={clsx(\n 'np-tooltip',\n 'np-panel',\n open ? `np-panel--open np-tooltip--open` : null,\n className,\n )}\n style={floatingStyles}\n data-popper-placement={placement}\n aria-hidden={!open}\n role=\"tooltip\"\n id={`${tooltipId}-tooltip`}\n >\n <div className=\"np-panel__content tooltip-inner\">\n {label}\n <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />\n </div>\n </div>\n </span>\n );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","position","Position","TOP","children","undefined","label","id","className","open","setOpen","useState","arrowRef","useRef","fallbackId","useId","tooltipId","refs","floatingStyles","placement","middlewareData","useFloating","middleware","offset","flip","fallbackPlacements","arrowMiddleware","element","padding","whileElementsMounted","autoUpdate","arrowStyle","arrow","x","left","y","top","_jsxs","ref","setReference","onMouseOver","onFocus","onMouseOut","onBlur","cloneElement","_jsx","setFloating","clsx","style","role"],"mappings":"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"}
|
|
@@ -40,7 +40,8 @@ const Tooltip = ({
|
|
|
40
40
|
const {
|
|
41
41
|
refs,
|
|
42
42
|
floatingStyles,
|
|
43
|
-
placement
|
|
43
|
+
placement,
|
|
44
|
+
middlewareData
|
|
44
45
|
} = useFloating({
|
|
45
46
|
placement: position,
|
|
46
47
|
middleware: [offset(16), flip({
|
|
@@ -52,6 +53,14 @@ const Tooltip = ({
|
|
|
52
53
|
whileElementsMounted: autoUpdate,
|
|
53
54
|
open
|
|
54
55
|
});
|
|
56
|
+
const arrowStyle = {
|
|
57
|
+
...(middlewareData.arrow?.x != null ? {
|
|
58
|
+
left: middlewareData.arrow.x
|
|
59
|
+
} : {}),
|
|
60
|
+
...(middlewareData.arrow?.y != null ? {
|
|
61
|
+
top: middlewareData.arrow.y
|
|
62
|
+
} : {})
|
|
63
|
+
};
|
|
55
64
|
return /*#__PURE__*/jsxs("span", {
|
|
56
65
|
ref: refs.setReference,
|
|
57
66
|
className: "tw-tooltip-container",
|
|
@@ -65,7 +74,7 @@ const Tooltip = ({
|
|
|
65
74
|
ref: refs.setFloating,
|
|
66
75
|
className: clsx('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className),
|
|
67
76
|
style: floatingStyles,
|
|
68
|
-
"data-placement": placement,
|
|
77
|
+
"data-popper-placement": placement,
|
|
69
78
|
"aria-hidden": !open,
|
|
70
79
|
role: "tooltip",
|
|
71
80
|
id: `${tooltipId}-tooltip`,
|
|
@@ -73,7 +82,8 @@ const Tooltip = ({
|
|
|
73
82
|
className: "np-panel__content tooltip-inner",
|
|
74
83
|
children: [label, /*#__PURE__*/jsx("div", {
|
|
75
84
|
ref: arrowRef,
|
|
76
|
-
className: clsx('np-panel__arrow')
|
|
85
|
+
className: clsx('np-panel__arrow'),
|
|
86
|
+
style: arrowStyle
|
|
77
87
|
})]
|
|
78
88
|
})
|
|
79
89
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.mjs","sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n arrow as arrowMiddleware,\n autoUpdate,\n flip,\n offset,\n useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n AriaAttributes,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n cloneElement,\n useId,\n useRef,\n useState,\n} from 'react';\n\nimport { CommonProps, Position } from '../common';\nimport {\n PositionBottom,\n PositionLeft,\n PositionRight,\n PositionTop,\n} from '../common/propsValues/position';\n\nexport type TooltipProps = PropsWithChildren<{\n position?: PositionTop | PositionRight | PositionBottom | PositionLeft;\n label: ReactNode;\n id?: string;\n}> &\n CommonProps;\n\nconst Tooltip = ({\n position = Position.TOP,\n children = undefined,\n label,\n id,\n className,\n}: TooltipProps) => {\n const [open, setOpen] = useState(false);\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const fallbackId = useId();\n const tooltipId = id ?? fallbackId;\n\n const { refs, floatingStyles, placement } = useFloating({\n placement: position,\n middleware: [\n offset(16),\n flip({ fallbackPlacements: [Position.TOP] }),\n arrowMiddleware({ element: arrowRef, padding: 8 }),\n ],\n whileElementsMounted: autoUpdate,\n open,\n });\n\n return (\n <span\n ref={refs.setReference}\n className=\"tw-tooltip-container\"\n onMouseOver={() => setOpen(true)}\n onFocus={() => setOpen(true)}\n onMouseOut={() => setOpen(false)}\n onBlur={() => setOpen(false)}\n >\n {children\n ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {\n 'aria-describedby': `${tooltipId}-tooltip`,\n })\n : null}\n <div\n ref={refs.setFloating}\n className={clsx(\n 'np-tooltip',\n 'np-panel',\n open ? `np-panel--open np-tooltip--open` : null,\n className,\n )}\n style={floatingStyles}\n data-placement={placement}\n aria-hidden={!open}\n role=\"tooltip\"\n id={`${tooltipId}-tooltip`}\n >\n <div className=\"np-panel__content tooltip-inner\">\n {label}\n <div ref={arrowRef} className={clsx('np-panel__arrow')} />\n </div>\n </div>\n </span>\n );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","position","Position","TOP","children","undefined","label","id","className","open","setOpen","useState","arrowRef","useRef","fallbackId","useId","tooltipId","refs","floatingStyles","placement","useFloating","middleware","offset","flip","fallbackPlacements","arrowMiddleware","element","padding","whileElementsMounted","autoUpdate","_jsxs","ref","setReference","onMouseOver","onFocus","onMouseOut","onBlur","cloneElement","_jsx","setFloating","clsx","style","role"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Tooltip.mjs","sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n arrow as arrowMiddleware,\n autoUpdate,\n flip,\n offset,\n useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n AriaAttributes,\n CSSProperties,\n PropsWithChildren,\n ReactElement,\n ReactNode,\n cloneElement,\n useId,\n useRef,\n useState,\n} from 'react';\n\nimport { CommonProps, Position } from '../common';\nimport {\n PositionBottom,\n PositionLeft,\n PositionRight,\n PositionTop,\n} from '../common/propsValues/position';\n\nexport type TooltipProps = PropsWithChildren<{\n position?: PositionTop | PositionRight | PositionBottom | PositionLeft;\n label: ReactNode;\n id?: string;\n}> &\n CommonProps;\n\nconst Tooltip = ({\n position = Position.TOP,\n children = undefined,\n label,\n id,\n className,\n}: TooltipProps) => {\n const [open, setOpen] = useState(false);\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const fallbackId = useId();\n const tooltipId = id ?? fallbackId;\n\n const { refs, floatingStyles, placement, middlewareData } = useFloating({\n placement: position,\n middleware: [\n offset(16),\n flip({ fallbackPlacements: [Position.TOP] }),\n arrowMiddleware({ element: arrowRef, padding: 8 }),\n ],\n whileElementsMounted: autoUpdate,\n open,\n });\n\n const arrowStyle: CSSProperties = {\n ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n };\n\n return (\n <span\n ref={refs.setReference}\n className=\"tw-tooltip-container\"\n onMouseOver={() => setOpen(true)}\n onFocus={() => setOpen(true)}\n onMouseOut={() => setOpen(false)}\n onBlur={() => setOpen(false)}\n >\n {children\n ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {\n 'aria-describedby': `${tooltipId}-tooltip`,\n })\n : null}\n <div\n ref={refs.setFloating}\n className={clsx(\n 'np-tooltip',\n 'np-panel',\n open ? `np-panel--open np-tooltip--open` : null,\n className,\n )}\n style={floatingStyles}\n data-popper-placement={placement}\n aria-hidden={!open}\n role=\"tooltip\"\n id={`${tooltipId}-tooltip`}\n >\n <div className=\"np-panel__content tooltip-inner\">\n {label}\n <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />\n </div>\n </div>\n </span>\n );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","position","Position","TOP","children","undefined","label","id","className","open","setOpen","useState","arrowRef","useRef","fallbackId","useId","tooltipId","refs","floatingStyles","placement","middlewareData","useFloating","middleware","offset","flip","fallbackPlacements","arrowMiddleware","element","padding","whileElementsMounted","autoUpdate","arrowStyle","arrow","x","left","y","top","_jsxs","ref","setReference","onMouseOver","onFocus","onMouseOut","onBlur","cloneElement","_jsx","setFloating","clsx","style","role"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/common/panel/Panel.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EAIf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAY,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAgBxF,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,aAAa,GAAG,WAAW,CAAC;IACvE,SAAS,EAAE,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC,GACA,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC,QAAA,MAAM,KAAK;YAZD,OAAO;WACR,OAAO;cACJ,OAAO;WACV,OAAO;cACJ,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI;eACtC,cAAc,GAAG,YAAY,GAAG,aAAa,GAAG,WAAW;eAC3D,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;kBAC7B,OAAO;qBACJ,OAAO;;;
|
|
1
|
+
{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/common/panel/Panel.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EAIf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAY,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAgBxF,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,aAAa,GAAG,WAAW,CAAC;IACvE,SAAS,EAAE,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC,GACA,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC,QAAA,MAAM,KAAK;YAZD,OAAO;WACR,OAAO;cACJ,OAAO;WACV,OAAO;cACJ,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI;eACtC,cAAc,GAAG,YAAY,GAAG,aAAa,GAAG,WAAW;eAC3D,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;kBAC7B,OAAO;qBACJ,OAAO;;;mFAgFxB,CAAC;AAEH,eAAe,KAAK,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAQA,OAAO,
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAQA,OAAO,EAGL,iBAAiB,EAEjB,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAY,MAAM,WAAW,CAAC;AAClD,OAAO,EACL,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,EACZ,MAAM,gCAAgC,CAAC;AAExC,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC;IAC3C,QAAQ,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IACvE,KAAK,EAAE,SAAS,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC,GACA,WAAW,CAAC;AAEd,QAAA,MAAM,OAAO,GAAI,+CAMd,YAAY,gCA0Dd,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/package.json
CHANGED
|
@@ -85,7 +85,7 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
|
|
|
85
85
|
middleware.push(shift());
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
const { refs, floatingStyles, placement } = useFloating({
|
|
88
|
+
const { refs, floatingStyles, placement, middlewareData } = useFloating({
|
|
89
89
|
placement: position,
|
|
90
90
|
middleware,
|
|
91
91
|
elements: {
|
|
@@ -94,6 +94,11 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
|
|
|
94
94
|
whileElementsMounted: autoUpdate,
|
|
95
95
|
});
|
|
96
96
|
|
|
97
|
+
const arrowStyle: CSSProperties = {
|
|
98
|
+
...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),
|
|
99
|
+
...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),
|
|
100
|
+
};
|
|
101
|
+
|
|
97
102
|
const contentStyle: CSSProperties = {
|
|
98
103
|
...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),
|
|
99
104
|
};
|
|
@@ -108,13 +113,13 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
|
|
|
108
113
|
ref={refs.setFloating}
|
|
109
114
|
role="dialog"
|
|
110
115
|
style={floatingStyles}
|
|
111
|
-
data-placement={placement}
|
|
116
|
+
data-popper-placement={placement}
|
|
112
117
|
className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}
|
|
113
118
|
>
|
|
114
119
|
<div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>
|
|
115
120
|
{children}
|
|
116
121
|
{/* Arrow has to stay inside content to get the same animations as the "dialog" and to get hidden when panel is closed. */}
|
|
117
|
-
{arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} />}
|
|
122
|
+
{arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}
|
|
118
123
|
</div>
|
|
119
124
|
</div>
|
|
120
125
|
</Dimmer>
|
package/src/tooltip/Tooltip.tsx
CHANGED
|
@@ -8,6 +8,7 @@ import {
|
|
|
8
8
|
import { clsx } from 'clsx';
|
|
9
9
|
import {
|
|
10
10
|
AriaAttributes,
|
|
11
|
+
CSSProperties,
|
|
11
12
|
PropsWithChildren,
|
|
12
13
|
ReactElement,
|
|
13
14
|
ReactNode,
|
|
@@ -45,7 +46,7 @@ const Tooltip = ({
|
|
|
45
46
|
const fallbackId = useId();
|
|
46
47
|
const tooltipId = id ?? fallbackId;
|
|
47
48
|
|
|
48
|
-
const { refs, floatingStyles, placement } = useFloating({
|
|
49
|
+
const { refs, floatingStyles, placement, middlewareData } = useFloating({
|
|
49
50
|
placement: position,
|
|
50
51
|
middleware: [
|
|
51
52
|
offset(16),
|
|
@@ -56,6 +57,11 @@ const Tooltip = ({
|
|
|
56
57
|
open,
|
|
57
58
|
});
|
|
58
59
|
|
|
60
|
+
const arrowStyle: CSSProperties = {
|
|
61
|
+
...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),
|
|
62
|
+
...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),
|
|
63
|
+
};
|
|
64
|
+
|
|
59
65
|
return (
|
|
60
66
|
<span
|
|
61
67
|
ref={refs.setReference}
|
|
@@ -79,14 +85,14 @@ const Tooltip = ({
|
|
|
79
85
|
className,
|
|
80
86
|
)}
|
|
81
87
|
style={floatingStyles}
|
|
82
|
-
data-placement={placement}
|
|
88
|
+
data-popper-placement={placement}
|
|
83
89
|
aria-hidden={!open}
|
|
84
90
|
role="tooltip"
|
|
85
91
|
id={`${tooltipId}-tooltip`}
|
|
86
92
|
>
|
|
87
93
|
<div className="np-panel__content tooltip-inner">
|
|
88
94
|
{label}
|
|
89
|
-
<div ref={arrowRef} className={clsx('np-panel__arrow')} />
|
|
95
|
+
<div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />
|
|
90
96
|
</div>
|
|
91
97
|
</div>
|
|
92
98
|
</span>
|