@metamask/design-system-react 0.35.0 → 0.35.2
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 +15 -1
- package/dist/components/Checkbox/Checkbox.cjs +14 -10
- package/dist/components/Checkbox/Checkbox.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.cts.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.mts.map +1 -1
- package/dist/components/Checkbox/Checkbox.mjs +14 -10
- package/dist/components/Checkbox/Checkbox.mjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.types.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.types.d.cts +3 -2
- package/dist/components/Checkbox/Checkbox.types.d.cts.map +1 -1
- package/dist/components/Checkbox/Checkbox.types.d.mts +3 -2
- package/dist/components/Checkbox/Checkbox.types.d.mts.map +1 -1
- package/dist/components/Checkbox/Checkbox.types.mjs.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.35.2]
|
|
11
|
+
|
|
12
|
+
### Fixed
|
|
13
|
+
|
|
14
|
+
- Fixed `Checkbox` so the native `<input>` is the visible, clickable control instead of an `opacity-0` overlay; use `inputProps` for `data-testid` so Selenium E2E tests can find and click the control ([#1437](https://github.com/MetaMask/metamask-design-system/pull/1437))
|
|
15
|
+
|
|
16
|
+
## [0.35.1]
|
|
17
|
+
|
|
18
|
+
### Fixed
|
|
19
|
+
|
|
20
|
+
- Fixed Checkbox selected state to use monochromatic icon colors instead of primary blue ([#1426](https://github.com/MetaMask/metamask-design-system/pull/1426))
|
|
21
|
+
|
|
10
22
|
## [0.35.0]
|
|
11
23
|
|
|
12
24
|
### Changed
|
|
@@ -449,7 +461,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
449
461
|
- Full TypeScript support with type definitions and enums
|
|
450
462
|
- Tailwind CSS integration with design token support
|
|
451
463
|
|
|
452
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.35.
|
|
464
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.35.2...HEAD
|
|
465
|
+
[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
|
+
[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
|
|
453
467
|
[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
|
|
454
468
|
[0.34.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.33.0...@metamask/design-system-react@0.34.0
|
|
455
469
|
[0.33.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.32.0...@metamask/design-system-react@0.33.0
|
|
@@ -48,24 +48,28 @@ exports.Checkbox = (0, react_1.forwardRef)(({ id, isSelected, isDisabled = false
|
|
|
48
48
|
}
|
|
49
49
|
};
|
|
50
50
|
(0, react_1.useImperativeHandle)(ref, () => ({ toggle: handleClick }), [handleClick]);
|
|
51
|
-
const
|
|
51
|
+
const { className: inputClassName, ...restInputProps } = inputProps ?? {};
|
|
52
|
+
const { className: checkboxContainerClassName, ...restCheckboxContainerProps } = checkboxContainerProps ?? {};
|
|
53
|
+
const { className: checkedIconClassName, ...restCheckedIconProps } = checkedIconProps ?? {};
|
|
54
|
+
const outerClassName = (0, tw_merge_1.twMerge)('inline-flex items-center self-start', isDisabled && 'cursor-not-allowed opacity-50', className);
|
|
52
55
|
const baseBg = isSelected
|
|
53
|
-
? 'bg-
|
|
54
|
-
: 'bg-default hover:bg-default-hover active:bg-default-pressed';
|
|
56
|
+
? 'bg-icon-default enabled:hover:bg-icon-default-hover enabled:active:bg-icon-default-pressed'
|
|
57
|
+
: 'bg-default enabled:hover:bg-default-hover enabled:active:bg-default-pressed';
|
|
55
58
|
let baseBorder = 'border-default';
|
|
56
59
|
if (isSelected) {
|
|
57
|
-
baseBorder = 'border-
|
|
60
|
+
baseBorder = 'border-icon-default';
|
|
58
61
|
}
|
|
59
62
|
else if (isInvalid) {
|
|
60
63
|
baseBorder = 'border-error-default';
|
|
61
64
|
}
|
|
62
|
-
|
|
63
|
-
const
|
|
65
|
+
// Native input is the visible control (no opacity-0) for Selenium isDisplayed().
|
|
66
|
+
const inputClasses = (0, tw_merge_1.twMerge)('peer size-6 shrink-0 cursor-pointer appearance-none rounded border-2 p-0 transition-transform enabled:active:scale-95', 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', 'disabled:cursor-not-allowed', baseBg, baseBorder, inputClassName);
|
|
67
|
+
const wrapperClasses = (0, tw_merge_1.twMerge)('relative inline-flex size-6 items-center justify-center', checkboxContainerClassName);
|
|
68
|
+
const iconClasses = (0, tw_merge_1.twMerge)('pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition peer-enabled:peer-active:scale-95', isSelected ? 'opacity-100' : 'opacity-0', checkedIconClassName);
|
|
64
69
|
return (react_1.default.createElement("label", { htmlFor: id, className: outerClassName, style: style, ...props },
|
|
65
|
-
react_1.default.createElement("div", { className:
|
|
66
|
-
react_1.default.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className:
|
|
67
|
-
react_1.default.createElement(
|
|
68
|
-
react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Check, color: Icon_1.IconColor.PrimaryInverse, size: Icon_1.IconSize.Sm, ...checkedIconProps, className: iconClasses }))),
|
|
70
|
+
react_1.default.createElement("div", { className: wrapperClasses, ...restCheckboxContainerProps },
|
|
71
|
+
react_1.default.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: inputClasses, ...restInputProps }),
|
|
72
|
+
react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Check, color: Icon_1.IconColor.IconInverse, size: Icon_1.IconSize.Sm, ...restCheckedIconProps, className: iconClasses })),
|
|
69
73
|
label ? (react_1.default.createElement(Text_1.Text, { asChild: true, ...labelProps, className: (0, tw_merge_1.twMerge)('ml-3', labelProps?.className) },
|
|
70
74
|
react_1.default.createElement("span", null, label))) : null));
|
|
71
75
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAA+D;AAE/D,uDAA+C;AAC/C,4CAA8D;AAC9D,4CAA+B;AAIlB,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAChC,CACE,EACE,EAAE,EACF,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,UAAU,EACV,QAAQ,EACR,UAAU,EACV,sBAAsB,EACtB,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC5D,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC/D,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,EAAE,CAAC;SACf;IACH,CAAC,CAAC;IAEF,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAEzE,MAAM,cAAc,GAAG,IAAA,kBAAO,EAC5B,
|
|
1
|
+
{"version":3,"file":"Checkbox.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAA+D;AAE/D,uDAA+C;AAC/C,4CAA8D;AAC9D,4CAA+B;AAIlB,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAChC,CACE,EACE,EAAE,EACF,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,UAAU,EACV,QAAQ,EACR,UAAU,EACV,sBAAsB,EACtB,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC5D,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC/D,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,EAAE,CAAC;SACf;IACH,CAAC,CAAC;IAEF,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAEzE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,GAAG,UAAU,IAAI,EAAE,CAAC;IAC1E,MAAM,EACJ,SAAS,EAAE,0BAA0B,EACrC,GAAG,0BAA0B,EAC9B,GAAG,sBAAsB,IAAI,EAAE,CAAC;IACjC,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,GAAG,oBAAoB,EAAE,GAChE,gBAAgB,IAAI,EAAE,CAAC;IAEzB,MAAM,cAAc,GAAG,IAAA,kBAAO,EAC5B,qCAAqC,EACrC,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,MAAM,MAAM,GAAG,UAAU;QACvB,CAAC,CAAC,4FAA4F;QAC9F,CAAC,CAAC,6EAA6E,CAAC;IAClF,IAAI,UAAU,GAAG,gBAAgB,CAAC;IAClC,IAAI,UAAU,EAAE;QACd,UAAU,GAAG,qBAAqB,CAAC;KACpC;SAAM,IAAI,SAAS,EAAE;QACpB,UAAU,GAAG,sBAAsB,CAAC;KACrC;IAED,iFAAiF;IACjF,MAAM,YAAY,GAAG,IAAA,kBAAO,EAC1B,uHAAuH,EACvH,oHAAoH,EACpH,6BAA6B,EAC7B,MAAM,EACN,UAAU,EACV,cAAc,CACf,CAAC;IAEF,MAAM,cAAc,GAAG,IAAA,kBAAO,EAC5B,yDAAyD,EACzD,0BAA0B,CAC3B,CAAC;IAEF,MAAM,WAAW,GAAG,IAAA,kBAAO,EACzB,8HAA8H,EAC9H,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,EACxC,oBAAoB,CACrB,CAAC;IAEF,OAAO,CACL,yCAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QACpE,uCAAK,SAAS,EAAE,cAAc,KAAM,0BAA0B;YAC5D,yCACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,UAAU,kBACN,SAAS,EACvB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,YAAY,KACnB,cAAc,GAClB;YACF,8BAAC,WAAI,IACH,IAAI,EAAE,eAAQ,CAAC,KAAK,EACpB,KAAK,EAAE,gBAAS,CAAC,WAAW,EAC5B,IAAI,EAAE,eAAQ,CAAC,EAAE,KACb,oBAAoB,EACxB,SAAS,EAAE,WAAW,GACtB,CACE;QACL,KAAK,CAAC,CAAC,CAAC,CACP,8BAAC,WAAI,IACH,OAAO,WACH,UAAU,EACd,SAAS,EAAE,IAAA,kBAAO,EAAC,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC;YAEjD,4CAAO,KAAK,CAAQ,CACf,CACR,CAAC,CAAC,CAAC,IAAI,CACF,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import type { ChangeEvent, KeyboardEvent } from 'react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { Text } from '../Text';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n (\n {\n id,\n isSelected,\n isDisabled = false,\n isInvalid = false,\n label,\n labelProps,\n onChange,\n inputProps,\n checkboxContainerProps,\n checkedIconProps,\n className,\n style,\n ...props\n },\n ref,\n ) => {\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled) {\n return;\n }\n onChange?.(event.target.checked);\n };\n\n const handleClick = () => {\n if (isDisabled) {\n return;\n }\n onChange?.(!isSelected);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n handleClick();\n }\n };\n\n useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);\n\n const { className: inputClassName, ...restInputProps } = inputProps ?? {};\n const {\n className: checkboxContainerClassName,\n ...restCheckboxContainerProps\n } = checkboxContainerProps ?? {};\n const { className: checkedIconClassName, ...restCheckedIconProps } =\n checkedIconProps ?? {};\n\n const outerClassName = twMerge(\n 'inline-flex items-center self-start',\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n const baseBg = isSelected\n ? 'bg-icon-default enabled:hover:bg-icon-default-hover enabled:active:bg-icon-default-pressed'\n : 'bg-default enabled:hover:bg-default-hover enabled:active:bg-default-pressed';\n let baseBorder = 'border-default';\n if (isSelected) {\n baseBorder = 'border-icon-default';\n } else if (isInvalid) {\n baseBorder = 'border-error-default';\n }\n\n // Native input is the visible control (no opacity-0) for Selenium isDisplayed().\n const inputClasses = twMerge(\n 'peer size-6 shrink-0 cursor-pointer appearance-none rounded border-2 p-0 transition-transform enabled:active:scale-95',\n 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n 'disabled:cursor-not-allowed',\n baseBg,\n baseBorder,\n inputClassName,\n );\n\n const wrapperClasses = twMerge(\n 'relative inline-flex size-6 items-center justify-center',\n checkboxContainerClassName,\n );\n\n const iconClasses = twMerge(\n 'pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition peer-enabled:peer-active:scale-95',\n isSelected ? 'opacity-100' : 'opacity-0',\n checkedIconClassName,\n );\n\n return (\n <label htmlFor={id} className={outerClassName} style={style} {...props}>\n <div className={wrapperClasses} {...restCheckboxContainerProps}>\n <input\n type=\"checkbox\"\n id={id}\n checked={isSelected}\n disabled={isDisabled}\n aria-invalid={isInvalid}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n className={inputClasses}\n {...restInputProps}\n />\n <Icon\n name={IconName.Check}\n color={IconColor.IconInverse}\n size={IconSize.Sm}\n {...restCheckedIconProps}\n className={iconClasses}\n />\n </div>\n {label ? (\n <Text\n asChild\n {...labelProps}\n className={twMerge('ml-3', labelProps?.className)}\n >\n <span>{label}</span>\n </Text>\n ) : null}\n </label>\n );\n },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,cAAc;AAM/D,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ;YAAwB,MAAM,IAAI;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,cAAc;AAM/D,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ;YAAwB,MAAM,IAAI;GAyHtD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,cAAc;AAM/D,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ;YAAwB,MAAM,IAAI;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,cAAc;AAM/D,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ;YAAwB,MAAM,IAAI;GAyHtD,CAAC"}
|
|
@@ -29,24 +29,28 @@ export const Checkbox = forwardRef(({ id, isSelected, isDisabled = false, isInva
|
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
31
|
useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);
|
|
32
|
-
const
|
|
32
|
+
const { className: inputClassName, ...restInputProps } = inputProps ?? {};
|
|
33
|
+
const { className: checkboxContainerClassName, ...restCheckboxContainerProps } = checkboxContainerProps ?? {};
|
|
34
|
+
const { className: checkedIconClassName, ...restCheckedIconProps } = checkedIconProps ?? {};
|
|
35
|
+
const outerClassName = twMerge('inline-flex items-center self-start', isDisabled && 'cursor-not-allowed opacity-50', className);
|
|
33
36
|
const baseBg = isSelected
|
|
34
|
-
? 'bg-
|
|
35
|
-
: 'bg-default hover:bg-default-hover active:bg-default-pressed';
|
|
37
|
+
? 'bg-icon-default enabled:hover:bg-icon-default-hover enabled:active:bg-icon-default-pressed'
|
|
38
|
+
: 'bg-default enabled:hover:bg-default-hover enabled:active:bg-default-pressed';
|
|
36
39
|
let baseBorder = 'border-default';
|
|
37
40
|
if (isSelected) {
|
|
38
|
-
baseBorder = 'border-
|
|
41
|
+
baseBorder = 'border-icon-default';
|
|
39
42
|
}
|
|
40
43
|
else if (isInvalid) {
|
|
41
44
|
baseBorder = 'border-error-default';
|
|
42
45
|
}
|
|
43
|
-
|
|
44
|
-
const
|
|
46
|
+
// Native input is the visible control (no opacity-0) for Selenium isDisplayed().
|
|
47
|
+
const inputClasses = twMerge('peer size-6 shrink-0 cursor-pointer appearance-none rounded border-2 p-0 transition-transform enabled:active:scale-95', 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default', 'disabled:cursor-not-allowed', baseBg, baseBorder, inputClassName);
|
|
48
|
+
const wrapperClasses = twMerge('relative inline-flex size-6 items-center justify-center', checkboxContainerClassName);
|
|
49
|
+
const iconClasses = twMerge('pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition peer-enabled:peer-active:scale-95', isSelected ? 'opacity-100' : 'opacity-0', checkedIconClassName);
|
|
45
50
|
return (React.createElement("label", { htmlFor: id, className: outerClassName, style: style, ...props },
|
|
46
|
-
React.createElement("div", { className:
|
|
47
|
-
React.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className:
|
|
48
|
-
React.createElement(
|
|
49
|
-
React.createElement(Icon, { name: IconName.Check, color: IconColor.PrimaryInverse, size: IconSize.Sm, ...checkedIconProps, className: iconClasses }))),
|
|
51
|
+
React.createElement("div", { className: wrapperClasses, ...restCheckboxContainerProps },
|
|
52
|
+
React.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: inputClasses, ...restInputProps }),
|
|
53
|
+
React.createElement(Icon, { name: IconName.Check, color: IconColor.IconInverse, size: IconSize.Sm, ...restCheckedIconProps, className: iconClasses })),
|
|
50
54
|
label ? (React.createElement(Text, { asChild: true, ...labelProps, className: twMerge('ml-3', labelProps?.className) },
|
|
51
55
|
React.createElement("span", null, label))) : null));
|
|
52
56
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;AACA,OAAO,QAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,cAAc;;AAE/D,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AAC9D,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAI/B,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,EAAE,EACF,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,UAAU,EACV,QAAQ,EACR,UAAU,EACV,sBAAsB,EACtB,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC5D,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC/D,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,EAAE,CAAC;SACf;IACH,CAAC,CAAC;IAEF,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAEzE,MAAM,cAAc,GAAG,OAAO,CAC5B,
|
|
1
|
+
{"version":3,"file":"Checkbox.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ChangeEvent, KeyboardEvent } from 'react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { Text } from '../Text';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n (\n {\n id,\n isSelected,\n isDisabled = false,\n isInvalid = false,\n label,\n labelProps,\n onChange,\n inputProps,\n checkboxContainerProps,\n checkedIconProps,\n className,\n style,\n ...props\n },\n ref,\n ) => {\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (isDisabled) {\n return;\n }\n onChange?.(event.target.checked);\n };\n\n const handleClick = () => {\n if (isDisabled) {\n return;\n }\n onChange?.(!isSelected);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n handleClick();\n }\n };\n\n useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);\n\n const { className: inputClassName, ...restInputProps } = inputProps ?? {};\n const {\n className: checkboxContainerClassName,\n ...restCheckboxContainerProps\n } = checkboxContainerProps ?? {};\n const { className: checkedIconClassName, ...restCheckedIconProps } =\n checkedIconProps ?? {};\n\n const outerClassName = twMerge(\n 'inline-flex items-center self-start',\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n const baseBg = isSelected\n ? 'bg-icon-default enabled:hover:bg-icon-default-hover enabled:active:bg-icon-default-pressed'\n : 'bg-default enabled:hover:bg-default-hover enabled:active:bg-default-pressed';\n let baseBorder = 'border-default';\n if (isSelected) {\n baseBorder = 'border-icon-default';\n } else if (isInvalid) {\n baseBorder = 'border-error-default';\n }\n\n // Native input is the visible control (no opacity-0) for Selenium isDisplayed().\n const inputClasses = twMerge(\n 'peer size-6 shrink-0 cursor-pointer appearance-none rounded border-2 p-0 transition-transform enabled:active:scale-95',\n 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n 'disabled:cursor-not-allowed',\n baseBg,\n baseBorder,\n inputClassName,\n );\n\n const wrapperClasses = twMerge(\n 'relative inline-flex size-6 items-center justify-center',\n checkboxContainerClassName,\n );\n\n const iconClasses = twMerge(\n 'pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition peer-enabled:peer-active:scale-95',\n isSelected ? 'opacity-100' : 'opacity-0',\n checkedIconClassName,\n );\n\n return (\n <label htmlFor={id} className={outerClassName} style={style} {...props}>\n <div className={wrapperClasses} {...restCheckboxContainerProps}>\n <input\n type=\"checkbox\"\n id={id}\n checked={isSelected}\n disabled={isDisabled}\n aria-invalid={isInvalid}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n className={inputClasses}\n {...restInputProps}\n />\n <Icon\n name={IconName.Check}\n color={IconColor.IconInverse}\n size={IconSize.Sm}\n {...restCheckedIconProps}\n className={iconClasses}\n />\n </div>\n {label ? (\n <Text\n asChild\n {...labelProps}\n className={twMerge('ml-3', labelProps?.className)}\n >\n <span>{label}</span>\n </Text>\n ) : null}\n </label>\n );\n },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.types.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CheckboxPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type CheckboxProps = Omit<\n ComponentProps<'label'>,\n 'style' | 'className' | 'children' | 'htmlFor'\n> &\n CheckboxPropsShared & {\n /**\n * Required unique identifier for the checkbox input element.\n * This is used for the input's ID and the label's htmlFor attributes.\n */\n id: string;\n\n /**\n * Optional props to be passed to the label's Text component\n */\n labelProps?: Omit<Partial<TextProps>, 'children'>;\n\n /**\n * Optional props passed to the input element.\n */\n inputProps?: Omit<\n ComponentProps<'input'>,\n 'type' | 'checked' | 'onChange' | 'disabled'\n > & {\n [key: `data-${string}`]: string;\n };\n\n /**\n * Optional props passed to the
|
|
1
|
+
{"version":3,"file":"Checkbox.types.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CheckboxPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type CheckboxProps = Omit<\n ComponentProps<'label'>,\n 'style' | 'className' | 'children' | 'htmlFor'\n> &\n CheckboxPropsShared & {\n /**\n * Required unique identifier for the checkbox input element.\n * This is used for the input's ID and the label's htmlFor attributes.\n */\n id: string;\n\n /**\n * Optional props to be passed to the label's Text component\n */\n labelProps?: Omit<Partial<TextProps>, 'children'>;\n\n /**\n * Optional props passed to the native input element (the visible control).\n * Prefer putting test ids here — the input is Selenium-visible and clickable.\n */\n inputProps?: Omit<\n ComponentProps<'input'>,\n 'type' | 'checked' | 'onChange' | 'disabled'\n > & {\n [key: `data-${string}`]: string;\n };\n\n /**\n * Optional props passed to the relative wrapper around the input and check icon.\n */\n checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {\n className?: string;\n }) &\n Record<string, unknown>;\n\n /**\n * Optional props to be passed to the check Icon component\n */\n checkedIconProps?: Partial<IconProps>;\n /**\n * Optional prop for additional CSS classes to be applied to the Checkbox component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles for the outer container.\n */\n style?: React.CSSProperties;\n };\n"]}
|
|
@@ -13,13 +13,14 @@ export type CheckboxProps = Omit<ComponentProps<'label'>, 'style' | 'className'
|
|
|
13
13
|
*/
|
|
14
14
|
labelProps?: Omit<Partial<TextProps>, 'children'>;
|
|
15
15
|
/**
|
|
16
|
-
* Optional props passed to the input element.
|
|
16
|
+
* Optional props passed to the native input element (the visible control).
|
|
17
|
+
* Prefer putting test ids here — the input is Selenium-visible and clickable.
|
|
17
18
|
*/
|
|
18
19
|
inputProps?: Omit<ComponentProps<'input'>, 'type' | 'checked' | 'onChange' | 'disabled'> & {
|
|
19
20
|
[key: `data-${string}`]: string;
|
|
20
21
|
};
|
|
21
22
|
/**
|
|
22
|
-
* Optional props passed to the
|
|
23
|
+
* Optional props passed to the relative wrapper around the input and check icon.
|
|
23
24
|
*/
|
|
24
25
|
checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {
|
|
25
26
|
className?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.types.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,uCAAuC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAC/C,GACC,mBAAmB,GAAG;IACpB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD
|
|
1
|
+
{"version":3,"file":"Checkbox.types.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,uCAAuC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAC/C,GACC,mBAAmB,GAAG;IACpB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CACf,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAC7C,GAAG;QACF,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KACjC,CAAC;IAEF;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;QAClE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,GACA,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
|
|
@@ -13,13 +13,14 @@ export type CheckboxProps = Omit<ComponentProps<'label'>, 'style' | 'className'
|
|
|
13
13
|
*/
|
|
14
14
|
labelProps?: Omit<Partial<TextProps>, 'children'>;
|
|
15
15
|
/**
|
|
16
|
-
* Optional props passed to the input element.
|
|
16
|
+
* Optional props passed to the native input element (the visible control).
|
|
17
|
+
* Prefer putting test ids here — the input is Selenium-visible and clickable.
|
|
17
18
|
*/
|
|
18
19
|
inputProps?: Omit<ComponentProps<'input'>, 'type' | 'checked' | 'onChange' | 'disabled'> & {
|
|
19
20
|
[key: `data-${string}`]: string;
|
|
20
21
|
};
|
|
21
22
|
/**
|
|
22
|
-
* Optional props passed to the
|
|
23
|
+
* Optional props passed to the relative wrapper around the input and check icon.
|
|
23
24
|
*/
|
|
24
25
|
checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {
|
|
25
26
|
className?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.types.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,uCAAuC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAC/C,GACC,mBAAmB,GAAG;IACpB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD
|
|
1
|
+
{"version":3,"file":"Checkbox.types.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,uCAAuC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAC/C,GACC,mBAAmB,GAAG;IACpB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CACf,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAC7C,GAAG;QACF,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KACjC,CAAC;IAEF;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;QAClE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,GACA,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.types.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CheckboxPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type CheckboxProps = Omit<\n ComponentProps<'label'>,\n 'style' | 'className' | 'children' | 'htmlFor'\n> &\n CheckboxPropsShared & {\n /**\n * Required unique identifier for the checkbox input element.\n * This is used for the input's ID and the label's htmlFor attributes.\n */\n id: string;\n\n /**\n * Optional props to be passed to the label's Text component\n */\n labelProps?: Omit<Partial<TextProps>, 'children'>;\n\n /**\n * Optional props passed to the input element.\n */\n inputProps?: Omit<\n ComponentProps<'input'>,\n 'type' | 'checked' | 'onChange' | 'disabled'\n > & {\n [key: `data-${string}`]: string;\n };\n\n /**\n * Optional props passed to the
|
|
1
|
+
{"version":3,"file":"Checkbox.types.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CheckboxPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type CheckboxProps = Omit<\n ComponentProps<'label'>,\n 'style' | 'className' | 'children' | 'htmlFor'\n> &\n CheckboxPropsShared & {\n /**\n * Required unique identifier for the checkbox input element.\n * This is used for the input's ID and the label's htmlFor attributes.\n */\n id: string;\n\n /**\n * Optional props to be passed to the label's Text component\n */\n labelProps?: Omit<Partial<TextProps>, 'children'>;\n\n /**\n * Optional props passed to the native input element (the visible control).\n * Prefer putting test ids here — the input is Selenium-visible and clickable.\n */\n inputProps?: Omit<\n ComponentProps<'input'>,\n 'type' | 'checked' | 'onChange' | 'disabled'\n > & {\n [key: `data-${string}`]: string;\n };\n\n /**\n * Optional props passed to the relative wrapper around the input and check icon.\n */\n checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {\n className?: string;\n }) &\n Record<string, unknown>;\n\n /**\n * Optional props to be passed to the check Icon component\n */\n checkedIconProps?: Partial<IconProps>;\n /**\n * Optional prop for additional CSS classes to be applied to the Checkbox component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles for the outer container.\n */\n style?: React.CSSProperties;\n };\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metamask/design-system-react",
|
|
3
|
-
"version": "0.35.
|
|
3
|
+
"version": "0.35.2",
|
|
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.32.0",
|
|
52
52
|
"@metamask/jazzicon": "^2.0.0",
|
|
53
53
|
"@radix-ui/react-slot": "^1.1.0",
|
|
54
54
|
"blo": "^2.0.0",
|