@metamask/design-system-react 0.37.0 → 0.38.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.
- package/CHANGELOG.md +26 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.cjs +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.cjs.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.mjs +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.mjs.map +1 -1
- package/dist/components/BadgeWrapper/BadgeWrapper.cjs +22 -57
- package/dist/components/BadgeWrapper/BadgeWrapper.cjs.map +1 -1
- package/dist/components/BadgeWrapper/BadgeWrapper.d.cts.map +1 -1
- package/dist/components/BadgeWrapper/BadgeWrapper.d.mts.map +1 -1
- package/dist/components/BadgeWrapper/BadgeWrapper.mjs +23 -58
- package/dist/components/BadgeWrapper/BadgeWrapper.mjs.map +1 -1
- package/dist/components/Popover/Popover.cjs +2 -2
- package/dist/components/Popover/Popover.cjs.map +1 -1
- package/dist/components/Popover/Popover.mjs +2 -2
- package/dist/components/Popover/Popover.mjs.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.38.1]
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- Added content guidelines to component documentation, including sentence case, punctuation, and prop-specific examples ([#1466](https://github.com/MetaMask/metamask-design-system/pull/1466))
|
|
15
|
+
- Updated the `AvatarGroup` migration guide with extension-specific prop mappings and migration examples ([#1460](https://github.com/MetaMask/metamask-design-system/pull/1460))
|
|
16
|
+
|
|
17
|
+
### Fixed
|
|
18
|
+
|
|
19
|
+
- Fixed a `BadgeWrapper` layout feedback loop that could cause continuous layout updates and high CPU usage ([#1474](https://github.com/MetaMask/metamask-design-system/pull/1474))
|
|
20
|
+
|
|
21
|
+
## [0.38.0]
|
|
22
|
+
|
|
23
|
+
### Changed
|
|
24
|
+
|
|
25
|
+
- **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))
|
|
26
|
+
- 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
|
|
27
|
+
- See [design-tokens Migration Guide](../design-tokens/MIGRATION.md#from-version-9x-to-1000)
|
|
28
|
+
|
|
29
|
+
### Fixed
|
|
30
|
+
|
|
31
|
+
- 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))
|
|
32
|
+
|
|
10
33
|
## [0.37.0]
|
|
11
34
|
|
|
12
35
|
### Added
|
|
@@ -497,7 +520,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
497
520
|
- Full TypeScript support with type definitions and enums
|
|
498
521
|
- Tailwind CSS integration with design token support
|
|
499
522
|
|
|
500
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.
|
|
523
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.38.1...HEAD
|
|
524
|
+
[0.38.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.38.0...@metamask/design-system-react@0.38.1
|
|
525
|
+
[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
526
|
[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
527
|
[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
528
|
[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
|
|
@@ -30,7 +30,7 @@ const AvatarBase_1 = require("../AvatarBase/index.cjs");
|
|
|
30
30
|
exports.AvatarFavicon = (0, react_1.forwardRef)(({ src, name = '', fallbackText, fallbackTextProps, className, size = design_system_shared_1.AvatarFaviconSize.Md, imageProps, ...props }, ref) => {
|
|
31
31
|
const [finalFallbackText, setFinalFallbackText] = (0, react_1.useState)('');
|
|
32
32
|
const backupFallbackText = fallbackText || name?.[0] || '?';
|
|
33
|
-
const altText = name || '
|
|
33
|
+
const altText = name || 'Site logo'; // TBC: Add localization for default text
|
|
34
34
|
const onErrorHandler = (e) => {
|
|
35
35
|
setFinalFallbackText(backupFallbackText);
|
|
36
36
|
imageProps?.onError?.(e);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarFavicon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;AACxC,+CAAoD;AAEpD,wDAA2C;AAI9B,QAAA,aAAa,GAAG,IAAA,kBAAU,EACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,wCAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC;IAC5D,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,yCAAyC;IAE9E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,sCAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,uCACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import {\n AvatarBaseShape,\n AvatarFaviconSize,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = forwardRef<HTMLDivElement, AvatarFaviconProps>(\n (\n {\n src,\n name = '',\n fallbackText,\n fallbackTextProps,\n className,\n size = AvatarFaviconSize.Md,\n imageProps,\n ...props\n },\n ref,\n ) => {\n const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n const backupFallbackText = fallbackText || name?.[0] || '?';\n const altText = name || '
|
|
1
|
+
{"version":3,"file":"AvatarFavicon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;AACxC,+CAAoD;AAEpD,wDAA2C;AAI9B,QAAA,aAAa,GAAG,IAAA,kBAAU,EACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,wCAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC;IAC5D,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,yCAAyC;IAE9E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,sCAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,uCACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import {\n AvatarBaseShape,\n AvatarFaviconSize,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = forwardRef<HTMLDivElement, AvatarFaviconProps>(\n (\n {\n src,\n name = '',\n fallbackText,\n fallbackTextProps,\n className,\n size = AvatarFaviconSize.Md,\n imageProps,\n ...props\n },\n ref,\n ) => {\n const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n const backupFallbackText = fallbackText || name?.[0] || '?';\n const altText = name || 'Site logo'; // TBC: Add localization for default text\n\n const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n setFinalFallbackText(backupFallbackText);\n imageProps?.onError?.(e);\n };\n\n return (\n <AvatarBase\n ref={ref}\n shape={AvatarBaseShape.Circle}\n size={size}\n className={className}\n fallbackText={src ? finalFallbackText : backupFallbackText}\n fallbackTextProps={fallbackTextProps}\n {...props}\n >\n {src && (\n <img\n src={src}\n alt={altText}\n className=\"size-full object-contain\"\n {...imageProps}\n onError={onErrorHandler}\n />\n )}\n </AvatarBase>\n );\n },\n);\n\nAvatarFavicon.displayName = 'AvatarFavicon';\n"]}
|
|
@@ -11,7 +11,7 @@ import { AvatarBase } from "../AvatarBase/index.mjs";
|
|
|
11
11
|
export const AvatarFavicon = forwardRef(({ src, name = '', fallbackText, fallbackTextProps, className, size = AvatarFaviconSize.Md, imageProps, ...props }, ref) => {
|
|
12
12
|
const [finalFallbackText, setFinalFallbackText] = useState('');
|
|
13
13
|
const backupFallbackText = fallbackText || name?.[0] || '?';
|
|
14
|
-
const altText = name || '
|
|
14
|
+
const altText = name || 'Site logo'; // TBC: Add localization for default text
|
|
15
15
|
const onErrorHandler = (e) => {
|
|
16
16
|
setFinalFallbackText(backupFallbackText);
|
|
17
17
|
imageProps?.onError?.(e);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarFavicon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EAClB,uCAAuC;AACxC,OAAO,QAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc;;AAEpD,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,iBAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC;IAC5D,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,yCAAyC;IAE9E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,eAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,6BACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import {\n AvatarBaseShape,\n AvatarFaviconSize,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = forwardRef<HTMLDivElement, AvatarFaviconProps>(\n (\n {\n src,\n name = '',\n fallbackText,\n fallbackTextProps,\n className,\n size = AvatarFaviconSize.Md,\n imageProps,\n ...props\n },\n ref,\n ) => {\n const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n const backupFallbackText = fallbackText || name?.[0] || '?';\n const altText = name || '
|
|
1
|
+
{"version":3,"file":"AvatarFavicon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EAClB,uCAAuC;AACxC,OAAO,QAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc;;AAEpD,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,iBAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC;IAC5D,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,yCAAyC;IAE9E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,eAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,6BACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import {\n AvatarBaseShape,\n AvatarFaviconSize,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = forwardRef<HTMLDivElement, AvatarFaviconProps>(\n (\n {\n src,\n name = '',\n fallbackText,\n fallbackTextProps,\n className,\n size = AvatarFaviconSize.Md,\n imageProps,\n ...props\n },\n ref,\n ) => {\n const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n const backupFallbackText = fallbackText || name?.[0] || '?';\n const altText = name || 'Site logo'; // TBC: Add localization for default text\n\n const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n setFinalFallbackText(backupFallbackText);\n imageProps?.onError?.(e);\n };\n\n return (\n <AvatarBase\n ref={ref}\n shape={AvatarBaseShape.Circle}\n size={size}\n className={className}\n fallbackText={src ? finalFallbackText : backupFallbackText}\n fallbackTextProps={fallbackTextProps}\n {...props}\n >\n {src && (\n <img\n src={src}\n alt={altText}\n className=\"size-full object-contain\"\n {...imageProps}\n onError={onErrorHandler}\n />\n )}\n </AvatarBase>\n );\n },\n);\n\nAvatarFavicon.displayName = 'AvatarFavicon';\n"]}
|
|
@@ -27,66 +27,31 @@ exports.BadgeWrapper = void 0;
|
|
|
27
27
|
const design_system_shared_1 = require("@metamask/design-system-shared");
|
|
28
28
|
const react_1 = __importStar(require("react"));
|
|
29
29
|
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
30
|
+
const CIRCULAR_ANCHOR_EDGE_INSET = '7%';
|
|
31
|
+
const RECTANGULAR_ANCHOR_EDGE_INSET = '11%';
|
|
32
|
+
const getTransformValue = (percentage, offset) => offset === 0 ? percentage : `calc(${percentage} + ${offset}px)`;
|
|
30
33
|
exports.BadgeWrapper = (0, react_1.forwardRef)(({ children, childrenContainerProps, badge, badgeContainerProps, position = design_system_shared_1.BadgeWrapperPosition.BottomRight, positionAnchorShape = design_system_shared_1.BadgeWrapperPositionAnchorShape.Circular, positionXOffset = 0, positionYOffset = 0, customPosition, className = '', style, ...props }, ref) => {
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
const { width, height } = badgeRef.current.getBoundingClientRect();
|
|
46
|
-
setBadgeWidth(width);
|
|
47
|
-
setBadgeHeight(height);
|
|
48
|
-
}
|
|
49
|
-
}, []); // empty deps → run only after first render
|
|
50
|
-
const finalPositions = (0, react_1.useMemo)(() => {
|
|
51
|
-
if (customPosition) {
|
|
52
|
-
return customPosition;
|
|
53
|
-
}
|
|
54
|
-
const anchorShapeXOffset = positionAnchorShape === design_system_shared_1.BadgeWrapperPositionAnchorShape.Rectangular
|
|
55
|
-
? 0
|
|
56
|
-
: anchorWidth * 0.1464;
|
|
57
|
-
const anchorShapeYOffset = positionAnchorShape === design_system_shared_1.BadgeWrapperPositionAnchorShape.Rectangular
|
|
58
|
-
? 0
|
|
59
|
-
: anchorHeight * 0.1464;
|
|
60
|
-
const badgeCenteringXOffset = badgeWidth / 2;
|
|
61
|
-
const badgeCenteringYOffset = badgeHeight / 2;
|
|
62
|
-
const finalXOffset = anchorShapeXOffset - badgeCenteringXOffset + positionXOffset;
|
|
63
|
-
const finalYOffset = anchorShapeYOffset - badgeCenteringYOffset + positionYOffset;
|
|
64
|
-
switch (position) {
|
|
65
|
-
case design_system_shared_1.BadgeWrapperPosition.TopRight:
|
|
66
|
-
return { top: finalYOffset, right: finalXOffset };
|
|
67
|
-
case design_system_shared_1.BadgeWrapperPosition.TopLeft:
|
|
68
|
-
return { top: finalYOffset, left: finalXOffset };
|
|
69
|
-
case design_system_shared_1.BadgeWrapperPosition.BottomLeft:
|
|
70
|
-
return { bottom: finalYOffset, left: finalXOffset };
|
|
71
|
-
case design_system_shared_1.BadgeWrapperPosition.BottomRight:
|
|
72
|
-
default:
|
|
73
|
-
return { bottom: finalYOffset, right: finalXOffset };
|
|
74
|
-
}
|
|
75
|
-
}, [
|
|
76
|
-
position,
|
|
77
|
-
positionAnchorShape,
|
|
78
|
-
anchorWidth,
|
|
79
|
-
anchorHeight,
|
|
80
|
-
badgeWidth,
|
|
81
|
-
badgeHeight,
|
|
82
|
-
positionXOffset,
|
|
83
|
-
positionYOffset,
|
|
84
|
-
customPosition,
|
|
85
|
-
]);
|
|
34
|
+
const isTop = position === design_system_shared_1.BadgeWrapperPosition.TopRight ||
|
|
35
|
+
position === design_system_shared_1.BadgeWrapperPosition.TopLeft;
|
|
36
|
+
const isLeft = position === design_system_shared_1.BadgeWrapperPosition.TopLeft ||
|
|
37
|
+
position === design_system_shared_1.BadgeWrapperPosition.BottomLeft;
|
|
38
|
+
const edgeInset = positionAnchorShape === design_system_shared_1.BadgeWrapperPositionAnchorShape.Circular
|
|
39
|
+
? CIRCULAR_ANCHOR_EDGE_INSET
|
|
40
|
+
: RECTANGULAR_ANCHOR_EDGE_INSET;
|
|
41
|
+
const finalPositions = customPosition
|
|
42
|
+
? customPosition
|
|
43
|
+
: {
|
|
44
|
+
...(isTop ? { top: edgeInset } : { bottom: edgeInset }),
|
|
45
|
+
...(isLeft ? { left: edgeInset } : { right: edgeInset }),
|
|
46
|
+
transform: `translate(${getTransformValue(isLeft ? '-50%' : '50%', positionXOffset)}, ${getTransformValue(isTop ? '-50%' : '50%', positionYOffset)})`,
|
|
47
|
+
};
|
|
86
48
|
const containerClassName = (0, tw_merge_1.twMerge)('relative inline-flex self-start', className);
|
|
87
49
|
return (react_1.default.createElement("div", { ref: ref, className: containerClassName, style: style, ...props },
|
|
88
|
-
react_1.default.createElement("div", { className: "inline-flex",
|
|
89
|
-
react_1.default.createElement("div", {
|
|
50
|
+
react_1.default.createElement("div", { className: "inline-flex", ...childrenContainerProps }, children),
|
|
51
|
+
react_1.default.createElement("div", { ...badgeContainerProps, className: (0, tw_merge_1.twMerge)('absolute inline-flex items-center justify-center', badgeContainerProps?.className), style: {
|
|
52
|
+
...finalPositions,
|
|
53
|
+
...badgeContainerProps?.style,
|
|
54
|
+
} }, badge)));
|
|
90
55
|
});
|
|
91
56
|
exports.BadgeWrapper.displayName = 'BadgeWrapper';
|
|
92
57
|
//# sourceMappingURL=BadgeWrapper.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeWrapper.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;AAExC,+
|
|
1
|
+
{"version":3,"file":"BadgeWrapper.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;AAExC,+CAA0C;AAE1C,uDAA+C;AAI/C,MAAM,0BAA0B,GAAG,IAAI,CAAC;AACxC,MAAM,6BAA6B,GAAG,KAAK,CAAC;AAE5C,MAAM,iBAAiB,GAAG,CAAC,UAAkB,EAAE,MAAc,EAAE,EAAE,CAC/D,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,UAAU,MAAM,MAAM,KAAK,CAAC;AAErD,QAAA,YAAY,GAAG,IAAA,kBAAU,EACpC,CACE,EACE,QAAQ,EACR,sBAAsB,EACtB,KAAK,EACL,mBAAmB,EACnB,QAAQ,GAAG,2CAAoB,CAAC,WAAW,EAC3C,mBAAmB,GAAG,sDAA+B,CAAC,QAAQ,EAC9D,eAAe,GAAG,CAAC,EACnB,eAAe,GAAG,CAAC,EACnB,cAAc,EACd,SAAS,GAAG,EAAE,EACd,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,KAAK,GACT,QAAQ,KAAK,2CAAoB,CAAC,QAAQ;QAC1C,QAAQ,KAAK,2CAAoB,CAAC,OAAO,CAAC;IAC5C,MAAM,MAAM,GACV,QAAQ,KAAK,2CAAoB,CAAC,OAAO;QACzC,QAAQ,KAAK,2CAAoB,CAAC,UAAU,CAAC;IAC/C,MAAM,SAAS,GACb,mBAAmB,KAAK,sDAA+B,CAAC,QAAQ;QAC9D,CAAC,CAAC,0BAA0B;QAC5B,CAAC,CAAC,6BAA6B,CAAC;IACpC,MAAM,cAAc,GAAwB,cAAc;QACxD,CAAC,CAAE,cAAgC;QACnC,CAAC,CAAC;YACE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;YACvD,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;YACxD,SAAS,EAAE,aAAa,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,KAAK,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,GAAG;SACtJ,CAAC;IAEN,MAAM,kBAAkB,GAAG,IAAA,kBAAO,EAChC,iCAAiC,EACjC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,uCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,kBAAkB,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QACnE,uCAAK,SAAS,EAAC,aAAa,KAAK,sBAAsB,IACpD,QAAQ,CACL;QAEN,0CACM,mBAAmB,EACvB,SAAS,EAAE,IAAA,kBAAO,EAChB,kDAAkD,EAClD,mBAAmB,EAAE,SAAS,CAC/B,EACD,KAAK,EAAE;gBACL,GAAG,cAAc;gBACjB,GAAI,mBAAmB,EAAE,KAAuB;aACjD,IAEA,KAAK,CACF,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import {\n BadgeWrapperPosition,\n BadgeWrapperPositionAnchorShape,\n} from '@metamask/design-system-shared';\nimport type { CSSProperties } from 'react';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\n\nimport type { BadgeWrapperProps } from './BadgeWrapper.types';\n\nconst CIRCULAR_ANCHOR_EDGE_INSET = '7%';\nconst RECTANGULAR_ANCHOR_EDGE_INSET = '11%';\n\nconst getTransformValue = (percentage: string, offset: number) =>\n offset === 0 ? percentage : `calc(${percentage} + ${offset}px)`;\n\nexport const BadgeWrapper = forwardRef<HTMLDivElement, BadgeWrapperProps>(\n (\n {\n children,\n childrenContainerProps,\n badge,\n badgeContainerProps,\n position = BadgeWrapperPosition.BottomRight,\n positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular,\n positionXOffset = 0,\n positionYOffset = 0,\n customPosition,\n className = '',\n style,\n ...props\n },\n ref,\n ) => {\n const isTop =\n position === BadgeWrapperPosition.TopRight ||\n position === BadgeWrapperPosition.TopLeft;\n const isLeft =\n position === BadgeWrapperPosition.TopLeft ||\n position === BadgeWrapperPosition.BottomLeft;\n const edgeInset =\n positionAnchorShape === BadgeWrapperPositionAnchorShape.Circular\n ? CIRCULAR_ANCHOR_EDGE_INSET\n : RECTANGULAR_ANCHOR_EDGE_INSET;\n const finalPositions: React.CSSProperties = customPosition\n ? (customPosition as CSSProperties)\n : {\n ...(isTop ? { top: edgeInset } : { bottom: edgeInset }),\n ...(isLeft ? { left: edgeInset } : { right: edgeInset }),\n transform: `translate(${getTransformValue(isLeft ? '-50%' : '50%', positionXOffset)}, ${getTransformValue(isTop ? '-50%' : '50%', positionYOffset)})`,\n };\n\n const containerClassName = twMerge(\n 'relative inline-flex self-start',\n className,\n );\n\n return (\n <div ref={ref} className={containerClassName} style={style} {...props}>\n <div className=\"inline-flex\" {...childrenContainerProps}>\n {children}\n </div>\n\n <div\n {...badgeContainerProps}\n className={twMerge(\n 'absolute inline-flex items-center justify-center',\n badgeContainerProps?.className,\n )}\n style={{\n ...finalPositions,\n ...(badgeContainerProps?.style as CSSProperties),\n }}\n >\n {badge}\n </div>\n </div>\n );\n },\n);\n\nBadgeWrapper.displayName = 'BadgeWrapper';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeWrapper.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,
|
|
1
|
+
{"version":3,"file":"BadgeWrapper.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,cAAc;AAI1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAQ9D,eAAO,MAAM,YAAY,uGA+DxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeWrapper.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,
|
|
1
|
+
{"version":3,"file":"BadgeWrapper.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,cAAc;AAI1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAQ9D,eAAO,MAAM,YAAY,uGA+DxB,CAAC"}
|
|
@@ -5,69 +5,34 @@ function $importDefault(module) {
|
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
7
|
import { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape } from "@metamask/design-system-shared";
|
|
8
|
-
import $React, { forwardRef
|
|
8
|
+
import $React, { forwardRef } from "react";
|
|
9
9
|
const React = $importDefault($React);
|
|
10
10
|
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
11
|
+
const CIRCULAR_ANCHOR_EDGE_INSET = '7%';
|
|
12
|
+
const RECTANGULAR_ANCHOR_EDGE_INSET = '11%';
|
|
13
|
+
const getTransformValue = (percentage, offset) => offset === 0 ? percentage : `calc(${percentage} + ${offset}px)`;
|
|
11
14
|
export const BadgeWrapper = forwardRef(({ children, childrenContainerProps, badge, badgeContainerProps, position = BadgeWrapperPosition.BottomRight, positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular, positionXOffset = 0, positionYOffset = 0, customPosition, className = '', style, ...props }, ref) => {
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const { width, height } = badgeRef.current.getBoundingClientRect();
|
|
27
|
-
setBadgeWidth(width);
|
|
28
|
-
setBadgeHeight(height);
|
|
29
|
-
}
|
|
30
|
-
}, []); // empty deps → run only after first render
|
|
31
|
-
const finalPositions = useMemo(() => {
|
|
32
|
-
if (customPosition) {
|
|
33
|
-
return customPosition;
|
|
34
|
-
}
|
|
35
|
-
const anchorShapeXOffset = positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular
|
|
36
|
-
? 0
|
|
37
|
-
: anchorWidth * 0.1464;
|
|
38
|
-
const anchorShapeYOffset = positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular
|
|
39
|
-
? 0
|
|
40
|
-
: anchorHeight * 0.1464;
|
|
41
|
-
const badgeCenteringXOffset = badgeWidth / 2;
|
|
42
|
-
const badgeCenteringYOffset = badgeHeight / 2;
|
|
43
|
-
const finalXOffset = anchorShapeXOffset - badgeCenteringXOffset + positionXOffset;
|
|
44
|
-
const finalYOffset = anchorShapeYOffset - badgeCenteringYOffset + positionYOffset;
|
|
45
|
-
switch (position) {
|
|
46
|
-
case BadgeWrapperPosition.TopRight:
|
|
47
|
-
return { top: finalYOffset, right: finalXOffset };
|
|
48
|
-
case BadgeWrapperPosition.TopLeft:
|
|
49
|
-
return { top: finalYOffset, left: finalXOffset };
|
|
50
|
-
case BadgeWrapperPosition.BottomLeft:
|
|
51
|
-
return { bottom: finalYOffset, left: finalXOffset };
|
|
52
|
-
case BadgeWrapperPosition.BottomRight:
|
|
53
|
-
default:
|
|
54
|
-
return { bottom: finalYOffset, right: finalXOffset };
|
|
55
|
-
}
|
|
56
|
-
}, [
|
|
57
|
-
position,
|
|
58
|
-
positionAnchorShape,
|
|
59
|
-
anchorWidth,
|
|
60
|
-
anchorHeight,
|
|
61
|
-
badgeWidth,
|
|
62
|
-
badgeHeight,
|
|
63
|
-
positionXOffset,
|
|
64
|
-
positionYOffset,
|
|
65
|
-
customPosition,
|
|
66
|
-
]);
|
|
15
|
+
const isTop = position === BadgeWrapperPosition.TopRight ||
|
|
16
|
+
position === BadgeWrapperPosition.TopLeft;
|
|
17
|
+
const isLeft = position === BadgeWrapperPosition.TopLeft ||
|
|
18
|
+
position === BadgeWrapperPosition.BottomLeft;
|
|
19
|
+
const edgeInset = positionAnchorShape === BadgeWrapperPositionAnchorShape.Circular
|
|
20
|
+
? CIRCULAR_ANCHOR_EDGE_INSET
|
|
21
|
+
: RECTANGULAR_ANCHOR_EDGE_INSET;
|
|
22
|
+
const finalPositions = customPosition
|
|
23
|
+
? customPosition
|
|
24
|
+
: {
|
|
25
|
+
...(isTop ? { top: edgeInset } : { bottom: edgeInset }),
|
|
26
|
+
...(isLeft ? { left: edgeInset } : { right: edgeInset }),
|
|
27
|
+
transform: `translate(${getTransformValue(isLeft ? '-50%' : '50%', positionXOffset)}, ${getTransformValue(isTop ? '-50%' : '50%', positionYOffset)})`,
|
|
28
|
+
};
|
|
67
29
|
const containerClassName = twMerge('relative inline-flex self-start', className);
|
|
68
30
|
return (React.createElement("div", { ref: ref, className: containerClassName, style: style, ...props },
|
|
69
|
-
React.createElement("div", { className: "inline-flex",
|
|
70
|
-
React.createElement("div", {
|
|
31
|
+
React.createElement("div", { className: "inline-flex", ...childrenContainerProps }, children),
|
|
32
|
+
React.createElement("div", { ...badgeContainerProps, className: twMerge('absolute inline-flex items-center justify-center', badgeContainerProps?.className), style: {
|
|
33
|
+
...finalPositions,
|
|
34
|
+
...badgeContainerProps?.style,
|
|
35
|
+
} }, badge)));
|
|
71
36
|
});
|
|
72
37
|
BadgeWrapper.displayName = 'BadgeWrapper';
|
|
73
38
|
//# sourceMappingURL=BadgeWrapper.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeWrapper.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,EAChC,uCAAuC;AAExC,OAAO,QAAO,
|
|
1
|
+
{"version":3,"file":"BadgeWrapper.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,EAChC,uCAAuC;AAExC,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAI/C,MAAM,0BAA0B,GAAG,IAAI,CAAC;AACxC,MAAM,6BAA6B,GAAG,KAAK,CAAC;AAE5C,MAAM,iBAAiB,GAAG,CAAC,UAAkB,EAAE,MAAc,EAAE,EAAE,CAC/D,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,UAAU,MAAM,MAAM,KAAK,CAAC;AAElE,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,CACE,EACE,QAAQ,EACR,sBAAsB,EACtB,KAAK,EACL,mBAAmB,EACnB,QAAQ,GAAG,oBAAoB,CAAC,WAAW,EAC3C,mBAAmB,GAAG,+BAA+B,CAAC,QAAQ,EAC9D,eAAe,GAAG,CAAC,EACnB,eAAe,GAAG,CAAC,EACnB,cAAc,EACd,SAAS,GAAG,EAAE,EACd,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,KAAK,GACT,QAAQ,KAAK,oBAAoB,CAAC,QAAQ;QAC1C,QAAQ,KAAK,oBAAoB,CAAC,OAAO,CAAC;IAC5C,MAAM,MAAM,GACV,QAAQ,KAAK,oBAAoB,CAAC,OAAO;QACzC,QAAQ,KAAK,oBAAoB,CAAC,UAAU,CAAC;IAC/C,MAAM,SAAS,GACb,mBAAmB,KAAK,+BAA+B,CAAC,QAAQ;QAC9D,CAAC,CAAC,0BAA0B;QAC5B,CAAC,CAAC,6BAA6B,CAAC;IACpC,MAAM,cAAc,GAAwB,cAAc;QACxD,CAAC,CAAE,cAAgC;QACnC,CAAC,CAAC;YACE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;YACvD,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;YACxD,SAAS,EAAE,aAAa,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,KAAK,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,GAAG;SACtJ,CAAC;IAEN,MAAM,kBAAkB,GAAG,OAAO,CAChC,iCAAiC,EACjC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,kBAAkB,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QACnE,6BAAK,SAAS,EAAC,aAAa,KAAK,sBAAsB,IACpD,QAAQ,CACL;QAEN,gCACM,mBAAmB,EACvB,SAAS,EAAE,OAAO,CAChB,kDAAkD,EAClD,mBAAmB,EAAE,SAAS,CAC/B,EACD,KAAK,EAAE;gBACL,GAAG,cAAc;gBACjB,GAAI,mBAAmB,EAAE,KAAuB;aACjD,IAEA,KAAK,CACF,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import {\n BadgeWrapperPosition,\n BadgeWrapperPositionAnchorShape,\n} from '@metamask/design-system-shared';\nimport type { CSSProperties } from 'react';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\n\nimport type { BadgeWrapperProps } from './BadgeWrapper.types';\n\nconst CIRCULAR_ANCHOR_EDGE_INSET = '7%';\nconst RECTANGULAR_ANCHOR_EDGE_INSET = '11%';\n\nconst getTransformValue = (percentage: string, offset: number) =>\n offset === 0 ? percentage : `calc(${percentage} + ${offset}px)`;\n\nexport const BadgeWrapper = forwardRef<HTMLDivElement, BadgeWrapperProps>(\n (\n {\n children,\n childrenContainerProps,\n badge,\n badgeContainerProps,\n position = BadgeWrapperPosition.BottomRight,\n positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular,\n positionXOffset = 0,\n positionYOffset = 0,\n customPosition,\n className = '',\n style,\n ...props\n },\n ref,\n ) => {\n const isTop =\n position === BadgeWrapperPosition.TopRight ||\n position === BadgeWrapperPosition.TopLeft;\n const isLeft =\n position === BadgeWrapperPosition.TopLeft ||\n position === BadgeWrapperPosition.BottomLeft;\n const edgeInset =\n positionAnchorShape === BadgeWrapperPositionAnchorShape.Circular\n ? CIRCULAR_ANCHOR_EDGE_INSET\n : RECTANGULAR_ANCHOR_EDGE_INSET;\n const finalPositions: React.CSSProperties = customPosition\n ? (customPosition as CSSProperties)\n : {\n ...(isTop ? { top: edgeInset } : { bottom: edgeInset }),\n ...(isLeft ? { left: edgeInset } : { right: edgeInset }),\n transform: `translate(${getTransformValue(isLeft ? '-50%' : '50%', positionXOffset)}, ${getTransformValue(isTop ? '-50%' : '50%', positionYOffset)})`,\n };\n\n const containerClassName = twMerge(\n 'relative inline-flex self-start',\n className,\n );\n\n return (\n <div ref={ref} className={containerClassName} style={style} {...props}>\n <div className=\"inline-flex\" {...childrenContainerProps}>\n {children}\n </div>\n\n <div\n {...badgeContainerProps}\n className={twMerge(\n 'absolute inline-flex items-center justify-center',\n badgeContainerProps?.className,\n )}\n style={{\n ...finalPositions,\n ...(badgeContainerProps?.style as CSSProperties),\n }}\n >\n {badge}\n </div>\n </div>\n );\n },\n);\n\nBadgeWrapper.displayName = 'BadgeWrapper';\n"]}
|
|
@@ -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.1",
|
|
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"
|