@metamask/design-system-react 0.37.0 → 0.38.0
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/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.38.0]
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- **BREAKING:** Updated peer dependencies to `@metamask/design-tokens@^10.0.0` and `@metamask/design-system-tailwind-preset@^0.12.0` ([#1450](https://github.com/MetaMask/metamask-design-system/pull/1450))
|
|
15
|
+
- Coordinates with `@metamask/design-tokens@10.0.0` PureBlack API removals and `@metamask/design-system-tailwind-preset@0.12.0` peer alignment; no additional React API changes beyond what 0.37.0 already shipped
|
|
16
|
+
- See [design-tokens Migration Guide](../design-tokens/MIGRATION.md#from-version-9x-to-1000)
|
|
17
|
+
|
|
18
|
+
### Fixed
|
|
19
|
+
|
|
20
|
+
- Updated `Popover` default surface and arrow to `BackgroundElevated2` so floating UI is elevated above base surfaces ([#1458](https://github.com/MetaMask/metamask-design-system/pull/1458))
|
|
21
|
+
|
|
10
22
|
## [0.37.0]
|
|
11
23
|
|
|
12
24
|
### Added
|
|
@@ -497,7 +509,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
497
509
|
- Full TypeScript support with type definitions and enums
|
|
498
510
|
- Tailwind CSS integration with design token support
|
|
499
511
|
|
|
500
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.
|
|
512
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.38.0...HEAD
|
|
513
|
+
[0.38.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.37.0...@metamask/design-system-react@0.38.0
|
|
501
514
|
[0.37.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.36.0...@metamask/design-system-react@0.37.0
|
|
502
515
|
[0.36.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.35.2...@metamask/design-system-react@0.36.0
|
|
503
516
|
[0.35.2]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.35.1...@metamask/design-system-react@0.35.2
|
|
@@ -112,7 +112,7 @@ exports.Popover = (0, react_1.forwardRef)(({ children, className, style, positio
|
|
|
112
112
|
refs.setFloating(element);
|
|
113
113
|
popoverRef.current = element;
|
|
114
114
|
};
|
|
115
|
-
const popoverContent = (react_1.default.createElement(Box_1.Box, { backgroundColor: Box_1.BoxBackgroundColor.
|
|
115
|
+
const popoverContent = (react_1.default.createElement(Box_1.Box, { backgroundColor: Box_1.BoxBackgroundColor.BackgroundElevated2, borderColor: Box_1.BoxBorderColor.BorderMuted, borderWidth: 1, padding: 4, role: role, ref: setPopoverRef, "data-popper-placement": placement, "data-popper-reference-hidden": referenceHiddenValue, className: (0, tw_merge_1.twMerge)('rounded-lg shadow-md', referenceHidden &&
|
|
116
116
|
'data-[popper-reference-hidden=true]:pointer-events-none data-[popper-reference-hidden=true]:invisible', className), ...props, style: popoverStyle },
|
|
117
117
|
children,
|
|
118
118
|
hasArrow && (react_1.default.createElement(Box_1.Box, { "data-testid": "popover-arrow", ...arrowProps, ref: arrowRef, className: (0, tw_merge_1.twMerge)('invisible absolute size-10', arrowProps?.className), style: {
|
|
@@ -120,7 +120,7 @@ exports.Popover = (0, react_1.forwardRef)(({ children, className, style, positio
|
|
|
120
120
|
top: middlewareData.arrow?.y,
|
|
121
121
|
...arrowPlacementStyle.container,
|
|
122
122
|
} },
|
|
123
|
-
react_1.default.createElement(Box_1.Box, { backgroundColor: Box_1.BoxBackgroundColor.
|
|
123
|
+
react_1.default.createElement(Box_1.Box, { backgroundColor: Box_1.BoxBackgroundColor.BackgroundElevated2, borderColor: Box_1.BoxBorderColor.BorderMuted, borderWidth: 1, "data-testid": "popover-arrow-visual", className: "visible absolute left-1/2 top-1/2 -ml-1 -mt-1 size-2 rounded-tl-sm border-b-transparent border-r-transparent", style: arrowPlacementStyle.visual })))));
|
|
124
124
|
return isPortal
|
|
125
125
|
? (0, react_dom_2.createPortal)(popoverContent, document.body)
|
|
126
126
|
: popoverContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.cjs","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n arrow,\n autoPlacement,\n autoUpdate,\n flip,\n hide,\n offset,\n shift,\n useFloating,\n} from '@floating-ui/react-dom';\nimport type { Middleware, Placement } from '@floating-ui/react-dom';\nimport React, { forwardRef, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box, BoxBackgroundColor, BoxBorderColor } from '../Box';\n\nimport { POPOVER_ARROW_PLACEMENT_STYLES } from './Popover.constants';\nimport { PopoverPosition, PopoverRole } from './Popover.types';\nimport type { PopoverProps } from './Popover.types';\n\ntype ArrowPlacementKey = keyof typeof POPOVER_ARROW_PLACEMENT_STYLES;\n\nconst CAPTURE_EVENT_LISTENER_OPTIONS = { capture: true };\n\nexport const Popover = forwardRef<HTMLDivElement, PopoverProps>(\n (\n {\n children,\n className,\n style,\n position = PopoverPosition.Auto,\n role = PopoverRole.Tooltip,\n hasArrow = false,\n matchWidth = false,\n preventOverflow = false,\n offset: offsetProp = [0, 8],\n flip: flipEnabled = false,\n referenceHidden = true,\n referenceElement,\n isOpen,\n isPortal = false,\n arrowProps,\n onClickOutside,\n onPressEscKey,\n ...props\n },\n ref,\n ) => {\n const arrowRef = useRef<HTMLDivElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n\n const isAuto = position === PopoverPosition.Auto;\n const [offsetSkidding, offsetDistance] = offsetProp;\n\n const middleware: Middleware[] = [\n offset({ mainAxis: offsetDistance, crossAxis: offsetSkidding }),\n ];\n if (isAuto) {\n middleware.push(autoPlacement());\n } else if (flipEnabled) {\n middleware.push(flip());\n }\n if (isAuto || preventOverflow) {\n middleware.push(shift());\n }\n if (hasArrow) {\n middleware.push(arrow({ element: arrowRef }));\n }\n middleware.push(hide());\n\n const { refs, floatingStyles, placement, middlewareData } = useFloating({\n open: isOpen,\n whileElementsMounted: autoUpdate,\n placement: isAuto ? 'bottom' : (position as Placement),\n elements: { reference: referenceElement ?? null },\n middleware,\n });\n\n useEffect(() => {\n if (!isOpen || (!onPressEscKey && !onClickOutside)) {\n return undefined;\n }\n\n const handleEscKey = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n onPressEscKey?.();\n }\n };\n\n const handleClickOutside = (event: MouseEvent) => {\n if (\n popoverRef.current &&\n !popoverRef.current.contains(event.target as Node) &&\n !referenceElement?.contains(event.target as Node)\n ) {\n onClickOutside?.();\n }\n };\n\n if (onPressEscKey) {\n document.addEventListener(\n 'keydown',\n handleEscKey,\n CAPTURE_EVENT_LISTENER_OPTIONS,\n );\n }\n\n if (onClickOutside) {\n document.addEventListener(\n 'click',\n handleClickOutside,\n CAPTURE_EVENT_LISTENER_OPTIONS,\n );\n }\n\n return () => {\n if (onPressEscKey) {\n document.removeEventListener(\n 'keydown',\n handleEscKey,\n CAPTURE_EVENT_LISTENER_OPTIONS,\n );\n }\n\n if (onClickOutside) {\n document.removeEventListener(\n 'click',\n handleClickOutside,\n CAPTURE_EVENT_LISTENER_OPTIONS,\n );\n }\n };\n }, [onPressEscKey, isOpen, onClickOutside, referenceElement]);\n\n if (!isOpen) {\n return null;\n }\n\n const arrowSide = placement.split('-')[0] as ArrowPlacementKey;\n const arrowPlacementStyle = POPOVER_ARROW_PLACEMENT_STYLES[arrowSide];\n const referenceHiddenValue = Boolean(middlewareData.hide?.referenceHidden);\n\n const popoverStyle: React.CSSProperties = {\n ...floatingStyles,\n width: matchWidth ? referenceElement?.clientWidth : 'auto',\n ...style,\n };\n\n const setPopoverRef = (element: HTMLDivElement | null) => {\n if (typeof ref === 'function') {\n ref(element);\n } else if (ref) {\n ref.current = element;\n }\n refs.setFloating(element);\n popoverRef.current = element;\n };\n\n const popoverContent = (\n <Box\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n padding={4}\n role={role}\n ref={setPopoverRef}\n data-popper-placement={placement}\n data-popper-reference-hidden={referenceHiddenValue}\n className={twMerge(\n 'rounded-lg shadow-md',\n referenceHidden &&\n 'data-[popper-reference-hidden=true]:pointer-events-none data-[popper-reference-hidden=true]:invisible',\n className,\n )}\n {...props}\n style={popoverStyle}\n >\n {children}\n {hasArrow && (\n <Box\n data-testid=\"popover-arrow\"\n {...arrowProps}\n ref={arrowRef}\n className={twMerge(\n 'invisible absolute size-10',\n arrowProps?.className,\n )}\n style={{\n left: middlewareData.arrow?.x,\n top: middlewareData.arrow?.y,\n ...arrowPlacementStyle.container,\n }}\n >\n <Box\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n data-testid=\"popover-arrow-visual\"\n className=\"visible absolute left-1/2 top-1/2 -ml-1 -mt-1 size-2 rounded-tl-sm border-b-transparent border-r-transparent\"\n style={arrowPlacementStyle.visual}\n />\n </Box>\n )}\n </Box>\n );\n\n return isPortal\n ? createPortal(popoverContent, document.body)\n : popoverContent;\n },\n);\n\nPopover.displayName = 'Popover';\n"]}
|
|
1
|
+
{"version":3,"file":"Popover.cjs","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n arrow,\n autoPlacement,\n autoUpdate,\n flip,\n hide,\n offset,\n shift,\n useFloating,\n} from '@floating-ui/react-dom';\nimport type { Middleware, Placement } from '@floating-ui/react-dom';\nimport React, { forwardRef, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box, BoxBackgroundColor, BoxBorderColor } from '../Box';\n\nimport { POPOVER_ARROW_PLACEMENT_STYLES } from './Popover.constants';\nimport { PopoverPosition, PopoverRole } from './Popover.types';\nimport type { PopoverProps } from './Popover.types';\n\ntype ArrowPlacementKey = keyof typeof POPOVER_ARROW_PLACEMENT_STYLES;\n\nconst CAPTURE_EVENT_LISTENER_OPTIONS = { capture: true };\n\nexport const Popover = forwardRef<HTMLDivElement, PopoverProps>(\n (\n {\n children,\n className,\n style,\n position = PopoverPosition.Auto,\n role = PopoverRole.Tooltip,\n hasArrow = false,\n matchWidth = false,\n preventOverflow = false,\n offset: offsetProp = [0, 8],\n flip: flipEnabled = false,\n referenceHidden = true,\n referenceElement,\n isOpen,\n isPortal = false,\n arrowProps,\n onClickOutside,\n onPressEscKey,\n ...props\n },\n ref,\n ) => {\n const arrowRef = useRef<HTMLDivElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n\n const isAuto = position === PopoverPosition.Auto;\n const [offsetSkidding, offsetDistance] = offsetProp;\n\n const middleware: Middleware[] = [\n offset({ mainAxis: offsetDistance, crossAxis: offsetSkidding }),\n ];\n if (isAuto) {\n middleware.push(autoPlacement());\n } else if (flipEnabled) {\n middleware.push(flip());\n }\n if (isAuto || preventOverflow) {\n middleware.push(shift());\n }\n if (hasArrow) {\n middleware.push(arrow({ element: arrowRef }));\n }\n middleware.push(hide());\n\n const { refs, floatingStyles, placement, middlewareData } = useFloating({\n open: isOpen,\n whileElementsMounted: autoUpdate,\n placement: isAuto ? 'bottom' : (position as Placement),\n elements: { reference: referenceElement ?? null },\n middleware,\n });\n\n useEffect(() => {\n if (!isOpen || (!onPressEscKey && !onClickOutside)) {\n return undefined;\n }\n\n const handleEscKey = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n onPressEscKey?.();\n }\n };\n\n const handleClickOutside = (event: MouseEvent) => {\n if (\n popoverRef.current &&\n !popoverRef.current.contains(event.target as Node) &&\n !referenceElement?.contains(event.target as Node)\n ) {\n onClickOutside?.();\n }\n };\n\n if (onPressEscKey) {\n document.addEventListener(\n 'keydown',\n handleEscKey,\n CAPTURE_EVENT_LISTENER_OPTIONS,\n );\n }\n\n if (onClickOutside) {\n document.addEventListener(\n 'click',\n handleClickOutside,\n CAPTURE_EVENT_LISTENER_OPTIONS,\n );\n }\n\n return () => {\n if (onPressEscKey) {\n document.removeEventListener(\n 'keydown',\n handleEscKey,\n CAPTURE_EVENT_LISTENER_OPTIONS,\n );\n }\n\n if (onClickOutside) {\n document.removeEventListener(\n 'click',\n handleClickOutside,\n CAPTURE_EVENT_LISTENER_OPTIONS,\n );\n }\n };\n }, [onPressEscKey, isOpen, onClickOutside, referenceElement]);\n\n if (!isOpen) {\n return null;\n }\n\n const arrowSide = placement.split('-')[0] as ArrowPlacementKey;\n const arrowPlacementStyle = POPOVER_ARROW_PLACEMENT_STYLES[arrowSide];\n const referenceHiddenValue = Boolean(middlewareData.hide?.referenceHidden);\n\n const popoverStyle: React.CSSProperties = {\n ...floatingStyles,\n width: matchWidth ? referenceElement?.clientWidth : 'auto',\n ...style,\n };\n\n const setPopoverRef = (element: HTMLDivElement | null) => {\n if (typeof ref === 'function') {\n ref(element);\n } else if (ref) {\n ref.current = element;\n }\n refs.setFloating(element);\n popoverRef.current = element;\n };\n\n const popoverContent = (\n <Box\n backgroundColor={BoxBackgroundColor.BackgroundElevated2}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n padding={4}\n role={role}\n ref={setPopoverRef}\n data-popper-placement={placement}\n data-popper-reference-hidden={referenceHiddenValue}\n className={twMerge(\n 'rounded-lg shadow-md',\n referenceHidden &&\n 'data-[popper-reference-hidden=true]:pointer-events-none data-[popper-reference-hidden=true]:invisible',\n className,\n )}\n {...props}\n style={popoverStyle}\n >\n {children}\n {hasArrow && (\n <Box\n data-testid=\"popover-arrow\"\n {...arrowProps}\n ref={arrowRef}\n className={twMerge(\n 'invisible absolute size-10',\n arrowProps?.className,\n )}\n style={{\n left: middlewareData.arrow?.x,\n top: middlewareData.arrow?.y,\n ...arrowPlacementStyle.container,\n }}\n >\n <Box\n backgroundColor={BoxBackgroundColor.BackgroundElevated2}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n data-testid=\"popover-arrow-visual\"\n className=\"visible absolute left-1/2 top-1/2 -ml-1 -mt-1 size-2 rounded-tl-sm border-b-transparent border-r-transparent\"\n style={arrowPlacementStyle.visual}\n />\n </Box>\n )}\n </Box>\n );\n\n return isPortal\n ? createPortal(popoverContent, document.body)\n : popoverContent;\n },\n);\n\nPopover.displayName = 'Popover';\n"]}
|
|
@@ -93,7 +93,7 @@ export const Popover = forwardRef(({ children, className, style, position = Popo
|
|
|
93
93
|
refs.setFloating(element);
|
|
94
94
|
popoverRef.current = element;
|
|
95
95
|
};
|
|
96
|
-
const popoverContent = (React.createElement(Box, { backgroundColor: BoxBackgroundColor.
|
|
96
|
+
const popoverContent = (React.createElement(Box, { backgroundColor: BoxBackgroundColor.BackgroundElevated2, borderColor: BoxBorderColor.BorderMuted, borderWidth: 1, padding: 4, role: role, ref: setPopoverRef, "data-popper-placement": placement, "data-popper-reference-hidden": referenceHiddenValue, className: twMerge('rounded-lg shadow-md', referenceHidden &&
|
|
97
97
|
'data-[popper-reference-hidden=true]:pointer-events-none data-[popper-reference-hidden=true]:invisible', className), ...props, style: popoverStyle },
|
|
98
98
|
children,
|
|
99
99
|
hasArrow && (React.createElement(Box, { "data-testid": "popover-arrow", ...arrowProps, ref: arrowRef, className: twMerge('invisible absolute size-10', arrowProps?.className), style: {
|
|
@@ -101,7 +101,7 @@ export const Popover = forwardRef(({ children, className, style, position = Popo
|
|
|
101
101
|
top: middlewareData.arrow?.y,
|
|
102
102
|
...arrowPlacementStyle.container,
|
|
103
103
|
} },
|
|
104
|
-
React.createElement(Box, { backgroundColor: BoxBackgroundColor.
|
|
104
|
+
React.createElement(Box, { backgroundColor: BoxBackgroundColor.BackgroundElevated2, borderColor: BoxBorderColor.BorderMuted, borderWidth: 1, "data-testid": "popover-arrow-visual", className: "visible absolute left-1/2 top-1/2 -ml-1 -mt-1 size-2 rounded-tl-sm border-b-transparent border-r-transparent", style: arrowPlacementStyle.visual })))));
|
|
105
105
|
return isPortal
|
|
106
106
|
? createPortal(popoverContent, document.body)
|
|
107
107
|
: popoverContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.mjs","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n arrow,\n autoPlacement,\n autoUpdate,\n flip,\n hide,\n offset,\n shift,\n useFloating,\n} from '@floating-ui/react-dom';\nimport type { Middleware, Placement } from '@floating-ui/react-dom';\nimport React, { forwardRef, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box, BoxBackgroundColor, BoxBorderColor } from '../Box';\n\nimport { POPOVER_ARROW_PLACEMENT_STYLES } from './Popover.constants';\nimport { PopoverPosition, PopoverRole } from './Popover.types';\nimport type { PopoverProps } from './Popover.types';\n\ntype ArrowPlacementKey = keyof typeof POPOVER_ARROW_PLACEMENT_STYLES;\n\nconst CAPTURE_EVENT_LISTENER_OPTIONS = { capture: true };\n\nexport const Popover = forwardRef<HTMLDivElement, PopoverProps>(\n (\n {\n children,\n className,\n style,\n position = PopoverPosition.Auto,\n role = PopoverRole.Tooltip,\n hasArrow = false,\n matchWidth = false,\n preventOverflow = false,\n offset: offsetProp = [0, 8],\n flip: flipEnabled = false,\n referenceHidden = true,\n referenceElement,\n isOpen,\n isPortal = false,\n arrowProps,\n onClickOutside,\n onPressEscKey,\n ...props\n },\n ref,\n ) => {\n const arrowRef = useRef<HTMLDivElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n\n const isAuto = position === PopoverPosition.Auto;\n const [offsetSkidding, offsetDistance] = offsetProp;\n\n const middleware: Middleware[] = [\n offset({ mainAxis: offsetDistance, crossAxis: offsetSkidding }),\n ];\n if (isAuto) {\n middleware.push(autoPlacement());\n } else if (flipEnabled) {\n middleware.push(flip());\n }\n if (isAuto || preventOverflow) {\n middleware.push(shift());\n }\n if (hasArrow) {\n middleware.push(arrow({ element: arrowRef }));\n }\n middleware.push(hide());\n\n const { refs, floatingStyles, placement, middlewareData } = useFloating({\n open: isOpen,\n whileElementsMounted: autoUpdate,\n placement: isAuto ? 'bottom' : (position as Placement),\n elements: { reference: referenceElement ?? null },\n middleware,\n });\n\n useEffect(() => {\n if (!isOpen || (!onPressEscKey && !onClickOutside)) {\n return undefined;\n }\n\n const handleEscKey = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n onPressEscKey?.();\n }\n };\n\n const handleClickOutside = (event: MouseEvent) => {\n if (\n popoverRef.current &&\n !popoverRef.current.contains(event.target as Node) &&\n !referenceElement?.contains(event.target as Node)\n ) {\n onClickOutside?.();\n }\n };\n\n if (onPressEscKey) {\n document.addEventListener(\n 'keydown',\n handleEscKey,\n CAPTURE_EVENT_LISTENER_OPTIONS,\n );\n }\n\n if (onClickOutside) {\n document.addEventListener(\n 'click',\n handleClickOutside,\n CAPTURE_EVENT_LISTENER_OPTIONS,\n );\n }\n\n return () => {\n if (onPressEscKey) {\n document.removeEventListener(\n 'keydown',\n handleEscKey,\n CAPTURE_EVENT_LISTENER_OPTIONS,\n );\n }\n\n if (onClickOutside) {\n document.removeEventListener(\n 'click',\n handleClickOutside,\n CAPTURE_EVENT_LISTENER_OPTIONS,\n );\n }\n };\n }, [onPressEscKey, isOpen, onClickOutside, referenceElement]);\n\n if (!isOpen) {\n return null;\n }\n\n const arrowSide = placement.split('-')[0] as ArrowPlacementKey;\n const arrowPlacementStyle = POPOVER_ARROW_PLACEMENT_STYLES[arrowSide];\n const referenceHiddenValue = Boolean(middlewareData.hide?.referenceHidden);\n\n const popoverStyle: React.CSSProperties = {\n ...floatingStyles,\n width: matchWidth ? referenceElement?.clientWidth : 'auto',\n ...style,\n };\n\n const setPopoverRef = (element: HTMLDivElement | null) => {\n if (typeof ref === 'function') {\n ref(element);\n } else if (ref) {\n ref.current = element;\n }\n refs.setFloating(element);\n popoverRef.current = element;\n };\n\n const popoverContent = (\n <Box\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n padding={4}\n role={role}\n ref={setPopoverRef}\n data-popper-placement={placement}\n data-popper-reference-hidden={referenceHiddenValue}\n className={twMerge(\n 'rounded-lg shadow-md',\n referenceHidden &&\n 'data-[popper-reference-hidden=true]:pointer-events-none data-[popper-reference-hidden=true]:invisible',\n className,\n )}\n {...props}\n style={popoverStyle}\n >\n {children}\n {hasArrow && (\n <Box\n data-testid=\"popover-arrow\"\n {...arrowProps}\n ref={arrowRef}\n className={twMerge(\n 'invisible absolute size-10',\n arrowProps?.className,\n )}\n style={{\n left: middlewareData.arrow?.x,\n top: middlewareData.arrow?.y,\n ...arrowPlacementStyle.container,\n }}\n >\n <Box\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n data-testid=\"popover-arrow-visual\"\n className=\"visible absolute left-1/2 top-1/2 -ml-1 -mt-1 size-2 rounded-tl-sm border-b-transparent border-r-transparent\"\n style={arrowPlacementStyle.visual}\n />\n </Box>\n )}\n </Box>\n );\n\n return isPortal\n ? createPortal(popoverContent, document.body)\n : popoverContent;\n },\n);\n\nPopover.displayName = 'Popover';\n"]}
|
|
1
|
+
{"version":3,"file":"Popover.mjs","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n arrow,\n autoPlacement,\n autoUpdate,\n flip,\n hide,\n offset,\n shift,\n useFloating,\n} from '@floating-ui/react-dom';\nimport type { Middleware, Placement } from '@floating-ui/react-dom';\nimport React, { forwardRef, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box, BoxBackgroundColor, BoxBorderColor } from '../Box';\n\nimport { POPOVER_ARROW_PLACEMENT_STYLES } from './Popover.constants';\nimport { PopoverPosition, PopoverRole } from './Popover.types';\nimport type { PopoverProps } from './Popover.types';\n\ntype ArrowPlacementKey = keyof typeof POPOVER_ARROW_PLACEMENT_STYLES;\n\nconst CAPTURE_EVENT_LISTENER_OPTIONS = { capture: true };\n\nexport const Popover = forwardRef<HTMLDivElement, PopoverProps>(\n (\n {\n children,\n className,\n style,\n position = PopoverPosition.Auto,\n role = PopoverRole.Tooltip,\n hasArrow = false,\n matchWidth = false,\n preventOverflow = false,\n offset: offsetProp = [0, 8],\n flip: flipEnabled = false,\n referenceHidden = true,\n referenceElement,\n isOpen,\n isPortal = false,\n arrowProps,\n onClickOutside,\n onPressEscKey,\n ...props\n },\n ref,\n ) => {\n const arrowRef = useRef<HTMLDivElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n\n const isAuto = position === PopoverPosition.Auto;\n const [offsetSkidding, offsetDistance] = offsetProp;\n\n const middleware: Middleware[] = [\n offset({ mainAxis: offsetDistance, crossAxis: offsetSkidding }),\n ];\n if (isAuto) {\n middleware.push(autoPlacement());\n } else if (flipEnabled) {\n middleware.push(flip());\n }\n if (isAuto || preventOverflow) {\n middleware.push(shift());\n }\n if (hasArrow) {\n middleware.push(arrow({ element: arrowRef }));\n }\n middleware.push(hide());\n\n const { refs, floatingStyles, placement, middlewareData } = useFloating({\n open: isOpen,\n whileElementsMounted: autoUpdate,\n placement: isAuto ? 'bottom' : (position as Placement),\n elements: { reference: referenceElement ?? null },\n middleware,\n });\n\n useEffect(() => {\n if (!isOpen || (!onPressEscKey && !onClickOutside)) {\n return undefined;\n }\n\n const handleEscKey = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n onPressEscKey?.();\n }\n };\n\n const handleClickOutside = (event: MouseEvent) => {\n if (\n popoverRef.current &&\n !popoverRef.current.contains(event.target as Node) &&\n !referenceElement?.contains(event.target as Node)\n ) {\n onClickOutside?.();\n }\n };\n\n if (onPressEscKey) {\n document.addEventListener(\n 'keydown',\n handleEscKey,\n CAPTURE_EVENT_LISTENER_OPTIONS,\n );\n }\n\n if (onClickOutside) {\n document.addEventListener(\n 'click',\n handleClickOutside,\n CAPTURE_EVENT_LISTENER_OPTIONS,\n );\n }\n\n return () => {\n if (onPressEscKey) {\n document.removeEventListener(\n 'keydown',\n handleEscKey,\n CAPTURE_EVENT_LISTENER_OPTIONS,\n );\n }\n\n if (onClickOutside) {\n document.removeEventListener(\n 'click',\n handleClickOutside,\n CAPTURE_EVENT_LISTENER_OPTIONS,\n );\n }\n };\n }, [onPressEscKey, isOpen, onClickOutside, referenceElement]);\n\n if (!isOpen) {\n return null;\n }\n\n const arrowSide = placement.split('-')[0] as ArrowPlacementKey;\n const arrowPlacementStyle = POPOVER_ARROW_PLACEMENT_STYLES[arrowSide];\n const referenceHiddenValue = Boolean(middlewareData.hide?.referenceHidden);\n\n const popoverStyle: React.CSSProperties = {\n ...floatingStyles,\n width: matchWidth ? referenceElement?.clientWidth : 'auto',\n ...style,\n };\n\n const setPopoverRef = (element: HTMLDivElement | null) => {\n if (typeof ref === 'function') {\n ref(element);\n } else if (ref) {\n ref.current = element;\n }\n refs.setFloating(element);\n popoverRef.current = element;\n };\n\n const popoverContent = (\n <Box\n backgroundColor={BoxBackgroundColor.BackgroundElevated2}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n padding={4}\n role={role}\n ref={setPopoverRef}\n data-popper-placement={placement}\n data-popper-reference-hidden={referenceHiddenValue}\n className={twMerge(\n 'rounded-lg shadow-md',\n referenceHidden &&\n 'data-[popper-reference-hidden=true]:pointer-events-none data-[popper-reference-hidden=true]:invisible',\n className,\n )}\n {...props}\n style={popoverStyle}\n >\n {children}\n {hasArrow && (\n <Box\n data-testid=\"popover-arrow\"\n {...arrowProps}\n ref={arrowRef}\n className={twMerge(\n 'invisible absolute size-10',\n arrowProps?.className,\n )}\n style={{\n left: middlewareData.arrow?.x,\n top: middlewareData.arrow?.y,\n ...arrowPlacementStyle.container,\n }}\n >\n <Box\n backgroundColor={BoxBackgroundColor.BackgroundElevated2}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n data-testid=\"popover-arrow-visual\"\n className=\"visible absolute left-1/2 top-1/2 -ml-1 -mt-1 size-2 rounded-tl-sm border-b-transparent border-r-transparent\"\n style={arrowPlacementStyle.visual}\n />\n </Box>\n )}\n </Box>\n );\n\n return isPortal\n ? createPortal(popoverContent, document.body)\n : popoverContent;\n },\n);\n\nPopover.displayName = 'Popover';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metamask/design-system-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.38.0",
|
|
4
4
|
"description": "Design system react ui components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"MetaMask",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@floating-ui/react-dom": "^2.1.2",
|
|
51
|
-
"@metamask/design-system-shared": "^0.
|
|
51
|
+
"@metamask/design-system-shared": "^0.34.0",
|
|
52
52
|
"@metamask/jazzicon": "^2.0.0",
|
|
53
53
|
"@radix-ui/react-slot": "^1.1.0",
|
|
54
54
|
"blo": "^2.0.0",
|
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
"devDependencies": {
|
|
59
59
|
"@figma/code-connect": "^1.4.9",
|
|
60
60
|
"@jest/globals": "^29.7.0",
|
|
61
|
-
"@metamask/auto-changelog": "^6.2.
|
|
62
|
-
"@metamask/design-system-tailwind-preset": "^0.
|
|
61
|
+
"@metamask/auto-changelog": "^6.2.1",
|
|
62
|
+
"@metamask/design-system-tailwind-preset": "^0.12.0",
|
|
63
63
|
"@metamask/utils": "^11.11.0",
|
|
64
64
|
"@svgr/cli": "^8.1.0",
|
|
65
65
|
"@testing-library/dom": "^10.0.0",
|
|
@@ -83,8 +83,8 @@
|
|
|
83
83
|
"typescript": "~5.2.2"
|
|
84
84
|
},
|
|
85
85
|
"peerDependencies": {
|
|
86
|
-
"@metamask/design-system-tailwind-preset": "^0.
|
|
87
|
-
"@metamask/design-tokens": "^
|
|
86
|
+
"@metamask/design-system-tailwind-preset": "^0.12.0",
|
|
87
|
+
"@metamask/design-tokens": "^10.0.0",
|
|
88
88
|
"@metamask/utils": "^11.11.0",
|
|
89
89
|
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
90
90
|
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|