@metamask/design-system-react 0.34.0 → 0.35.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -1
- package/dist/components/Checkbox/Checkbox.cjs +3 -3
- package/dist/components/Checkbox/Checkbox.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.mjs +3 -3
- package/dist/components/Checkbox/Checkbox.mjs.map +1 -1
- package/dist/components/ModalContent/ModalContent.cjs +1 -1
- package/dist/components/ModalContent/ModalContent.cjs.map +1 -1
- package/dist/components/ModalContent/ModalContent.d.cts.map +1 -1
- package/dist/components/ModalContent/ModalContent.d.mts.map +1 -1
- package/dist/components/ModalContent/ModalContent.mjs +1 -1
- package/dist/components/ModalContent/ModalContent.mjs.map +1 -1
- package/dist/components/TextFieldSearch/TextFieldSearch.cjs +6 -3
- package/dist/components/TextFieldSearch/TextFieldSearch.cjs.map +1 -1
- package/dist/components/TextFieldSearch/TextFieldSearch.d.cts.map +1 -1
- package/dist/components/TextFieldSearch/TextFieldSearch.d.mts.map +1 -1
- package/dist/components/TextFieldSearch/TextFieldSearch.mjs +7 -4
- package/dist/components/TextFieldSearch/TextFieldSearch.mjs.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.35.1]
|
|
11
|
+
|
|
12
|
+
### Fixed
|
|
13
|
+
|
|
14
|
+
- Fixed Checkbox selected state to use monochromatic icon colors instead of primary blue ([#1426](https://github.com/MetaMask/metamask-design-system/pull/1426))
|
|
15
|
+
|
|
16
|
+
## [0.35.0]
|
|
17
|
+
|
|
18
|
+
### Changed
|
|
19
|
+
|
|
20
|
+
- **BREAKING:** `TextFieldSearch` default `size` changed from `TextFieldSize.Md` to `TextFieldSize.Lg` to match Figma designs ([#1418](https://github.com/MetaMask/metamask-design-system/pull/1418))
|
|
21
|
+
- Consumers relying on the implicit `Md` height will now render a taller field; pass `size={TextFieldSize.Md}` to preserve the prior height
|
|
22
|
+
- See [Migration Guide](./MIGRATION.md#from-version-0340-to-0350)
|
|
23
|
+
|
|
24
|
+
### Fixed
|
|
25
|
+
|
|
26
|
+
- Fixed `ModalContent` to apply `border-muted` correctly in pure-black mode ([#1419](https://github.com/MetaMask/metamask-design-system/pull/1419))
|
|
27
|
+
|
|
10
28
|
## [0.34.0]
|
|
11
29
|
|
|
12
30
|
### Added
|
|
@@ -437,7 +455,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
437
455
|
- Full TypeScript support with type definitions and enums
|
|
438
456
|
- Tailwind CSS integration with design token support
|
|
439
457
|
|
|
440
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.
|
|
458
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.35.1...HEAD
|
|
459
|
+
[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
|
|
460
|
+
[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
|
|
441
461
|
[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
|
|
442
462
|
[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
|
|
443
463
|
[0.32.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.31.0...@metamask/design-system-react@0.32.0
|
|
@@ -50,11 +50,11 @@ exports.Checkbox = (0, react_1.forwardRef)(({ id, isSelected, isDisabled = false
|
|
|
50
50
|
(0, react_1.useImperativeHandle)(ref, () => ({ toggle: handleClick }), [handleClick]);
|
|
51
51
|
const outerClassName = (0, tw_merge_1.twMerge)('inline-flex items-center', isDisabled && 'cursor-not-allowed opacity-50', className);
|
|
52
52
|
const baseBg = isSelected
|
|
53
|
-
? 'bg-
|
|
53
|
+
? 'bg-icon-default hover:bg-icon-default-hover active:bg-icon-default-pressed'
|
|
54
54
|
: 'bg-default hover:bg-default-hover active:bg-default-pressed';
|
|
55
55
|
let baseBorder = 'border-default';
|
|
56
56
|
if (isSelected) {
|
|
57
|
-
baseBorder = 'border-
|
|
57
|
+
baseBorder = 'border-icon-default';
|
|
58
58
|
}
|
|
59
59
|
else if (isInvalid) {
|
|
60
60
|
baseBorder = 'border-error-default';
|
|
@@ -65,7 +65,7 @@ exports.Checkbox = (0, react_1.forwardRef)(({ id, isSelected, isDisabled = false
|
|
|
65
65
|
react_1.default.createElement("div", { className: "relative" },
|
|
66
66
|
react_1.default.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: "peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", ...inputProps }),
|
|
67
67
|
react_1.default.createElement("div", { className: checkboxClasses, ...checkboxContainerProps },
|
|
68
|
-
react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Check, color: Icon_1.IconColor.
|
|
68
|
+
react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Check, color: Icon_1.IconColor.IconInverse, size: Icon_1.IconSize.Sm, ...checkedIconProps, className: iconClasses }))),
|
|
69
69
|
label ? (react_1.default.createElement(Text_1.Text, { asChild: true, ...labelProps, className: (0, tw_merge_1.twMerge)('ml-3', labelProps?.className) },
|
|
70
70
|
react_1.default.createElement("span", null, label))) : null));
|
|
71
71
|
});
|
|
@@ -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,0BAA0B,EAC1B,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,MAAM,MAAM,GAAG,UAAU;QACvB,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"Checkbox.cjs","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 outerClassName = twMerge(\n 'inline-flex items-center',\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n const baseBg = isSelected\n ? 'bg-icon-default hover:bg-icon-default-hover active:bg-icon-default-pressed'\n : 'bg-default hover:bg-default-hover 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 const checkboxClasses = twMerge(\n 'relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default',\n baseBg,\n baseBorder,\n checkboxContainerProps?.className,\n );\n\n const iconClasses = twMerge(\n 'pointer-events-none transition-opacity',\n isSelected ? 'opacity-100' : 'opacity-0',\n checkedIconProps?.className,\n );\n\n return (\n <label htmlFor={id} className={outerClassName} style={style} {...props}>\n <div className=\"relative\">\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=\"peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n {...inputProps}\n />\n <div className={checkboxClasses} {...checkboxContainerProps}>\n <Icon\n name={IconName.Check}\n color={IconColor.IconInverse}\n size={IconSize.Sm}\n {...checkedIconProps}\n className={iconClasses}\n />\n </div>\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"]}
|
|
@@ -31,11 +31,11 @@ export const Checkbox = forwardRef(({ id, isSelected, isDisabled = false, isInva
|
|
|
31
31
|
useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);
|
|
32
32
|
const outerClassName = twMerge('inline-flex items-center', isDisabled && 'cursor-not-allowed opacity-50', className);
|
|
33
33
|
const baseBg = isSelected
|
|
34
|
-
? 'bg-
|
|
34
|
+
? 'bg-icon-default hover:bg-icon-default-hover active:bg-icon-default-pressed'
|
|
35
35
|
: 'bg-default hover:bg-default-hover active:bg-default-pressed';
|
|
36
36
|
let baseBorder = 'border-default';
|
|
37
37
|
if (isSelected) {
|
|
38
|
-
baseBorder = 'border-
|
|
38
|
+
baseBorder = 'border-icon-default';
|
|
39
39
|
}
|
|
40
40
|
else if (isInvalid) {
|
|
41
41
|
baseBorder = 'border-error-default';
|
|
@@ -46,7 +46,7 @@ export const Checkbox = forwardRef(({ id, isSelected, isDisabled = false, isInva
|
|
|
46
46
|
React.createElement("div", { className: "relative" },
|
|
47
47
|
React.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: "peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", ...inputProps }),
|
|
48
48
|
React.createElement("div", { className: checkboxClasses, ...checkboxContainerProps },
|
|
49
|
-
React.createElement(Icon, { name: IconName.Check, color: IconColor.
|
|
49
|
+
React.createElement(Icon, { name: IconName.Check, color: IconColor.IconInverse, size: IconSize.Sm, ...checkedIconProps, className: iconClasses }))),
|
|
50
50
|
label ? (React.createElement(Text, { asChild: true, ...labelProps, className: twMerge('ml-3', labelProps?.className) },
|
|
51
51
|
React.createElement("span", null, label))) : null));
|
|
52
52
|
});
|
|
@@ -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,0BAA0B,EAC1B,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,MAAM,MAAM,GAAG,UAAU;QACvB,CAAC,CAAC,
|
|
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 outerClassName = twMerge(\n 'inline-flex items-center',\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n const baseBg = isSelected\n ? 'bg-icon-default hover:bg-icon-default-hover active:bg-icon-default-pressed'\n : 'bg-default hover:bg-default-hover 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 const checkboxClasses = twMerge(\n 'relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default',\n baseBg,\n baseBorder,\n checkboxContainerProps?.className,\n );\n\n const iconClasses = twMerge(\n 'pointer-events-none transition-opacity',\n isSelected ? 'opacity-100' : 'opacity-0',\n checkedIconProps?.className,\n );\n\n return (\n <label htmlFor={id} className={outerClassName} style={style} {...props}>\n <div className=\"relative\">\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=\"peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n {...inputProps}\n />\n <div className={checkboxClasses} {...checkboxContainerProps}>\n <Icon\n name={IconName.Check}\n color={IconColor.IconInverse}\n size={IconSize.Sm}\n {...checkedIconProps}\n className={iconClasses}\n />\n </div>\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"]}
|
|
@@ -70,7 +70,7 @@ exports.ModalContent = (0, react_1.forwardRef)(({ className, children, size = Mo
|
|
|
70
70
|
react_1.default.createElement("div", { ref: ref, className: (0, tw_merge_1.twMerge)('fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12', '[@media(max-height:475px)]:p-2', className), ...props },
|
|
71
71
|
react_1.default.createElement(Box_1.Box, { ref: modalDialogRef, asChild: true, backgroundColor: isPureBlack
|
|
72
72
|
? Box_1.BoxBackgroundColor.BackgroundAlternative
|
|
73
|
-
: Box_1.BoxBackgroundColor.BackgroundDefault, justifyContent: Box_1.BoxJustifyContent.Start, alignItems: Box_1.BoxAlignItems.Stretch, flexDirection: Box_1.BoxFlexDirection.Column, paddingTop: 4, paddingBottom: 4, ...modalDialogProps, className: (0, tw_merge_1.twMerge)('flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up', ModalContent_constants_1.TWCLASSMAP_MODAL_CONTENT_SIZE[size], modalDialogProps?.className) },
|
|
73
|
+
: Box_1.BoxBackgroundColor.BackgroundDefault, justifyContent: Box_1.BoxJustifyContent.Start, alignItems: Box_1.BoxAlignItems.Stretch, flexDirection: Box_1.BoxFlexDirection.Column, paddingTop: 4, paddingBottom: 4, ...modalDialogProps, className: (0, tw_merge_1.twMerge)('flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up', ModalContent_constants_1.TWCLASSMAP_MODAL_CONTENT_SIZE[size], isPureBlack && 'border border-muted', modalDialogProps?.className) },
|
|
74
74
|
react_1.default.createElement("section", { role: "dialog", "aria-modal": "true" }, children)))));
|
|
75
75
|
});
|
|
76
76
|
exports.ModalContent.displayName = 'ModalContent';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContent.cjs","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n Box,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n BoxJustifyContent,\n} from '../Box';\nimport { useModalContext } from '../Modal';\nimport { ModalFocus } from '../ModalFocus';\nimport { usePureBlack } from '../PureBlackProvider';\n\nimport {\n MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR,\n TWCLASSMAP_MODAL_CONTENT_SIZE,\n} from './ModalContent.constants';\nimport type { ModalContentProps } from './ModalContent.types';\nimport { ModalContentSize } from './ModalContent.types';\n\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n (\n {\n className,\n children,\n size = ModalContentSize.Sm,\n modalDialogProps,\n ...props\n },\n ref,\n ) => {\n const {\n onClose,\n isClosedOnEscapeKey,\n isClosedOnOutsideClick,\n initialFocusRef,\n finalFocusRef,\n restoreFocus,\n autoFocus,\n } = useModalContext();\n const isPureBlack = usePureBlack();\n const modalDialogRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const handleEscKey = (event: KeyboardEvent) => {\n if (isClosedOnEscapeKey && event.key === 'Escape') {\n onClose();\n }\n };\n const handleClickOutside = (event: MouseEvent) => {\n if (!isClosedOnOutsideClick) {\n return;\n }\n const target = event.target as HTMLElement | null;\n // Floating UI primitives (Popover, Tooltip, Select dropdown, etc.)\n // that portal alongside the Modal but are part of the modal\n // interaction can opt out of the outside-click handler by setting\n // `data-mm-modal-ignore-outside-click` on their root element.\n if (target?.closest(`[${MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR}]`)) {\n return;\n }\n if (\n modalDialogRef.current &&\n !modalDialogRef.current.contains(target as Node)\n ) {\n onClose();\n }\n };\n\n document.addEventListener('keydown', handleEscKey);\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n document.removeEventListener('keydown', handleEscKey);\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isClosedOnEscapeKey, isClosedOnOutsideClick, onClose]);\n\n return (\n <ModalFocus\n initialFocusRef={initialFocusRef}\n finalFocusRef={finalFocusRef}\n restoreFocus={restoreFocus}\n autoFocus={autoFocus}\n >\n <div\n ref={ref}\n className={twMerge(\n 'fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12',\n '[@media(max-height:475px)]:p-2',\n className,\n )}\n {...props}\n >\n <Box\n ref={modalDialogRef as React.Ref<HTMLDivElement>}\n asChild\n backgroundColor={\n isPureBlack\n ? BoxBackgroundColor.BackgroundAlternative\n : BoxBackgroundColor.BackgroundDefault\n }\n justifyContent={BoxJustifyContent.Start}\n alignItems={BoxAlignItems.Stretch}\n flexDirection={BoxFlexDirection.Column}\n paddingTop={4}\n paddingBottom={4}\n {...modalDialogProps}\n className={twMerge(\n 'flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up',\n TWCLASSMAP_MODAL_CONTENT_SIZE[size],\n modalDialogProps?.className,\n )}\n >\n <section role=\"dialog\" aria-modal=\"true\">\n {children}\n </section>\n </Box>\n </div>\n </ModalFocus>\n );\n },\n);\n\nModalContent.displayName = 'ModalContent';\n"]}
|
|
1
|
+
{"version":3,"file":"ModalContent.cjs","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6D;AAE7D,uDAA+C;AAC/C,0CAMgB;AAChB,8CAA2C;AAC3C,wDAA2C;AAC3C,sEAAoD;AAEpD,yEAGkC;AAElC,iEAAwD;AAE3C,QAAA,YAAY,GAAG,IAAA,kBAAU,EACpC,CACE,EACE,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,qCAAgB,CAAC,EAAE,EAC1B,gBAAgB,EAChB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,EACJ,OAAO,EACP,mBAAmB,EACnB,sBAAsB,EACtB,eAAe,EACf,aAAa,EACb,YAAY,EACZ,SAAS,GACV,GAAG,IAAA,uBAAe,GAAE,CAAC;IACtB,MAAM,WAAW,GAAG,IAAA,gCAAY,GAAE,CAAC;IACnC,MAAM,cAAc,GAAG,IAAA,cAAM,EAAc,IAAI,CAAC,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC5C,IAAI,mBAAmB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACjD,OAAO,EAAE,CAAC;aACX;QACH,CAAC,CAAC;QACF,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,IAAI,CAAC,sBAAsB,EAAE;gBAC3B,OAAO;aACR;YACD,MAAM,MAAM,GAAG,KAAK,CAAC,MAA4B,CAAC;YAClD,mEAAmE;YACnE,4DAA4D;YAC5D,kEAAkE;YAClE,8DAA8D;YAC9D,IAAI,MAAM,EAAE,OAAO,CAAC,IAAI,gEAAuC,GAAG,CAAC,EAAE;gBACnE,OAAO;aACR;YACD,IACE,cAAc,CAAC,OAAO;gBACtB,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAc,CAAC,EAChD;gBACA,OAAO,EAAE,CAAC;aACX;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACnD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAE3D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;YACtD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,mBAAmB,EAAE,sBAAsB,EAAE,OAAO,CAAC,CAAC,CAAC;IAE3D,OAAO,CACL,8BAAC,uBAAU,IACT,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS;QAEpB,uCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,kBAAO,EAChB,6EAA6E,EAC7E,gCAAgC,EAChC,SAAS,CACV,KACG,KAAK;YAET,8BAAC,SAAG,IACF,GAAG,EAAE,cAA2C,EAChD,OAAO,QACP,eAAe,EACb,WAAW;oBACT,CAAC,CAAC,wBAAkB,CAAC,qBAAqB;oBAC1C,CAAC,CAAC,wBAAkB,CAAC,iBAAiB,EAE1C,cAAc,EAAE,uBAAiB,CAAC,KAAK,EACvC,UAAU,EAAE,mBAAa,CAAC,OAAO,EACjC,aAAa,EAAE,sBAAgB,CAAC,MAAM,EACtC,UAAU,EAAE,CAAC,EACb,aAAa,EAAE,CAAC,KACZ,gBAAgB,EACpB,SAAS,EAAE,IAAA,kBAAO,EAChB,0EAA0E,EAC1E,sDAA6B,CAAC,IAAI,CAAC,EACnC,WAAW,IAAI,qBAAqB,EACpC,gBAAgB,EAAE,SAAS,CAC5B;gBAED,2CAAS,IAAI,EAAC,QAAQ,gBAAY,MAAM,IACrC,QAAQ,CACD,CACN,CACF,CACK,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n Box,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n BoxJustifyContent,\n} from '../Box';\nimport { useModalContext } from '../Modal';\nimport { ModalFocus } from '../ModalFocus';\nimport { usePureBlack } from '../PureBlackProvider';\n\nimport {\n MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR,\n TWCLASSMAP_MODAL_CONTENT_SIZE,\n} from './ModalContent.constants';\nimport type { ModalContentProps } from './ModalContent.types';\nimport { ModalContentSize } from './ModalContent.types';\n\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n (\n {\n className,\n children,\n size = ModalContentSize.Sm,\n modalDialogProps,\n ...props\n },\n ref,\n ) => {\n const {\n onClose,\n isClosedOnEscapeKey,\n isClosedOnOutsideClick,\n initialFocusRef,\n finalFocusRef,\n restoreFocus,\n autoFocus,\n } = useModalContext();\n const isPureBlack = usePureBlack();\n const modalDialogRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const handleEscKey = (event: KeyboardEvent) => {\n if (isClosedOnEscapeKey && event.key === 'Escape') {\n onClose();\n }\n };\n const handleClickOutside = (event: MouseEvent) => {\n if (!isClosedOnOutsideClick) {\n return;\n }\n const target = event.target as HTMLElement | null;\n // Floating UI primitives (Popover, Tooltip, Select dropdown, etc.)\n // that portal alongside the Modal but are part of the modal\n // interaction can opt out of the outside-click handler by setting\n // `data-mm-modal-ignore-outside-click` on their root element.\n if (target?.closest(`[${MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR}]`)) {\n return;\n }\n if (\n modalDialogRef.current &&\n !modalDialogRef.current.contains(target as Node)\n ) {\n onClose();\n }\n };\n\n document.addEventListener('keydown', handleEscKey);\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n document.removeEventListener('keydown', handleEscKey);\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isClosedOnEscapeKey, isClosedOnOutsideClick, onClose]);\n\n return (\n <ModalFocus\n initialFocusRef={initialFocusRef}\n finalFocusRef={finalFocusRef}\n restoreFocus={restoreFocus}\n autoFocus={autoFocus}\n >\n <div\n ref={ref}\n className={twMerge(\n 'fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12',\n '[@media(max-height:475px)]:p-2',\n className,\n )}\n {...props}\n >\n <Box\n ref={modalDialogRef as React.Ref<HTMLDivElement>}\n asChild\n backgroundColor={\n isPureBlack\n ? BoxBackgroundColor.BackgroundAlternative\n : BoxBackgroundColor.BackgroundDefault\n }\n justifyContent={BoxJustifyContent.Start}\n alignItems={BoxAlignItems.Stretch}\n flexDirection={BoxFlexDirection.Column}\n paddingTop={4}\n paddingBottom={4}\n {...modalDialogProps}\n className={twMerge(\n 'flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up',\n TWCLASSMAP_MODAL_CONTENT_SIZE[size],\n isPureBlack && 'border border-muted',\n modalDialogProps?.className,\n )}\n >\n <section role=\"dialog\" aria-modal=\"true\">\n {children}\n </section>\n </Box>\n </div>\n </ModalFocus>\n );\n },\n);\n\nModalContent.displayName = 'ModalContent';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContent.d.cts","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,cAAc;AAkB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAG9D,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"ModalContent.d.cts","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,cAAc;AAkB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAG9D,eAAO,MAAM,YAAY,uGAuGxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContent.d.mts","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,cAAc;AAkB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAG9D,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"ModalContent.d.mts","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,cAAc;AAkB7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAG9D,eAAO,MAAM,YAAY,uGAuGxB,CAAC"}
|
|
@@ -51,7 +51,7 @@ export const ModalContent = forwardRef(({ className, children, size = ModalConte
|
|
|
51
51
|
React.createElement("div", { ref: ref, className: twMerge('fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12', '[@media(max-height:475px)]:p-2', className), ...props },
|
|
52
52
|
React.createElement(Box, { ref: modalDialogRef, asChild: true, backgroundColor: isPureBlack
|
|
53
53
|
? BoxBackgroundColor.BackgroundAlternative
|
|
54
|
-
: BoxBackgroundColor.BackgroundDefault, justifyContent: BoxJustifyContent.Start, alignItems: BoxAlignItems.Stretch, flexDirection: BoxFlexDirection.Column, paddingTop: 4, paddingBottom: 4, ...modalDialogProps, className: twMerge('flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up', TWCLASSMAP_MODAL_CONTENT_SIZE[size], modalDialogProps?.className) },
|
|
54
|
+
: BoxBackgroundColor.BackgroundDefault, justifyContent: BoxJustifyContent.Start, alignItems: BoxAlignItems.Stretch, flexDirection: BoxFlexDirection.Column, paddingTop: 4, paddingBottom: 4, ...modalDialogProps, className: twMerge('flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up', TWCLASSMAP_MODAL_CONTENT_SIZE[size], isPureBlack && 'border border-muted', modalDialogProps?.className) },
|
|
55
55
|
React.createElement("section", { role: "dialog", "aria-modal": "true" }, children)))));
|
|
56
56
|
});
|
|
57
57
|
ModalContent.displayName = 'ModalContent';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContent.mjs","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,cAAc;;AAE7D,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EACL,GAAG,EACH,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EAClB,yBAAe;AAChB,OAAO,EAAE,eAAe,EAAE,2BAAiB;AAC3C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,YAAY,EAAE,uCAA6B;AAEpD,OAAO,EACL,uCAAuC,EACvC,6BAA6B,EAC9B,qCAAiC;AAElC,OAAO,EAAE,gBAAgB,EAAE,iCAA6B;AAExD,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,CACE,EACE,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,gBAAgB,CAAC,EAAE,EAC1B,gBAAgB,EAChB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,EACJ,OAAO,EACP,mBAAmB,EACnB,sBAAsB,EACtB,eAAe,EACf,aAAa,EACb,YAAY,EACZ,SAAS,GACV,GAAG,eAAe,EAAE,CAAC;IACtB,MAAM,WAAW,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,cAAc,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC5C,IAAI,mBAAmB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACjD,OAAO,EAAE,CAAC;aACX;QACH,CAAC,CAAC;QACF,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,IAAI,CAAC,sBAAsB,EAAE;gBAC3B,OAAO;aACR;YACD,MAAM,MAAM,GAAG,KAAK,CAAC,MAA4B,CAAC;YAClD,mEAAmE;YACnE,4DAA4D;YAC5D,kEAAkE;YAClE,8DAA8D;YAC9D,IAAI,MAAM,EAAE,OAAO,CAAC,IAAI,uCAAuC,GAAG,CAAC,EAAE;gBACnE,OAAO;aACR;YACD,IACE,cAAc,CAAC,OAAO;gBACtB,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAc,CAAC,EAChD;gBACA,OAAO,EAAE,CAAC;aACX;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACnD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAE3D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;YACtD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,mBAAmB,EAAE,sBAAsB,EAAE,OAAO,CAAC,CAAC,CAAC;IAE3D,OAAO,CACL,oBAAC,UAAU,IACT,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS;QAEpB,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAChB,6EAA6E,EAC7E,gCAAgC,EAChC,SAAS,CACV,KACG,KAAK;YAET,oBAAC,GAAG,IACF,GAAG,EAAE,cAA2C,EAChD,OAAO,QACP,eAAe,EACb,WAAW;oBACT,CAAC,CAAC,kBAAkB,CAAC,qBAAqB;oBAC1C,CAAC,CAAC,kBAAkB,CAAC,iBAAiB,EAE1C,cAAc,EAAE,iBAAiB,CAAC,KAAK,EACvC,UAAU,EAAE,aAAa,CAAC,OAAO,EACjC,aAAa,EAAE,gBAAgB,CAAC,MAAM,EACtC,UAAU,EAAE,CAAC,EACb,aAAa,EAAE,CAAC,KACZ,gBAAgB,EACpB,SAAS,EAAE,OAAO,CAChB,0EAA0E,EAC1E,6BAA6B,CAAC,IAAI,CAAC,EACnC,gBAAgB,EAAE,SAAS,CAC5B;gBAED,iCAAS,IAAI,EAAC,QAAQ,gBAAY,MAAM,IACrC,QAAQ,CACD,CACN,CACF,CACK,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n Box,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n BoxJustifyContent,\n} from '../Box';\nimport { useModalContext } from '../Modal';\nimport { ModalFocus } from '../ModalFocus';\nimport { usePureBlack } from '../PureBlackProvider';\n\nimport {\n MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR,\n TWCLASSMAP_MODAL_CONTENT_SIZE,\n} from './ModalContent.constants';\nimport type { ModalContentProps } from './ModalContent.types';\nimport { ModalContentSize } from './ModalContent.types';\n\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n (\n {\n className,\n children,\n size = ModalContentSize.Sm,\n modalDialogProps,\n ...props\n },\n ref,\n ) => {\n const {\n onClose,\n isClosedOnEscapeKey,\n isClosedOnOutsideClick,\n initialFocusRef,\n finalFocusRef,\n restoreFocus,\n autoFocus,\n } = useModalContext();\n const isPureBlack = usePureBlack();\n const modalDialogRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const handleEscKey = (event: KeyboardEvent) => {\n if (isClosedOnEscapeKey && event.key === 'Escape') {\n onClose();\n }\n };\n const handleClickOutside = (event: MouseEvent) => {\n if (!isClosedOnOutsideClick) {\n return;\n }\n const target = event.target as HTMLElement | null;\n // Floating UI primitives (Popover, Tooltip, Select dropdown, etc.)\n // that portal alongside the Modal but are part of the modal\n // interaction can opt out of the outside-click handler by setting\n // `data-mm-modal-ignore-outside-click` on their root element.\n if (target?.closest(`[${MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR}]`)) {\n return;\n }\n if (\n modalDialogRef.current &&\n !modalDialogRef.current.contains(target as Node)\n ) {\n onClose();\n }\n };\n\n document.addEventListener('keydown', handleEscKey);\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n document.removeEventListener('keydown', handleEscKey);\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isClosedOnEscapeKey, isClosedOnOutsideClick, onClose]);\n\n return (\n <ModalFocus\n initialFocusRef={initialFocusRef}\n finalFocusRef={finalFocusRef}\n restoreFocus={restoreFocus}\n autoFocus={autoFocus}\n >\n <div\n ref={ref}\n className={twMerge(\n 'fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12',\n '[@media(max-height:475px)]:p-2',\n className,\n )}\n {...props}\n >\n <Box\n ref={modalDialogRef as React.Ref<HTMLDivElement>}\n asChild\n backgroundColor={\n isPureBlack\n ? BoxBackgroundColor.BackgroundAlternative\n : BoxBackgroundColor.BackgroundDefault\n }\n justifyContent={BoxJustifyContent.Start}\n alignItems={BoxAlignItems.Stretch}\n flexDirection={BoxFlexDirection.Column}\n paddingTop={4}\n paddingBottom={4}\n {...modalDialogProps}\n className={twMerge(\n 'flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up',\n TWCLASSMAP_MODAL_CONTENT_SIZE[size],\n modalDialogProps?.className,\n )}\n >\n <section role=\"dialog\" aria-modal=\"true\">\n {children}\n </section>\n </Box>\n </div>\n </ModalFocus>\n );\n },\n);\n\nModalContent.displayName = 'ModalContent';\n"]}
|
|
1
|
+
{"version":3,"file":"ModalContent.mjs","sourceRoot":"","sources":["../../../src/components/ModalContent/ModalContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n Box,\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n BoxJustifyContent,\n} from '../Box';\nimport { useModalContext } from '../Modal';\nimport { ModalFocus } from '../ModalFocus';\nimport { usePureBlack } from '../PureBlackProvider';\n\nimport {\n MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR,\n TWCLASSMAP_MODAL_CONTENT_SIZE,\n} from './ModalContent.constants';\nimport type { ModalContentProps } from './ModalContent.types';\nimport { ModalContentSize } from './ModalContent.types';\n\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n (\n {\n className,\n children,\n size = ModalContentSize.Sm,\n modalDialogProps,\n ...props\n },\n ref,\n ) => {\n const {\n onClose,\n isClosedOnEscapeKey,\n isClosedOnOutsideClick,\n initialFocusRef,\n finalFocusRef,\n restoreFocus,\n autoFocus,\n } = useModalContext();\n const isPureBlack = usePureBlack();\n const modalDialogRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const handleEscKey = (event: KeyboardEvent) => {\n if (isClosedOnEscapeKey && event.key === 'Escape') {\n onClose();\n }\n };\n const handleClickOutside = (event: MouseEvent) => {\n if (!isClosedOnOutsideClick) {\n return;\n }\n const target = event.target as HTMLElement | null;\n // Floating UI primitives (Popover, Tooltip, Select dropdown, etc.)\n // that portal alongside the Modal but are part of the modal\n // interaction can opt out of the outside-click handler by setting\n // `data-mm-modal-ignore-outside-click` on their root element.\n if (target?.closest(`[${MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR}]`)) {\n return;\n }\n if (\n modalDialogRef.current &&\n !modalDialogRef.current.contains(target as Node)\n ) {\n onClose();\n }\n };\n\n document.addEventListener('keydown', handleEscKey);\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n document.removeEventListener('keydown', handleEscKey);\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isClosedOnEscapeKey, isClosedOnOutsideClick, onClose]);\n\n return (\n <ModalFocus\n initialFocusRef={initialFocusRef}\n finalFocusRef={finalFocusRef}\n restoreFocus={restoreFocus}\n autoFocus={autoFocus}\n >\n <div\n ref={ref}\n className={twMerge(\n 'fixed inset-0 z-[1050] flex items-start justify-center p-4 sm:py-8 md:py-12',\n '[@media(max-height:475px)]:p-2',\n className,\n )}\n {...props}\n >\n <Box\n ref={modalDialogRef as React.Ref<HTMLDivElement>}\n asChild\n backgroundColor={\n isPureBlack\n ? BoxBackgroundColor.BackgroundAlternative\n : BoxBackgroundColor.BackgroundDefault\n }\n justifyContent={BoxJustifyContent.Start}\n alignItems={BoxAlignItems.Stretch}\n flexDirection={BoxFlexDirection.Column}\n paddingTop={4}\n paddingBottom={4}\n {...modalDialogProps}\n className={twMerge(\n 'flex max-h-full w-full rounded-lg shadow-lg motion-safe:animate-slide-up',\n TWCLASSMAP_MODAL_CONTENT_SIZE[size],\n isPureBlack && 'border border-muted',\n modalDialogProps?.className,\n )}\n >\n <section role=\"dialog\" aria-modal=\"true\">\n {children}\n </section>\n </Box>\n </div>\n </ModalFocus>\n );\n },\n);\n\nModalContent.displayName = 'ModalContent';\n"]}
|
|
@@ -29,12 +29,15 @@ const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
|
29
29
|
const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
|
|
30
30
|
const Icon_1 = require("../Icon/index.cjs");
|
|
31
31
|
const TextField_1 = require("../TextField/index.cjs");
|
|
32
|
-
exports.TextFieldSearch = (0, react_1.forwardRef)(({ clearButtonOnClick, clearButtonProps, endAccessory, value, startAccessory, isDisabled = false, className, ...props }, ref) => {
|
|
33
|
-
const clearButton = value ? (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { "data-testid": "text-field-search-clear-button", ariaLabel: "Clear", iconName: Icon_1.IconName.CircleX, size: ButtonIcon_1.ButtonIconSize.Md, iconProps: { color: Icon_1.IconColor.
|
|
32
|
+
exports.TextFieldSearch = (0, react_1.forwardRef)(({ clearButtonOnClick, clearButtonProps, endAccessory, value, startAccessory, isDisabled = false, className, inputProps, ...props }, ref) => {
|
|
33
|
+
const clearButton = value ? (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { "data-testid": "text-field-search-clear-button", ariaLabel: "Clear", iconName: Icon_1.IconName.CircleX, size: ButtonIcon_1.ButtonIconSize.Md, iconProps: { color: Icon_1.IconColor.IconDefault }, ...clearButtonProps, isDisabled: isDisabled || clearButtonProps?.isDisabled, onClick: clearButtonOnClick })) : null;
|
|
34
34
|
const resolvedEndAccessory = clearButton || endAccessory ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
35
35
|
clearButton,
|
|
36
36
|
endAccessory)) : undefined;
|
|
37
|
-
return (react_1.default.createElement(TextField_1.TextField, { ref: ref, value: value, isDisabled: isDisabled, type: TextField_1.TextFieldType.Search, className: (0, tw_merge_1.twMerge)('rounded-full',
|
|
37
|
+
return (react_1.default.createElement(TextField_1.TextField, { ref: ref, value: value, isDisabled: isDisabled, type: TextField_1.TextFieldType.Search, size: TextField_1.TextFieldSize.Lg, className: (0, tw_merge_1.twMerge)('rounded-full bg-muted', !isDisabled && !props.isError && 'hover:bg-muted-hover', className), inputProps: {
|
|
38
|
+
...inputProps,
|
|
39
|
+
className: (0, tw_merge_1.twMerge)('[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden', inputProps?.className),
|
|
40
|
+
}, startAccessory: startAccessory ?? (react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Search, size: Icon_1.IconSize.Md, color: Icon_1.IconColor.IconAlternative })), endAccessory: resolvedEndAccessory, ...props }));
|
|
38
41
|
});
|
|
39
42
|
exports.TextFieldSearch.displayName = 'TextFieldSearch';
|
|
40
43
|
//# sourceMappingURL=TextFieldSearch.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextFieldSearch.cjs","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,uDAA+C;AAC/C,wDAA2D;AAC3D,4CAA8D;AAC9D,
|
|
1
|
+
{"version":3,"file":"TextFieldSearch.cjs","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,uDAA+C;AAC/C,wDAA2D;AAC3D,4CAA8D;AAC9D,sDAAuE;AAI1D,QAAA,eAAe,GAAG,IAAA,kBAAU,EACvC,CACE,EACE,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,CAC1B,8BAAC,uBAAU,mBACG,gCAAgC,EAC5C,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,eAAQ,CAAC,OAAO,EAC1B,IAAI,EAAE,2BAAc,CAAC,EAAE,EACvB,SAAS,EAAE,EAAE,KAAK,EAAE,gBAAS,CAAC,WAAW,EAAE,KACvC,gBAAgB,EACpB,UAAU,EAAE,UAAU,IAAI,gBAAgB,EAAE,UAAU,EACtD,OAAO,EAAE,kBAAkB,GAC3B,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,oBAAoB,GACxB,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,CAC5B;QACG,WAAW;QACX,YAAY,CACZ,CACJ,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,8BAAC,qBAAS,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,yBAAa,CAAC,MAAM,EAC1B,IAAI,EAAE,yBAAa,CAAC,EAAE,EACtB,SAAS,EAAE,IAAA,kBAAO,EAChB,uBAAuB,EACvB,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,sBAAsB,EACvD,SAAS,CACV,EACD,UAAU,EAAE;YACV,GAAG,UAAU;YACb,SAAS,EAAE,IAAA,kBAAO,EAChB,wKAAwK,EACxK,UAAU,EAAE,SAAS,CACtB;SACF,EACD,cAAc,EACZ,cAAc,IAAI,CAChB,8BAAC,WAAI,IACH,IAAI,EAAE,eAAQ,CAAC,MAAM,EACrB,IAAI,EAAE,eAAQ,CAAC,EAAE,EACjB,KAAK,EAAE,gBAAS,CAAC,eAAe,GAChC,CACH,EAEH,YAAY,EAAE,oBAAoB,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { Icon, IconColor, IconName, IconSize } from '../Icon';\nimport { TextField, TextFieldSize, TextFieldType } from '../TextField';\n\nimport type { TextFieldSearchProps } from './TextFieldSearch.types';\n\nexport const TextFieldSearch = forwardRef<HTMLDivElement, TextFieldSearchProps>(\n (\n {\n clearButtonOnClick,\n clearButtonProps,\n endAccessory,\n value,\n startAccessory,\n isDisabled = false,\n className,\n inputProps,\n ...props\n },\n ref,\n ) => {\n const clearButton = value ? (\n <ButtonIcon\n data-testid=\"text-field-search-clear-button\"\n ariaLabel=\"Clear\"\n iconName={IconName.CircleX}\n size={ButtonIconSize.Md}\n iconProps={{ color: IconColor.IconDefault }}\n {...clearButtonProps}\n isDisabled={isDisabled || clearButtonProps?.isDisabled}\n onClick={clearButtonOnClick}\n />\n ) : null;\n\n const resolvedEndAccessory =\n clearButton || endAccessory ? (\n <>\n {clearButton}\n {endAccessory}\n </>\n ) : undefined;\n\n return (\n <TextField\n ref={ref}\n value={value}\n isDisabled={isDisabled}\n type={TextFieldType.Search}\n size={TextFieldSize.Lg}\n className={twMerge(\n 'rounded-full bg-muted',\n !isDisabled && !props.isError && 'hover:bg-muted-hover',\n className,\n )}\n inputProps={{\n ...inputProps,\n className: twMerge(\n '[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden',\n inputProps?.className,\n ),\n }}\n startAccessory={\n startAccessory ?? (\n <Icon\n name={IconName.Search}\n size={IconSize.Md}\n color={IconColor.IconAlternative}\n />\n )\n }\n endAccessory={resolvedEndAccessory}\n {...props}\n />\n );\n },\n);\n\nTextFieldSearch.displayName = 'TextFieldSearch';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextFieldSearch.d.cts","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAS1C,eAAO,MAAM,eAAe;;;
|
|
1
|
+
{"version":3,"file":"TextFieldSearch.d.cts","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAS1C,eAAO,MAAM,eAAe;;;wCAqE3B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextFieldSearch.d.mts","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAS1C,eAAO,MAAM,eAAe;;;
|
|
1
|
+
{"version":3,"file":"TextFieldSearch.d.mts","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAS1C,eAAO,MAAM,eAAe;;;wCAqE3B,CAAC"}
|
|
@@ -9,13 +9,16 @@ const React = $importDefault($React);
|
|
|
9
9
|
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
10
10
|
import { ButtonIcon, ButtonIconSize } from "../ButtonIcon/index.mjs";
|
|
11
11
|
import { Icon, IconColor, IconName, IconSize } from "../Icon/index.mjs";
|
|
12
|
-
import { TextField, TextFieldType } from "../TextField/index.mjs";
|
|
13
|
-
export const TextFieldSearch = forwardRef(({ clearButtonOnClick, clearButtonProps, endAccessory, value, startAccessory, isDisabled = false, className, ...props }, ref) => {
|
|
14
|
-
const clearButton = value ? (React.createElement(ButtonIcon, { "data-testid": "text-field-search-clear-button", ariaLabel: "Clear", iconName: IconName.CircleX, size: ButtonIconSize.Md, iconProps: { color: IconColor.
|
|
12
|
+
import { TextField, TextFieldSize, TextFieldType } from "../TextField/index.mjs";
|
|
13
|
+
export const TextFieldSearch = forwardRef(({ clearButtonOnClick, clearButtonProps, endAccessory, value, startAccessory, isDisabled = false, className, inputProps, ...props }, ref) => {
|
|
14
|
+
const clearButton = value ? (React.createElement(ButtonIcon, { "data-testid": "text-field-search-clear-button", ariaLabel: "Clear", iconName: IconName.CircleX, size: ButtonIconSize.Md, iconProps: { color: IconColor.IconDefault }, ...clearButtonProps, isDisabled: isDisabled || clearButtonProps?.isDisabled, onClick: clearButtonOnClick })) : null;
|
|
15
15
|
const resolvedEndAccessory = clearButton || endAccessory ? (React.createElement(React.Fragment, null,
|
|
16
16
|
clearButton,
|
|
17
17
|
endAccessory)) : undefined;
|
|
18
|
-
return (React.createElement(TextField, { ref: ref, value: value, isDisabled: isDisabled, type: TextFieldType.Search, className: twMerge('rounded-full',
|
|
18
|
+
return (React.createElement(TextField, { ref: ref, value: value, isDisabled: isDisabled, type: TextFieldType.Search, size: TextFieldSize.Lg, className: twMerge('rounded-full bg-muted', !isDisabled && !props.isError && 'hover:bg-muted-hover', className), inputProps: {
|
|
19
|
+
...inputProps,
|
|
20
|
+
className: twMerge('[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden', inputProps?.className),
|
|
21
|
+
}, startAccessory: startAccessory ?? (React.createElement(Icon, { name: IconName.Search, size: IconSize.Md, color: IconColor.IconAlternative })), endAccessory: resolvedEndAccessory, ...props }));
|
|
19
22
|
});
|
|
20
23
|
TextFieldSearch.displayName = 'TextFieldSearch';
|
|
21
24
|
//# sourceMappingURL=TextFieldSearch.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextFieldSearch.mjs","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gCAAsB;AAC3D,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,0BAAgB;AAC9D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,+BAAqB;
|
|
1
|
+
{"version":3,"file":"TextFieldSearch.mjs","sourceRoot":"","sources":["../../../src/components/TextFieldSearch/TextFieldSearch.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gCAAsB;AAC3D,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,0BAAgB;AAC9D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,+BAAqB;AAIvE,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CACvC,CACE,EACE,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,CAC1B,oBAAC,UAAU,mBACG,gCAAgC,EAC5C,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,QAAQ,CAAC,OAAO,EAC1B,IAAI,EAAE,cAAc,CAAC,EAAE,EACvB,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,CAAC,WAAW,EAAE,KACvC,gBAAgB,EACpB,UAAU,EAAE,UAAU,IAAI,gBAAgB,EAAE,UAAU,EACtD,OAAO,EAAE,kBAAkB,GAC3B,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,oBAAoB,GACxB,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,CAC5B;QACG,WAAW;QACX,YAAY,CACZ,CACJ,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,aAAa,CAAC,MAAM,EAC1B,IAAI,EAAE,aAAa,CAAC,EAAE,EACtB,SAAS,EAAE,OAAO,CAChB,uBAAuB,EACvB,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,sBAAsB,EACvD,SAAS,CACV,EACD,UAAU,EAAE;YACV,GAAG,UAAU;YACb,SAAS,EAAE,OAAO,CAChB,wKAAwK,EACxK,UAAU,EAAE,SAAS,CACtB;SACF,EACD,cAAc,EACZ,cAAc,IAAI,CAChB,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,CAAC,MAAM,EACrB,IAAI,EAAE,QAAQ,CAAC,EAAE,EACjB,KAAK,EAAE,SAAS,CAAC,eAAe,GAChC,CACH,EAEH,YAAY,EAAE,oBAAoB,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { Icon, IconColor, IconName, IconSize } from '../Icon';\nimport { TextField, TextFieldSize, TextFieldType } from '../TextField';\n\nimport type { TextFieldSearchProps } from './TextFieldSearch.types';\n\nexport const TextFieldSearch = forwardRef<HTMLDivElement, TextFieldSearchProps>(\n (\n {\n clearButtonOnClick,\n clearButtonProps,\n endAccessory,\n value,\n startAccessory,\n isDisabled = false,\n className,\n inputProps,\n ...props\n },\n ref,\n ) => {\n const clearButton = value ? (\n <ButtonIcon\n data-testid=\"text-field-search-clear-button\"\n ariaLabel=\"Clear\"\n iconName={IconName.CircleX}\n size={ButtonIconSize.Md}\n iconProps={{ color: IconColor.IconDefault }}\n {...clearButtonProps}\n isDisabled={isDisabled || clearButtonProps?.isDisabled}\n onClick={clearButtonOnClick}\n />\n ) : null;\n\n const resolvedEndAccessory =\n clearButton || endAccessory ? (\n <>\n {clearButton}\n {endAccessory}\n </>\n ) : undefined;\n\n return (\n <TextField\n ref={ref}\n value={value}\n isDisabled={isDisabled}\n type={TextFieldType.Search}\n size={TextFieldSize.Lg}\n className={twMerge(\n 'rounded-full bg-muted',\n !isDisabled && !props.isError && 'hover:bg-muted-hover',\n className,\n )}\n inputProps={{\n ...inputProps,\n className: twMerge(\n '[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden',\n inputProps?.className,\n ),\n }}\n startAccessory={\n startAccessory ?? (\n <Icon\n name={IconName.Search}\n size={IconSize.Md}\n color={IconColor.IconAlternative}\n />\n )\n }\n endAccessory={resolvedEndAccessory}\n {...props}\n />\n );\n },\n);\n\nTextFieldSearch.displayName = 'TextFieldSearch';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metamask/design-system-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.35.1",
|
|
4
4
|
"description": "Design system react ui components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"MetaMask",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@floating-ui/react-dom": "^2.1.2",
|
|
51
|
-
"@metamask/design-system-shared": "^0.
|
|
51
|
+
"@metamask/design-system-shared": "^0.32.0",
|
|
52
52
|
"@metamask/jazzicon": "^2.0.0",
|
|
53
53
|
"@radix-ui/react-slot": "^1.1.0",
|
|
54
54
|
"blo": "^2.0.0",
|