@coveord/plasma-mantine 49.1.1 → 49.1.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/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +9 -9
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/button/Button.js +16 -8
- package/dist/cjs/components/button/Button.js.map +1 -1
- package/dist/cjs/components/button/ButtonWithDisabledTooltip.js +17 -36
- package/dist/cjs/components/button/ButtonWithDisabledTooltip.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirm.js +2 -0
- package/dist/cjs/components/inline-confirm/InlineConfirm.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmButton.js +16 -11
- package/dist/cjs/components/inline-confirm/InlineConfirmButton.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmMenuItem.js +33 -0
- package/dist/cjs/components/inline-confirm/InlineConfirmMenuItem.js.map +1 -0
- package/dist/cjs/components/menu/Menu.js +17 -6
- package/dist/cjs/components/menu/Menu.js.map +1 -1
- package/dist/cjs/theme/Theme.js +9 -2
- package/dist/cjs/theme/Theme.js.map +1 -1
- package/dist/definitions/components/button/Button.d.ts +1 -2
- package/dist/definitions/components/button/Button.d.ts.map +1 -1
- package/dist/definitions/components/button/ButtonWithDisabledTooltip.d.ts +10 -9
- package/dist/definitions/components/button/ButtonWithDisabledTooltip.d.ts.map +1 -1
- package/dist/definitions/components/inline-confirm/InlineConfirm.d.ts +2 -0
- package/dist/definitions/components/inline-confirm/InlineConfirm.d.ts.map +1 -1
- package/dist/definitions/components/inline-confirm/InlineConfirmButton.d.ts +4 -4
- package/dist/definitions/components/inline-confirm/InlineConfirmButton.d.ts.map +1 -1
- package/dist/definitions/components/inline-confirm/InlineConfirmMenuItem.d.ts +8 -0
- package/dist/definitions/components/inline-confirm/InlineConfirmMenuItem.d.ts.map +1 -0
- package/dist/definitions/components/menu/Menu.d.ts.map +1 -1
- package/dist/definitions/theme/Theme.d.ts.map +1 -1
- package/dist/esm/components/button/Button.js +17 -9
- package/dist/esm/components/button/Button.js.map +1 -1
- package/dist/esm/components/button/ButtonWithDisabledTooltip.js +18 -37
- package/dist/esm/components/button/ButtonWithDisabledTooltip.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirm.js +2 -0
- package/dist/esm/components/inline-confirm/InlineConfirm.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmButton.js +16 -11
- package/dist/esm/components/inline-confirm/InlineConfirmButton.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmMenuItem.js +23 -0
- package/dist/esm/components/inline-confirm/InlineConfirmMenuItem.js.map +1 -0
- package/dist/esm/components/menu/Menu.js +17 -6
- package/dist/esm/components/menu/Menu.js.map +1 -1
- package/dist/esm/theme/Theme.js +9 -2
- package/dist/esm/theme/Theme.js.map +1 -1
- package/package.json +1 -1
- package/src/components/button/Button.tsx +12 -18
- package/src/components/button/ButtonWithDisabledTooltip.tsx +17 -38
- package/src/components/button/__tests__/ButtonWithDisabledTooltip.spec.tsx +22 -28
- package/src/components/inline-confirm/InlineConfirm.tsx +3 -0
- package/src/components/inline-confirm/InlineConfirmButton.tsx +15 -11
- package/src/components/inline-confirm/InlineConfirmMenuItem.tsx +21 -0
- package/src/components/inline-confirm/__tests__/InlineConfirm.spec.tsx +25 -0
- package/src/components/menu/Menu.tsx +13 -4
- package/src/theme/Theme.tsx +7 -0
|
@@ -1,53 +1,34 @@
|
|
|
1
1
|
import _object_spread from "@swc/helpers/src/_object_spread.mjs";
|
|
2
2
|
import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
|
|
3
3
|
import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
|
|
4
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
5
5
|
import { Box, Tooltip } from "@mantine/core";
|
|
6
6
|
import { forwardRef } from "react";
|
|
7
7
|
import { createPolymorphicComponent } from "../../utils";
|
|
8
8
|
var _ButtonWithDisabledTooltip = /*#__PURE__*/ forwardRef(function(_param, ref) {
|
|
9
|
-
var disabledTooltip = _param.disabledTooltip, disabled = _param.disabled,
|
|
9
|
+
var disabledTooltip = _param.disabledTooltip, disabled = _param.disabled, children = _param.children, disabledTooltipProps = _param.disabledTooltipProps, others = _object_without_properties(_param, [
|
|
10
10
|
"disabledTooltip",
|
|
11
11
|
"disabled",
|
|
12
|
-
"
|
|
13
|
-
"
|
|
12
|
+
"children",
|
|
13
|
+
"disabledTooltipProps"
|
|
14
14
|
]);
|
|
15
|
-
return disabledTooltip ? /*#__PURE__*/ _jsx(Tooltip, {
|
|
15
|
+
return disabledTooltip ? /*#__PURE__*/ _jsx(Tooltip, _object_spread_props(_object_spread({
|
|
16
16
|
label: disabledTooltip,
|
|
17
|
-
disabled: !disabled
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
ref: ref
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
sx: function(theme) {
|
|
25
|
-
return {
|
|
26
|
-
"&[data-disabled]": {
|
|
27
|
-
pointerEvents: "all",
|
|
28
|
-
color: theme.colors.gray[5]
|
|
29
|
-
},
|
|
30
|
-
"&[data-disabled]:hover": {
|
|
31
|
-
backgroundColor: hoverColor,
|
|
32
|
-
cursor: "not-allowed"
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
},
|
|
36
|
-
onClick: function(event) {
|
|
37
|
-
if (disabled) {
|
|
38
|
-
event.preventDefault();
|
|
39
|
-
event.stopPropagation();
|
|
40
|
-
} else {
|
|
41
|
-
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
17
|
+
disabled: !disabled
|
|
18
|
+
}, disabledTooltipProps), {
|
|
19
|
+
children: /*#__PURE__*/ _jsx(Box, _object_spread_props(_object_spread({
|
|
20
|
+
ref: ref,
|
|
21
|
+
sx: {
|
|
22
|
+
"&:hover": {
|
|
23
|
+
cursor: "not-allowed"
|
|
42
24
|
}
|
|
43
25
|
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}, others));
|
|
26
|
+
}, others), {
|
|
27
|
+
children: children
|
|
28
|
+
}))
|
|
29
|
+
})) : /*#__PURE__*/ _jsx(_Fragment, {
|
|
30
|
+
children: children
|
|
31
|
+
});
|
|
51
32
|
});
|
|
52
33
|
export var ButtonWithDisabledTooltip = createPolymorphicComponent(_ButtonWithDisabledTooltip);
|
|
53
34
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/button/ButtonWithDisabledTooltip.tsx"],"sourcesContent":["import {Box, Tooltip} from '@mantine/core';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/button/ButtonWithDisabledTooltip.tsx"],"sourcesContent":["import {Box, Tooltip, TooltipProps} from '@mantine/core';\nimport {forwardRef, ReactNode} from 'react';\n\nimport {createPolymorphicComponent} from '../../utils';\n\nexport interface ButtonWithDisabledTooltipProps {\n /**\n * The tooltip message to display when disabled\n */\n disabledTooltip?: string;\n /**\n * Whether the button underneath the tooltip is disabled\n */\n disabled?: boolean;\n children?: ReactNode;\n /**\n * Additional tooltip props to set on the disabled button tooltip\n */\n disabledTooltipProps?: Omit<TooltipProps, 'disabled' | 'label' | 'children'>;\n}\n\nconst _ButtonWithDisabledTooltip = forwardRef<HTMLDivElement, ButtonWithDisabledTooltipProps>(\n ({disabledTooltip, disabled, children, disabledTooltipProps, ...others}, ref) =>\n disabledTooltip ? (\n <Tooltip label={disabledTooltip} disabled={!disabled} {...disabledTooltipProps}>\n <Box ref={ref} sx={{'&:hover': {cursor: 'not-allowed'}}} {...others}>\n {children}\n </Box>\n </Tooltip>\n ) : (\n <>{children}</>\n )\n);\n\nexport const ButtonWithDisabledTooltip = createPolymorphicComponent<'div', ButtonWithDisabledTooltipProps>(\n _ButtonWithDisabledTooltip\n);\n"],"names":["Box","Tooltip","forwardRef","createPolymorphicComponent","_ButtonWithDisabledTooltip","ref","disabledTooltip","disabled","children","disabledTooltipProps","others","label","sx","cursor","ButtonWithDisabledTooltip"],"mappings":"AAAA;;;;AAAA,SAAQA,GAAG,EAAEC,OAAO,QAAqB,gBAAgB;AACzD,SAAQC,UAAU,QAAkB,QAAQ;AAE5C,SAAQC,0BAA0B,QAAO,cAAc;AAkBvD,IAAMC,2CAA6BF,WAC/B,iBAAyEG,KACrEC;QADFA,yBAAAA,iBAAiBC,kBAAAA,UAAUC,kBAAAA,UAAUC,8BAAAA,sBAAyBC;QAA9DJ;QAAiBC;QAAUC;QAAUC;;WACnCH,gCACI,KAACL;QAAQU,OAAOL;QAAiBC,UAAU,CAACA;OAAcE;kBACtD,cAAA,KAACT;YAAIK,KAAKA;YAAKO,IAAI;gBAAC,WAAW;oBAACC,QAAQ;gBAAa;YAAC;WAAOH;sBACxDF;;wBAIT;kBAAGA;MACN;AAAD;AAGR,OAAO,IAAMM,4BAA4BX,2BACrCC,4BACF"}
|
|
@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import { Children, useState } from "react";
|
|
4
4
|
import { InlineConfirmButton } from "./InlineConfirmButton";
|
|
5
5
|
import { InlineConfirmContext } from "./InlineConfirmContext";
|
|
6
|
+
import { InlineConfirmMenuItem } from "./InlineConfirmMenuItem";
|
|
6
7
|
import { InlineConfirmPrompt } from "./InlineConfirmPrompt";
|
|
7
8
|
export var InlineConfirm = function(param) {
|
|
8
9
|
var children = param.children;
|
|
@@ -25,5 +26,6 @@ export var InlineConfirm = function(param) {
|
|
|
25
26
|
};
|
|
26
27
|
InlineConfirm.Prompt = InlineConfirmPrompt;
|
|
27
28
|
InlineConfirm.Button = InlineConfirmButton;
|
|
29
|
+
InlineConfirm.MenuItem = InlineConfirmMenuItem;
|
|
28
30
|
|
|
29
31
|
//# sourceMappingURL=InlineConfirm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirm.tsx"],"sourcesContent":["import {Children, FunctionComponent, PropsWithChildren, ReactElement, useState} from 'react';\n\nimport {InlineConfirmButton} from './InlineConfirmButton';\nimport {InlineConfirmContext} from './InlineConfirmContext';\nimport {InlineConfirmPrompt} from './InlineConfirmPrompt';\n\ntype InlineConfirmType = FunctionComponent<PropsWithChildren> & {\n Prompt: typeof InlineConfirmPrompt;\n Button: typeof InlineConfirmButton;\n};\n\nexport const InlineConfirm: InlineConfirmType = ({children}) => {\n const [confirmingId, setConfirmingId] = useState<string | null>(null);\n\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const prompt = convertedChildren.find(\n (child) => child.type === InlineConfirmPrompt && child.props.id === confirmingId\n );\n const clearConfirm = () => setConfirmingId(null);\n\n return (\n <InlineConfirmContext.Provider value={{confirmingId, setConfirmingId, clearConfirm}}>\n {prompt ?? children}\n </InlineConfirmContext.Provider>\n );\n};\n\nInlineConfirm.Prompt = InlineConfirmPrompt;\nInlineConfirm.Button = InlineConfirmButton;\n"],"names":["Children","useState","InlineConfirmButton","InlineConfirmContext","InlineConfirmPrompt","InlineConfirm","children","confirmingId","setConfirmingId","convertedChildren","toArray","prompt","find","child","type","props","id","clearConfirm","Provider","value","Prompt","Button"],"mappings":"AAAA;;AAAA,SAAQA,QAAQ,EAAsDC,QAAQ,QAAO,QAAQ;AAE7F,SAAQC,mBAAmB,QAAO,wBAAwB;AAC1D,SAAQC,oBAAoB,QAAO,yBAAyB;AAC5D,SAAQC,mBAAmB,QAAO,wBAAwB;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirm.tsx"],"sourcesContent":["import {Children, FunctionComponent, PropsWithChildren, ReactElement, useState} from 'react';\n\nimport {InlineConfirmButton} from './InlineConfirmButton';\nimport {InlineConfirmContext} from './InlineConfirmContext';\nimport {InlineConfirmMenuItem} from './InlineConfirmMenuItem';\nimport {InlineConfirmPrompt} from './InlineConfirmPrompt';\n\ntype InlineConfirmType = FunctionComponent<PropsWithChildren> & {\n Prompt: typeof InlineConfirmPrompt;\n Button: typeof InlineConfirmButton;\n MenuItem: typeof InlineConfirmMenuItem;\n};\n\nexport const InlineConfirm: InlineConfirmType = ({children}) => {\n const [confirmingId, setConfirmingId] = useState<string | null>(null);\n\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const prompt = convertedChildren.find(\n (child) => child.type === InlineConfirmPrompt && child.props.id === confirmingId\n );\n const clearConfirm = () => setConfirmingId(null);\n\n return (\n <InlineConfirmContext.Provider value={{confirmingId, setConfirmingId, clearConfirm}}>\n {prompt ?? children}\n </InlineConfirmContext.Provider>\n );\n};\n\nInlineConfirm.Prompt = InlineConfirmPrompt;\nInlineConfirm.Button = InlineConfirmButton;\nInlineConfirm.MenuItem = InlineConfirmMenuItem;\n"],"names":["Children","useState","InlineConfirmButton","InlineConfirmContext","InlineConfirmMenuItem","InlineConfirmPrompt","InlineConfirm","children","confirmingId","setConfirmingId","convertedChildren","toArray","prompt","find","child","type","props","id","clearConfirm","Provider","value","Prompt","Button","MenuItem"],"mappings":"AAAA;;AAAA,SAAQA,QAAQ,EAAsDC,QAAQ,QAAO,QAAQ;AAE7F,SAAQC,mBAAmB,QAAO,wBAAwB;AAC1D,SAAQC,oBAAoB,QAAO,yBAAyB;AAC5D,SAAQC,qBAAqB,QAAO,0BAA0B;AAC9D,SAAQC,mBAAmB,QAAO,wBAAwB;AAQ1D,OAAO,IAAMC,gBAAmC,gBAAgB;QAAdC,iBAAAA;IAC9C,IAAwCN,6BAAAA,SAAwB,IAAI,OAA7DO,eAAiCP,cAAnBQ,kBAAmBR;IAExC,IAAMS,oBAAoBV,SAASW,OAAO,CAACJ;IAC3C,IAAMK,SAASF,kBAAkBG,IAAI,CACjC,SAACC;eAAUA,MAAMC,IAAI,KAAKV,uBAAuBS,MAAME,KAAK,CAACC,EAAE,KAAKT;;IAExE,IAAMU,eAAe;eAAMT,gBAAgB,IAAI;;IAE/C,qBACI,KAACN,qBAAqBgB,QAAQ;QAACC,OAAO;YAACZ,cAAAA;YAAcC,iBAAAA;YAAiBS,cAAAA;QAAY;kBAC7EN,mBAAAA,oBAAAA,SAAUL,QAAQ;;AAG/B,EAAE;AAEFD,cAAce,MAAM,GAAGhB;AACvBC,cAAcgB,MAAM,GAAGpB;AACvBI,cAAciB,QAAQ,GAAGnB"}
|
|
@@ -1,18 +1,23 @@
|
|
|
1
1
|
import _object_spread from "@swc/helpers/src/_object_spread.mjs";
|
|
2
|
-
import
|
|
2
|
+
import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
|
|
3
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
-
import { Button } from "
|
|
4
|
+
import { Button } from "@mantine/core";
|
|
5
|
+
import { forwardRef } from "react";
|
|
5
6
|
import { useInlineConfirm } from "./useInlineConfirm";
|
|
6
|
-
export var InlineConfirmButton = function(
|
|
7
|
+
export var InlineConfirmButton = /*#__PURE__*/ forwardRef(function(_param, ref) {
|
|
8
|
+
var onClick = _param.onClick, id = _param.id, others = _object_without_properties(_param, [
|
|
9
|
+
"onClick",
|
|
10
|
+
"id"
|
|
11
|
+
]);
|
|
7
12
|
var setConfirmingId = useInlineConfirm().setConfirmingId;
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
(_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, e);
|
|
13
|
+
var handleOnClick = function(e) {
|
|
14
|
+
setConfirmingId(id);
|
|
15
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
12
16
|
};
|
|
13
|
-
return /*#__PURE__*/ _jsx(Button,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
};
|
|
17
|
+
return /*#__PURE__*/ _jsx(Button, _object_spread({
|
|
18
|
+
ref: ref,
|
|
19
|
+
onClick: handleOnClick
|
|
20
|
+
}, others));
|
|
21
|
+
});
|
|
17
22
|
|
|
18
23
|
//# sourceMappingURL=InlineConfirmButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirmButton.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirmButton.tsx"],"sourcesContent":["import {Button} from '@mantine/core';\nimport {forwardRef, MouseEventHandler} from 'react';\n\nimport {ButtonProps} from '../button';\nimport {useInlineConfirm} from './useInlineConfirm';\n\nexport interface InlineConfirmButtonProps extends ButtonProps {\n id: string;\n onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const InlineConfirmButton = forwardRef<HTMLButtonElement, InlineConfirmButtonProps>(\n ({onClick, id, ...others}, ref) => {\n const {setConfirmingId} = useInlineConfirm();\n const handleOnClick: MouseEventHandler<HTMLButtonElement> = (e) => {\n setConfirmingId(id);\n onClick?.(e);\n };\n\n return <Button ref={ref} onClick={handleOnClick} {...others} />;\n }\n);\n"],"names":["Button","forwardRef","useInlineConfirm","InlineConfirmButton","ref","onClick","id","others","setConfirmingId","handleOnClick","e"],"mappings":"AAAA;;;AAAA,SAAQA,MAAM,QAAO,gBAAgB;AACrC,SAAQC,UAAU,QAA0B,QAAQ;AAGpD,SAAQC,gBAAgB,QAAO,qBAAqB;AAOpD,OAAO,IAAMC,oCAAsBF,WAC/B,iBAA2BG,KAAQ;QAAjCC,iBAAAA,SAASC,YAAAA,IAAOC;QAAhBF;QAASC;;IACP,IAAM,AAACE,kBAAmBN,mBAAnBM;IACP,IAAMC,gBAAsD,SAACC,GAAM;QAC/DF,gBAAgBF;QAChBD,oBAAAA,qBAAAA,KAAAA,IAAAA,QAAUK;IACd;IAEA,qBAAO,KAACV;QAAOI,KAAKA;QAAKC,SAASI;OAAmBF;AACzD,GACF"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import _object_spread from "@swc/helpers/src/_object_spread.mjs";
|
|
2
|
+
import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
|
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
+
import { forwardRef } from "react";
|
|
5
|
+
import { Menu } from "../menu";
|
|
6
|
+
import { useInlineConfirm } from "./useInlineConfirm";
|
|
7
|
+
export var InlineConfirmMenuItem = /*#__PURE__*/ forwardRef(function(_param, ref) {
|
|
8
|
+
var onClick = _param.onClick, id = _param.id, others = _object_without_properties(_param, [
|
|
9
|
+
"onClick",
|
|
10
|
+
"id"
|
|
11
|
+
]);
|
|
12
|
+
var setConfirmingId = useInlineConfirm().setConfirmingId;
|
|
13
|
+
var handleOnClick = function(e) {
|
|
14
|
+
setConfirmingId(id);
|
|
15
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
16
|
+
};
|
|
17
|
+
return /*#__PURE__*/ _jsx(Menu.Item, _object_spread({
|
|
18
|
+
ref: ref,
|
|
19
|
+
onClick: handleOnClick
|
|
20
|
+
}, others));
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
//# sourceMappingURL=InlineConfirmMenuItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirmMenuItem.tsx"],"sourcesContent":["import {forwardRef, MouseEventHandler} from 'react';\n\nimport {Menu, MenuItemProps} from '../menu';\nimport {useInlineConfirm} from './useInlineConfirm';\n\nexport interface InlineConfirmMenuItemProps extends MenuItemProps {\n id: string;\n onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const InlineConfirmMenuItem = forwardRef<HTMLButtonElement, InlineConfirmMenuItemProps>(\n ({onClick, id, ...others}, ref) => {\n const {setConfirmingId} = useInlineConfirm();\n const handleOnClick: MouseEventHandler<HTMLButtonElement> = (e) => {\n setConfirmingId(id);\n onClick?.(e);\n };\n\n return <Menu.Item ref={ref} onClick={handleOnClick} {...others} />;\n }\n);\n"],"names":["forwardRef","Menu","useInlineConfirm","InlineConfirmMenuItem","ref","onClick","id","others","setConfirmingId","handleOnClick","e","Item"],"mappings":"AAAA;;;AAAA,SAAQA,UAAU,QAA0B,QAAQ;AAEpD,SAAQC,IAAI,QAAsB,UAAU;AAC5C,SAAQC,gBAAgB,QAAO,qBAAqB;AAOpD,OAAO,IAAMC,sCAAwBH,WACjC,iBAA2BI,KAAQ;QAAjCC,iBAAAA,SAASC,YAAAA,IAAOC;QAAhBF;QAASC;;IACP,IAAM,AAACE,kBAAmBN,mBAAnBM;IACP,IAAMC,gBAAsD,SAACC,GAAM;QAC/DF,gBAAgBF;QAChBD,oBAAAA,qBAAAA,KAAAA,IAAAA,QAAUK;IACd;IAEA,qBAAO,KAACT,KAAKU,IAAI;QAACP,KAAKA;QAAKC,SAASI;OAAmBF;AAC5D,GACF"}
|
|
@@ -1,14 +1,25 @@
|
|
|
1
1
|
import _object_spread from "@swc/helpers/src/_object_spread.mjs";
|
|
2
|
+
import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
|
|
2
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
4
|
import { Menu as MantineMenu } from "@mantine/core";
|
|
4
5
|
import { forwardRef } from "react";
|
|
5
6
|
import { createPolymorphicComponent, overrideComponent } from "../../utils";
|
|
6
|
-
import {
|
|
7
|
-
var _MenuItem = /*#__PURE__*/ forwardRef(function(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
import { ButtonWithDisabledTooltip } from "../button/ButtonWithDisabledTooltip";
|
|
8
|
+
var _MenuItem = /*#__PURE__*/ forwardRef(function(_param, ref) /*#__PURE__*/ {
|
|
9
|
+
var disabledTooltip = _param.disabledTooltip, disabled = _param.disabled, disabledTooltipProps = _param.disabledTooltipProps, others = _object_without_properties(_param, [
|
|
10
|
+
"disabledTooltip",
|
|
11
|
+
"disabled",
|
|
12
|
+
"disabledTooltipProps"
|
|
13
|
+
]);
|
|
14
|
+
return _jsx(ButtonWithDisabledTooltip, {
|
|
15
|
+
disabled: disabled,
|
|
16
|
+
disabledTooltip: disabledTooltip,
|
|
17
|
+
disabledTooltipProps: disabledTooltipProps,
|
|
18
|
+
children: /*#__PURE__*/ _jsx(MantineMenu.Item, _object_spread({
|
|
19
|
+
ref: ref,
|
|
20
|
+
disabled: disabled
|
|
21
|
+
}, others))
|
|
22
|
+
});
|
|
12
23
|
});
|
|
13
24
|
var MenuItem = createPolymorphicComponent(_MenuItem);
|
|
14
25
|
export var Menu = overrideComponent(MantineMenu, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {Menu as MantineMenu, MenuItemProps as MantineMenuItemProps} from '@mantine/core';\nimport {forwardRef} from 'react';\n\nimport {createPolymorphicComponent, overrideComponent} from '../../utils';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {Menu as MantineMenu, MenuItemProps as MantineMenuItemProps} from '@mantine/core';\nimport {forwardRef} from 'react';\n\nimport {createPolymorphicComponent, overrideComponent} from '../../utils';\nimport {ButtonWithDisabledTooltipProps} from '../button';\nimport {ButtonWithDisabledTooltip} from '../button/ButtonWithDisabledTooltip';\n\nexport interface MenuItemProps extends MantineMenuItemProps, ButtonWithDisabledTooltipProps {}\n\nconst _MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(\n ({disabledTooltip, disabled, disabledTooltipProps, ...others}, ref) => (\n <ButtonWithDisabledTooltip\n disabled={disabled}\n disabledTooltip={disabledTooltip}\n disabledTooltipProps={disabledTooltipProps}\n >\n <MantineMenu.Item ref={ref} disabled={disabled} {...others} />\n </ButtonWithDisabledTooltip>\n )\n);\n\nconst MenuItem = createPolymorphicComponent<'button', MenuItemProps>(_MenuItem);\n\nexport const Menu = overrideComponent(MantineMenu, {\n displayName: '@coveord/plasma-mantine/Menu',\n Item: MenuItem,\n});\n"],"names":["Menu","MantineMenu","forwardRef","createPolymorphicComponent","overrideComponent","ButtonWithDisabledTooltip","_MenuItem","ref","disabledTooltip","disabled","disabledTooltipProps","others","Item","MenuItem","displayName"],"mappings":"AAAA;;;AAAA,SAAQA,QAAQC,WAAW,QAA8C,gBAAgB;AACzF,SAAQC,UAAU,QAAO,QAAQ;AAEjC,SAAQC,0BAA0B,EAAEC,iBAAiB,QAAO,cAAc;AAE1E,SAAQC,yBAAyB,QAAO,sCAAsC;AAI9E,IAAMC,0BAAYJ,WACd,iBAA+DK,mBAC3D;QADFC,yBAAAA,iBAAiBC,kBAAAA,UAAUC,8BAAAA,sBAAyBC;QAApDH;QAAiBC;QAAUC;;WACzB,KAACL;QACGI,UAAUA;QACVD,iBAAiBA;QACjBE,sBAAsBA;kBAEtB,cAAA,KAACT,YAAYW,IAAI;YAACL,KAAKA;YAAKE,UAAUA;WAAcE;;AAC7B;AAInC,IAAME,WAAWV,2BAAoDG;AAErE,OAAO,IAAMN,OAAOI,kBAAkBH,aAAa;IAC/Ca,aAAa;IACbF,MAAMC;AACV,GAAG"}
|
package/dist/esm/theme/Theme.js
CHANGED
|
@@ -155,7 +155,8 @@ export var plasmaTheme = {
|
|
|
155
155
|
defaultProps: {
|
|
156
156
|
color: "navy",
|
|
157
157
|
withArrow: true,
|
|
158
|
-
withinPortal: true
|
|
158
|
+
withinPortal: true,
|
|
159
|
+
multiline: true
|
|
159
160
|
}
|
|
160
161
|
},
|
|
161
162
|
Breadcrumbs: {
|
|
@@ -230,7 +231,13 @@ export var plasmaTheme = {
|
|
|
230
231
|
},
|
|
231
232
|
ColorSwatch: {
|
|
232
233
|
defaultProps: {
|
|
233
|
-
size: 8
|
|
234
|
+
size: 8,
|
|
235
|
+
withShadow: false
|
|
236
|
+
}
|
|
237
|
+
},
|
|
238
|
+
MenuItem: {
|
|
239
|
+
defaultProps: {
|
|
240
|
+
fw: 300
|
|
234
241
|
}
|
|
235
242
|
}
|
|
236
243
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {ArrowHeadRightSize24Px, InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n colorScheme: 'light',\n fontFamily: 'canada-type-gibson, sans-serif',\n black: color.primary.gray[9],\n defaultRadius: 8,\n spacing: {\n xs: 8,\n sm: 16,\n md: 24,\n lg: 32,\n xl: 40,\n },\n primaryColor: 'action',\n headings: {\n fontFamily: 'canada-type-gibson, sans-serif',\n fontWeight: 500,\n sizes: {\n h1: {fontSize: 48, lineHeight: '56px', fontWeight: undefined},\n h2: {fontSize: 32, lineHeight: '40px', fontWeight: undefined},\n h3: {fontSize: 28, lineHeight: '40px', fontWeight: undefined},\n h4: {fontSize: 24, lineHeight: '32px', fontWeight: undefined},\n h5: {fontSize: 18, lineHeight: '28px', fontWeight: undefined},\n h6: {fontSize: 16, lineHeight: '24px', fontWeight: undefined},\n },\n },\n shadows: {\n xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n },\n colors: PlasmaColors,\n components: {\n Alert: {\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'navy',\n },\n styles: {\n title: {\n fontWeight: 500,\n },\n },\n },\n Title: {\n styles: (theme) => ({\n root: {\n '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em', color: theme.colors.gray[9]},\n },\n }),\n },\n Button: {\n styles: (theme, params: ButtonStylesParams) => ({\n root: {\n fontWeight: 400,\n backgroundColor: params.variant === 'outline' ? 'white' : undefined,\n },\n }),\n },\n Modal: {\n styles: (theme, {size, fullScreen}: ModalStylesParams) => ({\n modal: {\n width: fullScreen\n ? undefined\n : theme.fn.size({size, sizes: {xs: 440, sm: 550, md: 800, lg: 1334, xl: '85%'}}),\n },\n }),\n defaultProps: {\n overlayColor: color.primary.navy[9],\n overlayOpacity: 0.9,\n },\n },\n InputWrapper: {\n defaultProps: {\n withAsterisk: false,\n },\n styles: (theme) => ({\n label: {\n marginBottom: theme.spacing.xs,\n lineHeight: '20px',\n },\n description: {\n lineHeight: '20px',\n fontSize: theme.fontSizes.sm,\n color: theme.colors.gray[7],\n marginBottom: theme.spacing.xs,\n },\n invalid: {\n color: theme.colors.red[9],\n borderColor: theme.colors.red[6],\n },\n error: {\n color: theme.colors.red[9],\n },\n }),\n },\n TextInput: {\n defaultProps: {\n radius: 8,\n },\n },\n Tooltip: {\n defaultProps: {\n color: 'navy',\n withArrow: true,\n withinPortal: true,\n },\n },\n Breadcrumbs: {\n defaultProps: {\n separator: <ArrowHeadRightSize24Px height={24} />,\n },\n },\n Loader: {\n defaultProps: {\n variant: 'dots',\n color: 'action',\n },\n },\n DateRangePicker: {\n styles: {\n cell: {\n textAlign: 'center',\n },\n },\n },\n Anchor: {\n defaultProps: {\n color: 'action',\n },\n styles: (theme) => ({\n root: {\n ...theme.fn.hover({\n textDecoration: 'underline',\n color: theme.colors.action[8],\n }),\n },\n }),\n },\n Checkbox: {\n defaultProps: {\n radius: 'sm',\n },\n },\n List: {\n styles: () => ({\n root: {\n listStyleType: 'disc',\n },\n }),\n },\n Radio: {\n styles: {\n labelWrapper: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n },\n },\n Popover: {\n defaultProps: {\n shadow: 'md',\n withArrow: true,\n },\n },\n Badge: {\n styles: {\n root: {\n textTransform: 'none',\n padding: '4px 8px',\n fontWeight: 500,\n },\n },\n },\n ColorSwatch: {\n defaultProps: {\n size: 8,\n },\n },\n },\n};\n"],"names":["ArrowHeadRightSize24Px","InfoSize24Px","color","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","theme","root","letterSpacing","Button","params","backgroundColor","variant","Modal","size","fullScreen","modal","width","fn","overlayColor","navy","overlayOpacity","InputWrapper","withAsterisk","label","marginBottom","description","fontSizes","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","Breadcrumbs","separator","Loader","DateRangePicker","cell","textAlign","Anchor","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {ArrowHeadRightSize24Px, InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n colorScheme: 'light',\n fontFamily: 'canada-type-gibson, sans-serif',\n black: color.primary.gray[9],\n defaultRadius: 8,\n spacing: {\n xs: 8,\n sm: 16,\n md: 24,\n lg: 32,\n xl: 40,\n },\n primaryColor: 'action',\n headings: {\n fontFamily: 'canada-type-gibson, sans-serif',\n fontWeight: 500,\n sizes: {\n h1: {fontSize: 48, lineHeight: '56px', fontWeight: undefined},\n h2: {fontSize: 32, lineHeight: '40px', fontWeight: undefined},\n h3: {fontSize: 28, lineHeight: '40px', fontWeight: undefined},\n h4: {fontSize: 24, lineHeight: '32px', fontWeight: undefined},\n h5: {fontSize: 18, lineHeight: '28px', fontWeight: undefined},\n h6: {fontSize: 16, lineHeight: '24px', fontWeight: undefined},\n },\n },\n shadows: {\n xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n },\n colors: PlasmaColors,\n components: {\n Alert: {\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'navy',\n },\n styles: {\n title: {\n fontWeight: 500,\n },\n },\n },\n Title: {\n styles: (theme) => ({\n root: {\n '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em', color: theme.colors.gray[9]},\n },\n }),\n },\n Button: {\n styles: (theme, params: ButtonStylesParams) => ({\n root: {\n fontWeight: 400,\n backgroundColor: params.variant === 'outline' ? 'white' : undefined,\n },\n }),\n },\n Modal: {\n styles: (theme, {size, fullScreen}: ModalStylesParams) => ({\n modal: {\n width: fullScreen\n ? undefined\n : theme.fn.size({size, sizes: {xs: 440, sm: 550, md: 800, lg: 1334, xl: '85%'}}),\n },\n }),\n defaultProps: {\n overlayColor: color.primary.navy[9],\n overlayOpacity: 0.9,\n },\n },\n InputWrapper: {\n defaultProps: {\n withAsterisk: false,\n },\n styles: (theme) => ({\n label: {\n marginBottom: theme.spacing.xs,\n lineHeight: '20px',\n },\n description: {\n lineHeight: '20px',\n fontSize: theme.fontSizes.sm,\n color: theme.colors.gray[7],\n marginBottom: theme.spacing.xs,\n },\n invalid: {\n color: theme.colors.red[9],\n borderColor: theme.colors.red[6],\n },\n error: {\n color: theme.colors.red[9],\n },\n }),\n },\n TextInput: {\n defaultProps: {\n radius: 8,\n },\n },\n Tooltip: {\n defaultProps: {\n color: 'navy',\n withArrow: true,\n withinPortal: true,\n multiline: true,\n },\n },\n Breadcrumbs: {\n defaultProps: {\n separator: <ArrowHeadRightSize24Px height={24} />,\n },\n },\n Loader: {\n defaultProps: {\n variant: 'dots',\n color: 'action',\n },\n },\n DateRangePicker: {\n styles: {\n cell: {\n textAlign: 'center',\n },\n },\n },\n Anchor: {\n defaultProps: {\n color: 'action',\n },\n styles: (theme) => ({\n root: {\n ...theme.fn.hover({\n textDecoration: 'underline',\n color: theme.colors.action[8],\n }),\n },\n }),\n },\n Checkbox: {\n defaultProps: {\n radius: 'sm',\n },\n },\n List: {\n styles: () => ({\n root: {\n listStyleType: 'disc',\n },\n }),\n },\n Radio: {\n styles: {\n labelWrapper: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n },\n },\n Popover: {\n defaultProps: {\n shadow: 'md',\n withArrow: true,\n },\n },\n Badge: {\n styles: {\n root: {\n textTransform: 'none',\n padding: '4px 8px',\n fontWeight: 500,\n },\n },\n },\n ColorSwatch: {\n defaultProps: {\n size: 8,\n withShadow: false,\n },\n },\n MenuItem: {\n defaultProps: {\n fw: 300,\n },\n },\n },\n};\n"],"names":["ArrowHeadRightSize24Px","InfoSize24Px","color","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","theme","root","letterSpacing","Button","params","backgroundColor","variant","Modal","size","fullScreen","modal","width","fn","overlayColor","navy","overlayOpacity","InputWrapper","withAsterisk","label","marginBottom","description","fontSizes","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","Breadcrumbs","separator","Loader","DateRangePicker","cell","textAlign","Anchor","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch","withShadow","MenuItem","fw"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {Button as MantineButton, ButtonProps as MantineButtonProps
|
|
1
|
+
import {Button as MantineButton, ButtonProps as MantineButtonProps} from '@mantine/core';
|
|
2
2
|
import {forwardRef} from 'react';
|
|
3
3
|
|
|
4
4
|
import {createPolymorphicComponent} from '../../utils';
|
|
@@ -6,22 +6,16 @@ import {ButtonWithDisabledTooltip, ButtonWithDisabledTooltipProps} from './Butto
|
|
|
6
6
|
|
|
7
7
|
export interface ButtonProps extends MantineButtonProps, ButtonWithDisabledTooltipProps {}
|
|
8
8
|
|
|
9
|
-
const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
10
|
-
|
|
11
|
-
return (
|
|
9
|
+
const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
10
|
+
({disabledTooltip, disabled, disabledTooltipProps, ...others}, ref) => (
|
|
12
11
|
<ButtonWithDisabledTooltip
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
disabled={disabled}
|
|
13
|
+
disabledTooltip={disabledTooltip}
|
|
14
|
+
disabledTooltipProps={disabledTooltipProps}
|
|
15
|
+
>
|
|
16
|
+
<MantineButton ref={ref} disabled={disabled} {...others} />
|
|
17
|
+
</ButtonWithDisabledTooltip>
|
|
18
|
+
)
|
|
19
|
+
);
|
|
20
20
|
|
|
21
|
-
export const Button = createPolymorphicComponent<
|
|
22
|
-
'button',
|
|
23
|
-
ButtonProps,
|
|
24
|
-
{Group: typeof MantineButton.Group; DisabledTooltip: typeof ButtonWithDisabledTooltip}
|
|
25
|
-
>(_Button);
|
|
26
|
-
|
|
27
|
-
Button.DisabledTooltip = ButtonWithDisabledTooltip;
|
|
21
|
+
export const Button = createPolymorphicComponent<'button', ButtonProps, {Group: typeof MantineButton.Group}>(_Button);
|
|
@@ -1,58 +1,37 @@
|
|
|
1
|
-
import {Box, Tooltip} from '@mantine/core';
|
|
2
|
-
import {
|
|
3
|
-
import {forwardRef, MouseEventHandler} from 'react';
|
|
1
|
+
import {Box, Tooltip, TooltipProps} from '@mantine/core';
|
|
2
|
+
import {forwardRef, ReactNode} from 'react';
|
|
4
3
|
|
|
5
4
|
import {createPolymorphicComponent} from '../../utils';
|
|
6
5
|
|
|
7
6
|
export interface ButtonWithDisabledTooltipProps {
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
10
7
|
/**
|
|
11
8
|
* The tooltip message to display when disabled
|
|
12
9
|
*/
|
|
13
10
|
disabledTooltip?: string;
|
|
14
11
|
/**
|
|
15
|
-
*
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
* Whether the button underneath the tooltip is disabled
|
|
13
|
+
*/
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
children?: ReactNode;
|
|
16
|
+
/**
|
|
17
|
+
* Additional tooltip props to set on the disabled button tooltip
|
|
18
18
|
*/
|
|
19
|
-
|
|
19
|
+
disabledTooltipProps?: Omit<TooltipProps, 'disabled' | 'label' | 'children'>;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
const _ButtonWithDisabledTooltip = forwardRef<
|
|
23
|
-
({disabledTooltip, disabled,
|
|
22
|
+
const _ButtonWithDisabledTooltip = forwardRef<HTMLDivElement, ButtonWithDisabledTooltipProps>(
|
|
23
|
+
({disabledTooltip, disabled, children, disabledTooltipProps, ...others}, ref) =>
|
|
24
24
|
disabledTooltip ? (
|
|
25
|
-
<Tooltip label={disabledTooltip} disabled={!disabled}>
|
|
26
|
-
<Box
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
{...(disabled ? {'data-disabled': true} : {})}
|
|
30
|
-
sx={(theme) => ({
|
|
31
|
-
'&[data-disabled]': {
|
|
32
|
-
pointerEvents: 'all',
|
|
33
|
-
color: theme.colors.gray[5],
|
|
34
|
-
},
|
|
35
|
-
'&[data-disabled]:hover': {
|
|
36
|
-
backgroundColor: hoverColor,
|
|
37
|
-
cursor: 'not-allowed',
|
|
38
|
-
},
|
|
39
|
-
})}
|
|
40
|
-
onClick={(event) => {
|
|
41
|
-
if (disabled) {
|
|
42
|
-
event.preventDefault();
|
|
43
|
-
event.stopPropagation();
|
|
44
|
-
} else {
|
|
45
|
-
onClick?.(event);
|
|
46
|
-
}
|
|
47
|
-
}}
|
|
48
|
-
{...others}
|
|
49
|
-
/>
|
|
25
|
+
<Tooltip label={disabledTooltip} disabled={!disabled} {...disabledTooltipProps}>
|
|
26
|
+
<Box ref={ref} sx={{'&:hover': {cursor: 'not-allowed'}}} {...others}>
|
|
27
|
+
{children}
|
|
28
|
+
</Box>
|
|
50
29
|
</Tooltip>
|
|
51
30
|
) : (
|
|
52
|
-
|
|
31
|
+
<>{children}</>
|
|
53
32
|
)
|
|
54
33
|
);
|
|
55
34
|
|
|
56
|
-
export const ButtonWithDisabledTooltip = createPolymorphicComponent<'
|
|
35
|
+
export const ButtonWithDisabledTooltip = createPolymorphicComponent<'div', ButtonWithDisabledTooltipProps>(
|
|
57
36
|
_ButtonWithDisabledTooltip
|
|
58
37
|
);
|
|
@@ -2,40 +2,15 @@ import {render, screen, userEvent} from '@test-utils';
|
|
|
2
2
|
import {ButtonWithDisabledTooltip} from '../ButtonWithDisabledTooltip';
|
|
3
3
|
|
|
4
4
|
describe('ButtonWithDisabledTooltip', () => {
|
|
5
|
-
it('disables the button when disabled prop is true', async () => {
|
|
6
|
-
const user = userEvent.setup();
|
|
7
|
-
const onClickSpy = jest.fn();
|
|
8
|
-
render(
|
|
9
|
-
<ButtonWithDisabledTooltip disabled onClick={onClickSpy}>
|
|
10
|
-
save
|
|
11
|
-
</ButtonWithDisabledTooltip>
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
const button = screen.getByRole('button', {name: /save/i});
|
|
15
|
-
await user.click(button);
|
|
16
|
-
expect(button).toBeDisabled();
|
|
17
|
-
expect(onClickSpy).not.toHaveBeenCalled();
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
it('does not disable the button when disabled prop is false', async () => {
|
|
21
|
-
const user = userEvent.setup();
|
|
22
|
-
const onClickSpy = jest.fn();
|
|
23
|
-
render(<ButtonWithDisabledTooltip onClick={onClickSpy}>save</ButtonWithDisabledTooltip>);
|
|
24
|
-
|
|
25
|
-
const button = screen.getByRole('button', {name: /save/i});
|
|
26
|
-
await user.click(button);
|
|
27
|
-
expect(button).toBeEnabled();
|
|
28
|
-
expect(onClickSpy).toHaveBeenCalledTimes(1);
|
|
29
|
-
});
|
|
30
|
-
|
|
31
5
|
it('shows a tooltip when hovering over the disabled button', async () => {
|
|
32
6
|
const user = userEvent.setup();
|
|
33
7
|
render(
|
|
34
8
|
<ButtonWithDisabledTooltip disabled disabledTooltip="tooltip message">
|
|
35
|
-
save
|
|
9
|
+
<button disabled>save</button>
|
|
36
10
|
</ButtonWithDisabledTooltip>
|
|
37
11
|
);
|
|
38
12
|
const button = screen.getByRole('button', {name: /save/i});
|
|
13
|
+
expect(button).toBeDisabled();
|
|
39
14
|
expect(screen.queryByRole('tooltip', {name: /tooltip message/i})).not.toBeInTheDocument();
|
|
40
15
|
await user.hover(button);
|
|
41
16
|
expect(screen.getByRole('tooltip', {name: /tooltip message/i})).toBeInTheDocument();
|
|
@@ -43,10 +18,29 @@ describe('ButtonWithDisabledTooltip', () => {
|
|
|
43
18
|
|
|
44
19
|
it('does not show the tooltip when hovering over the button if it is not disabled', async () => {
|
|
45
20
|
const user = userEvent.setup();
|
|
46
|
-
render(
|
|
21
|
+
render(
|
|
22
|
+
<ButtonWithDisabledTooltip disabledTooltip="tooltip message">
|
|
23
|
+
<button>save</button>
|
|
24
|
+
</ButtonWithDisabledTooltip>
|
|
25
|
+
);
|
|
47
26
|
const button = screen.getByRole('button', {name: /save/i});
|
|
48
27
|
expect(screen.queryByRole('tooltip', {name: /tooltip message/i})).not.toBeInTheDocument();
|
|
49
28
|
await user.hover(button);
|
|
50
29
|
expect(screen.queryByRole('tooltip', {name: /tooltip message/i})).not.toBeInTheDocument();
|
|
51
30
|
});
|
|
31
|
+
|
|
32
|
+
it('does not render the tooltip if there is no disabled tooltip message', () => {
|
|
33
|
+
const {container} = render(
|
|
34
|
+
<ButtonWithDisabledTooltip>
|
|
35
|
+
<button>save</button>
|
|
36
|
+
</ButtonWithDisabledTooltip>
|
|
37
|
+
);
|
|
38
|
+
expect(container).toMatchInlineSnapshot(`
|
|
39
|
+
<div>
|
|
40
|
+
<button>
|
|
41
|
+
save
|
|
42
|
+
</button>
|
|
43
|
+
</div>
|
|
44
|
+
`);
|
|
45
|
+
});
|
|
52
46
|
});
|
|
@@ -2,11 +2,13 @@ import {Children, FunctionComponent, PropsWithChildren, ReactElement, useState}
|
|
|
2
2
|
|
|
3
3
|
import {InlineConfirmButton} from './InlineConfirmButton';
|
|
4
4
|
import {InlineConfirmContext} from './InlineConfirmContext';
|
|
5
|
+
import {InlineConfirmMenuItem} from './InlineConfirmMenuItem';
|
|
5
6
|
import {InlineConfirmPrompt} from './InlineConfirmPrompt';
|
|
6
7
|
|
|
7
8
|
type InlineConfirmType = FunctionComponent<PropsWithChildren> & {
|
|
8
9
|
Prompt: typeof InlineConfirmPrompt;
|
|
9
10
|
Button: typeof InlineConfirmButton;
|
|
11
|
+
MenuItem: typeof InlineConfirmMenuItem;
|
|
10
12
|
};
|
|
11
13
|
|
|
12
14
|
export const InlineConfirm: InlineConfirmType = ({children}) => {
|
|
@@ -27,3 +29,4 @@ export const InlineConfirm: InlineConfirmType = ({children}) => {
|
|
|
27
29
|
|
|
28
30
|
InlineConfirm.Prompt = InlineConfirmPrompt;
|
|
29
31
|
InlineConfirm.Button = InlineConfirmButton;
|
|
32
|
+
InlineConfirm.MenuItem = InlineConfirmMenuItem;
|
|
@@ -1,18 +1,22 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {Button} from '@mantine/core';
|
|
2
|
+
import {forwardRef, MouseEventHandler} from 'react';
|
|
2
3
|
|
|
3
|
-
import {
|
|
4
|
+
import {ButtonProps} from '../button';
|
|
4
5
|
import {useInlineConfirm} from './useInlineConfirm';
|
|
5
6
|
|
|
6
|
-
interface InlineConfirmButtonProps extends ButtonProps
|
|
7
|
+
export interface InlineConfirmButtonProps extends ButtonProps {
|
|
7
8
|
id: string;
|
|
9
|
+
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
8
10
|
}
|
|
9
11
|
|
|
10
|
-
export const InlineConfirmButton =
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
export const InlineConfirmButton = forwardRef<HTMLButtonElement, InlineConfirmButtonProps>(
|
|
13
|
+
({onClick, id, ...others}, ref) => {
|
|
14
|
+
const {setConfirmingId} = useInlineConfirm();
|
|
15
|
+
const handleOnClick: MouseEventHandler<HTMLButtonElement> = (e) => {
|
|
16
|
+
setConfirmingId(id);
|
|
17
|
+
onClick?.(e);
|
|
18
|
+
};
|
|
16
19
|
|
|
17
|
-
|
|
18
|
-
}
|
|
20
|
+
return <Button ref={ref} onClick={handleOnClick} {...others} />;
|
|
21
|
+
}
|
|
22
|
+
);
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import {forwardRef, MouseEventHandler} from 'react';
|
|
2
|
+
|
|
3
|
+
import {Menu, MenuItemProps} from '../menu';
|
|
4
|
+
import {useInlineConfirm} from './useInlineConfirm';
|
|
5
|
+
|
|
6
|
+
export interface InlineConfirmMenuItemProps extends MenuItemProps {
|
|
7
|
+
id: string;
|
|
8
|
+
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export const InlineConfirmMenuItem = forwardRef<HTMLButtonElement, InlineConfirmMenuItemProps>(
|
|
12
|
+
({onClick, id, ...others}, ref) => {
|
|
13
|
+
const {setConfirmingId} = useInlineConfirm();
|
|
14
|
+
const handleOnClick: MouseEventHandler<HTMLButtonElement> = (e) => {
|
|
15
|
+
setConfirmingId(id);
|
|
16
|
+
onClick?.(e);
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
return <Menu.Item ref={ref} onClick={handleOnClick} {...others} />;
|
|
20
|
+
}
|
|
21
|
+
);
|