@metamask-previews/design-system-react 0.22.0-preview.178e60f → 0.23.1-preview.620b9f3
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 +25 -1
- package/dist/components/BannerAlert/BannerAlert.d.cts +58 -30
- package/dist/components/BannerAlert/BannerAlert.d.cts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.d.mts +58 -30
- package/dist/components/BannerAlert/BannerAlert.d.mts.map +1 -1
- package/dist/components/BannerBase/BannerBase.d.cts +58 -30
- package/dist/components/BannerBase/BannerBase.d.cts.map +1 -1
- package/dist/components/BannerBase/BannerBase.d.mts +58 -30
- package/dist/components/BannerBase/BannerBase.d.mts.map +1 -1
- package/dist/components/HelpText/HelpText.cjs +13 -0
- package/dist/components/HelpText/HelpText.cjs.map +1 -0
- package/dist/components/HelpText/HelpText.constants.cjs +11 -0
- package/dist/components/HelpText/HelpText.constants.cjs.map +1 -0
- package/dist/components/HelpText/HelpText.constants.d.cts +3 -0
- package/dist/components/HelpText/HelpText.constants.d.cts.map +1 -0
- package/dist/components/HelpText/HelpText.constants.d.mts +3 -0
- package/dist/components/HelpText/HelpText.constants.d.mts.map +1 -0
- package/dist/components/HelpText/HelpText.constants.mjs +8 -0
- package/dist/components/HelpText/HelpText.constants.mjs.map +1 -0
- package/dist/components/HelpText/HelpText.d.cts +4 -0
- package/dist/components/HelpText/HelpText.d.cts.map +1 -0
- package/dist/components/HelpText/HelpText.d.mts +4 -0
- package/dist/components/HelpText/HelpText.d.mts.map +1 -0
- package/dist/components/HelpText/HelpText.mjs +13 -0
- package/dist/components/HelpText/HelpText.mjs.map +1 -0
- package/dist/components/HelpText/HelpText.types.cjs +3 -0
- package/dist/components/HelpText/HelpText.types.cjs.map +1 -0
- package/dist/components/HelpText/HelpText.types.d.cts +9 -0
- package/dist/components/HelpText/HelpText.types.d.cts.map +1 -0
- package/dist/components/HelpText/HelpText.types.d.mts +9 -0
- package/dist/components/HelpText/HelpText.types.d.mts.map +1 -0
- package/dist/components/HelpText/HelpText.types.mjs +2 -0
- package/dist/components/HelpText/HelpText.types.mjs.map +1 -0
- package/dist/components/HelpText/index.cjs +8 -0
- package/dist/components/HelpText/index.cjs.map +1 -0
- package/dist/components/HelpText/index.d.cts +4 -0
- package/dist/components/HelpText/index.d.cts.map +1 -0
- package/dist/components/HelpText/index.d.mts +4 -0
- package/dist/components/HelpText/index.d.mts.map +1 -0
- package/dist/components/HelpText/index.mjs +3 -0
- package/dist/components/HelpText/index.mjs.map +1 -0
- package/dist/components/Icon/icons/Telegram.cjs +1 -1
- package/dist/components/Icon/icons/Telegram.cjs.map +1 -1
- package/dist/components/Icon/icons/Telegram.mjs +1 -1
- package/dist/components/Icon/icons/Telegram.mjs.map +1 -1
- package/dist/components/Label/Label.cjs +38 -0
- package/dist/components/Label/Label.cjs.map +1 -0
- package/dist/components/Label/Label.d.cts +4 -0
- package/dist/components/Label/Label.d.cts.map +1 -0
- package/dist/components/Label/Label.d.mts +4 -0
- package/dist/components/Label/Label.d.mts.map +1 -0
- package/dist/components/Label/Label.mjs +19 -0
- package/dist/components/Label/Label.mjs.map +1 -0
- package/dist/components/Label/Label.types.cjs +3 -0
- package/dist/components/Label/Label.types.cjs.map +1 -0
- package/dist/components/Label/Label.types.d.cts +27 -0
- package/dist/components/Label/Label.types.d.cts.map +1 -0
- package/dist/components/Label/Label.types.d.mts +27 -0
- package/dist/components/Label/Label.types.d.mts.map +1 -0
- package/dist/components/Label/Label.types.mjs +2 -0
- package/dist/components/Label/Label.types.mjs.map +1 -0
- package/dist/components/Label/index.cjs +6 -0
- package/dist/components/Label/index.cjs.map +1 -0
- package/dist/components/Label/index.d.cts +3 -0
- package/dist/components/Label/index.d.cts.map +1 -0
- package/dist/components/Label/index.d.mts +3 -0
- package/dist/components/Label/index.d.mts.map +1 -0
- package/dist/components/Label/index.mjs +2 -0
- package/dist/components/Label/index.mjs.map +1 -0
- package/dist/components/Modal/Modal.types.cjs.map +1 -1
- package/dist/components/Modal/Modal.types.d.cts +2 -2
- package/dist/components/Modal/Modal.types.d.cts.map +1 -1
- package/dist/components/Modal/Modal.types.d.mts +2 -2
- package/dist/components/Modal/Modal.types.d.mts.map +1 -1
- package/dist/components/Modal/Modal.types.mjs.map +1 -1
- package/dist/components/ModalFocus/ModalFocus.types.cjs.map +1 -1
- package/dist/components/ModalFocus/ModalFocus.types.d.cts +2 -2
- package/dist/components/ModalFocus/ModalFocus.types.d.cts.map +1 -1
- package/dist/components/ModalFocus/ModalFocus.types.d.mts +2 -2
- package/dist/components/ModalFocus/ModalFocus.types.d.mts.map +1 -1
- package/dist/components/ModalFocus/ModalFocus.types.mjs.map +1 -1
- package/dist/components/ModalHeader/ModalHeader.cjs +55 -0
- package/dist/components/ModalHeader/ModalHeader.cjs.map +1 -0
- package/dist/components/ModalHeader/ModalHeader.d.cts +55 -0
- package/dist/components/ModalHeader/ModalHeader.d.cts.map +1 -0
- package/dist/components/ModalHeader/ModalHeader.d.mts +55 -0
- package/dist/components/ModalHeader/ModalHeader.d.mts.map +1 -0
- package/dist/components/ModalHeader/ModalHeader.mjs +36 -0
- package/dist/components/ModalHeader/ModalHeader.mjs.map +1 -0
- package/dist/components/ModalHeader/ModalHeader.types.cjs +3 -0
- package/dist/components/ModalHeader/ModalHeader.types.cjs.map +1 -0
- package/dist/components/ModalHeader/ModalHeader.types.d.cts +69 -0
- package/dist/components/ModalHeader/ModalHeader.types.d.cts.map +1 -0
- package/dist/components/ModalHeader/ModalHeader.types.d.mts +69 -0
- package/dist/components/ModalHeader/ModalHeader.types.d.mts.map +1 -0
- package/dist/components/ModalHeader/ModalHeader.types.mjs +2 -0
- package/dist/components/ModalHeader/ModalHeader.types.mjs.map +1 -0
- package/dist/components/ModalHeader/index.cjs +6 -0
- package/dist/components/ModalHeader/index.cjs.map +1 -0
- package/dist/components/ModalHeader/index.d.cts +3 -0
- package/dist/components/ModalHeader/index.d.cts.map +1 -0
- package/dist/components/ModalHeader/index.d.mts +3 -0
- package/dist/components/ModalHeader/index.d.mts.map +1 -0
- package/dist/components/ModalHeader/index.mjs +2 -0
- package/dist/components/ModalHeader/index.mjs.map +1 -0
- package/dist/components/PopoverHeader/PopoverHeader.cjs +60 -0
- package/dist/components/PopoverHeader/PopoverHeader.cjs.map +1 -0
- package/dist/components/PopoverHeader/PopoverHeader.d.cts +55 -0
- package/dist/components/PopoverHeader/PopoverHeader.d.cts.map +1 -0
- package/dist/components/PopoverHeader/PopoverHeader.d.mts +55 -0
- package/dist/components/PopoverHeader/PopoverHeader.d.mts.map +1 -0
- package/dist/components/PopoverHeader/PopoverHeader.mjs +41 -0
- package/dist/components/PopoverHeader/PopoverHeader.mjs.map +1 -0
- package/dist/components/PopoverHeader/PopoverHeader.types.cjs +3 -0
- package/dist/components/PopoverHeader/PopoverHeader.types.cjs.map +1 -0
- package/dist/components/PopoverHeader/PopoverHeader.types.d.cts +70 -0
- package/dist/components/PopoverHeader/PopoverHeader.types.d.cts.map +1 -0
- package/dist/components/PopoverHeader/PopoverHeader.types.d.mts +70 -0
- package/dist/components/PopoverHeader/PopoverHeader.types.d.mts.map +1 -0
- package/dist/components/PopoverHeader/PopoverHeader.types.mjs +2 -0
- package/dist/components/PopoverHeader/PopoverHeader.types.mjs.map +1 -0
- package/dist/components/PopoverHeader/index.cjs +6 -0
- package/dist/components/PopoverHeader/index.cjs.map +1 -0
- package/dist/components/PopoverHeader/index.d.cts +3 -0
- package/dist/components/PopoverHeader/index.d.cts.map +1 -0
- package/dist/components/PopoverHeader/index.d.mts +3 -0
- package/dist/components/PopoverHeader/index.d.mts.map +1 -0
- package/dist/components/PopoverHeader/index.mjs +2 -0
- package/dist/components/PopoverHeader/index.mjs.map +1 -0
- package/dist/components/SensitiveText/SensitiveText.cjs +47 -0
- package/dist/components/SensitiveText/SensitiveText.cjs.map +1 -0
- package/dist/components/SensitiveText/SensitiveText.d.cts +4 -0
- package/dist/components/SensitiveText/SensitiveText.d.cts.map +1 -0
- package/dist/components/SensitiveText/SensitiveText.d.mts +4 -0
- package/dist/components/SensitiveText/SensitiveText.d.mts.map +1 -0
- package/dist/components/SensitiveText/SensitiveText.mjs +27 -0
- package/dist/components/SensitiveText/SensitiveText.mjs.map +1 -0
- package/dist/components/SensitiveText/SensitiveText.types.cjs +3 -0
- package/dist/components/SensitiveText/SensitiveText.types.cjs.map +1 -0
- package/dist/components/SensitiveText/SensitiveText.types.d.cts +11 -0
- package/dist/components/SensitiveText/SensitiveText.types.d.cts.map +1 -0
- package/dist/components/SensitiveText/SensitiveText.types.d.mts +11 -0
- package/dist/components/SensitiveText/SensitiveText.types.d.mts.map +1 -0
- package/dist/components/SensitiveText/SensitiveText.types.mjs +2 -0
- package/dist/components/SensitiveText/SensitiveText.types.mjs.map +1 -0
- package/dist/components/SensitiveText/index.cjs +8 -0
- package/dist/components/SensitiveText/index.cjs.map +1 -0
- package/dist/components/SensitiveText/index.d.cts +4 -0
- package/dist/components/SensitiveText/index.d.cts.map +1 -0
- package/dist/components/SensitiveText/index.d.mts +4 -0
- package/dist/components/SensitiveText/index.d.mts.map +1 -0
- package/dist/components/SensitiveText/index.mjs +3 -0
- package/dist/components/SensitiveText/index.mjs.map +1 -0
- package/dist/components/Text/Text.cjs +3 -1
- package/dist/components/Text/Text.cjs.map +1 -1
- package/dist/components/Text/Text.constants.cjs.map +1 -1
- package/dist/components/Text/Text.constants.d.cts +1 -1
- package/dist/components/Text/Text.constants.d.cts.map +1 -1
- package/dist/components/Text/Text.constants.d.mts +1 -1
- package/dist/components/Text/Text.constants.d.mts.map +1 -1
- package/dist/components/Text/Text.constants.mjs.map +1 -1
- package/dist/components/Text/Text.d.cts.map +1 -1
- package/dist/components/Text/Text.d.mts.map +1 -1
- package/dist/components/Text/Text.mjs +3 -1
- package/dist/components/Text/Text.mjs.map +1 -1
- package/dist/components/Text/Text.types.cjs.map +1 -1
- package/dist/components/Text/Text.types.d.cts +2 -2
- package/dist/components/Text/Text.types.d.cts.map +1 -1
- package/dist/components/Text/Text.types.d.mts +2 -2
- package/dist/components/Text/Text.types.d.mts.map +1 -1
- package/dist/components/Text/Text.types.mjs.map +1 -1
- package/dist/components/index.cjs +14 -2
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.d.cts +10 -0
- package/dist/components/index.d.cts.map +1 -1
- package/dist/components/index.d.mts +10 -0
- package/dist/components/index.d.mts.map +1 -1
- package/dist/components/index.mjs +5 -0
- package/dist/components/index.mjs.map +1 -1
- package/package.json +8 -6
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/HelpText/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,gDAAgD;AAC3E,OAAO,EAAE,QAAQ,EAAE,uBAAmB","sourcesContent":["export { HelpTextSeverity } from '@metamask-previews/design-system-shared';\nexport { HelpText } from './HelpText';\nexport type { HelpTextProps } from './HelpText.types';\n"]}
|
|
@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
26
26
|
const React = __importStar(require("react"));
|
|
27
27
|
const react_1 = require("react");
|
|
28
28
|
const SvgTelegram = (props, ref) => React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", ref: ref, ...props },
|
|
29
|
-
React.createElement("path", { d: "
|
|
29
|
+
React.createElement("path", { d: "M20.295 3.813s1.85-.721 1.696 1.03c-.052.722-.514 3.247-.874 5.978l-1.233 8.09s-.103 1.186-1.028 1.392-2.313-.721-2.57-.928c-.205-.154-3.854-2.473-5.14-3.607-.359-.309-.77-.927.052-1.649l5.397-5.153c.616-.618 1.233-2.061-1.337-.309l-7.195 4.896s-.822.515-2.364.051l-3.34-1.03s-1.234-.774.873-1.547c5.14-2.422 11.461-4.895 17.063-7.214" }));
|
|
30
30
|
const ForwardRef = (0, react_1.forwardRef)(SvgTelegram);
|
|
31
31
|
exports.default = ForwardRef;
|
|
32
32
|
//# sourceMappingURL=Telegram.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Telegram.cjs","sourceRoot":"","sources":["../../../../src/components/Icon/icons/Telegram.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,iCAAwC;AACxC,MAAM,WAAW,GAAG,CAAC,KAA8B,EAAE,GAAuB,EAAE,EAAE,CAAC,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,GAAG,EAAE,GAAG,KAAM,KAAK;IAAE,8BAAM,CAAC,EAAC,
|
|
1
|
+
{"version":3,"file":"Telegram.cjs","sourceRoot":"","sources":["../../../../src/components/Icon/icons/Telegram.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,iCAAwC;AACxC,MAAM,WAAW,GAAG,CAAC,KAA8B,EAAE,GAAuB,EAAE,EAAE,CAAC,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,GAAG,EAAE,GAAG,KAAM,KAAK;IAAE,8BAAM,CAAC,EAAC,gVAAgV,GAAG,CAAM,CAAC;AACxhB,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,WAAW,CAAC,CAAC;AAC3C,kBAAe,UAAU,CAAC","sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\nconst SvgTelegram = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" ref={ref} {...props}><path d=\"M20.295 3.813s1.85-.721 1.696 1.03c-.052.722-.514 3.247-.874 5.978l-1.233 8.09s-.103 1.186-1.028 1.392-2.313-.721-2.57-.928c-.205-.154-3.854-2.473-5.14-3.607-.359-.309-.77-.927.052-1.649l5.397-5.153c.616-.618 1.233-2.061-1.337-.309l-7.195 4.896s-.822.515-2.364.051l-3.34-1.03s-1.234-.774.873-1.547c5.14-2.422 11.461-4.895 17.063-7.214\" /></svg>;\nconst ForwardRef = forwardRef(SvgTelegram);\nexport default ForwardRef;"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
const SvgTelegram = (props, ref) => React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", ref: ref, ...props },
|
|
4
|
-
React.createElement("path", { d: "
|
|
4
|
+
React.createElement("path", { d: "M20.295 3.813s1.85-.721 1.696 1.03c-.052.722-.514 3.247-.874 5.978l-1.233 8.09s-.103 1.186-1.028 1.392-2.313-.721-2.57-.928c-.205-.154-3.854-2.473-5.14-3.607-.359-.309-.77-.927.052-1.649l5.397-5.153c.616-.618 1.233-2.061-1.337-.309l-7.195 4.896s-.822.515-2.364.051l-3.34-1.03s-1.234-.774.873-1.547c5.14-2.422 11.461-4.895 17.063-7.214" }));
|
|
5
5
|
const ForwardRef = forwardRef(SvgTelegram);
|
|
6
6
|
export default ForwardRef;
|
|
7
7
|
//# sourceMappingURL=Telegram.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Telegram.mjs","sourceRoot":"","sources":["../../../../src/components/Icon/icons/Telegram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,cAAc;AAE/B,OAAO,EAAO,UAAU,EAAE,cAAc;AACxC,MAAM,WAAW,GAAG,CAAC,KAA8B,EAAE,GAAuB,EAAE,EAAE,CAAC,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,GAAG,EAAE,GAAG,KAAM,KAAK;IAAE,8BAAM,CAAC,EAAC,
|
|
1
|
+
{"version":3,"file":"Telegram.mjs","sourceRoot":"","sources":["../../../../src/components/Icon/icons/Telegram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,cAAc;AAE/B,OAAO,EAAO,UAAU,EAAE,cAAc;AACxC,MAAM,WAAW,GAAG,CAAC,KAA8B,EAAE,GAAuB,EAAE,EAAE,CAAC,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,GAAG,EAAE,GAAG,KAAM,KAAK;IAAE,8BAAM,CAAC,EAAC,gVAAgV,GAAG,CAAM,CAAC;AACxhB,MAAM,UAAU,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;AAC3C,eAAe,UAAU,CAAC","sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\nconst SvgTelegram = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" ref={ref} {...props}><path d=\"M20.295 3.813s1.85-.721 1.696 1.03c-.052.722-.514 3.247-.874 5.978l-1.233 8.09s-.103 1.186-1.028 1.392-2.313-.721-2.57-.928c-.205-.154-3.854-2.473-5.14-3.607-.359-.309-.77-.927.052-1.649l5.397-5.153c.616-.618 1.233-2.061-1.337-.309l-7.195 4.896s-.822.515-2.364.051l-3.34-1.03s-1.234-.774.873-1.547c5.14-2.422 11.461-4.895 17.063-7.214\" /></svg>;\nconst ForwardRef = forwardRef(SvgTelegram);\nexport default ForwardRef;"]}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
exports.Label = void 0;
|
|
27
|
+
const design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
28
|
+
const react_1 = __importStar(require("react"));
|
|
29
|
+
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
30
|
+
const Text_1 = require("../Text/index.cjs");
|
|
31
|
+
exports.Label = (0, react_1.forwardRef)(({ htmlFor, className, children, ...textProps }, ref) => (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyMd, fontWeight: design_system_shared_1.FontWeight.Medium, ...textProps, asChild: true, className: (0, tw_merge_1.twMerge)('inline-flex items-center',
|
|
32
|
+
// Mirror the legacy `mm-label--html-for` cursor affordance: when the
|
|
33
|
+
// label is associated with an input, clicking it focuses the input,
|
|
34
|
+
// so signal the interactive surface with a pointer cursor.
|
|
35
|
+
htmlFor && 'cursor-pointer', className) },
|
|
36
|
+
react_1.default.createElement("label", { ref: ref, htmlFor: htmlFor }, children))));
|
|
37
|
+
exports.Label.displayName = 'Label';
|
|
38
|
+
//# sourceMappingURL=Label.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Label.cjs","sourceRoot":"","sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAAkF;AAClF,+CAA0C;AAE1C,uDAA+C;AAC/C,4CAA+B;AAIlB,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvD,8BAAC,WAAI,IACH,OAAO,EAAE,kCAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM,KACzB,SAAS,EACb,OAAO,QACP,SAAS,EAAE,IAAA,kBAAO,EAChB,0BAA0B;IAC1B,qEAAqE;IACrE,oEAAoE;IACpE,2DAA2D;IAC3D,OAAO,IAAI,gBAAgB,EAC3B,SAAS,CACV;IAED,yCAAO,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,IAC9B,QAAQ,CACH,CACH,CACR,CACF,CAAC;AAEF,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import { FontWeight, TextVariant } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text } from '../Text';\n\nimport type { LabelProps } from './Label.types';\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ htmlFor, className, children, ...textProps }, ref) => (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...textProps}\n asChild\n className={twMerge(\n 'inline-flex items-center',\n // Mirror the legacy `mm-label--html-for` cursor affordance: when the\n // label is associated with an input, clicking it focuses the input,\n // so signal the interactive surface with a pointer cursor.\n htmlFor && 'cursor-pointer',\n className,\n )}\n >\n <label ref={ref} htmlFor={htmlFor}>\n {children}\n </label>\n </Text>\n ),\n);\n\nLabel.displayName = 'Label';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Label.d.cts","sourceRoot":"","sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,UAAU,EAAE,0BAAsB;AAEhD,eAAO,MAAM,KAAK,kGAqBjB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Label.d.mts","sourceRoot":"","sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,UAAU,EAAE,0BAAsB;AAEhD,eAAO,MAAM,KAAK,kGAqBjB,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
function $importDefault(module) {
|
|
2
|
+
if (module?.__esModule) {
|
|
3
|
+
return module.default;
|
|
4
|
+
}
|
|
5
|
+
return module;
|
|
6
|
+
}
|
|
7
|
+
import { FontWeight, TextVariant } from "@metamask-previews/design-system-shared";
|
|
8
|
+
import $React, { forwardRef } from "react";
|
|
9
|
+
const React = $importDefault($React);
|
|
10
|
+
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
11
|
+
import { Text } from "../Text/index.mjs";
|
|
12
|
+
export const Label = forwardRef(({ htmlFor, className, children, ...textProps }, ref) => (React.createElement(Text, { variant: TextVariant.BodyMd, fontWeight: FontWeight.Medium, ...textProps, asChild: true, className: twMerge('inline-flex items-center',
|
|
13
|
+
// Mirror the legacy `mm-label--html-for` cursor affordance: when the
|
|
14
|
+
// label is associated with an input, clicking it focuses the input,
|
|
15
|
+
// so signal the interactive surface with a pointer cursor.
|
|
16
|
+
htmlFor && 'cursor-pointer', className) },
|
|
17
|
+
React.createElement("label", { ref: ref, htmlFor: htmlFor }, children))));
|
|
18
|
+
Label.displayName = 'Label';
|
|
19
|
+
//# sourceMappingURL=Label.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Label.mjs","sourceRoot":"","sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,gDAAgD;AAClF,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAI/B,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvD,oBAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,UAAU,CAAC,MAAM,KACzB,SAAS,EACb,OAAO,QACP,SAAS,EAAE,OAAO,CAChB,0BAA0B;IAC1B,qEAAqE;IACrE,oEAAoE;IACpE,2DAA2D;IAC3D,OAAO,IAAI,gBAAgB,EAC3B,SAAS,CACV;IAED,+BAAO,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,IAC9B,QAAQ,CACH,CACH,CACR,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import { FontWeight, TextVariant } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text } from '../Text';\n\nimport type { LabelProps } from './Label.types';\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ htmlFor, className, children, ...textProps }, ref) => (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...textProps}\n asChild\n className={twMerge(\n 'inline-flex items-center',\n // Mirror the legacy `mm-label--html-for` cursor affordance: when the\n // label is associated with an input, clicking it focuses the input,\n // so signal the interactive surface with a pointer cursor.\n htmlFor && 'cursor-pointer',\n className,\n )}\n >\n <label ref={ref} htmlFor={htmlFor}>\n {children}\n </label>\n </Text>\n ),\n);\n\nLabel.displayName = 'Label';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Label.types.cjs","sourceRoot":"","sources":["../../../src/components/Label/Label.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport type { TextProps } from '../Text';\n\n/**\n * `Label` extends `TextProps` so consumers can pass any Text styling override\n * (`color`, `fontWeight`, `variant`, `textAlign`, etc.) directly. The `asChild`\n * prop is owned by the component (it always renders into a semantic\n * `<label>` element) and is intentionally excluded.\n */\nexport type LabelProps = Omit<TextProps, 'asChild' | 'children'> &\n Omit<ComponentProps<'label'>, keyof TextProps | 'className'> & {\n /**\n * The `id` of the form input this label is associated with. When set,\n * clicking the label focuses the corresponding input — the standard HTML\n * `<label htmlFor>` form-association behavior. The component also adds\n * `cursor-pointer` to communicate the affordance.\n */\n htmlFor?: string;\n /**\n * Optional prop for additional CSS classes applied to the `<label>`\n * element. Merged with the component's defaults via `twMerge`.\n */\n className?: string;\n /**\n * The label content.\n */\n children: ReactNode;\n };\n"]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { ComponentProps, ReactNode } from "react";
|
|
2
|
+
import type { TextProps } from "../Text/index.cjs";
|
|
3
|
+
/**
|
|
4
|
+
* `Label` extends `TextProps` so consumers can pass any Text styling override
|
|
5
|
+
* (`color`, `fontWeight`, `variant`, `textAlign`, etc.) directly. The `asChild`
|
|
6
|
+
* prop is owned by the component (it always renders into a semantic
|
|
7
|
+
* `<label>` element) and is intentionally excluded.
|
|
8
|
+
*/
|
|
9
|
+
export type LabelProps = Omit<TextProps, 'asChild' | 'children'> & Omit<ComponentProps<'label'>, keyof TextProps | 'className'> & {
|
|
10
|
+
/**
|
|
11
|
+
* The `id` of the form input this label is associated with. When set,
|
|
12
|
+
* clicking the label focuses the corresponding input — the standard HTML
|
|
13
|
+
* `<label htmlFor>` form-association behavior. The component also adds
|
|
14
|
+
* `cursor-pointer` to communicate the affordance.
|
|
15
|
+
*/
|
|
16
|
+
htmlFor?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Optional prop for additional CSS classes applied to the `<label>`
|
|
19
|
+
* element. Merged with the component's defaults via `twMerge`.
|
|
20
|
+
*/
|
|
21
|
+
className?: string;
|
|
22
|
+
/**
|
|
23
|
+
* The label content.
|
|
24
|
+
*/
|
|
25
|
+
children: ReactNode;
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=Label.types.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Label.types.d.cts","sourceRoot":"","sources":["../../../src/components/Label/Label.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc;AAEvD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC,GAC9D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG;IAC7D;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { ComponentProps, ReactNode } from "react";
|
|
2
|
+
import type { TextProps } from "../Text/index.mjs";
|
|
3
|
+
/**
|
|
4
|
+
* `Label` extends `TextProps` so consumers can pass any Text styling override
|
|
5
|
+
* (`color`, `fontWeight`, `variant`, `textAlign`, etc.) directly. The `asChild`
|
|
6
|
+
* prop is owned by the component (it always renders into a semantic
|
|
7
|
+
* `<label>` element) and is intentionally excluded.
|
|
8
|
+
*/
|
|
9
|
+
export type LabelProps = Omit<TextProps, 'asChild' | 'children'> & Omit<ComponentProps<'label'>, keyof TextProps | 'className'> & {
|
|
10
|
+
/**
|
|
11
|
+
* The `id` of the form input this label is associated with. When set,
|
|
12
|
+
* clicking the label focuses the corresponding input — the standard HTML
|
|
13
|
+
* `<label htmlFor>` form-association behavior. The component also adds
|
|
14
|
+
* `cursor-pointer` to communicate the affordance.
|
|
15
|
+
*/
|
|
16
|
+
htmlFor?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Optional prop for additional CSS classes applied to the `<label>`
|
|
19
|
+
* element. Merged with the component's defaults via `twMerge`.
|
|
20
|
+
*/
|
|
21
|
+
className?: string;
|
|
22
|
+
/**
|
|
23
|
+
* The label content.
|
|
24
|
+
*/
|
|
25
|
+
children: ReactNode;
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=Label.types.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Label.types.d.mts","sourceRoot":"","sources":["../../../src/components/Label/Label.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc;AAEvD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC,GAC9D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG;IAC7D;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Label.types.mjs","sourceRoot":"","sources":["../../../src/components/Label/Label.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport type { TextProps } from '../Text';\n\n/**\n * `Label` extends `TextProps` so consumers can pass any Text styling override\n * (`color`, `fontWeight`, `variant`, `textAlign`, etc.) directly. The `asChild`\n * prop is owned by the component (it always renders into a semantic\n * `<label>` element) and is intentionally excluded.\n */\nexport type LabelProps = Omit<TextProps, 'asChild' | 'children'> &\n Omit<ComponentProps<'label'>, keyof TextProps | 'className'> & {\n /**\n * The `id` of the form input this label is associated with. When set,\n * clicking the label focuses the corresponding input — the standard HTML\n * `<label htmlFor>` form-association behavior. The component also adds\n * `cursor-pointer` to communicate the affordance.\n */\n htmlFor?: string;\n /**\n * Optional prop for additional CSS classes applied to the `<label>`\n * element. Merged with the component's defaults via `twMerge`.\n */\n className?: string;\n /**\n * The label content.\n */\n children: ReactNode;\n };\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Label = void 0;
|
|
4
|
+
var Label_1 = require("./Label.cjs");
|
|
5
|
+
Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return Label_1.Label; } });
|
|
6
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":";;;AAAA,qCAAgC;AAAvB,8FAAA,KAAK,OAAA","sourcesContent":["export { Label } from './Label';\nexport type { LabelProps } from './Label.types';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,oBAAgB;AAChC,YAAY,EAAE,UAAU,EAAE,0BAAsB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,oBAAgB;AAChC,YAAY,EAAE,UAAU,EAAE,0BAAsB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,oBAAgB","sourcesContent":["export { Label } from './Label';\nexport type { LabelProps } from './Label.types';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.types.cjs","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ReactNode, RefObject } from 'react';\n\nimport type { FocusableElement } from '../ModalFocus/ModalFocus.types';\n\nexport type ModalProps = Omit<ComponentProps<'div'>, 'children'> & {\n /**\n * Whether the modal is open. When `false`, nothing is rendered (and the\n * portal subtree is unmounted, releasing focus state).\n */\n isOpen: boolean;\n /**\n * Fired when the modal requests close — wire your state setter here.\n * Triggered by the configured close-on-overlay-click and close-on-escape\n * behaviors as well as any custom close affordances inside `children`.\n */\n onClose: () => void;\n /**\n * The modal subtree. Typically composed of `ModalOverlay` and\n * `ModalContent` (which read shared behavior via `useModalContext`).\n */\n children: ReactNode;\n /**\n * Optional prop for additional CSS classes to be applied to the Modal root.\n * Merged with the component's defaults via `twMerge`.\n */\n className?: string;\n /**\n * When `true`, clicking the overlay (outside the modal content) closes the\n * modal.\n *\n * @default true\n */\n isClosedOnOutsideClick?: boolean;\n /**\n * When `true`, pressing Escape closes the modal. When `false`, ensure the\n * modal exposes a visible/keyboard-reachable close affordance for\n * keyboard-only users.\n *\n * @default true\n */\n isClosedOnEscapeKey?: boolean;\n /**\n * When `true`, the first focusable element within the modal subtree is\n * focused on mount.\n *\n * @default true\n */\n autoFocus?: boolean;\n /**\n * The element to receive focus when the modal opens. Overrides `autoFocus`'s\n * \"first focusable\" behavior.\n */\n initialFocusRef?: RefObject<FocusableElement>;\n /**\n * The element to receive focus when the modal closes/unmounts.\n */\n finalFocusRef?: RefObject<FocusableElement>;\n /**\n * When `true`, focus is restored to the element that opened the modal once\n * the modal closes. Ignored when `finalFocusRef` is provided.\n *\n * @default false\n */\n restoreFocus?: boolean;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"Modal.types.cjs","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ReactNode, RefObject } from 'react';\n\nimport type { FocusableElement } from '../ModalFocus/ModalFocus.types';\n\nexport type ModalProps = Omit<ComponentProps<'div'>, 'children'> & {\n /**\n * Whether the modal is open. When `false`, nothing is rendered (and the\n * portal subtree is unmounted, releasing focus state).\n */\n isOpen: boolean;\n /**\n * Fired when the modal requests close — wire your state setter here.\n * Triggered by the configured close-on-overlay-click and close-on-escape\n * behaviors as well as any custom close affordances inside `children`.\n */\n onClose: () => void;\n /**\n * The modal subtree. Typically composed of `ModalOverlay` and\n * `ModalContent` (which read shared behavior via `useModalContext`).\n */\n children: ReactNode;\n /**\n * Optional prop for additional CSS classes to be applied to the Modal root.\n * Merged with the component's defaults via `twMerge`.\n */\n className?: string;\n /**\n * When `true`, clicking the overlay (outside the modal content) closes the\n * modal.\n *\n * @default true\n */\n isClosedOnOutsideClick?: boolean;\n /**\n * When `true`, pressing Escape closes the modal. When `false`, ensure the\n * modal exposes a visible/keyboard-reachable close affordance for\n * keyboard-only users.\n *\n * @default true\n */\n isClosedOnEscapeKey?: boolean;\n /**\n * When `true`, the first focusable element within the modal subtree is\n * focused on mount.\n *\n * @default true\n */\n autoFocus?: boolean;\n /**\n * The element to receive focus when the modal opens. Overrides `autoFocus`'s\n * \"first focusable\" behavior.\n */\n initialFocusRef?: RefObject<FocusableElement | null>;\n /**\n * The element to receive focus when the modal closes/unmounts.\n */\n finalFocusRef?: RefObject<FocusableElement | null>;\n /**\n * When `true`, focus is restored to the element that opened the modal once\n * the modal closes. Ignored when `finalFocusRef` is provided.\n *\n * @default false\n */\n restoreFocus?: boolean;\n};\n"]}
|
|
@@ -48,11 +48,11 @@ export type ModalProps = Omit<ComponentProps<'div'>, 'children'> & {
|
|
|
48
48
|
* The element to receive focus when the modal opens. Overrides `autoFocus`'s
|
|
49
49
|
* "first focusable" behavior.
|
|
50
50
|
*/
|
|
51
|
-
initialFocusRef?: RefObject<FocusableElement>;
|
|
51
|
+
initialFocusRef?: RefObject<FocusableElement | null>;
|
|
52
52
|
/**
|
|
53
53
|
* The element to receive focus when the modal closes/unmounts.
|
|
54
54
|
*/
|
|
55
|
-
finalFocusRef?: RefObject<FocusableElement>;
|
|
55
|
+
finalFocusRef?: RefObject<FocusableElement | null>;
|
|
56
56
|
/**
|
|
57
57
|
* When `true`, focus is restored to the element that opened the modal once
|
|
58
58
|
* the modal closes. Ignored when `finalFocusRef` is provided.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.types.d.cts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc;AAElE,OAAO,KAAK,EAAE,gBAAgB,EAAE,2CAAuC;AAEvE,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjE;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.types.d.cts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc;AAElE,OAAO,KAAK,EAAE,gBAAgB,EAAE,2CAAuC;AAEvE,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjE;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACrD;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACnD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC"}
|
|
@@ -48,11 +48,11 @@ export type ModalProps = Omit<ComponentProps<'div'>, 'children'> & {
|
|
|
48
48
|
* The element to receive focus when the modal opens. Overrides `autoFocus`'s
|
|
49
49
|
* "first focusable" behavior.
|
|
50
50
|
*/
|
|
51
|
-
initialFocusRef?: RefObject<FocusableElement>;
|
|
51
|
+
initialFocusRef?: RefObject<FocusableElement | null>;
|
|
52
52
|
/**
|
|
53
53
|
* The element to receive focus when the modal closes/unmounts.
|
|
54
54
|
*/
|
|
55
|
-
finalFocusRef?: RefObject<FocusableElement>;
|
|
55
|
+
finalFocusRef?: RefObject<FocusableElement | null>;
|
|
56
56
|
/**
|
|
57
57
|
* When `true`, focus is restored to the element that opened the modal once
|
|
58
58
|
* the modal closes. Ignored when `finalFocusRef` is provided.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.types.d.mts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc;AAElE,OAAO,KAAK,EAAE,gBAAgB,EAAE,2CAAuC;AAEvE,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjE;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.types.d.mts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc;AAElE,OAAO,KAAK,EAAE,gBAAgB,EAAE,2CAAuC;AAEvE,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjE;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACrD;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACnD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.types.mjs","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ReactNode, RefObject } from 'react';\n\nimport type { FocusableElement } from '../ModalFocus/ModalFocus.types';\n\nexport type ModalProps = Omit<ComponentProps<'div'>, 'children'> & {\n /**\n * Whether the modal is open. When `false`, nothing is rendered (and the\n * portal subtree is unmounted, releasing focus state).\n */\n isOpen: boolean;\n /**\n * Fired when the modal requests close — wire your state setter here.\n * Triggered by the configured close-on-overlay-click and close-on-escape\n * behaviors as well as any custom close affordances inside `children`.\n */\n onClose: () => void;\n /**\n * The modal subtree. Typically composed of `ModalOverlay` and\n * `ModalContent` (which read shared behavior via `useModalContext`).\n */\n children: ReactNode;\n /**\n * Optional prop for additional CSS classes to be applied to the Modal root.\n * Merged with the component's defaults via `twMerge`.\n */\n className?: string;\n /**\n * When `true`, clicking the overlay (outside the modal content) closes the\n * modal.\n *\n * @default true\n */\n isClosedOnOutsideClick?: boolean;\n /**\n * When `true`, pressing Escape closes the modal. When `false`, ensure the\n * modal exposes a visible/keyboard-reachable close affordance for\n * keyboard-only users.\n *\n * @default true\n */\n isClosedOnEscapeKey?: boolean;\n /**\n * When `true`, the first focusable element within the modal subtree is\n * focused on mount.\n *\n * @default true\n */\n autoFocus?: boolean;\n /**\n * The element to receive focus when the modal opens. Overrides `autoFocus`'s\n * \"first focusable\" behavior.\n */\n initialFocusRef?: RefObject<FocusableElement>;\n /**\n * The element to receive focus when the modal closes/unmounts.\n */\n finalFocusRef?: RefObject<FocusableElement>;\n /**\n * When `true`, focus is restored to the element that opened the modal once\n * the modal closes. Ignored when `finalFocusRef` is provided.\n *\n * @default false\n */\n restoreFocus?: boolean;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"Modal.types.mjs","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ReactNode, RefObject } from 'react';\n\nimport type { FocusableElement } from '../ModalFocus/ModalFocus.types';\n\nexport type ModalProps = Omit<ComponentProps<'div'>, 'children'> & {\n /**\n * Whether the modal is open. When `false`, nothing is rendered (and the\n * portal subtree is unmounted, releasing focus state).\n */\n isOpen: boolean;\n /**\n * Fired when the modal requests close — wire your state setter here.\n * Triggered by the configured close-on-overlay-click and close-on-escape\n * behaviors as well as any custom close affordances inside `children`.\n */\n onClose: () => void;\n /**\n * The modal subtree. Typically composed of `ModalOverlay` and\n * `ModalContent` (which read shared behavior via `useModalContext`).\n */\n children: ReactNode;\n /**\n * Optional prop for additional CSS classes to be applied to the Modal root.\n * Merged with the component's defaults via `twMerge`.\n */\n className?: string;\n /**\n * When `true`, clicking the overlay (outside the modal content) closes the\n * modal.\n *\n * @default true\n */\n isClosedOnOutsideClick?: boolean;\n /**\n * When `true`, pressing Escape closes the modal. When `false`, ensure the\n * modal exposes a visible/keyboard-reachable close affordance for\n * keyboard-only users.\n *\n * @default true\n */\n isClosedOnEscapeKey?: boolean;\n /**\n * When `true`, the first focusable element within the modal subtree is\n * focused on mount.\n *\n * @default true\n */\n autoFocus?: boolean;\n /**\n * The element to receive focus when the modal opens. Overrides `autoFocus`'s\n * \"first focusable\" behavior.\n */\n initialFocusRef?: RefObject<FocusableElement | null>;\n /**\n * The element to receive focus when the modal closes/unmounts.\n */\n finalFocusRef?: RefObject<FocusableElement | null>;\n /**\n * When `true`, focus is restored to the element that opened the modal once\n * the modal closes. Ignored when `finalFocusRef` is provided.\n *\n * @default false\n */\n restoreFocus?: boolean;\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalFocus.types.cjs","sourceRoot":"","sources":["../../../src/components/ModalFocus/ModalFocus.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, RefObject } from 'react';\n\nexport type FocusableElement = {\n focus(options?: FocusOptions): void;\n};\n\nexport type ModalFocusProps = {\n /**\n * The `ref` of the element to receive focus initially.\n */\n initialFocusRef?: RefObject<FocusableElement>;\n /**\n * The `ref` of the element to return focus to when `ModalFocus`\n * unmounts.\n */\n finalFocusRef?: RefObject<FocusableElement>;\n /**\n * If `true`, focus will be restored to the element that\n * triggered the `ModalFocus` once it unmounts.\n *\n * Ignored when `finalFocusRef` is provided.\n *\n * @default false\n */\n restoreFocus?: boolean;\n /**\n * The node to lock focus to.\n */\n children: ReactNode;\n /**\n * If `true`, the first focusable element within `children`\n * will be auto-focused once `ModalFocus` mounts.\n *\n * @default true\n */\n autoFocus?: boolean;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"ModalFocus.types.cjs","sourceRoot":"","sources":["../../../src/components/ModalFocus/ModalFocus.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, RefObject } from 'react';\n\nexport type FocusableElement = {\n focus(options?: FocusOptions): void;\n};\n\nexport type ModalFocusProps = {\n /**\n * The `ref` of the element to receive focus initially.\n */\n initialFocusRef?: RefObject<FocusableElement | null>;\n /**\n * The `ref` of the element to return focus to when `ModalFocus`\n * unmounts.\n */\n finalFocusRef?: RefObject<FocusableElement | null>;\n /**\n * If `true`, focus will be restored to the element that\n * triggered the `ModalFocus` once it unmounts.\n *\n * Ignored when `finalFocusRef` is provided.\n *\n * @default false\n */\n restoreFocus?: boolean;\n /**\n * The node to lock focus to.\n */\n children: ReactNode;\n /**\n * If `true`, the first focusable element within `children`\n * will be auto-focused once `ModalFocus` mounts.\n *\n * @default true\n */\n autoFocus?: boolean;\n};\n"]}
|
|
@@ -6,12 +6,12 @@ export type ModalFocusProps = {
|
|
|
6
6
|
/**
|
|
7
7
|
* The `ref` of the element to receive focus initially.
|
|
8
8
|
*/
|
|
9
|
-
initialFocusRef?: RefObject<FocusableElement>;
|
|
9
|
+
initialFocusRef?: RefObject<FocusableElement | null>;
|
|
10
10
|
/**
|
|
11
11
|
* The `ref` of the element to return focus to when `ModalFocus`
|
|
12
12
|
* unmounts.
|
|
13
13
|
*/
|
|
14
|
-
finalFocusRef?: RefObject<FocusableElement>;
|
|
14
|
+
finalFocusRef?: RefObject<FocusableElement | null>;
|
|
15
15
|
/**
|
|
16
16
|
* If `true`, focus will be restored to the element that
|
|
17
17
|
* triggered the `ModalFocus` once it unmounts.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalFocus.types.d.cts","sourceRoot":"","sources":["../../../src/components/ModalFocus/ModalFocus.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc;AAElD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"ModalFocus.types.d.cts","sourceRoot":"","sources":["../../../src/components/ModalFocus/ModalFocus.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc;AAElD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACrD;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACnD;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}
|
|
@@ -6,12 +6,12 @@ export type ModalFocusProps = {
|
|
|
6
6
|
/**
|
|
7
7
|
* The `ref` of the element to receive focus initially.
|
|
8
8
|
*/
|
|
9
|
-
initialFocusRef?: RefObject<FocusableElement>;
|
|
9
|
+
initialFocusRef?: RefObject<FocusableElement | null>;
|
|
10
10
|
/**
|
|
11
11
|
* The `ref` of the element to return focus to when `ModalFocus`
|
|
12
12
|
* unmounts.
|
|
13
13
|
*/
|
|
14
|
-
finalFocusRef?: RefObject<FocusableElement>;
|
|
14
|
+
finalFocusRef?: RefObject<FocusableElement | null>;
|
|
15
15
|
/**
|
|
16
16
|
* If `true`, focus will be restored to the element that
|
|
17
17
|
* triggered the `ModalFocus` once it unmounts.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalFocus.types.d.mts","sourceRoot":"","sources":["../../../src/components/ModalFocus/ModalFocus.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc;AAElD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"ModalFocus.types.d.mts","sourceRoot":"","sources":["../../../src/components/ModalFocus/ModalFocus.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc;AAElD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACrD;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACnD;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalFocus.types.mjs","sourceRoot":"","sources":["../../../src/components/ModalFocus/ModalFocus.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, RefObject } from 'react';\n\nexport type FocusableElement = {\n focus(options?: FocusOptions): void;\n};\n\nexport type ModalFocusProps = {\n /**\n * The `ref` of the element to receive focus initially.\n */\n initialFocusRef?: RefObject<FocusableElement>;\n /**\n * The `ref` of the element to return focus to when `ModalFocus`\n * unmounts.\n */\n finalFocusRef?: RefObject<FocusableElement>;\n /**\n * If `true`, focus will be restored to the element that\n * triggered the `ModalFocus` once it unmounts.\n *\n * Ignored when `finalFocusRef` is provided.\n *\n * @default false\n */\n restoreFocus?: boolean;\n /**\n * The node to lock focus to.\n */\n children: ReactNode;\n /**\n * If `true`, the first focusable element within `children`\n * will be auto-focused once `ModalFocus` mounts.\n *\n * @default true\n */\n autoFocus?: boolean;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"ModalFocus.types.mjs","sourceRoot":"","sources":["../../../src/components/ModalFocus/ModalFocus.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, RefObject } from 'react';\n\nexport type FocusableElement = {\n focus(options?: FocusOptions): void;\n};\n\nexport type ModalFocusProps = {\n /**\n * The `ref` of the element to receive focus initially.\n */\n initialFocusRef?: RefObject<FocusableElement | null>;\n /**\n * The `ref` of the element to return focus to when `ModalFocus`\n * unmounts.\n */\n finalFocusRef?: RefObject<FocusableElement | null>;\n /**\n * If `true`, focus will be restored to the element that\n * triggered the `ModalFocus` once it unmounts.\n *\n * Ignored when `finalFocusRef` is provided.\n *\n * @default false\n */\n restoreFocus?: boolean;\n /**\n * The node to lock focus to.\n */\n children: ReactNode;\n /**\n * If `true`, the first focusable element within `children`\n * will be auto-focused once `ModalFocus` mounts.\n *\n * @default true\n */\n autoFocus?: boolean;\n};\n"]}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
exports.ModalHeader = void 0;
|
|
27
|
+
const design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
28
|
+
const react_1 = __importStar(require("react"));
|
|
29
|
+
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
30
|
+
const Box_1 = require("../Box/index.cjs");
|
|
31
|
+
const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
|
|
32
|
+
const Text_1 = require("../Text/index.cjs");
|
|
33
|
+
exports.ModalHeader = (0, react_1.forwardRef)((props, ref) => {
|
|
34
|
+
const { children, className, startAccessory, endAccessory, onBack, backButtonProps, onClose, closeButtonProps, ...rest } = props;
|
|
35
|
+
// The discriminated union on `ModalHeaderProps` guarantees that whenever
|
|
36
|
+
// `onBack` is set, `backButtonProps` is also set (with a required
|
|
37
|
+
// `ariaLabel`). Same for `onClose` / `closeButtonProps`. The `&&` checks
|
|
38
|
+
// below give TypeScript a narrowing point and double as runtime guards.
|
|
39
|
+
const resolvedStartAccessory = startAccessory ??
|
|
40
|
+
(onBack && backButtonProps ? (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { iconName: design_system_shared_1.IconName.ArrowLeft, size: design_system_shared_1.ButtonIconSize.Md, onClick: onBack, ...backButtonProps })) : null);
|
|
41
|
+
const resolvedEndAccessory = endAccessory ??
|
|
42
|
+
(onClose && closeButtonProps ? (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { iconName: design_system_shared_1.IconName.Close, size: design_system_shared_1.ButtonIconSize.Md, onClick: onClose, ...closeButtonProps })) : null);
|
|
43
|
+
const titleContent = typeof children === 'string' ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.HeadingSm, textAlign: Text_1.TextAlign.Center }, children)) : (children);
|
|
44
|
+
return (react_1.default.createElement("header", { ref: ref, className: (0, tw_merge_1.twMerge)(
|
|
45
|
+
// Three-column grid keeps the title visually centered regardless of
|
|
46
|
+
// which side accessories are present — same layout primitive as
|
|
47
|
+
// `HeaderBase`, replicated here so the outer element is the
|
|
48
|
+
// semantic `<header>` (no extra wrapper div).
|
|
49
|
+
'grid grid-cols-[1fr_auto_1fr] items-center px-4 pb-4', className), ...rest },
|
|
50
|
+
resolvedStartAccessory && (react_1.default.createElement(Box_1.Box, { className: "col-start-1 justify-self-start" }, resolvedStartAccessory)),
|
|
51
|
+
titleContent !== undefined && titleContent !== null && (react_1.default.createElement(Box_1.Box, { className: "col-start-2 col-end-3 w-full" }, titleContent)),
|
|
52
|
+
resolvedEndAccessory && (react_1.default.createElement(Box_1.Box, { className: "col-start-3 justify-self-end" }, resolvedEndAccessory))));
|
|
53
|
+
});
|
|
54
|
+
exports.ModalHeader.displayName = 'ModalHeader';
|
|
55
|
+
//# sourceMappingURL=ModalHeader.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalHeader.cjs","sourceRoot":"","sources":["../../../src/components/ModalHeader/ModalHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAIiD;AACjD,+CAA0C;AAE1C,uDAA+C;AAC/C,0CAA6B;AAC7B,wDAA2C;AAC3C,4CAA0C;AAI7B,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,MAAM,EACN,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,yEAAyE;IACzE,kEAAkE;IAClE,yEAAyE;IACzE,wEAAwE;IACxE,MAAM,sBAAsB,GAC1B,cAAc;QACd,CAAC,MAAM,IAAI,eAAe,CAAC,CAAC,CAAC,CAC3B,8BAAC,uBAAU,IACT,QAAQ,EAAE,+BAAQ,CAAC,SAAS,EAC5B,IAAI,EAAE,qCAAc,CAAC,EAAE,EACvB,OAAO,EAAE,MAAM,KACX,eAAe,GACnB,CACH,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAEZ,MAAM,oBAAoB,GACxB,YAAY;QACZ,CAAC,OAAO,IAAI,gBAAgB,CAAC,CAAC,CAAC,CAC7B,8BAAC,uBAAU,IACT,QAAQ,EAAE,+BAAQ,CAAC,KAAK,EACxB,IAAI,EAAE,qCAAc,CAAC,EAAE,EACvB,OAAO,EAAE,OAAO,KACZ,gBAAgB,GACpB,CACH,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAEZ,MAAM,YAAY,GAChB,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7B,8BAAC,WAAI,IAAC,OAAO,EAAE,kCAAW,CAAC,SAAS,EAAE,SAAS,EAAE,gBAAS,CAAC,MAAM,IAC9D,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;IAEJ,OAAO,CACL,0CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,kBAAO;QAChB,oEAAoE;QACpE,gEAAgE;QAChE,4DAA4D;QAC5D,8CAA8C;QAC9C,sDAAsD,EACtD,SAAS,CACV,KACG,IAAI;QAEP,sBAAsB,IAAI,CACzB,8BAAC,SAAG,IAAC,SAAS,EAAC,gCAAgC,IAC5C,sBAAsB,CACnB,CACP;QACA,YAAY,KAAK,SAAS,IAAI,YAAY,KAAK,IAAI,IAAI,CACtD,8BAAC,SAAG,IAAC,SAAS,EAAC,8BAA8B,IAAE,YAAY,CAAO,CACnE;QACA,oBAAoB,IAAI,CACvB,8BAAC,SAAG,IAAC,SAAS,EAAC,8BAA8B,IAC1C,oBAAoB,CACjB,CACP,CACM,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import {\n ButtonIconSize,\n IconName,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text, TextAlign } from '../Text';\n\nimport type { ModalHeaderProps } from './ModalHeader.types';\n\nexport const ModalHeader = forwardRef<HTMLElement, ModalHeaderProps>(\n (props, ref) => {\n const {\n children,\n className,\n startAccessory,\n endAccessory,\n onBack,\n backButtonProps,\n onClose,\n closeButtonProps,\n ...rest\n } = props;\n\n // The discriminated union on `ModalHeaderProps` guarantees that whenever\n // `onBack` is set, `backButtonProps` is also set (with a required\n // `ariaLabel`). Same for `onClose` / `closeButtonProps`. The `&&` checks\n // below give TypeScript a narrowing point and double as runtime guards.\n const resolvedStartAccessory =\n startAccessory ??\n (onBack && backButtonProps ? (\n <ButtonIcon\n iconName={IconName.ArrowLeft}\n size={ButtonIconSize.Md}\n onClick={onBack}\n {...backButtonProps}\n />\n ) : null);\n\n const resolvedEndAccessory =\n endAccessory ??\n (onClose && closeButtonProps ? (\n <ButtonIcon\n iconName={IconName.Close}\n size={ButtonIconSize.Md}\n onClick={onClose}\n {...closeButtonProps}\n />\n ) : null);\n\n const titleContent =\n typeof children === 'string' ? (\n <Text variant={TextVariant.HeadingSm} textAlign={TextAlign.Center}>\n {children}\n </Text>\n ) : (\n children\n );\n\n return (\n <header\n ref={ref}\n className={twMerge(\n // Three-column grid keeps the title visually centered regardless of\n // which side accessories are present — same layout primitive as\n // `HeaderBase`, replicated here so the outer element is the\n // semantic `<header>` (no extra wrapper div).\n 'grid grid-cols-[1fr_auto_1fr] items-center px-4 pb-4',\n className,\n )}\n {...rest}\n >\n {resolvedStartAccessory && (\n <Box className=\"col-start-1 justify-self-start\">\n {resolvedStartAccessory}\n </Box>\n )}\n {titleContent !== undefined && titleContent !== null && (\n <Box className=\"col-start-2 col-end-3 w-full\">{titleContent}</Box>\n )}\n {resolvedEndAccessory && (\n <Box className=\"col-start-3 justify-self-end\">\n {resolvedEndAccessory}\n </Box>\n )}\n </header>\n );\n },\n);\n\nModalHeader.displayName = 'ModalHeader';\n"]}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export declare const ModalHeader: React.ForwardRefExoticComponent<(Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "children"> & {
|
|
3
|
+
onBack?: undefined;
|
|
4
|
+
backButtonProps?: undefined;
|
|
5
|
+
} & {
|
|
6
|
+
onClose?: undefined;
|
|
7
|
+
closeButtonProps?: undefined;
|
|
8
|
+
} & {
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
startAccessory?: React.ReactNode;
|
|
11
|
+
endAccessory?: React.ReactNode;
|
|
12
|
+
className?: string | undefined;
|
|
13
|
+
}, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "children"> & {
|
|
14
|
+
onBack?: undefined;
|
|
15
|
+
backButtonProps?: undefined;
|
|
16
|
+
} & {
|
|
17
|
+
onClose: () => void;
|
|
18
|
+
closeButtonProps: Omit<import("../ButtonIcon/index.cjs").ButtonIconProps, "size" | "onClick" | "iconName"> & {
|
|
19
|
+
[key: `data-${string}`]: string | undefined;
|
|
20
|
+
};
|
|
21
|
+
} & {
|
|
22
|
+
children?: React.ReactNode;
|
|
23
|
+
startAccessory?: React.ReactNode;
|
|
24
|
+
endAccessory?: React.ReactNode;
|
|
25
|
+
className?: string | undefined;
|
|
26
|
+
}, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "children"> & {
|
|
27
|
+
onBack: () => void;
|
|
28
|
+
backButtonProps: Omit<import("../ButtonIcon/index.cjs").ButtonIconProps, "size" | "onClick" | "iconName"> & {
|
|
29
|
+
[key: `data-${string}`]: string | undefined;
|
|
30
|
+
};
|
|
31
|
+
} & {
|
|
32
|
+
onClose?: undefined;
|
|
33
|
+
closeButtonProps?: undefined;
|
|
34
|
+
} & {
|
|
35
|
+
children?: React.ReactNode;
|
|
36
|
+
startAccessory?: React.ReactNode;
|
|
37
|
+
endAccessory?: React.ReactNode;
|
|
38
|
+
className?: string | undefined;
|
|
39
|
+
}, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "children"> & {
|
|
40
|
+
onBack: () => void;
|
|
41
|
+
backButtonProps: Omit<import("../ButtonIcon/index.cjs").ButtonIconProps, "size" | "onClick" | "iconName"> & {
|
|
42
|
+
[key: `data-${string}`]: string | undefined;
|
|
43
|
+
};
|
|
44
|
+
} & {
|
|
45
|
+
onClose: () => void;
|
|
46
|
+
closeButtonProps: Omit<import("../ButtonIcon/index.cjs").ButtonIconProps, "size" | "onClick" | "iconName"> & {
|
|
47
|
+
[key: `data-${string}`]: string | undefined;
|
|
48
|
+
};
|
|
49
|
+
} & {
|
|
50
|
+
children?: React.ReactNode;
|
|
51
|
+
startAccessory?: React.ReactNode;
|
|
52
|
+
endAccessory?: React.ReactNode;
|
|
53
|
+
className?: string | undefined;
|
|
54
|
+
}, "ref">) & React.RefAttributes<HTMLElement>>;
|
|
55
|
+
//# sourceMappingURL=ModalHeader.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalHeader.d.cts","sourceRoot":"","sources":["../../../src/components/ModalHeader/ModalHeader.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,cAAc;AAS1C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8CA8EvB,CAAC"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export declare const ModalHeader: React.ForwardRefExoticComponent<(Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "children"> & {
|
|
3
|
+
onBack?: undefined;
|
|
4
|
+
backButtonProps?: undefined;
|
|
5
|
+
} & {
|
|
6
|
+
onClose?: undefined;
|
|
7
|
+
closeButtonProps?: undefined;
|
|
8
|
+
} & {
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
startAccessory?: React.ReactNode;
|
|
11
|
+
endAccessory?: React.ReactNode;
|
|
12
|
+
className?: string | undefined;
|
|
13
|
+
}, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "children"> & {
|
|
14
|
+
onBack?: undefined;
|
|
15
|
+
backButtonProps?: undefined;
|
|
16
|
+
} & {
|
|
17
|
+
onClose: () => void;
|
|
18
|
+
closeButtonProps: Omit<import("../ButtonIcon/index.mjs").ButtonIconProps, "size" | "onClick" | "iconName"> & {
|
|
19
|
+
[key: `data-${string}`]: string | undefined;
|
|
20
|
+
};
|
|
21
|
+
} & {
|
|
22
|
+
children?: React.ReactNode;
|
|
23
|
+
startAccessory?: React.ReactNode;
|
|
24
|
+
endAccessory?: React.ReactNode;
|
|
25
|
+
className?: string | undefined;
|
|
26
|
+
}, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "children"> & {
|
|
27
|
+
onBack: () => void;
|
|
28
|
+
backButtonProps: Omit<import("../ButtonIcon/index.mjs").ButtonIconProps, "size" | "onClick" | "iconName"> & {
|
|
29
|
+
[key: `data-${string}`]: string | undefined;
|
|
30
|
+
};
|
|
31
|
+
} & {
|
|
32
|
+
onClose?: undefined;
|
|
33
|
+
closeButtonProps?: undefined;
|
|
34
|
+
} & {
|
|
35
|
+
children?: React.ReactNode;
|
|
36
|
+
startAccessory?: React.ReactNode;
|
|
37
|
+
endAccessory?: React.ReactNode;
|
|
38
|
+
className?: string | undefined;
|
|
39
|
+
}, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "children"> & {
|
|
40
|
+
onBack: () => void;
|
|
41
|
+
backButtonProps: Omit<import("../ButtonIcon/index.mjs").ButtonIconProps, "size" | "onClick" | "iconName"> & {
|
|
42
|
+
[key: `data-${string}`]: string | undefined;
|
|
43
|
+
};
|
|
44
|
+
} & {
|
|
45
|
+
onClose: () => void;
|
|
46
|
+
closeButtonProps: Omit<import("../ButtonIcon/index.mjs").ButtonIconProps, "size" | "onClick" | "iconName"> & {
|
|
47
|
+
[key: `data-${string}`]: string | undefined;
|
|
48
|
+
};
|
|
49
|
+
} & {
|
|
50
|
+
children?: React.ReactNode;
|
|
51
|
+
startAccessory?: React.ReactNode;
|
|
52
|
+
endAccessory?: React.ReactNode;
|
|
53
|
+
className?: string | undefined;
|
|
54
|
+
}, "ref">) & React.RefAttributes<HTMLElement>>;
|
|
55
|
+
//# sourceMappingURL=ModalHeader.d.mts.map
|