@metamask/design-system-react 0.35.2 → 0.36.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 +20 -1
- package/dist/components/ModalContent/ModalContent.cjs +1 -5
- package/dist/components/ModalContent/ModalContent.cjs.map +1 -1
- package/dist/components/ModalContent/ModalContent.d.cts.map +1 -1
- package/dist/components/ModalContent/ModalContent.d.mts.map +1 -1
- package/dist/components/ModalContent/ModalContent.mjs +2 -6
- package/dist/components/ModalContent/ModalContent.mjs.map +1 -1
- package/dist/components/PureBlackProvider/PureBlackProvider.cjs +7 -4
- package/dist/components/PureBlackProvider/PureBlackProvider.cjs.map +1 -1
- package/dist/components/PureBlackProvider/PureBlackProvider.d.cts +7 -4
- package/dist/components/PureBlackProvider/PureBlackProvider.d.cts.map +1 -1
- package/dist/components/PureBlackProvider/PureBlackProvider.d.mts +7 -4
- package/dist/components/PureBlackProvider/PureBlackProvider.d.mts.map +1 -1
- package/dist/components/PureBlackProvider/PureBlackProvider.mjs +7 -4
- package/dist/components/PureBlackProvider/PureBlackProvider.mjs.map +1 -1
- package/dist/components/Toast/Toast.cjs +1 -1
- package/dist/components/Toast/Toast.cjs.map +1 -1
- package/dist/components/Toast/Toast.mjs +1 -1
- package/dist/components/Toast/Toast.mjs.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.36.0]
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
|
|
14
|
+
- Added `BoxBackgroundColor.BackgroundElevated1`, `BoxBackgroundColor.BackgroundElevated2`, and `BoxBorderColor.BorderAlternative` via `@metamask/design-system-shared` ([#1445](https://github.com/MetaMask/metamask-design-system/pull/1445))
|
|
15
|
+
|
|
16
|
+
### Changed
|
|
17
|
+
|
|
18
|
+
- Updated peer dependency to `@metamask/design-tokens@^9.0.0` ([#1444](https://github.com/MetaMask/metamask-design-system/pull/1444))
|
|
19
|
+
- Required coordination bump; visual impact comes from the design-tokens 9.0.0 dark theme change for apps not already on OLED pure-black
|
|
20
|
+
- See [design-tokens Migration Guide](../design-tokens/MIGRATION.md#from-version-8x-to-900)
|
|
21
|
+
- Updated `ModalContent` to use `BackgroundElevated1` and `BorderAlternative` instead of branching on pure-black mode ([#1445](https://github.com/MetaMask/metamask-design-system/pull/1445))
|
|
22
|
+
- `elevated1` and `border.alternative` resolve to the same values as the previous pure-black path (`background.alternative`, `border.muted`); appearance is unchanged for OLED pure-black consumers
|
|
23
|
+
- Updated `Toast` to use `BackgroundElevated2` instead of `BackgroundSection` ([#1445](https://github.com/MetaMask/metamask-design-system/pull/1445))
|
|
24
|
+
- Dark theme unchanged (`elevated2` matches `background.section`); light theme changes from `background.section` (`#F3F5F9`) to `background.elevated2` / `background.default` (`#FFFFFF`)
|
|
25
|
+
- Design-system components no longer branch on `usePureBlack()` for surface styling; consumers should remove `PureBlackProvider` / `data-pure-black` wiring and use elevated tokens (`bg-elevated1`, `bg-elevated2`, `border-alternative`) instead ([#1444](https://github.com/MetaMask/metamask-design-system/pull/1444), [#1445](https://github.com/MetaMask/metamask-design-system/pull/1445))
|
|
26
|
+
- See [design-tokens Migration Guide](../design-tokens/MIGRATION.md#from-version-8x-to-900)
|
|
27
|
+
|
|
10
28
|
## [0.35.2]
|
|
11
29
|
|
|
12
30
|
### Fixed
|
|
@@ -461,7 +479,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
461
479
|
- Full TypeScript support with type definitions and enums
|
|
462
480
|
- Tailwind CSS integration with design token support
|
|
463
481
|
|
|
464
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.
|
|
482
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.36.0...HEAD
|
|
483
|
+
[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
|
|
465
484
|
[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
|
|
466
485
|
[0.35.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.35.0...@metamask/design-system-react@0.35.1
|
|
467
486
|
[0.35.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.34.0...@metamask/design-system-react@0.35.0
|
|
@@ -29,12 +29,10 @@ const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
|
29
29
|
const Box_1 = require("../Box/index.cjs");
|
|
30
30
|
const Modal_1 = require("../Modal/index.cjs");
|
|
31
31
|
const ModalFocus_1 = require("../ModalFocus/index.cjs");
|
|
32
|
-
const PureBlackProvider_1 = require("../PureBlackProvider/index.cjs");
|
|
33
32
|
const ModalContent_constants_1 = require("./ModalContent.constants.cjs");
|
|
34
33
|
const ModalContent_types_1 = require("./ModalContent.types.cjs");
|
|
35
34
|
exports.ModalContent = (0, react_1.forwardRef)(({ className, children, size = ModalContent_types_1.ModalContentSize.Sm, modalDialogProps, ...props }, ref) => {
|
|
36
35
|
const { onClose, isClosedOnEscapeKey, isClosedOnOutsideClick, initialFocusRef, finalFocusRef, restoreFocus, autoFocus, } = (0, Modal_1.useModalContext)();
|
|
37
|
-
const isPureBlack = (0, PureBlackProvider_1.usePureBlack)();
|
|
38
36
|
const modalDialogRef = (0, react_1.useRef)(null);
|
|
39
37
|
(0, react_1.useEffect)(() => {
|
|
40
38
|
const handleEscKey = (event) => {
|
|
@@ -68,9 +66,7 @@ exports.ModalContent = (0, react_1.forwardRef)(({ className, children, size = Mo
|
|
|
68
66
|
}, [isClosedOnEscapeKey, isClosedOnOutsideClick, onClose]);
|
|
69
67
|
return (react_1.default.createElement(ModalFocus_1.ModalFocus, { initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, restoreFocus: restoreFocus, autoFocus: autoFocus },
|
|
70
68
|
react_1.default.createElement("div", { ref: ref, className: (0, tw_merge_1.twMerge)('fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12', '[@media(max-height:475px)]:p-2', className), ...props },
|
|
71
|
-
react_1.default.createElement(Box_1.Box, { ref: modalDialogRef, asChild: true, backgroundColor:
|
|
72
|
-
? Box_1.BoxBackgroundColor.BackgroundAlternative
|
|
73
|
-
: Box_1.BoxBackgroundColor.BackgroundDefault, justifyContent: Box_1.BoxJustifyContent.Start, alignItems: Box_1.BoxAlignItems.Stretch, flexDirection: Box_1.BoxFlexDirection.Column, paddingTop: 4, paddingBottom: 4, ...modalDialogProps, className: (0, tw_merge_1.twMerge)('flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up', ModalContent_constants_1.TWCLASSMAP_MODAL_CONTENT_SIZE[size], isPureBlack && 'border border-muted', modalDialogProps?.className) },
|
|
69
|
+
react_1.default.createElement(Box_1.Box, { ref: modalDialogRef, asChild: true, backgroundColor: Box_1.BoxBackgroundColor.BackgroundElevated1, borderColor: Box_1.BoxBorderColor.BorderAlternative, borderWidth: 1, justifyContent: Box_1.BoxJustifyContent.Start, alignItems: Box_1.BoxAlignItems.Stretch, flexDirection: Box_1.BoxFlexDirection.Column, paddingTop: 4, paddingBottom: 4, ...modalDialogProps, className: (0, tw_merge_1.twMerge)('flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up', ModalContent_constants_1.TWCLASSMAP_MODAL_CONTENT_SIZE[size], modalDialogProps?.className) },
|
|
74
70
|
react_1.default.createElement("section", { role: "dialog", "aria-modal": "true" }, children)))));
|
|
75
71
|
});
|
|
76
72
|
exports.ModalContent.displayName = 'ModalContent';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContent.cjs","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6D;AAE7D,uDAA+C;AAC/C,
|
|
1
|
+
{"version":3,"file":"ModalContent.cjs","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n Box,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxBorderColor,\n BoxFlexDirection,\n BoxJustifyContent,\n} from '../Box';\nimport { useModalContext } from '../Modal';\nimport { ModalFocus } from '../ModalFocus';\n\nimport {\n MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR,\n TWCLASSMAP_MODAL_CONTENT_SIZE,\n} from './ModalContent.constants';\nimport type { ModalContentProps } from './ModalContent.types';\nimport { ModalContentSize } from './ModalContent.types';\n\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n (\n {\n className,\n children,\n size = ModalContentSize.Sm,\n modalDialogProps,\n ...props\n },\n ref,\n ) => {\n const {\n onClose,\n isClosedOnEscapeKey,\n isClosedOnOutsideClick,\n initialFocusRef,\n finalFocusRef,\n restoreFocus,\n autoFocus,\n } = useModalContext();\n const modalDialogRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const handleEscKey = (event: KeyboardEvent) => {\n if (isClosedOnEscapeKey && event.key === 'Escape') {\n onClose();\n }\n };\n const handleClickOutside = (event: MouseEvent) => {\n if (!isClosedOnOutsideClick) {\n return;\n }\n const target = event.target as HTMLElement | null;\n // Floating UI primitives (Popover, Tooltip, Select dropdown, etc.)\n // that portal alongside the Modal but are part of the modal\n // interaction can opt out of the outside-click handler by setting\n // `data-mm-modal-ignore-outside-click` on their root element.\n if (target?.closest(`[${MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR}]`)) {\n return;\n }\n if (\n modalDialogRef.current &&\n !modalDialogRef.current.contains(target as Node)\n ) {\n onClose();\n }\n };\n\n document.addEventListener('keydown', handleEscKey);\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n document.removeEventListener('keydown', handleEscKey);\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isClosedOnEscapeKey, isClosedOnOutsideClick, onClose]);\n\n return (\n <ModalFocus\n initialFocusRef={initialFocusRef}\n finalFocusRef={finalFocusRef}\n restoreFocus={restoreFocus}\n autoFocus={autoFocus}\n >\n <div\n ref={ref}\n className={twMerge(\n 'fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12',\n '[@media(max-height:475px)]:p-2',\n className,\n )}\n {...props}\n >\n <Box\n ref={modalDialogRef as React.Ref<HTMLDivElement>}\n asChild\n backgroundColor={BoxBackgroundColor.BackgroundElevated1}\n borderColor={BoxBorderColor.BorderAlternative}\n borderWidth={1}\n justifyContent={BoxJustifyContent.Start}\n alignItems={BoxAlignItems.Stretch}\n flexDirection={BoxFlexDirection.Column}\n paddingTop={4}\n paddingBottom={4}\n {...modalDialogProps}\n className={twMerge(\n 'flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up',\n TWCLASSMAP_MODAL_CONTENT_SIZE[size],\n modalDialogProps?.className,\n )}\n >\n <section role=\"dialog\" aria-modal=\"true\">\n {children}\n </section>\n </Box>\n </div>\n </ModalFocus>\n );\n },\n);\n\nModalContent.displayName = 'ModalContent';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContent.d.cts","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,cAAc;AAkB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAG9D,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"ModalContent.d.cts","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,cAAc;AAkB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAG9D,eAAO,MAAM,YAAY,uGAmGxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContent.d.mts","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,cAAc;AAkB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAG9D,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"ModalContent.d.mts","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,cAAc;AAkB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAG9D,eAAO,MAAM,YAAY,uGAmGxB,CAAC"}
|
|
@@ -7,15 +7,13 @@ function $importDefault(module) {
|
|
|
7
7
|
import $React, { forwardRef, useEffect, useRef } from "react";
|
|
8
8
|
const React = $importDefault($React);
|
|
9
9
|
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
10
|
-
import { Box, BoxAlignItems, BoxBackgroundColor, BoxFlexDirection, BoxJustifyContent } from "../Box/index.mjs";
|
|
10
|
+
import { Box, BoxAlignItems, BoxBackgroundColor, BoxBorderColor, BoxFlexDirection, BoxJustifyContent } from "../Box/index.mjs";
|
|
11
11
|
import { useModalContext } from "../Modal/index.mjs";
|
|
12
12
|
import { ModalFocus } from "../ModalFocus/index.mjs";
|
|
13
|
-
import { usePureBlack } from "../PureBlackProvider/index.mjs";
|
|
14
13
|
import { MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR, TWCLASSMAP_MODAL_CONTENT_SIZE } from "./ModalContent.constants.mjs";
|
|
15
14
|
import { ModalContentSize } from "./ModalContent.types.mjs";
|
|
16
15
|
export const ModalContent = forwardRef(({ className, children, size = ModalContentSize.Sm, modalDialogProps, ...props }, ref) => {
|
|
17
16
|
const { onClose, isClosedOnEscapeKey, isClosedOnOutsideClick, initialFocusRef, finalFocusRef, restoreFocus, autoFocus, } = useModalContext();
|
|
18
|
-
const isPureBlack = usePureBlack();
|
|
19
17
|
const modalDialogRef = useRef(null);
|
|
20
18
|
useEffect(() => {
|
|
21
19
|
const handleEscKey = (event) => {
|
|
@@ -49,9 +47,7 @@ export const ModalContent = forwardRef(({ className, children, size = ModalConte
|
|
|
49
47
|
}, [isClosedOnEscapeKey, isClosedOnOutsideClick, onClose]);
|
|
50
48
|
return (React.createElement(ModalFocus, { initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, restoreFocus: restoreFocus, autoFocus: autoFocus },
|
|
51
49
|
React.createElement("div", { ref: ref, className: twMerge('fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12', '[@media(max-height:475px)]:p-2', className), ...props },
|
|
52
|
-
React.createElement(Box, { ref: modalDialogRef, asChild: true, backgroundColor:
|
|
53
|
-
? BoxBackgroundColor.BackgroundAlternative
|
|
54
|
-
: BoxBackgroundColor.BackgroundDefault, justifyContent: BoxJustifyContent.Start, alignItems: BoxAlignItems.Stretch, flexDirection: BoxFlexDirection.Column, paddingTop: 4, paddingBottom: 4, ...modalDialogProps, className: twMerge('flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up', TWCLASSMAP_MODAL_CONTENT_SIZE[size], isPureBlack && 'border border-muted', modalDialogProps?.className) },
|
|
50
|
+
React.createElement(Box, { ref: modalDialogRef, asChild: true, backgroundColor: BoxBackgroundColor.BackgroundElevated1, borderColor: BoxBorderColor.BorderAlternative, borderWidth: 1, justifyContent: BoxJustifyContent.Start, alignItems: BoxAlignItems.Stretch, flexDirection: BoxFlexDirection.Column, paddingTop: 4, paddingBottom: 4, ...modalDialogProps, className: twMerge('flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up', TWCLASSMAP_MODAL_CONTENT_SIZE[size], modalDialogProps?.className) },
|
|
55
51
|
React.createElement("section", { role: "dialog", "aria-modal": "true" }, children)))));
|
|
56
52
|
});
|
|
57
53
|
ModalContent.displayName = 'ModalContent';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContent.mjs","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,cAAc;;AAE7D,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EACL,GAAG,EACH,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EAClB,yBAAe;AAChB,OAAO,EAAE,eAAe,EAAE,2BAAiB;AAC3C,OAAO,EAAE,UAAU,EAAE,gCAAsB;
|
|
1
|
+
{"version":3,"file":"ModalContent.mjs","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n Box,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxBorderColor,\n BoxFlexDirection,\n BoxJustifyContent,\n} from '../Box';\nimport { useModalContext } from '../Modal';\nimport { ModalFocus } from '../ModalFocus';\n\nimport {\n MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR,\n TWCLASSMAP_MODAL_CONTENT_SIZE,\n} from './ModalContent.constants';\nimport type { ModalContentProps } from './ModalContent.types';\nimport { ModalContentSize } from './ModalContent.types';\n\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n (\n {\n className,\n children,\n size = ModalContentSize.Sm,\n modalDialogProps,\n ...props\n },\n ref,\n ) => {\n const {\n onClose,\n isClosedOnEscapeKey,\n isClosedOnOutsideClick,\n initialFocusRef,\n finalFocusRef,\n restoreFocus,\n autoFocus,\n } = useModalContext();\n const modalDialogRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const handleEscKey = (event: KeyboardEvent) => {\n if (isClosedOnEscapeKey && event.key === 'Escape') {\n onClose();\n }\n };\n const handleClickOutside = (event: MouseEvent) => {\n if (!isClosedOnOutsideClick) {\n return;\n }\n const target = event.target as HTMLElement | null;\n // Floating UI primitives (Popover, Tooltip, Select dropdown, etc.)\n // that portal alongside the Modal but are part of the modal\n // interaction can opt out of the outside-click handler by setting\n // `data-mm-modal-ignore-outside-click` on their root element.\n if (target?.closest(`[${MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR}]`)) {\n return;\n }\n if (\n modalDialogRef.current &&\n !modalDialogRef.current.contains(target as Node)\n ) {\n onClose();\n }\n };\n\n document.addEventListener('keydown', handleEscKey);\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n document.removeEventListener('keydown', handleEscKey);\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isClosedOnEscapeKey, isClosedOnOutsideClick, onClose]);\n\n return (\n <ModalFocus\n initialFocusRef={initialFocusRef}\n finalFocusRef={finalFocusRef}\n restoreFocus={restoreFocus}\n autoFocus={autoFocus}\n >\n <div\n ref={ref}\n className={twMerge(\n 'fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12',\n '[@media(max-height:475px)]:p-2',\n className,\n )}\n {...props}\n >\n <Box\n ref={modalDialogRef as React.Ref<HTMLDivElement>}\n asChild\n backgroundColor={BoxBackgroundColor.BackgroundElevated1}\n borderColor={BoxBorderColor.BorderAlternative}\n borderWidth={1}\n justifyContent={BoxJustifyContent.Start}\n alignItems={BoxAlignItems.Stretch}\n flexDirection={BoxFlexDirection.Column}\n paddingTop={4}\n paddingBottom={4}\n {...modalDialogProps}\n className={twMerge(\n 'flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up',\n TWCLASSMAP_MODAL_CONTENT_SIZE[size],\n modalDialogProps?.className,\n )}\n >\n <section role=\"dialog\" aria-modal=\"true\">\n {children}\n </section>\n </Box>\n </div>\n </ModalFocus>\n );\n },\n);\n\nModalContent.displayName = 'ModalContent';\n"]}
|
|
@@ -32,7 +32,10 @@ const react_1 = __importStar(require("react"));
|
|
|
32
32
|
* Controlled component: the app owns when pure black is active (e.g. feature
|
|
33
33
|
* flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides
|
|
34
34
|
* come from `data-pure-black` on the document root (see extension `setTheme`);
|
|
35
|
-
* this provider supplies `usePureBlack()` for
|
|
35
|
+
* this provider supplies `usePureBlack()` for any remaining JS consumers.
|
|
36
|
+
*
|
|
37
|
+
* Design-system components no longer branch on pure black for surfaces —
|
|
38
|
+
* use elevated / border-alternative tokens instead (TMCU-1282).
|
|
36
39
|
*
|
|
37
40
|
* @param options - Component props
|
|
38
41
|
* @param options.children - Child components to render
|
|
@@ -48,9 +51,9 @@ exports.PureBlackProvider.displayName = 'PureBlackProvider';
|
|
|
48
51
|
/**
|
|
49
52
|
* Returns whether pure-black dark mode is active in the current subtree.
|
|
50
53
|
*
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
* `@metamask/design-system-twrnc-preset` instead.
|
|
54
|
+
* Prefer semantic tokens (`bg-elevated1`, `border-alternative`, etc.) over
|
|
55
|
+
* branching on this flag in design-system components. On React Native, use
|
|
56
|
+
* `usePureBlack` from `@metamask/design-system-twrnc-preset` instead.
|
|
54
57
|
*
|
|
55
58
|
* @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled
|
|
56
59
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PureBlackProvider.cjs","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAAkE;AAElE,+CAAmD;AAEnD
|
|
1
|
+
{"version":3,"file":"PureBlackProvider.cjs","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAAkE;AAElE,+CAAmD;AAEnD;;;;;;;;;;;;;;;GAeG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,WAAW,GAAG,KAAK,GACI,EAAE,EAAE;IAC3B,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9D,OAAO,CACL,8BAAC,uCAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACpC,QAAQ,CACiB,CAC7B,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,iBAAiB,qBAW5B;AAEF,yBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AAEpD;;;;;;;;GAQG;AACI,MAAM,YAAY,GAAG,GAAY,EAAE;IACxC,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAU,EAAC,uCAAgB,CAAC,CAAC;IACrD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAHW,QAAA,YAAY,gBAGvB","sourcesContent":["import { PureBlackContext } from '@metamask/design-system-shared';\nimport type { PureBlackProviderProps } from '@metamask/design-system-shared';\nimport React, { useContext, useMemo } from 'react';\n\n/**\n * React context for pure-black (OLED) dark mode on web.\n *\n * Controlled component: the app owns when pure black is active (e.g. feature\n * flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides\n * come from `data-pure-black` on the document root (see extension `setTheme`);\n * this provider supplies `usePureBlack()` for any remaining JS consumers.\n *\n * Design-system components no longer branch on pure black for surfaces —\n * use elevated / border-alternative tokens instead (TMCU-1282).\n *\n * @param options - Component props\n * @param options.children - Child components to render\n * @param options.isPureBlack - When true, `usePureBlack()` returns true\n * @returns React component that provides pure-black context to children\n */\nexport const PureBlackProvider = ({\n children,\n isPureBlack = false,\n}: PureBlackProviderProps) => {\n const value = useMemo(() => ({ isPureBlack }), [isPureBlack]);\n\n return (\n <PureBlackContext.Provider value={value}>\n {children}\n </PureBlackContext.Provider>\n );\n};\n\nPureBlackProvider.displayName = 'PureBlackProvider';\n\n/**\n * Returns whether pure-black dark mode is active in the current subtree.\n *\n * Prefer semantic tokens (`bg-elevated1`, `border-alternative`, etc.) over\n * branching on this flag in design-system components. On React Native, use\n * `usePureBlack` from `@metamask/design-system-twrnc-preset` instead.\n *\n * @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled\n */\nexport const usePureBlack = (): boolean => {\n const { isPureBlack } = useContext(PureBlackContext);\n return isPureBlack;\n};\n"]}
|
|
@@ -6,7 +6,10 @@ import React from "react";
|
|
|
6
6
|
* Controlled component: the app owns when pure black is active (e.g. feature
|
|
7
7
|
* flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides
|
|
8
8
|
* come from `data-pure-black` on the document root (see extension `setTheme`);
|
|
9
|
-
* this provider supplies `usePureBlack()` for
|
|
9
|
+
* this provider supplies `usePureBlack()` for any remaining JS consumers.
|
|
10
|
+
*
|
|
11
|
+
* Design-system components no longer branch on pure black for surfaces —
|
|
12
|
+
* use elevated / border-alternative tokens instead (TMCU-1282).
|
|
10
13
|
*
|
|
11
14
|
* @param options - Component props
|
|
12
15
|
* @param options.children - Child components to render
|
|
@@ -20,9 +23,9 @@ export declare const PureBlackProvider: {
|
|
|
20
23
|
/**
|
|
21
24
|
* Returns whether pure-black dark mode is active in the current subtree.
|
|
22
25
|
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
* `@metamask/design-system-twrnc-preset` instead.
|
|
26
|
+
* Prefer semantic tokens (`bg-elevated1`, `border-alternative`, etc.) over
|
|
27
|
+
* branching on this flag in design-system components. On React Native, use
|
|
28
|
+
* `usePureBlack` from `@metamask/design-system-twrnc-preset` instead.
|
|
26
29
|
*
|
|
27
30
|
* @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled
|
|
28
31
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PureBlackProvider.d.cts","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uCAAuC;AAC7E,OAAO,KAA8B,cAAc;AAEnD
|
|
1
|
+
{"version":3,"file":"PureBlackProvider.d.cts","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uCAAuC;AAC7E,OAAO,KAA8B,cAAc;AAEnD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB;iCAG3B,sBAAsB;;CAQxB,CAAC;AAIF;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,QAAO,OAG/B,CAAC"}
|
|
@@ -6,7 +6,10 @@ import React from "react";
|
|
|
6
6
|
* Controlled component: the app owns when pure black is active (e.g. feature
|
|
7
7
|
* flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides
|
|
8
8
|
* come from `data-pure-black` on the document root (see extension `setTheme`);
|
|
9
|
-
* this provider supplies `usePureBlack()` for
|
|
9
|
+
* this provider supplies `usePureBlack()` for any remaining JS consumers.
|
|
10
|
+
*
|
|
11
|
+
* Design-system components no longer branch on pure black for surfaces —
|
|
12
|
+
* use elevated / border-alternative tokens instead (TMCU-1282).
|
|
10
13
|
*
|
|
11
14
|
* @param options - Component props
|
|
12
15
|
* @param options.children - Child components to render
|
|
@@ -20,9 +23,9 @@ export declare const PureBlackProvider: {
|
|
|
20
23
|
/**
|
|
21
24
|
* Returns whether pure-black dark mode is active in the current subtree.
|
|
22
25
|
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
* `@metamask/design-system-twrnc-preset` instead.
|
|
26
|
+
* Prefer semantic tokens (`bg-elevated1`, `border-alternative`, etc.) over
|
|
27
|
+
* branching on this flag in design-system components. On React Native, use
|
|
28
|
+
* `usePureBlack` from `@metamask/design-system-twrnc-preset` instead.
|
|
26
29
|
*
|
|
27
30
|
* @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled
|
|
28
31
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PureBlackProvider.d.mts","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uCAAuC;AAC7E,OAAO,KAA8B,cAAc;AAEnD
|
|
1
|
+
{"version":3,"file":"PureBlackProvider.d.mts","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uCAAuC;AAC7E,OAAO,KAA8B,cAAc;AAEnD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB;iCAG3B,sBAAsB;;CAQxB,CAAC;AAIF;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,QAAO,OAG/B,CAAC"}
|
|
@@ -13,7 +13,10 @@ const React = $importDefault($React);
|
|
|
13
13
|
* Controlled component: the app owns when pure black is active (e.g. feature
|
|
14
14
|
* flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides
|
|
15
15
|
* come from `data-pure-black` on the document root (see extension `setTheme`);
|
|
16
|
-
* this provider supplies `usePureBlack()` for
|
|
16
|
+
* this provider supplies `usePureBlack()` for any remaining JS consumers.
|
|
17
|
+
*
|
|
18
|
+
* Design-system components no longer branch on pure black for surfaces —
|
|
19
|
+
* use elevated / border-alternative tokens instead (TMCU-1282).
|
|
17
20
|
*
|
|
18
21
|
* @param options - Component props
|
|
19
22
|
* @param options.children - Child components to render
|
|
@@ -28,9 +31,9 @@ PureBlackProvider.displayName = 'PureBlackProvider';
|
|
|
28
31
|
/**
|
|
29
32
|
* Returns whether pure-black dark mode is active in the current subtree.
|
|
30
33
|
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* `@metamask/design-system-twrnc-preset` instead.
|
|
34
|
+
* Prefer semantic tokens (`bg-elevated1`, `border-alternative`, etc.) over
|
|
35
|
+
* branching on this flag in design-system components. On React Native, use
|
|
36
|
+
* `usePureBlack` from `@metamask/design-system-twrnc-preset` instead.
|
|
34
37
|
*
|
|
35
38
|
* @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled
|
|
36
39
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PureBlackProvider.mjs","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,gBAAgB,EAAE,uCAAuC;AAElE,OAAO,QAAO,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc;;AAEnD
|
|
1
|
+
{"version":3,"file":"PureBlackProvider.mjs","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,gBAAgB,EAAE,uCAAuC;AAElE,OAAO,QAAO,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc;;AAEnD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,WAAW,GAAG,KAAK,GACI,EAAE,EAAE;IAC3B,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9D,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACpC,QAAQ,CACiB,CAC7B,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AAEpD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAY,EAAE;IACxC,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACrD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC","sourcesContent":["import { PureBlackContext } from '@metamask/design-system-shared';\nimport type { PureBlackProviderProps } from '@metamask/design-system-shared';\nimport React, { useContext, useMemo } from 'react';\n\n/**\n * React context for pure-black (OLED) dark mode on web.\n *\n * Controlled component: the app owns when pure black is active (e.g. feature\n * flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides\n * come from `data-pure-black` on the document root (see extension `setTheme`);\n * this provider supplies `usePureBlack()` for any remaining JS consumers.\n *\n * Design-system components no longer branch on pure black for surfaces —\n * use elevated / border-alternative tokens instead (TMCU-1282).\n *\n * @param options - Component props\n * @param options.children - Child components to render\n * @param options.isPureBlack - When true, `usePureBlack()` returns true\n * @returns React component that provides pure-black context to children\n */\nexport const PureBlackProvider = ({\n children,\n isPureBlack = false,\n}: PureBlackProviderProps) => {\n const value = useMemo(() => ({ isPureBlack }), [isPureBlack]);\n\n return (\n <PureBlackContext.Provider value={value}>\n {children}\n </PureBlackContext.Provider>\n );\n};\n\nPureBlackProvider.displayName = 'PureBlackProvider';\n\n/**\n * Returns whether pure-black dark mode is active in the current subtree.\n *\n * Prefer semantic tokens (`bg-elevated1`, `border-alternative`, etc.) over\n * branching on this flag in design-system components. On React Native, use\n * `usePureBlack` from `@metamask/design-system-twrnc-preset` instead.\n *\n * @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled\n */\nexport const usePureBlack = (): boolean => {\n const { isPureBlack } = useContext(PureBlackContext);\n return isPureBlack;\n};\n"]}
|
|
@@ -63,7 +63,7 @@ exports.Toast = (0, react_1.forwardRef)(({ actionButtonLabel, actionButtonOnClic
|
|
|
63
63
|
: undefined;
|
|
64
64
|
// Toast reuses BannerBase so the web surface stays aligned with the shared
|
|
65
65
|
// banner layout and the React Native Toast API.
|
|
66
|
-
return (react_1.default.createElement(BannerBase_1.BannerBase, { ref: ref, ...resolvedActionProps, ...props, backgroundColor: design_system_shared_1.BoxBackgroundColor.
|
|
66
|
+
return (react_1.default.createElement(BannerBase_1.BannerBase, { ref: ref, ...resolvedActionProps, ...props, backgroundColor: design_system_shared_1.BoxBackgroundColor.BackgroundElevated2, borderColor: design_system_shared_1.BoxBorderColor.BorderMuted, borderWidth: 1, className: (0, tw_merge_1.twMerge)('rounded-xl', className), closeButtonProps: resolvedCloseButtonProps, onClose: onClose, startAccessory: renderSeverityAccessory({
|
|
67
67
|
severity,
|
|
68
68
|
startAccessory,
|
|
69
69
|
iconProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAMwC;AACxC,+CAA0C;AAE1C,uDAA+C;AAC/C,wDAA2C;AAC3C,4CAA+B;AAE/B,2DAA4D;AAG5D,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,SAAS,GACqD,EAAE,EAAE;IAClE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,oCAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,yCAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,8BAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,+BAAQ,CAAC,EAAE,KAAM,SAAS,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEW,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EACE,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,oCAAa,CAAC,OAAO,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,4EAA4E;IAC5E,yDAAyD;IACzD,MAAM,mBAAmB,GACvB,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,iCAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAET,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,2EAA2E;IAC3E,gDAAgD;IAChD,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,KACJ,mBAAmB,KACnB,KAAK,EACT,eAAe,EAAE,yCAAkB,CAAC,
|
|
1
|
+
{"version":3,"file":"Toast.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAMwC;AACxC,+CAA0C;AAE1C,uDAA+C;AAC/C,wDAA2C;AAC3C,4CAA+B;AAE/B,2DAA4D;AAG5D,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,SAAS,GACqD,EAAE,EAAE;IAClE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,oCAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,yCAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,8BAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,+BAAQ,CAAC,EAAE,KAAM,SAAS,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEW,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EACE,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,oCAAa,CAAC,OAAO,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,4EAA4E;IAC5E,yDAAyD;IACzD,MAAM,mBAAmB,GACvB,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,iCAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAET,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,2EAA2E;IAC3E,gDAAgD;IAChD,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,KACJ,mBAAmB,KACnB,KAAK,EACT,eAAe,EAAE,yCAAkB,CAAC,mBAAmB,EACvD,WAAW,EAAE,qCAAc,CAAC,WAAW,EACvC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,IAAA,kBAAO,EAAC,YAAY,EAAE,SAAS,CAAC,EAC3C,gBAAgB,EAAE,wBAAwB,EAC1C,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,uBAAuB,CAAC;YACtC,QAAQ;YACR,cAAc;YACd,SAAS;SACV,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import {\n BoxBackgroundColor,\n BoxBorderColor,\n ButtonSize,\n IconSize,\n ToastSeverity,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport { TOAST_SEVERITY_ICON_MAP } from './Toast.constants';\nimport type { ToastProps } from './Toast.types';\n\nconst renderSeverityAccessory = ({\n severity,\n startAccessory,\n iconProps,\n}: Pick<ToastProps, 'severity' | 'startAccessory' | 'iconProps'>) => {\n if (startAccessory !== null && startAccessory !== undefined) {\n return startAccessory;\n }\n\n if (!severity || severity === ToastSeverity.Default) {\n return undefined;\n }\n\n const { name, color } = TOAST_SEVERITY_ICON_MAP[severity];\n\n return <Icon name={name} color={color} size={IconSize.Lg} {...iconProps} />;\n};\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n (\n {\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n className,\n closeButtonProps,\n iconProps,\n onClose,\n severity = ToastSeverity.Default,\n startAccessory,\n ...props\n },\n ref,\n ) => {\n // Only pass action props through when both the label and handler are set so\n // BannerBase can keep its action button contract simple.\n const resolvedActionProps =\n actionButtonLabel && actionButtonOnClick\n ? {\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps: {\n size: ButtonSize.Sm,\n ...actionButtonProps,\n },\n }\n : {};\n\n // Derive the close button config from the Toast API, keeping the button\n // visible whenever the consumer provides dismiss behavior or overrides.\n const resolvedCloseButtonProps =\n onClose || closeButtonProps\n ? {\n ariaLabel: 'Close toast',\n ...closeButtonProps,\n }\n : undefined;\n\n // Toast reuses BannerBase so the web surface stays aligned with the shared\n // banner layout and the React Native Toast API.\n return (\n <BannerBase\n ref={ref}\n {...resolvedActionProps}\n {...props}\n backgroundColor={BoxBackgroundColor.BackgroundElevated2}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n className={twMerge('rounded-xl', className)}\n closeButtonProps={resolvedCloseButtonProps}\n onClose={onClose}\n startAccessory={renderSeverityAccessory({\n severity,\n startAccessory,\n iconProps,\n })}\n />\n );\n },\n);\n\nToast.displayName = 'Toast';\n"]}
|
|
@@ -44,7 +44,7 @@ export const Toast = forwardRef(({ actionButtonLabel, actionButtonOnClick, actio
|
|
|
44
44
|
: undefined;
|
|
45
45
|
// Toast reuses BannerBase so the web surface stays aligned with the shared
|
|
46
46
|
// banner layout and the React Native Toast API.
|
|
47
|
-
return (React.createElement(BannerBase, { ref: ref, ...resolvedActionProps, ...props, backgroundColor: BoxBackgroundColor.
|
|
47
|
+
return (React.createElement(BannerBase, { ref: ref, ...resolvedActionProps, ...props, backgroundColor: BoxBackgroundColor.BackgroundElevated2, borderColor: BoxBorderColor.BorderMuted, borderWidth: 1, className: twMerge('rounded-xl', className), closeButtonProps: resolvedCloseButtonProps, onClose: onClose, startAccessory: renderSeverityAccessory({
|
|
48
48
|
severity,
|
|
49
49
|
startAccessory,
|
|
50
50
|
iconProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,QAAQ,EACR,aAAa,EACd,uCAAuC;AACxC,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EAAE,uBAAuB,EAAE,8BAA0B;AAG5D,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,SAAS,GACqD,EAAE,EAAE;IAClE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,aAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,KAAM,SAAS,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,aAAa,CAAC,OAAO,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,4EAA4E;IAC5E,yDAAyD;IACzD,MAAM,mBAAmB,GACvB,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,UAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAET,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,2EAA2E;IAC3E,gDAAgD;IAChD,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,KACJ,mBAAmB,KACnB,KAAK,EACT,eAAe,EAAE,kBAAkB,CAAC,
|
|
1
|
+
{"version":3,"file":"Toast.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,QAAQ,EACR,aAAa,EACd,uCAAuC;AACxC,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EAAE,uBAAuB,EAAE,8BAA0B;AAG5D,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,SAAS,GACqD,EAAE,EAAE;IAClE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,aAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,KAAM,SAAS,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,aAAa,CAAC,OAAO,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,4EAA4E;IAC5E,yDAAyD;IACzD,MAAM,mBAAmB,GACvB,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,UAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAET,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,2EAA2E;IAC3E,gDAAgD;IAChD,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,KACJ,mBAAmB,KACnB,KAAK,EACT,eAAe,EAAE,kBAAkB,CAAC,mBAAmB,EACvD,WAAW,EAAE,cAAc,CAAC,WAAW,EACvC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,EAC3C,gBAAgB,EAAE,wBAAwB,EAC1C,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,uBAAuB,CAAC;YACtC,QAAQ;YACR,cAAc;YACd,SAAS;SACV,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import {\n BoxBackgroundColor,\n BoxBorderColor,\n ButtonSize,\n IconSize,\n ToastSeverity,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport { TOAST_SEVERITY_ICON_MAP } from './Toast.constants';\nimport type { ToastProps } from './Toast.types';\n\nconst renderSeverityAccessory = ({\n severity,\n startAccessory,\n iconProps,\n}: Pick<ToastProps, 'severity' | 'startAccessory' | 'iconProps'>) => {\n if (startAccessory !== null && startAccessory !== undefined) {\n return startAccessory;\n }\n\n if (!severity || severity === ToastSeverity.Default) {\n return undefined;\n }\n\n const { name, color } = TOAST_SEVERITY_ICON_MAP[severity];\n\n return <Icon name={name} color={color} size={IconSize.Lg} {...iconProps} />;\n};\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n (\n {\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n className,\n closeButtonProps,\n iconProps,\n onClose,\n severity = ToastSeverity.Default,\n startAccessory,\n ...props\n },\n ref,\n ) => {\n // Only pass action props through when both the label and handler are set so\n // BannerBase can keep its action button contract simple.\n const resolvedActionProps =\n actionButtonLabel && actionButtonOnClick\n ? {\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps: {\n size: ButtonSize.Sm,\n ...actionButtonProps,\n },\n }\n : {};\n\n // Derive the close button config from the Toast API, keeping the button\n // visible whenever the consumer provides dismiss behavior or overrides.\n const resolvedCloseButtonProps =\n onClose || closeButtonProps\n ? {\n ariaLabel: 'Close toast',\n ...closeButtonProps,\n }\n : undefined;\n\n // Toast reuses BannerBase so the web surface stays aligned with the shared\n // banner layout and the React Native Toast API.\n return (\n <BannerBase\n ref={ref}\n {...resolvedActionProps}\n {...props}\n backgroundColor={BoxBackgroundColor.BackgroundElevated2}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n className={twMerge('rounded-xl', className)}\n closeButtonProps={resolvedCloseButtonProps}\n onClose={onClose}\n startAccessory={renderSeverityAccessory({\n severity,\n startAccessory,\n iconProps,\n })}\n />\n );\n },\n);\n\nToast.displayName = 'Toast';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metamask/design-system-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.36.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.33.0",
|
|
52
52
|
"@metamask/jazzicon": "^2.0.0",
|
|
53
53
|
"@radix-ui/react-slot": "^1.1.0",
|
|
54
54
|
"blo": "^2.0.0",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"@figma/code-connect": "^1.4.9",
|
|
60
60
|
"@jest/globals": "^29.7.0",
|
|
61
61
|
"@metamask/auto-changelog": "^6.1.1",
|
|
62
|
-
"@metamask/design-system-tailwind-preset": "^0.
|
|
62
|
+
"@metamask/design-system-tailwind-preset": "^0.11.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.11.0",
|
|
87
|
+
"@metamask/design-tokens": "^9.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"
|