@coveord/plasma-mantine 49.0.2 → 49.1.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/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +13 -11
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/button/Button.js +28 -0
- package/dist/cjs/components/button/Button.js.map +1 -0
- package/dist/cjs/components/button/ButtonWithDisabledTooltip.js +64 -0
- package/dist/cjs/components/button/ButtonWithDisabledTooltip.js.map +1 -0
- package/dist/cjs/components/button/index.js +8 -0
- package/dist/cjs/components/button/index.js.map +1 -0
- package/dist/cjs/components/collection/Collection.js +7 -5
- package/dist/cjs/components/collection/Collection.js.map +1 -1
- package/dist/cjs/components/date-range-picker/DateRangePickerInlineCalendar.js +3 -2
- package/dist/cjs/components/date-range-picker/DateRangePickerInlineCalendar.js.map +1 -1
- package/dist/cjs/components/index.js +2 -0
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmButton.js +2 -2
- package/dist/cjs/components/inline-confirm/InlineConfirmButton.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmPrompt.js +3 -2
- package/dist/cjs/components/inline-confirm/InlineConfirmPrompt.js.map +1 -1
- package/dist/cjs/components/menu/Menu.js +29 -0
- package/dist/cjs/components/menu/Menu.js.map +1 -0
- package/dist/cjs/components/menu/index.js +8 -0
- package/dist/cjs/components/menu/index.js.map +1 -0
- package/dist/cjs/components/modal-wizard/ModalWizard.js +4 -3
- package/dist/cjs/components/modal-wizard/ModalWizard.js.map +1 -1
- package/dist/cjs/components/table/TableDateRangePicker.js +2 -1
- package/dist/cjs/components/table/TableDateRangePicker.js.map +1 -1
- package/dist/cjs/components/table/TableHeader.js +2 -1
- package/dist/cjs/components/table/TableHeader.js.map +1 -1
- package/dist/cjs/index.js +6 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/utils/createPolymorphicComponent.js +14 -0
- package/dist/cjs/utils/createPolymorphicComponent.js.map +1 -0
- package/dist/cjs/utils/index.js +9 -0
- package/dist/cjs/utils/index.js.map +1 -0
- package/dist/cjs/utils/overrideComponent.js +29 -0
- package/dist/cjs/utils/overrideComponent.js.map +1 -0
- package/dist/definitions/components/button/Button.d.ts +16 -0
- package/dist/definitions/components/button/Button.d.ts.map +1 -0
- package/dist/definitions/components/button/ButtonWithDisabledTooltip.d.ts +24 -0
- package/dist/definitions/components/button/ButtonWithDisabledTooltip.d.ts.map +1 -0
- package/dist/definitions/components/button/index.d.ts +3 -0
- package/dist/definitions/components/button/index.d.ts.map +1 -0
- package/dist/definitions/components/collection/Collection.d.ts.map +1 -1
- package/dist/definitions/components/date-range-picker/DateRangePickerInlineCalendar.d.ts.map +1 -1
- package/dist/definitions/components/index.d.ts +2 -0
- package/dist/definitions/components/index.d.ts.map +1 -1
- package/dist/definitions/components/inline-confirm/InlineConfirmButton.d.ts +1 -1
- package/dist/definitions/components/inline-confirm/InlineConfirmButton.d.ts.map +1 -1
- package/dist/definitions/components/inline-confirm/InlineConfirmPrompt.d.ts.map +1 -1
- package/dist/definitions/components/menu/Menu.d.ts +16 -0
- package/dist/definitions/components/menu/Menu.d.ts.map +1 -0
- package/dist/definitions/components/menu/index.d.ts +2 -0
- package/dist/definitions/components/menu/index.d.ts.map +1 -0
- package/dist/definitions/components/modal-wizard/ModalWizard.d.ts.map +1 -1
- package/dist/definitions/components/table/TableDateRangePicker.d.ts.map +1 -1
- package/dist/definitions/components/table/TableHeader.d.ts.map +1 -1
- package/dist/definitions/index.d.ts +1 -1
- package/dist/definitions/index.d.ts.map +1 -1
- package/dist/definitions/utils/createPolymorphicComponent.d.ts +3 -0
- package/dist/definitions/utils/createPolymorphicComponent.d.ts.map +1 -0
- package/dist/definitions/utils/index.d.ts +3 -0
- package/dist/definitions/utils/index.d.ts.map +1 -0
- package/dist/definitions/utils/overrideComponent.d.ts +10 -0
- package/dist/definitions/utils/overrideComponent.d.ts.map +1 -0
- package/dist/esm/components/button/Button.js +18 -0
- package/dist/esm/components/button/Button.js.map +1 -0
- package/dist/esm/components/button/ButtonWithDisabledTooltip.js +54 -0
- package/dist/esm/components/button/ButtonWithDisabledTooltip.js.map +1 -0
- package/dist/esm/components/button/index.js +3 -0
- package/dist/esm/components/button/index.js.map +1 -0
- package/dist/esm/components/collection/Collection.js +8 -6
- package/dist/esm/components/collection/Collection.js.map +1 -1
- package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js +2 -1
- package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js.map +1 -1
- package/dist/esm/components/index.js +2 -0
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmButton.js +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmButton.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmPrompt.js +2 -1
- package/dist/esm/components/inline-confirm/InlineConfirmPrompt.js.map +1 -1
- package/dist/esm/components/menu/Menu.js +19 -0
- package/dist/esm/components/menu/Menu.js.map +1 -0
- package/dist/esm/components/menu/index.js +3 -0
- package/dist/esm/components/menu/index.js.map +1 -0
- package/dist/esm/components/modal-wizard/ModalWizard.js +3 -2
- package/dist/esm/components/modal-wizard/ModalWizard.js.map +1 -1
- package/dist/esm/components/table/TableDateRangePicker.js +2 -1
- package/dist/esm/components/table/TableDateRangePicker.js.map +1 -1
- package/dist/esm/components/table/TableHeader.js +2 -1
- package/dist/esm/components/table/TableHeader.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/createPolymorphicComponent.js +8 -0
- package/dist/esm/utils/createPolymorphicComponent.js.map +1 -0
- package/dist/esm/utils/index.js +4 -0
- package/dist/esm/utils/index.js.map +1 -0
- package/dist/esm/utils/overrideComponent.js +19 -0
- package/dist/esm/utils/overrideComponent.js.map +1 -0
- package/package.json +5 -3
- package/src/components/button/Button.tsx +27 -0
- package/src/components/button/ButtonWithDisabledTooltip.tsx +58 -0
- package/src/components/button/__tests__/ButtonWithDisabledTooltip.spec.tsx +52 -0
- package/src/components/button/index.ts +2 -0
- package/src/components/collection/Collection.tsx +6 -4
- package/src/components/date-range-picker/DateRangePickerInlineCalendar.tsx +2 -1
- package/src/components/index.ts +2 -0
- package/src/components/inline-confirm/InlineConfirmButton.tsx +2 -1
- package/src/components/inline-confirm/InlineConfirmPrompt.tsx +2 -1
- package/src/components/menu/Menu.tsx +18 -0
- package/src/components/menu/index.ts +1 -0
- package/src/components/modal-wizard/ModalWizard.tsx +4 -2
- package/src/components/table/TableDateRangePicker.tsx +3 -1
- package/src/components/table/TableHeader.tsx +2 -1
- package/src/components/table/__tests__/TableActions.spec.tsx +1 -1
- package/src/index.ts +1 -1
- package/src/utils/__tests__/overrideComponent.spec.tsx +74 -0
- package/src/utils/createPolymorphicComponent.ts +8 -0
- package/src/utils/index.ts +2 -0
- package/src/utils/overrideComponent.ts +18 -0
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "Button", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return Button;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
var _core = require("@mantine/core");
|
|
14
|
+
var _react = require("react");
|
|
15
|
+
var _utils = require("../../utils");
|
|
16
|
+
var _buttonWithDisabledTooltip = require("./ButtonWithDisabledTooltip");
|
|
17
|
+
var _Button = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
|
|
18
|
+
var theme = (0, _core.useMantineTheme)();
|
|
19
|
+
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_buttonWithDisabledTooltip.ButtonWithDisabledTooltip, _objectSpread({
|
|
20
|
+
component: _core.Button,
|
|
21
|
+
ref: ref,
|
|
22
|
+
disabledHoverColor: theme.colors.gray[2]
|
|
23
|
+
}, props));
|
|
24
|
+
});
|
|
25
|
+
var Button = (0, _utils.createPolymorphicComponent)(_Button);
|
|
26
|
+
Button.DisabledTooltip = _buttonWithDisabledTooltip.ButtonWithDisabledTooltip;
|
|
27
|
+
|
|
28
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import {Button as MantineButton, ButtonProps as MantineButtonProps, useMantineTheme} from '@mantine/core';\nimport {forwardRef} from 'react';\n\nimport {createPolymorphicComponent} from '../../utils';\nimport {ButtonWithDisabledTooltip, ButtonWithDisabledTooltipProps} from './ButtonWithDisabledTooltip';\n\nexport interface ButtonProps extends MantineButtonProps, ButtonWithDisabledTooltipProps {}\n\nconst _Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n const theme = useMantineTheme();\n return (\n <ButtonWithDisabledTooltip\n component={MantineButton}\n ref={ref}\n disabledHoverColor={theme.colors.gray[2]}\n {...props}\n />\n );\n});\n\nexport const Button = createPolymorphicComponent<\n 'button',\n ButtonProps,\n {Group: typeof MantineButton.Group; DisabledTooltip: typeof ButtonWithDisabledTooltip}\n>(_Button);\n\nButton.DisabledTooltip = ButtonWithDisabledTooltip;\n"],"names":["Button","_Button","forwardRef","props","ref","theme","useMantineTheme","ButtonWithDisabledTooltip","component","MantineButton","disabledHoverColor","colors","gray","createPolymorphicComponent","DisabledTooltip"],"mappings":"AAAA;;;;+BAoBaA;;;eAAAA;;;;;oBApB6E;qBACjE;qBAEgB;yCAC+B;AAIxE,IAAMC,wBAAUC,IAAAA,iBAAU,EAAiC,SAACC,OAAOC,KAAQ;IACvE,IAAMC,QAAQC,IAAAA,qBAAe;IAC7B,qBACI,qBAACC,oDAAyB;QACtBC,WAAWC,YAAa;QACxBL,KAAKA;QACLM,oBAAoBL,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;OACpCT;AAGhB;AAEO,IAAMH,SAASa,IAAAA,iCAA0B,EAI9CZ;AAEFD,OAAOc,eAAe,GAAGP,oDAAyB"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "ButtonWithDisabledTooltip", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return ButtonWithDisabledTooltip;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
|
|
12
|
+
var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
|
|
13
|
+
var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
var _core = require("@mantine/core");
|
|
16
|
+
var _react = require("react");
|
|
17
|
+
var _utils = require("../../utils");
|
|
18
|
+
var _ButtonWithDisabledTooltip = /*#__PURE__*/ (0, _react.forwardRef)(function(_param, ref) {
|
|
19
|
+
var disabledTooltip = _param.disabledTooltip, disabled = _param.disabled, onClick = _param.onClick, tmp = _param.disabledHoverColor, hoverColor = tmp === void 0 ? "unset" : tmp, others = _objectWithoutProperties(_param, [
|
|
20
|
+
"disabledTooltip",
|
|
21
|
+
"disabled",
|
|
22
|
+
"onClick",
|
|
23
|
+
"disabledHoverColor"
|
|
24
|
+
]);
|
|
25
|
+
return disabledTooltip ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Tooltip, {
|
|
26
|
+
label: disabledTooltip,
|
|
27
|
+
disabled: !disabled,
|
|
28
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Box, _objectSpread(_objectSpreadProps(_objectSpread({
|
|
29
|
+
component: "button",
|
|
30
|
+
ref: ref
|
|
31
|
+
}, disabled ? {
|
|
32
|
+
"data-disabled": true
|
|
33
|
+
} : {}), {
|
|
34
|
+
sx: function(theme) {
|
|
35
|
+
return {
|
|
36
|
+
"&[data-disabled]": {
|
|
37
|
+
pointerEvents: "all",
|
|
38
|
+
color: theme.colors.gray[5]
|
|
39
|
+
},
|
|
40
|
+
"&[data-disabled]:hover": {
|
|
41
|
+
backgroundColor: hoverColor,
|
|
42
|
+
cursor: "not-allowed"
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
},
|
|
46
|
+
onClick: function(event) {
|
|
47
|
+
if (disabled) {
|
|
48
|
+
event.preventDefault();
|
|
49
|
+
event.stopPropagation();
|
|
50
|
+
} else {
|
|
51
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}), others))
|
|
55
|
+
}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Box, _objectSpread({
|
|
56
|
+
component: "button",
|
|
57
|
+
ref: ref,
|
|
58
|
+
disabled: disabled,
|
|
59
|
+
onClick: onClick
|
|
60
|
+
}, others));
|
|
61
|
+
});
|
|
62
|
+
var ButtonWithDisabledTooltip = (0, _utils.createPolymorphicComponent)(_ButtonWithDisabledTooltip);
|
|
63
|
+
|
|
64
|
+
//# sourceMappingURL=ButtonWithDisabledTooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/button/ButtonWithDisabledTooltip.tsx"],"sourcesContent":["import {Box, Tooltip} from '@mantine/core';\nimport {Property} from 'csstype';\nimport {forwardRef, MouseEventHandler} from 'react';\n\nimport {createPolymorphicComponent} from '../../utils';\n\nexport interface ButtonWithDisabledTooltipProps {\n disabled?: boolean;\n onClick?: MouseEventHandler<HTMLButtonElement>;\n /**\n * The tooltip message to display when disabled\n */\n disabledTooltip?: string;\n /**\n * The background color when disabled\n *\n * @default 'unset'\n */\n disabledHoverColor?: Property.BackgroundColor;\n}\n\nconst _ButtonWithDisabledTooltip = forwardRef<HTMLButtonElement, ButtonWithDisabledTooltipProps>(\n ({disabledTooltip, disabled, onClick, disabledHoverColor: hoverColor = 'unset', ...others}, ref) =>\n disabledTooltip ? (\n <Tooltip label={disabledTooltip} disabled={!disabled}>\n <Box\n component=\"button\"\n ref={ref}\n {...(disabled ? {'data-disabled': true} : {})}\n sx={(theme) => ({\n '&[data-disabled]': {\n pointerEvents: 'all',\n color: theme.colors.gray[5],\n },\n '&[data-disabled]:hover': {\n backgroundColor: hoverColor,\n cursor: 'not-allowed',\n },\n })}\n onClick={(event) => {\n if (disabled) {\n event.preventDefault();\n event.stopPropagation();\n } else {\n onClick?.(event);\n }\n }}\n {...others}\n />\n </Tooltip>\n ) : (\n <Box component=\"button\" ref={ref} disabled={disabled} onClick={onClick} {...others} />\n )\n);\n\nexport const ButtonWithDisabledTooltip = createPolymorphicComponent<'button', ButtonWithDisabledTooltipProps>(\n _ButtonWithDisabledTooltip\n);\n"],"names":["ButtonWithDisabledTooltip","_ButtonWithDisabledTooltip","forwardRef","ref","disabledTooltip","disabled","onClick","hoverColor","disabledHoverColor","others","Tooltip","label","Box","component","sx","theme","pointerEvents","color","colors","gray","backgroundColor","cursor","event","preventDefault","stopPropagation","createPolymorphicComponent"],"mappings":"AAAA;;;;+BAuDaA;;;eAAAA;;;;;;;oBAvDc;qBAEiB;qBAEH;AAiBzC,IAAMC,2CAA6BC,IAAAA,iBAAU,EACzC,iBAA4FC;QAA1FC,yBAAAA,iBAAiBC,kBAAAA,UAAUC,iBAAAA,SAA6BC,aAApBC,oBAAoBD,aAAAA,iBAAa,UAAbA,KAAyBE;QAAjFL;QAAiBC;QAAUC;QAASE;;IAClCJ,OAAAA,gCACI,qBAACM,aAAO;QAACC,OAAOP;QAAiBC,UAAU,CAACA;kBACxC,cAAA,qBAACO,SAAG;YACAC,WAAU;YACVV,KAAKA;WACAE,WAAW;YAAC,iBAAiB,IAAI;QAAA,IAAI,CAAC,CAAC;YAC5CS,IAAI,SAACC;uBAAW;oBACZ,oBAAoB;wBAChBC,eAAe;wBACfC,OAAOF,MAAMG,MAAM,CAACC,IAAI,CAAC,EAAE;oBAC/B;oBACA,0BAA0B;wBACtBC,iBAAiBb;wBACjBc,QAAQ;oBACZ;gBACJ;;YACAf,SAAS,SAACgB,OAAU;gBAChB,IAAIjB,UAAU;oBACViB,MAAMC,cAAc;oBACpBD,MAAME,eAAe;gBACzB,OAAO;oBACHlB,oBAAAA,qBAAAA,KAAAA,IAAAA,QAAUgB;gBACd,CAAC;YACL;YACIb;uBAIZ,qBAACG,SAAG;QAACC,WAAU;QAASV,KAAKA;QAAKE,UAAUA;QAAUC,SAASA;OAAaG,QAC/E;;AAGF,IAAMT,4BAA4ByB,IAAAA,iCAA0B,EAC/DxB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/button/index.ts"],"sourcesContent":["export * from './Button';\nexport {type ButtonWithDisabledTooltipProps} from './ButtonWithDisabledTooltip';\n"],"names":[],"mappings":"AAAA;;;;;oBAAc"}
|
|
@@ -17,6 +17,7 @@ var _plasmaReactIcons = require("@coveord/plasma-react-icons");
|
|
|
17
17
|
var _core = require("@mantine/core");
|
|
18
18
|
var _hooks = require("@mantine/hooks");
|
|
19
19
|
var _reactBeautifulDnd = require("react-beautiful-dnd");
|
|
20
|
+
var _button = require("../button");
|
|
20
21
|
var _collectionStyles = /*#__PURE__*/ _interopRequireDefault(require("./Collection.styles"));
|
|
21
22
|
var _collectionItem = require("./CollectionItem");
|
|
22
23
|
var defaultProps = {
|
|
@@ -28,7 +29,7 @@ var defaultProps = {
|
|
|
28
29
|
required: false
|
|
29
30
|
};
|
|
30
31
|
var Collection = function(props) {
|
|
31
|
-
var _useComponentDefaultProps = (0, _core.useComponentDefaultProps)("Collection", defaultProps, props), value = _useComponentDefaultProps.value, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, onReorderItem = _useComponentDefaultProps.onReorderItem, onInsertItem = _useComponentDefaultProps.onInsertItem, disabled = _useComponentDefaultProps.disabled, draggable = _useComponentDefaultProps.draggable, children = _useComponentDefaultProps.children, spacing = _useComponentDefaultProps.spacing, required = _useComponentDefaultProps.required, newItem = _useComponentDefaultProps.newItem, addLabel = _useComponentDefaultProps.addLabel, addDisabledTooltip = _useComponentDefaultProps.addDisabledTooltip, allowAdd = _useComponentDefaultProps.allowAdd, label = _useComponentDefaultProps.label, labelProps = _useComponentDefaultProps.labelProps, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, // Style props
|
|
32
|
+
var _useComponentDefaultProps = (0, _core.useComponentDefaultProps)("Collection", defaultProps, props), value = _useComponentDefaultProps.value, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, onReorderItem = _useComponentDefaultProps.onReorderItem, onInsertItem = _useComponentDefaultProps.onInsertItem, disabled = _useComponentDefaultProps.disabled, draggable = _useComponentDefaultProps.draggable, children = _useComponentDefaultProps.children, spacing = _useComponentDefaultProps.spacing, required = _useComponentDefaultProps.required, newItem = _useComponentDefaultProps.newItem, addLabel = _useComponentDefaultProps.addLabel, addDisabledTooltip = _useComponentDefaultProps.addDisabledTooltip, allowAdd = _useComponentDefaultProps.allowAdd, label = _useComponentDefaultProps.label, labelProps = _useComponentDefaultProps.labelProps, withAsterisk = _useComponentDefaultProps.withAsterisk, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, // Style props
|
|
32
33
|
classNames = _useComponentDefaultProps.classNames, className = _useComponentDefaultProps.className, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, others = _objectWithoutProperties(_useComponentDefaultProps, [
|
|
33
34
|
"value",
|
|
34
35
|
"onChange",
|
|
@@ -46,6 +47,7 @@ var Collection = function(props) {
|
|
|
46
47
|
"allowAdd",
|
|
47
48
|
"label",
|
|
48
49
|
"labelProps",
|
|
50
|
+
"withAsterisk",
|
|
49
51
|
"description",
|
|
50
52
|
"descriptionProps",
|
|
51
53
|
"error",
|
|
@@ -70,8 +72,9 @@ var Collection = function(props) {
|
|
|
70
72
|
}, [
|
|
71
73
|
JSON.stringify(value)
|
|
72
74
|
]);
|
|
75
|
+
var isRequired = typeof withAsterisk === "boolean" ? withAsterisk : required;
|
|
73
76
|
var _label = label ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Input.Label, _objectSpreadProps(_objectSpread({
|
|
74
|
-
required:
|
|
77
|
+
required: isRequired
|
|
75
78
|
}, labelProps), {
|
|
76
79
|
children: label
|
|
77
80
|
})) : null;
|
|
@@ -81,8 +84,7 @@ var Collection = function(props) {
|
|
|
81
84
|
var _error = error ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Input.Error, _objectSpreadProps(_objectSpread({}, errorProps), {
|
|
82
85
|
children: error
|
|
83
86
|
})) : null;
|
|
84
|
-
var _header = _label || _description ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(
|
|
85
|
-
mb: "sm",
|
|
87
|
+
var _header = _label || _description ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
86
88
|
children: [
|
|
87
89
|
_label,
|
|
88
90
|
_description
|
|
@@ -109,7 +111,7 @@ var Collection = function(props) {
|
|
|
109
111
|
label: addDisabledTooltip,
|
|
110
112
|
disabled: addAllowed,
|
|
111
113
|
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Box, {
|
|
112
|
-
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(
|
|
114
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_button.Button, {
|
|
113
115
|
variant: "subtle",
|
|
114
116
|
leftIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.AddSize16Px, {
|
|
115
117
|
height: 16
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {\n Box,\n Button,\n DefaultProps,\n Group,\n Input,\n InputWrapperBaseProps,\n MantineNumberSize,\n Selectors,\n Stack,\n Tooltip,\n useComponentDefaultProps,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate, useId} from '@mantine/hooks';\nimport {ReactNode} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\n\nimport useStyles from './Collection.styles';\nimport {CollectionItem} from './CollectionItem';\n\ninterface CollectionProps<T>\n extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n DefaultProps<Selectors<typeof useStyles>> {\n /**\n * The default value each new item should have\n */\n newItem: T;\n /**\n * A render function called for each item passed in the `value` prop.\n *\n * @param item The current item's value\n * @param index The current item's index\n */\n children: (item: T, index: number) => ReactNode;\n /**\n * The list of items to display inside the collection\n *\n * @default []\n */\n value?: T[];\n /**\n * Unused, has no effect\n */\n onFocus?: () => void;\n /**\n * Function called whenever the value needs to be updated\n *\n * @param value The whole list of items after the change\n */\n onChange?: (value: T[]) => void;\n /**\n * Function called after an item is removed from the collection using the remove button\n *\n * @param itemIndex The index of the item that was removed\n */\n onRemoveItem?: (itemIndex: number) => void;\n /**\n * Function that gets called whenever a collection item needs to be reordered\n *\n * @param payload The origin and destination index of the item to reorder\n */\n onReorderItem?: (payload: ReorderPayload) => void;\n /**\n * Function that gets called when a new item needs to be added to the collection\n *\n * @param value The the value of the item to insert\n * @param index The index of the new item to insert\n */\n onInsertItem?: (value: T, index: number) => void;\n /**\n * Whether the collection should have drag and drop behavior enabled\n *\n * @default false\n */\n draggable?: boolean;\n /**\n * Whether the collection is disabled, or in other words in read only mode\n *\n * @default false\n */\n disabled?: boolean;\n /**\n * Function that determines if the add item button should be enabled given the current items of the collection.\n * The button is always enabled if this props remains undefined\n *\n * @param values The current items of the collection\n */\n allowAdd?: (values: T[]) => boolean;\n /**\n * The label of the add item button\n *\n * @default \"Add item\"\n */\n addLabel?: string;\n /**\n * The tooltip text displayed when hovering over the disabled add item button\n *\n * @default 'There is already an empty item'\n */\n addDisabledTooltip?: string;\n /**\n * The spacing between the colleciton items\n *\n * @default 'xs'\n */\n spacing?: MantineNumberSize;\n /**\n * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n *\n * @default false\n */\n required?: boolean;\n}\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n draggable: false,\n addLabel: 'Add item',\n addDisabledTooltip: 'There is already an empty item',\n disabled: false,\n spacing: 'xs',\n required: false,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n const {\n value,\n onChange,\n onRemoveItem,\n onReorderItem,\n onInsertItem,\n disabled,\n draggable,\n children,\n spacing,\n required,\n newItem,\n addLabel,\n addDisabledTooltip,\n allowAdd,\n label,\n labelProps,\n description,\n descriptionProps,\n error,\n errorProps,\n\n // Style props\n classNames,\n className,\n styles,\n unstyled,\n\n ...others\n } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);\n const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});\n const collectionID = useId('dnd-droppable');\n\n const hasOnlyOneItem = value.length === 1;\n\n /**\n * Enforcing onChange when the value is modified will make sure the errors are carried through.\n */\n useDidUpdate(() => {\n onChange?.(value);\n }, [JSON.stringify(value)]);\n\n const _label = label ? (\n <Input.Label required={required} {...labelProps}>\n {label}\n </Input.Label>\n ) : null;\n\n const _description = description ? (\n <Input.Description {...descriptionProps}>{description}</Input.Description>\n ) : null;\n const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n const _header =\n _label || _description ? (\n <Box mb=\"sm\">\n {_label}\n {_description}\n </Box>\n ) : null;\n\n const items = value.map((item, index) => (\n <CollectionItem\n key={index}\n disabled={disabled}\n draggable={draggable}\n index={index}\n onRemove={() => onRemoveItem?.(index)}\n styles={styles}\n removable={!(required && hasOnlyOneItem)}\n >\n {children(item, index)}\n </CollectionItem>\n ));\n\n const addAllowed = allowAdd?.(value) ?? true;\n\n const _addButton = disabled ? null : (\n <Group>\n <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n <Box>\n <Button\n variant=\"subtle\"\n leftIcon={<AddSize16Px height={16} />}\n onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n disabled={!addAllowed}\n >\n {addLabel}\n </Button>\n </Box>\n </Tooltip>\n </Group>\n );\n\n return (\n <DragDropContext\n onDragEnd={({destination, source}) => onReorderItem({from: source.index, to: destination?.index || 0})}\n >\n <Droppable direction=\"vertical\" droppableId={collectionID}>\n {(provided) => (\n <Box\n {...provided.droppableProps}\n ref={provided.innerRef}\n className={cx(classes.root, className)}\n {...others}\n >\n {_header}\n <Stack spacing={spacing}>\n {items}\n {provided.placeholder}\n {_addButton}\n {_error}\n </Stack>\n </Box>\n )}\n </Droppable>\n </DragDropContext>\n );\n};\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","props","useComponentDefaultProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","_label","Input","Label","_description","Description","_error","Error","_header","Box","mb","items","map","item","index","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Button","variant","leftIcon","AddSize16Px","height","onClick","DragDropContext","onDragEnd","destination","source","from","to","Droppable","direction","droppableId","provided","droppableProps","ref","innerRef","root","Stack","placeholder"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {\n Box,\n DefaultProps,\n Group,\n Input,\n InputWrapperBaseProps,\n MantineNumberSize,\n Selectors,\n Stack,\n Tooltip,\n useComponentDefaultProps,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate, useId} from '@mantine/hooks';\nimport {ReactNode} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\n\nimport {Button} from '../button';\nimport useStyles from './Collection.styles';\nimport {CollectionItem} from './CollectionItem';\n\ninterface CollectionProps<T>\n extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n DefaultProps<Selectors<typeof useStyles>> {\n /**\n * The default value each new item should have\n */\n newItem: T;\n /**\n * A render function called for each item passed in the `value` prop.\n *\n * @param item The current item's value\n * @param index The current item's index\n */\n children: (item: T, index: number) => ReactNode;\n /**\n * The list of items to display inside the collection\n *\n * @default []\n */\n value?: T[];\n /**\n * Unused, has no effect\n */\n onFocus?: () => void;\n /**\n * Function called whenever the value needs to be updated\n *\n * @param value The whole list of items after the change\n */\n onChange?: (value: T[]) => void;\n /**\n * Function called after an item is removed from the collection using the remove button\n *\n * @param itemIndex The index of the item that was removed\n */\n onRemoveItem?: (itemIndex: number) => void;\n /**\n * Function that gets called whenever a collection item needs to be reordered\n *\n * @param payload The origin and destination index of the item to reorder\n */\n onReorderItem?: (payload: ReorderPayload) => void;\n /**\n * Function that gets called when a new item needs to be added to the collection\n *\n * @param value The the value of the item to insert\n * @param index The index of the new item to insert\n */\n onInsertItem?: (value: T, index: number) => void;\n /**\n * Whether the collection should have drag and drop behavior enabled\n *\n * @default false\n */\n draggable?: boolean;\n /**\n * Whether the collection is disabled, or in other words in read only mode\n *\n * @default false\n */\n disabled?: boolean;\n /**\n * Function that determines if the add item button should be enabled given the current items of the collection.\n * The button is always enabled if this props remains undefined\n *\n * @param values The current items of the collection\n */\n allowAdd?: (values: T[]) => boolean;\n /**\n * The label of the add item button\n *\n * @default \"Add item\"\n */\n addLabel?: string;\n /**\n * The tooltip text displayed when hovering over the disabled add item button\n *\n * @default 'There is already an empty item'\n */\n addDisabledTooltip?: string;\n /**\n * The spacing between the colleciton items\n *\n * @default 'xs'\n */\n spacing?: MantineNumberSize;\n /**\n * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n *\n * @default false\n */\n required?: boolean;\n}\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n draggable: false,\n addLabel: 'Add item',\n addDisabledTooltip: 'There is already an empty item',\n disabled: false,\n spacing: 'xs',\n required: false,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n const {\n value,\n onChange,\n onRemoveItem,\n onReorderItem,\n onInsertItem,\n disabled,\n draggable,\n children,\n spacing,\n required,\n newItem,\n addLabel,\n addDisabledTooltip,\n allowAdd,\n label,\n labelProps,\n withAsterisk,\n description,\n descriptionProps,\n error,\n errorProps,\n\n // Style props\n classNames,\n className,\n styles,\n unstyled,\n\n ...others\n } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);\n const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});\n const collectionID = useId('dnd-droppable');\n\n const hasOnlyOneItem = value.length === 1;\n\n /**\n * Enforcing onChange when the value is modified will make sure the errors are carried through.\n */\n useDidUpdate(() => {\n onChange?.(value);\n }, [JSON.stringify(value)]);\n\n const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n const _label = label ? (\n <Input.Label required={isRequired} {...labelProps}>\n {label}\n </Input.Label>\n ) : null;\n\n const _description = description ? (\n <Input.Description {...descriptionProps}>{description}</Input.Description>\n ) : null;\n const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n const _header =\n _label || _description ? (\n <>\n {_label}\n {_description}\n </>\n ) : null;\n\n const items = value.map((item, index) => (\n <CollectionItem\n key={index}\n disabled={disabled}\n draggable={draggable}\n index={index}\n onRemove={() => onRemoveItem?.(index)}\n styles={styles}\n removable={!(required && hasOnlyOneItem)}\n >\n {children(item, index)}\n </CollectionItem>\n ));\n\n const addAllowed = allowAdd?.(value) ?? true;\n\n const _addButton = disabled ? null : (\n <Group>\n <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n <Box>\n <Button\n variant=\"subtle\"\n leftIcon={<AddSize16Px height={16} />}\n onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n disabled={!addAllowed}\n >\n {addLabel}\n </Button>\n </Box>\n </Tooltip>\n </Group>\n );\n\n return (\n <DragDropContext\n onDragEnd={({destination, source}) => onReorderItem({from: source.index, to: destination?.index || 0})}\n >\n <Droppable direction=\"vertical\" droppableId={collectionID}>\n {(provided) => (\n <Box\n {...provided.droppableProps}\n ref={provided.innerRef}\n className={cx(classes.root, className)}\n {...others}\n >\n {_header}\n <Stack spacing={spacing}>\n {items}\n {provided.placeholder}\n {_addButton}\n {_error}\n </Stack>\n </Box>\n )}\n </Droppable>\n </DragDropContext>\n );\n};\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","props","useComponentDefaultProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","_header","items","map","item","index","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftIcon","AddSize16Px","height","onClick","DragDropContext","onDragEnd","destination","source","from","to","Droppable","direction","droppableId","provided","droppableProps","ref","innerRef","root","Stack","placeholder"],"mappings":"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"}
|
|
@@ -14,6 +14,7 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
14
14
|
var _core = require("@mantine/core");
|
|
15
15
|
var _dates = require("@mantine/dates");
|
|
16
16
|
var _form = require("@mantine/form");
|
|
17
|
+
var _button = require("../button");
|
|
17
18
|
var _dateRangePickerPresetSelect = require("./DateRangePickerPresetSelect");
|
|
18
19
|
var _editableDateRangePicker = require("./EditableDateRangePicker");
|
|
19
20
|
var DateRangePickerInlineCalendar = function(param) {
|
|
@@ -85,12 +86,12 @@ var DateRangePickerInlineCalendar = function(param) {
|
|
|
85
86
|
};
|
|
86
87
|
},
|
|
87
88
|
children: [
|
|
88
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(
|
|
89
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_button.Button, {
|
|
89
90
|
size: "xs",
|
|
90
91
|
onClick: onCalendarApply,
|
|
91
92
|
children: "Apply"
|
|
92
93
|
}),
|
|
93
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(
|
|
94
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_button.Button, {
|
|
94
95
|
variant: "outline",
|
|
95
96
|
size: "xs",
|
|
96
97
|
onClick: onCancel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {DateRangePickerValue, RangeCalendar, RangeCalendarProps} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport {Button} from '../button';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\nexport interface DateRangePickerInlineCalendarProps\n extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n /**\n * Initial selected range\n */\n initialRange: DateRangePickerValue;\n /**\n * Function called when the user applies the new date range\n *\n * @param range the newly selected dates\n */\n onApply: (range: DateRangePickerValue) => void;\n /**\n * Function called when the user click on the cancel button\n */\n onCancel: () => void;\n /**\n * The presets to display\n *\n * @default {}\n * @example\n * {\n * january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n * february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n * }\n */\n presets?: Record<string, DateRangePickerPreset>;\n /**\n * Props for RangeCalendar displayed in the popover\n */\n rangeCalendarProps?: Omit<RangeCalendarProps, 'value' | 'onChange'>;\n}\n\nexport const DateRangePickerInlineCalendar = ({\n initialRange,\n onApply,\n onCancel,\n presets,\n startProps,\n endProps,\n rangeCalendarProps,\n}: DateRangePickerInlineCalendarProps) => {\n const form = useForm({\n initialValues: {\n dates: initialRange,\n },\n });\n const calendarInputProps = form.getInputProps('dates');\n\n const onCalendarApply = () => {\n if (!form.values.dates[1]) {\n form.values.dates[1] = form.values.dates[0]; // when date range is the same day\n }\n onApply(form.values.dates);\n };\n\n return (\n <>\n <Group\n align=\"center\"\n spacing=\"xs\"\n grow\n px=\"md\"\n py=\"sm\"\n sx={(theme) => ({\n borderBottom: `1px solid ${theme.colors.gray[2]}`,\n })}\n >\n <EditableDateRangePicker {...calendarInputProps} startProps={startProps} endProps={endProps} />\n {presets ? (\n <>\n <Space w=\"sm\" />\n <DateRangePickerPresetSelect presets={presets} {...calendarInputProps} />\n </>\n ) : null}\n </Group>\n\n <Center py=\"sm\" px=\"md\">\n <RangeCalendar\n amountOfMonths={2}\n styles={{cell: {textAlign: 'center'}}}\n firstDayOfWeek=\"sunday\"\n allowSingleDateInRange\n {...rangeCalendarProps}\n {...calendarInputProps}\n />\n </Center>\n\n <Group\n position=\"right\"\n spacing=\"xs\"\n px=\"md\"\n py=\"sm\"\n sx={(theme) => ({\n borderTop: `1px solid ${theme.colors.gray[2]}`,\n })}\n >\n <Button size=\"xs\" onClick={onCalendarApply}>\n Apply\n </Button>\n <Button variant=\"outline\" size=\"xs\" onClick={onCancel}>\n Cancel\n </Button>\n </Group>\n </>\n );\n};\n"],"names":["DateRangePickerInlineCalendar","initialRange","onApply","onCancel","presets","startProps","endProps","rangeCalendarProps","form","useForm","initialValues","dates","calendarInputProps","getInputProps","onCalendarApply","values","Group","align","spacing","grow","px","py","sx","theme","borderBottom","colors","gray","EditableDateRangePicker","Space","w","DateRangePickerPresetSelect","Center","RangeCalendar","amountOfMonths","styles","cell","textAlign","firstDayOfWeek","allowSingleDateInRange","position","borderTop","Button","size","onClick","variant"],"mappings":"AAAA;;;;+BAyCaA;;;eAAAA;;;;;;oBAzCsB;qBACmC;oBAChD;sBAED;2CAC4C;uCACG;AAmC7D,IAAMA,gCAAgC,gBAQH;QAPtCC,qBAAAA,cACAC,gBAAAA,SACAC,iBAAAA,UACAC,gBAAAA,SACAC,mBAAAA,YACAC,iBAAAA,UACAC,2BAAAA;IAEA,IAAMC,OAAOC,IAAAA,aAAO,EAAC;QACjBC,eAAe;YACXC,OAAOV;QACX;IACJ;IACA,IAAMW,qBAAqBJ,KAAKK,aAAa,CAAC;IAE9C,IAAMC,kBAAkB,WAAM;QAC1B,IAAI,CAACN,KAAKO,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE;YACvBH,KAAKO,MAAM,CAACJ,KAAK,CAAC,EAAE,GAAGH,KAAKO,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE,kCAAkC;QACnF,CAAC;QACDT,QAAQM,KAAKO,MAAM,CAACJ,KAAK;IAC7B;IAEA,qBACI;;0BACI,sBAACK,WAAK;gBACFC,OAAM;gBACNC,SAAQ;gBACRC,IAAI;gBACJC,IAAG;gBACHC,IAAG;gBACHC,IAAI,SAACC;2BAAW;wBACZC,cAAc,AAAC,aAAiC,OAArBD,MAAME,MAAM,CAACC,IAAI,CAAC,EAAE;oBACnD;;;kCAEA,qBAACC,gDAAuB,uCAAKf;wBAAoBP,YAAYA;wBAAYC,UAAUA;;oBAClFF,wBACG;;0CACI,qBAACwB,WAAK;gCAACC,GAAE;;0CACT,qBAACC,wDAA2B;gCAAC1B,SAASA;+BAAaQ;;yBAEvD,IAAI;;;0BAGZ,qBAACmB,YAAM;gBAACV,IAAG;gBAAKD,IAAG;0BACf,cAAA,qBAACY,oBAAa;oBACVC,gBAAgB;oBAChBC,QAAQ;wBAACC,MAAM;4BAACC,WAAW;wBAAQ;oBAAC;oBACpCC,gBAAe;oBACfC,sBAAsB;mBAClB/B,oBACAK;;0BAIZ,sBAACI,WAAK;gBACFuB,UAAS;gBACTrB,SAAQ;gBACRE,IAAG;gBACHC,IAAG;gBACHC,IAAI,SAACC;2BAAW;wBACZiB,WAAW,AAAC,aAAiC,OAArBjB,MAAME,MAAM,CAACC,IAAI,CAAC,EAAE;oBAChD;;;kCAEA,qBAACe,cAAM;wBAACC,MAAK;wBAAKC,SAAS7B;kCAAiB;;kCAG5C,qBAAC2B,cAAM;wBAACG,SAAQ;wBAAUF,MAAK;wBAAKC,SAASxC;kCAAU;;;;;;AAMvE"}
|
|
@@ -14,5 +14,7 @@ _exportStar(require("./table"), exports);
|
|
|
14
14
|
_exportStar(require("./prompt"), exports);
|
|
15
15
|
_exportStar(require("./modal"), exports);
|
|
16
16
|
_exportStar(require("./modal-wizard"), exports);
|
|
17
|
+
_exportStar(require("./button"), exports);
|
|
18
|
+
_exportStar(require("./menu"), exports);
|
|
17
19
|
|
|
18
20
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './blank-slate';\nexport * from './code-editor';\nexport * from './collection';\nexport * from './date-range-picker';\nexport * from './sticky-footer';\nexport * from './header';\nexport * from './inline-confirm';\nexport * from './table';\nexport * from './prompt';\nexport * from './modal';\nexport * from './modal-wizard';\n"],"names":[],"mappings":"AAAA;;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './blank-slate';\nexport * from './code-editor';\nexport * from './collection';\nexport * from './date-range-picker';\nexport * from './sticky-footer';\nexport * from './header';\nexport * from './inline-confirm';\nexport * from './table';\nexport * from './prompt';\nexport * from './modal';\nexport * from './modal-wizard';\nexport * from './button';\nexport * from './menu';\n"],"names":[],"mappings":"AAAA;;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA"}
|
|
@@ -11,7 +11,7 @@ Object.defineProperty(exports, "InlineConfirmButton", {
|
|
|
11
11
|
var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
|
|
12
12
|
var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
|
|
13
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
|
-
var
|
|
14
|
+
var _button = require("../button");
|
|
15
15
|
var _useInlineConfirm = require("./useInlineConfirm");
|
|
16
16
|
var InlineConfirmButton = function(props) {
|
|
17
17
|
var setConfirmingId = (0, _useInlineConfirm.useInlineConfirm)().setConfirmingId;
|
|
@@ -20,7 +20,7 @@ var InlineConfirmButton = function(props) {
|
|
|
20
20
|
setConfirmingId(props.id);
|
|
21
21
|
(_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, e);
|
|
22
22
|
};
|
|
23
|
-
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(
|
|
23
|
+
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_button.Button, _objectSpreadProps(_objectSpread({}, props), {
|
|
24
24
|
onClick: onClick
|
|
25
25
|
}));
|
|
26
26
|
};
|
|
@@ -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 {HTMLAttributes, MouseEventHandler} from 'react';\n\nimport {Button, ButtonProps} from '../button';\nimport {useInlineConfirm} from './useInlineConfirm';\n\ninterface InlineConfirmButtonProps extends ButtonProps, Omit<HTMLAttributes<HTMLButtonElement>, 'color'> {\n id: string;\n}\n\nexport const InlineConfirmButton = (props: InlineConfirmButtonProps) => {\n const {setConfirmingId} = useInlineConfirm();\n const onClick: MouseEventHandler<HTMLButtonElement> = (e) => {\n setConfirmingId(props.id);\n props.onClick?.(e);\n };\n\n return <Button {...props} onClick={onClick} />;\n};\n"],"names":["InlineConfirmButton","props","setConfirmingId","useInlineConfirm","onClick","e","id","Button"],"mappings":"AAAA;;;;+BASaA;;;eAAAA;;;;;;sBAPqB;gCACH;AAMxB,IAAMA,sBAAsB,SAACC,OAAoC;IACpE,IAAM,AAACC,kBAAmBC,IAAAA,kCAAgB,IAAnCD;IACP,IAAME,UAAgD,SAACC,GAAM;YAEzDJ;QADAC,gBAAgBD,MAAMK,EAAE;QACxBL,CAAAA,iBAAAA,MAAMG,OAAO,cAAbH,4BAAAA,KAAAA,IAAAA,eAAAA,KAAAA,OAAgBI;IACpB;IAEA,qBAAO,qBAACE,cAAM,uCAAKN;QAAOG,SAASA;;AACvC"}
|
|
@@ -11,6 +11,7 @@ Object.defineProperty(exports, "InlineConfirmPrompt", {
|
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
12
|
var _core = require("@mantine/core");
|
|
13
13
|
var _react = require("react");
|
|
14
|
+
var _button = require("../button");
|
|
14
15
|
var _useInlineConfirm = require("./useInlineConfirm");
|
|
15
16
|
var InlineConfirmPrompt = function(param) {
|
|
16
17
|
var id = param.id, label = param.label, _param_confirmLabel = param.confirmLabel, confirmLabel = _param_confirmLabel === void 0 ? "Delete" : _param_confirmLabel, _param_cancelLabel = param.cancelLabel, cancelLabel = _param_cancelLabel === void 0 ? "Cancel" : _param_cancelLabel, onConfirm = param.onConfirm;
|
|
@@ -29,12 +30,12 @@ var InlineConfirmPrompt = function(param) {
|
|
|
29
30
|
spacing: "xs",
|
|
30
31
|
children: [
|
|
31
32
|
label,
|
|
32
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(
|
|
33
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_button.Button, {
|
|
33
34
|
onClick: onClickConfirm,
|
|
34
35
|
color: "red",
|
|
35
36
|
children: confirmLabel
|
|
36
37
|
}),
|
|
37
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(
|
|
38
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_button.Button, {
|
|
38
39
|
onClick: clearConfirm,
|
|
39
40
|
variant: "outline",
|
|
40
41
|
children: cancelLabel
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirmPrompt.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirmPrompt.tsx"],"sourcesContent":["import {Group} from '@mantine/core';\nimport {FunctionComponent, ReactNode, useEffect} from 'react';\n\nimport {Button} from '../button';\nimport {useInlineConfirm} from './useInlineConfirm';\n\ninterface InlineConfirmPromptProps {\n id: string;\n label: ReactNode;\n onConfirm: () => void;\n confirmLabel?: ReactNode;\n cancelLabel?: ReactNode;\n}\n\nexport const InlineConfirmPrompt: FunctionComponent<InlineConfirmPromptProps> = ({\n id,\n label,\n confirmLabel = 'Delete',\n cancelLabel = 'Cancel',\n onConfirm,\n}) => {\n const {confirmingId, clearConfirm} = useInlineConfirm();\n\n const onClickConfirm = () => {\n onConfirm();\n clearConfirm();\n };\n\n useEffect(() => {\n if (confirmingId !== id) {\n clearConfirm();\n }\n }, []);\n\n if (confirmingId === id) {\n return (\n <Group spacing=\"xs\">\n {label}\n <Button onClick={onClickConfirm} color=\"red\">\n {confirmLabel}\n </Button>\n <Button onClick={clearConfirm} variant=\"outline\">\n {cancelLabel}\n </Button>\n </Group>\n );\n }\n return null;\n};\n"],"names":["InlineConfirmPrompt","id","label","confirmLabel","cancelLabel","onConfirm","useInlineConfirm","confirmingId","clearConfirm","onClickConfirm","useEffect","Group","spacing","Button","onClick","color","variant"],"mappings":"AAAA;;;;+BAcaA;;;eAAAA;;;;oBAdO;qBACkC;sBAEjC;gCACU;AAUxB,IAAMA,sBAAmE,gBAM1E;QALFC,WAAAA,IACAC,cAAAA,mCACAC,cAAAA,gDAAe,2DACfC,aAAAA,8CAAc,+BACdC,kBAAAA;IAEA,IAAqCC,qBAAAA,IAAAA,kCAAgB,KAA9CC,eAA8BD,mBAA9BC,cAAcC,eAAgBF,mBAAhBE;IAErB,IAAMC,iBAAiB,WAAM;QACzBJ;QACAG;IACJ;IAEAE,IAAAA,gBAAS,EAAC,WAAM;QACZ,IAAIH,iBAAiBN,IAAI;YACrBO;QACJ,CAAC;IACL,GAAG,EAAE;IAEL,IAAID,iBAAiBN,IAAI;QACrB,qBACI,sBAACU,WAAK;YAACC,SAAQ;;gBACVV;8BACD,qBAACW,cAAM;oBAACC,SAASL;oBAAgBM,OAAM;8BAClCZ;;8BAEL,qBAACU,cAAM;oBAACC,SAASN;oBAAcQ,SAAQ;8BAClCZ;;;;IAIjB,CAAC;IACD,OAAO,IAAI;AACf"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "Menu", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return Menu;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
var _core = require("@mantine/core");
|
|
14
|
+
var _react = require("react");
|
|
15
|
+
var _utils = require("../../utils");
|
|
16
|
+
var _button = require("../button");
|
|
17
|
+
var _MenuItem = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
|
|
18
|
+
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_button.Button.DisabledTooltip, _objectSpread({
|
|
19
|
+
component: _core.Menu.Item,
|
|
20
|
+
ref: ref
|
|
21
|
+
}, props));
|
|
22
|
+
});
|
|
23
|
+
var MenuItem = (0, _utils.createPolymorphicComponent)(_MenuItem);
|
|
24
|
+
var Menu = (0, _utils.overrideComponent)(_core.Menu, {
|
|
25
|
+
displayName: "@coveord/plasma-mantine/Menu",
|
|
26
|
+
Item: MenuItem
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
//# sourceMappingURL=Menu.js.map
|
|
@@ -0,0 +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 {Button, ButtonWithDisabledTooltipProps} from '../button';\n\nexport interface MenuItemProps extends MantineMenuItemProps, ButtonWithDisabledTooltipProps {}\n\nconst _MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>((props, ref) => (\n <Button.DisabledTooltip component={MantineMenu.Item} ref={ref} {...props} />\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","_MenuItem","forwardRef","props","ref","Button","DisabledTooltip","component","MantineMenu","Item","MenuItem","createPolymorphicComponent","overrideComponent","displayName"],"mappings":"AAAA;;;;+BAcaA;;;eAAAA;;;;;oBAd4D;qBAChD;qBAEmC;sBACP;AAIrD,IAAMC,0BAAYC,IAAAA,iBAAU,EAAmC,SAACC,OAAOC;yBACnE,qBAACC,cAAM,CAACC,eAAe;QAACC,WAAWC,UAAW,CAACC,IAAI;QAAEL,KAAKA;OAASD;;AAGvE,IAAMO,WAAWC,IAAAA,iCAA0B,EAA0BV;AAE9D,IAAMD,OAAOY,IAAAA,wBAAiB,EAACJ,UAAW,EAAE;IAC/CK,aAAa;IACbJ,MAAMC;AACV"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/menu/index.ts"],"sourcesContent":["export * from './Menu';\n"],"names":[],"mappings":"AAAA;;;;;oBAAc"}
|
|
@@ -15,9 +15,10 @@ var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
|
|
|
15
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
16
|
var _core = require("@mantine/core");
|
|
17
17
|
var _react = require("react");
|
|
18
|
+
var _button = require("../button");
|
|
19
|
+
var _header = require("../header");
|
|
18
20
|
var _stickyFooter = require("../sticky-footer");
|
|
19
21
|
var _modalWizardStep = require("./ModalWizardStep");
|
|
20
|
-
var _header = require("../header");
|
|
21
22
|
var useStyles = (0, _core.createStyles)(function() {
|
|
22
23
|
return {
|
|
23
24
|
modal: {
|
|
@@ -129,7 +130,7 @@ var ModalWizard = function(_param) {
|
|
|
129
130
|
pb: 0,
|
|
130
131
|
borderTop: true,
|
|
131
132
|
children: [
|
|
132
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(
|
|
133
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_button.Button, {
|
|
133
134
|
name: isFirstStep ? cancelButtonLabel : previousButtonLabel,
|
|
134
135
|
variant: "outline",
|
|
135
136
|
onClick: function() {
|
|
@@ -142,7 +143,7 @@ var ModalWizard = function(_param) {
|
|
|
142
143
|
},
|
|
143
144
|
children: isFirstStep ? cancelButtonLabel : previousButtonLabel
|
|
144
145
|
}),
|
|
145
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(
|
|
146
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_button.Button, {
|
|
146
147
|
disabled: !isValid,
|
|
147
148
|
onClick: function() {
|
|
148
149
|
if (isLastStep) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, Button, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useMemo, useState} from 'react';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep} from './ModalWizardStep';\nimport {Header} from '../header';\n\nconst useStyles = createStyles(() => ({\n modal: {\n display: 'flex',\n flexDirection: 'column',\n },\n body: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n },\n}));\n\ntype ModalWizardStylesNames = Selectors<typeof useStyles>;\n\ninterface ModalWizardProps\n extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' | 'styles'>,\n Omit<ModalProps, 'centered' | 'title'> {\n /**\n * The label of the cancel button\n *\n * @default \"Cancel\"\n */\n cancelButtonLabel?: string;\n\n /**\n * The label of the next button\n *\n * @default \"Next\"\n */\n nextButtonLabel?: string;\n\n /**\n * The label of the previous button\n *\n * @default \"Previous\"\n */\n previousButtonLabel?: string;\n\n /**\n * The label of the finish button\n *\n * @default \"Finish\"\n */\n finishButtonLabel?: string;\n\n /**\n * A callback function that is executed when the user clicks on the next button\n */\n onNext?: () => unknown;\n\n /**\n * A callback function that is executed when the user clicks on the previous button\n */\n onPrevious?: () => unknown;\n\n /**\n * A function that is executed when user completes all the steps.\n *\n * @param close A function that closes the modal when called.\n */\n onFinish?: () => unknown;\n\n /**\n * Determine if user interacted with any steps in the modal wizard\n */\n isDirty?: () => boolean;\n\n /**\n * A function to confirm close if the state is dirty before closing\n */\n handleDirtyState?: () => boolean;\n\n /**\n * Children to display in modal wizard\n * */\n children?: Array<ReturnType<typeof ModalWizardStep>>;\n}\n\ninterface ModalWizardType {\n (props: ModalWizardProps): ReactElement;\n\n Step: typeof ModalWizardStep;\n}\n\nexport const ModalWizard: ModalWizardType = ({\n cancelButtonLabel = 'Cancel',\n nextButtonLabel = 'Next',\n previousButtonLabel = 'Previous',\n finishButtonLabel = 'Finish',\n opened,\n onNext,\n onPrevious,\n onClose,\n onFinish,\n isDirty,\n handleDirtyState,\n classNames,\n className,\n styles,\n unstyled,\n children,\n ...modalProps\n}) => {\n const {\n classes: {modal, body},\n cx,\n } = useStyles(null, {\n name: 'ModalWizard',\n classNames,\n styles,\n unstyled,\n });\n\n const [currentStepIndex, setCurrentStepIndex] = useState(0);\n const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);\n\n const numberOfSteps = modalSteps.length;\n const numberOfStepsCountAsProgress = modalSteps.filter((step) => step.props.countsAsProgress).length;\n const isFirstStep = currentStepIndex === 0;\n const isLastStep = currentStepIndex === numberOfSteps - 1;\n const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];\n\n const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};\n const isModalDirty = isDirty && isDirty();\n\n const closeModalWizard = () => {\n if (isModalDirty && handleDirtyState) {\n handleDirtyState() && onClose?.();\n } else {\n onClose?.();\n }\n };\n\n const getProgress = (currStepIndex: number) => {\n const validSteps = modalSteps.filter(\n (step, index) => step.props.countsAsProgress && index <= currStepIndex\n ).length;\n return (validSteps / numberOfStepsCountAsProgress) * 100;\n };\n\n const getProgressMemo = useMemo(() => getProgress(currentStepIndex), [currentStepIndex]);\n return (\n <Modal\n opened={opened}\n classNames={{modal: cx(modal, classNames?.modal), body: cx(body, classNames?.body)}}\n centered\n title={\n <Header\n docLink={currentStep.props.docLink}\n docLinkTooltipLabel={currentStep.props.docLinkTooltipLabel}\n description={\n typeof currentStep.props.description === 'function'\n ? currentStep.props.description(currentStepIndex + 1, numberOfSteps)\n : currentStep.props.description\n }\n py={0}\n px={0}\n >\n {typeof currentStep.props.title === 'function'\n ? currentStep.props.title(currentStepIndex + 1, numberOfSteps)\n : currentStep.props.title}\n </Header>\n }\n onClose={closeModalWizard}\n {...modalProps}\n >\n {currentStep.props.showProgressBar && <Progress color=\"teal\" size=\"lg\" value={getProgressMemo} />}\n {currentStep}\n <Box\n sx={(theme) => ({\n marginTop: 'auto',\n })}\n >\n <StickyFooter px={0} pt=\"sm\" pb={0} borderTop>\n <Button\n name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n variant=\"outline\"\n onClick={() => {\n if (isFirstStep) {\n closeModalWizard();\n } else {\n onPrevious?.();\n setCurrentStepIndex(currentStepIndex - 1);\n }\n }}\n >\n {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n </Button>\n\n <Button\n disabled={!isValid}\n onClick={() => {\n if (isLastStep) {\n onFinish ? onFinish() : onClose();\n } else {\n onNext?.();\n setCurrentStepIndex(currentStepIndex + 1);\n }\n }}\n >\n {isLastStep ? finishButtonLabel : nextButtonLabel}\n </Button>\n </StickyFooter>\n </Box>\n </Modal>\n );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["ModalWizard","useStyles","createStyles","modal","display","flexDirection","body","flex","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","className","styles","unstyled","children","modalProps","currentStep","name","classes","cx","useState","currentStepIndex","setCurrentStepIndex","modalSteps","Children","toArray","filter","child","type","ModalWizardStep","numberOfSteps","length","numberOfStepsCountAsProgress","step","props","countsAsProgress","isFirstStep","isLastStep","index","isValid","validateStep","isModalDirty","closeModalWizard","getProgress","currStepIndex","validSteps","getProgressMemo","useMemo","Modal","centered","title","Header","docLink","docLinkTooltipLabel","description","py","px","showProgressBar","Progress","color","size","value","Box","sx","theme","marginTop","StickyFooter","pt","pb","borderTop","Button","variant","onClick","disabled","Step"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useMemo, useState} from 'react';\n\nimport {Button} from '../button';\nimport {Header} from '../header';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep} from './ModalWizardStep';\n\nconst useStyles = createStyles(() => ({\n modal: {\n display: 'flex',\n flexDirection: 'column',\n },\n body: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n },\n}));\n\ntype ModalWizardStylesNames = Selectors<typeof useStyles>;\n\ninterface ModalWizardProps\n extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' | 'styles'>,\n Omit<ModalProps, 'centered' | 'title'> {\n /**\n * The label of the cancel button\n *\n * @default \"Cancel\"\n */\n cancelButtonLabel?: string;\n\n /**\n * The label of the next button\n *\n * @default \"Next\"\n */\n nextButtonLabel?: string;\n\n /**\n * The label of the previous button\n *\n * @default \"Previous\"\n */\n previousButtonLabel?: string;\n\n /**\n * The label of the finish button\n *\n * @default \"Finish\"\n */\n finishButtonLabel?: string;\n\n /**\n * A callback function that is executed when the user clicks on the next button\n */\n onNext?: () => unknown;\n\n /**\n * A callback function that is executed when the user clicks on the previous button\n */\n onPrevious?: () => unknown;\n\n /**\n * A function that is executed when user completes all the steps.\n *\n * @param close A function that closes the modal when called.\n */\n onFinish?: () => unknown;\n\n /**\n * Determine if user interacted with any steps in the modal wizard\n */\n isDirty?: () => boolean;\n\n /**\n * A function to confirm close if the state is dirty before closing\n */\n handleDirtyState?: () => boolean;\n\n /**\n * Children to display in modal wizard\n * */\n children?: Array<ReturnType<typeof ModalWizardStep>>;\n}\n\ninterface ModalWizardType {\n (props: ModalWizardProps): ReactElement;\n\n Step: typeof ModalWizardStep;\n}\n\nexport const ModalWizard: ModalWizardType = ({\n cancelButtonLabel = 'Cancel',\n nextButtonLabel = 'Next',\n previousButtonLabel = 'Previous',\n finishButtonLabel = 'Finish',\n opened,\n onNext,\n onPrevious,\n onClose,\n onFinish,\n isDirty,\n handleDirtyState,\n classNames,\n className,\n styles,\n unstyled,\n children,\n ...modalProps\n}) => {\n const {\n classes: {modal, body},\n cx,\n } = useStyles(null, {\n name: 'ModalWizard',\n classNames,\n styles,\n unstyled,\n });\n\n const [currentStepIndex, setCurrentStepIndex] = useState(0);\n const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);\n\n const numberOfSteps = modalSteps.length;\n const numberOfStepsCountAsProgress = modalSteps.filter((step) => step.props.countsAsProgress).length;\n const isFirstStep = currentStepIndex === 0;\n const isLastStep = currentStepIndex === numberOfSteps - 1;\n const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];\n\n const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};\n const isModalDirty = isDirty && isDirty();\n\n const closeModalWizard = () => {\n if (isModalDirty && handleDirtyState) {\n handleDirtyState() && onClose?.();\n } else {\n onClose?.();\n }\n };\n\n const getProgress = (currStepIndex: number) => {\n const validSteps = modalSteps.filter(\n (step, index) => step.props.countsAsProgress && index <= currStepIndex\n ).length;\n return (validSteps / numberOfStepsCountAsProgress) * 100;\n };\n\n const getProgressMemo = useMemo(() => getProgress(currentStepIndex), [currentStepIndex]);\n return (\n <Modal\n opened={opened}\n classNames={{modal: cx(modal, classNames?.modal), body: cx(body, classNames?.body)}}\n centered\n title={\n <Header\n docLink={currentStep.props.docLink}\n docLinkTooltipLabel={currentStep.props.docLinkTooltipLabel}\n description={\n typeof currentStep.props.description === 'function'\n ? currentStep.props.description(currentStepIndex + 1, numberOfSteps)\n : currentStep.props.description\n }\n py={0}\n px={0}\n >\n {typeof currentStep.props.title === 'function'\n ? currentStep.props.title(currentStepIndex + 1, numberOfSteps)\n : currentStep.props.title}\n </Header>\n }\n onClose={closeModalWizard}\n {...modalProps}\n >\n {currentStep.props.showProgressBar && <Progress color=\"teal\" size=\"lg\" value={getProgressMemo} />}\n {currentStep}\n <Box\n sx={(theme) => ({\n marginTop: 'auto',\n })}\n >\n <StickyFooter px={0} pt=\"sm\" pb={0} borderTop>\n <Button\n name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n variant=\"outline\"\n onClick={() => {\n if (isFirstStep) {\n closeModalWizard();\n } else {\n onPrevious?.();\n setCurrentStepIndex(currentStepIndex - 1);\n }\n }}\n >\n {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n </Button>\n\n <Button\n disabled={!isValid}\n onClick={() => {\n if (isLastStep) {\n onFinish ? onFinish() : onClose();\n } else {\n onNext?.();\n setCurrentStepIndex(currentStepIndex + 1);\n }\n }}\n >\n {isLastStep ? finishButtonLabel : nextButtonLabel}\n </Button>\n </StickyFooter>\n </Box>\n </Modal>\n );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["ModalWizard","useStyles","createStyles","modal","display","flexDirection","body","flex","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","className","styles","unstyled","children","modalProps","currentStep","name","classes","cx","useState","currentStepIndex","setCurrentStepIndex","modalSteps","Children","toArray","filter","child","type","ModalWizardStep","numberOfSteps","length","numberOfStepsCountAsProgress","step","props","countsAsProgress","isFirstStep","isLastStep","index","isValid","validateStep","isModalDirty","closeModalWizard","getProgress","currStepIndex","validSteps","getProgressMemo","useMemo","Modal","centered","title","Header","docLink","docLinkTooltipLabel","description","py","px","showProgressBar","Progress","color","size","value","Box","sx","theme","marginTop","StickyFooter","pt","pb","borderTop","Button","variant","onClick","disabled","Step"],"mappings":"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"}
|
|
@@ -15,6 +15,7 @@ var _plasmaReactIcons = require("@coveord/plasma-react-icons");
|
|
|
15
15
|
var _core = require("@mantine/core");
|
|
16
16
|
var _dayjs = /*#__PURE__*/ _interopRequireDefault(require("dayjs"));
|
|
17
17
|
var _react = require("react");
|
|
18
|
+
var _button = require("../button");
|
|
18
19
|
var _dateRangePicker = require("../date-range-picker");
|
|
19
20
|
var _useTable = require("./useTable");
|
|
20
21
|
var TableDateRangePicker = function(param) {
|
|
@@ -40,7 +41,7 @@ var TableDateRangePicker = function(param) {
|
|
|
40
41
|
onChange: setOpened,
|
|
41
42
|
children: [
|
|
42
43
|
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Popover.Target, {
|
|
43
|
-
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(
|
|
44
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_button.Button, {
|
|
44
45
|
variant: "outline",
|
|
45
46
|
color: "gray",
|
|
46
47
|
onClick: function() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Popover
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Popover} from '@mantine/core';\nimport {DateRangePickerValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\n\nimport {Button} from '../button';\nimport {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from '../date-range-picker';\nimport {DateRangePickerPreset} from '../date-range-picker/DateRangePickerPresetSelect';\nimport {useTable} from './useTable';\n\ninterface TableDateRangePickerProps\n extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n /**\n * An object containing date presets.\n * If empty the preset dropdown won't be shown\n *\n * @example\n * {\n * january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n * february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n * }\n * @default {}\n */\n presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({\n presets = {},\n rangeCalendarProps,\n}) => {\n const [opened, setOpened] = useState(false);\n const {form} = useTable();\n\n const onApply = (dates: DateRangePickerValue) => {\n form.setFieldValue('dateRange', dates);\n setOpened(false);\n };\n const onCancel = () => {\n setOpened(false);\n };\n\n const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n\n return (\n <>\n {formatedRange}\n <Popover opened={opened} onChange={setOpened}>\n <Popover.Target>\n <Button variant=\"outline\" color=\"gray\" onClick={() => setOpened(true)} px=\"xs\">\n <CalendarSize24Px width={24} height={24} />\n </Button>\n </Popover.Target>\n <Popover.Dropdown p={0}>\n <DateRangePickerInlineCalendar\n initialRange={form.values.dateRange}\n onApply={onApply}\n onCancel={onCancel}\n presets={presets}\n rangeCalendarProps={rangeCalendarProps}\n />\n </Popover.Dropdown>\n </Popover>\n </>\n );\n};\n"],"names":["TableDateRangePicker","presets","rangeCalendarProps","useState","opened","setOpened","form","useTable","onApply","dates","setFieldValue","onCancel","formatDate","date","dayjs","format","formatedRange","values","dateRange","Popover","onChange","Target","Button","variant","color","onClick","px","CalendarSize24Px","width","height","Dropdown","p","DateRangePickerInlineCalendar","initialRange"],"mappings":"AAAA;;;;+BA2BaA;;;eAAAA;;;;;;gCA3BkB;oBACT;0DAEJ;qBACwB;sBAErB;+BAC2D;wBAEzD;AAkBhB,IAAMA,uBAAqE,gBAG5E;+BAFFC,SAAAA,sCAAU,CAAC,oBACXC,2BAAAA;IAEA,IAA4BC,2BAAAA,IAAAA,eAAQ,EAAC,KAAK,OAAnCC,SAAqBD,cAAbE,YAAaF;IAC5B,IAAM,AAACG,OAAQC,IAAAA,kBAAQ,IAAhBD;IAEP,IAAME,UAAU,SAACC,OAAgC;QAC7CH,KAAKI,aAAa,CAAC,aAAaD;QAChCJ,UAAU,KAAK;IACnB;IACA,IAAMM,WAAW,WAAM;QACnBN,UAAU,KAAK;IACnB;IAEA,IAAMO,aAAa,SAACC;eAAeC,IAAAA,cAAK,EAACD,MAAME,MAAM,CAAC;;IACtD,IAAMC,gBAAgB,AAAC,GAA4CJ,OAA1CA,WAAWN,KAAKW,MAAM,CAACC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCN,WAAWN,KAAKW,MAAM,CAACC,SAAS,CAAC,EAAE;IAEtG,qBACI;;YACKF;0BACD,sBAACG,aAAO;gBAACf,QAAQA;gBAAQgB,UAAUf;;kCAC/B,qBAACc,aAAO,CAACE,MAAM;kCACX,cAAA,qBAACC,cAAM;4BAACC,SAAQ;4BAAUC,OAAM;4BAAOC,SAAS;uCAAMpB,UAAU,IAAI;;4BAAGqB,IAAG;sCACtE,cAAA,qBAACC,kCAAgB;gCAACC,OAAO;gCAAIC,QAAQ;;;;kCAG7C,qBAACV,aAAO,CAACW,QAAQ;wBAACC,GAAG;kCACjB,cAAA,qBAACC,8CAA6B;4BAC1BC,cAAc3B,KAAKW,MAAM,CAACC,SAAS;4BACnCV,SAASA;4BACTG,UAAUA;4BACVV,SAASA;4BACTC,oBAAoBA;;;;;;;AAM5C"}
|
|
@@ -14,6 +14,7 @@ var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_propert
|
|
|
14
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
15
|
var _plasmaReactIcons = require("@coveord/plasma-react-icons");
|
|
16
16
|
var _core = require("@mantine/core");
|
|
17
|
+
var _button = require("../button");
|
|
17
18
|
var _useTable = require("./useTable");
|
|
18
19
|
var useStyles = (0, _core.createStyles)(function(theme) {
|
|
19
20
|
return {
|
|
@@ -47,7 +48,7 @@ var TableHeader = function(_param) {
|
|
|
47
48
|
children: [
|
|
48
49
|
selectedRows.length > 0 ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Tooltip, {
|
|
49
50
|
label: "Unselect all",
|
|
50
|
-
children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(
|
|
51
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_button.Button, {
|
|
51
52
|
onClick: clearSelection,
|
|
52
53
|
ml: "lg",
|
|
53
54
|
variant: "subtle",
|