@coveord/plasma-mantine 52.0.0 → 52.2.0
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 +26 -26
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/__tests__/Utils.js +9 -9
- package/dist/cjs/__tests__/Utils.js.map +1 -1
- package/dist/cjs/__tests__/VitestSetup.js +2 -2
- package/dist/cjs/__tests__/VitestSetup.js.map +1 -1
- package/dist/cjs/components/blank-slate/BlankSlate.js +3 -3
- package/dist/cjs/components/blank-slate/index.js +2 -2
- package/dist/cjs/components/blank-slate/index.js.map +1 -1
- package/dist/cjs/components/button/Button.js +15 -15
- package/dist/cjs/components/button/Button.js.map +1 -1
- package/dist/cjs/components/button/ButtonWithDisabledTooltip.js +8 -8
- package/dist/cjs/components/button/index.js +2 -2
- package/dist/cjs/components/button/index.js.map +1 -1
- package/dist/cjs/components/code-editor/CodeEditor.js +30 -30
- package/dist/cjs/components/code-editor/CodeEditor.js.map +1 -1
- package/dist/cjs/components/code-editor/index.js +2 -2
- package/dist/cjs/components/code-editor/index.js.map +1 -1
- package/dist/cjs/components/code-editor/languages/xml.js +4 -4
- package/dist/cjs/components/code-editor/languages/xml.js.map +1 -1
- package/dist/cjs/components/collection/Collection.js +25 -25
- package/dist/cjs/components/collection/Collection.js.map +1 -1
- package/dist/cjs/components/collection/CollectionItem.js +29 -29
- package/dist/cjs/components/collection/CollectionItem.js.map +1 -1
- package/dist/cjs/components/collection/index.js +2 -2
- package/dist/cjs/components/collection/index.js.map +1 -1
- package/dist/cjs/components/copyToClipboard/CopyToClipboard.js +26 -23
- package/dist/cjs/components/copyToClipboard/CopyToClipboard.js.map +1 -1
- package/dist/cjs/components/copyToClipboard/index.js +2 -2
- package/dist/cjs/components/copyToClipboard/index.js.map +1 -1
- package/dist/cjs/components/date-range-picker/DateRangePickerInlineCalendar.js +16 -16
- package/dist/cjs/components/date-range-picker/DateRangePickerInlineCalendar.js.map +1 -1
- package/dist/cjs/components/date-range-picker/DateRangePickerPopoverCalendar.js +16 -16
- package/dist/cjs/components/date-range-picker/DateRangePickerPopoverCalendar.js.map +1 -1
- package/dist/cjs/components/date-range-picker/DateRangePickerPresetSelect.js +10 -10
- package/dist/cjs/components/date-range-picker/DateRangePickerPresetSelect.js.map +1 -1
- package/dist/cjs/components/date-range-picker/EditableDateRangePicker.js +9 -9
- package/dist/cjs/components/date-range-picker/EditableDateRangePicker.js.map +1 -1
- package/dist/cjs/components/date-range-picker/index.js +4 -4
- package/dist/cjs/components/date-range-picker/index.js.map +1 -1
- package/dist/cjs/components/header/Header.js +23 -23
- package/dist/cjs/components/header/Header.js.map +1 -1
- package/dist/cjs/components/header/__tests__/__snapshots__/Header.spec.tsx.snap +4 -8
- package/dist/cjs/components/header/index.js +2 -2
- package/dist/cjs/components/header/index.js.map +1 -1
- package/dist/cjs/components/index.js +14 -14
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirm.js +12 -12
- package/dist/cjs/components/inline-confirm/InlineConfirm.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmButton.js +5 -5
- package/dist/cjs/components/inline-confirm/InlineConfirmMenuItem.js +5 -5
- package/dist/cjs/components/inline-confirm/InlineConfirmPrompt.js +4 -4
- package/dist/cjs/components/inline-confirm/index.js +4 -4
- package/dist/cjs/components/inline-confirm/index.js.map +1 -1
- package/dist/cjs/components/inline-confirm/useInlineConfirm.js +2 -2
- package/dist/cjs/components/menu/Menu.js +7 -7
- package/dist/cjs/components/menu/index.js +2 -2
- package/dist/cjs/components/menu/index.js.map +1 -1
- package/dist/cjs/components/modal-wizard/ModalWizard.js +22 -22
- package/dist/cjs/components/modal-wizard/ModalWizard.js.map +1 -1
- package/dist/cjs/components/modal-wizard/ModalWizardStep.js +2 -2
- package/dist/cjs/components/modal-wizard/index.js +2 -2
- package/dist/cjs/components/modal-wizard/index.js.map +1 -1
- package/dist/cjs/components/prompt/Prompt.js +18 -18
- package/dist/cjs/components/prompt/PromptFooter.js +7 -7
- package/dist/cjs/components/prompt/PromptFooter.js.map +1 -1
- package/dist/cjs/components/prompt/index.js +2 -2
- package/dist/cjs/components/prompt/index.js.map +1 -1
- package/dist/cjs/components/sticky-footer/StickyFooter.js +8 -8
- package/dist/cjs/components/sticky-footer/index.js +2 -2
- package/dist/cjs/components/sticky-footer/index.js.map +1 -1
- package/dist/cjs/components/table/Table.js +96 -86
- package/dist/cjs/components/table/Table.js.map +1 -1
- package/dist/cjs/components/table/Table.styles.js +30 -7
- package/dist/cjs/components/table/Table.styles.js.map +1 -1
- package/dist/cjs/components/table/TableActions.js +15 -6
- package/dist/cjs/components/table/TableActions.js.map +1 -1
- package/dist/cjs/components/table/TableCollapsibleColumn.js +10 -10
- package/dist/cjs/components/table/TableCollapsibleColumn.js.map +1 -1
- package/dist/cjs/components/table/TableConsumer.js +2 -2
- package/dist/cjs/components/table/TableDateRangePicker.js +51 -41
- package/dist/cjs/components/table/TableDateRangePicker.js.map +1 -1
- package/dist/cjs/components/table/TableFilter.js +31 -25
- package/dist/cjs/components/table/TableFilter.js.map +1 -1
- package/dist/cjs/components/table/TableFooter.js +6 -6
- package/dist/cjs/components/table/TableHeader.js +45 -45
- package/dist/cjs/components/table/TableHeader.js.map +1 -1
- package/dist/cjs/components/table/TablePagination.js +8 -8
- package/dist/cjs/components/table/TablePagination.js.map +1 -1
- package/dist/cjs/components/table/TablePerPage.js +9 -9
- package/dist/cjs/components/table/TablePerPage.js.map +1 -1
- package/dist/cjs/components/table/TablePredicate.js +31 -25
- package/dist/cjs/components/table/TablePredicate.js.map +1 -1
- package/dist/cjs/components/table/TableSelectableColumn.js +4 -4
- package/dist/cjs/components/table/Th.js +17 -17
- package/dist/cjs/components/table/index.js +4 -4
- package/dist/cjs/components/table/index.js.map +1 -1
- package/dist/cjs/components/table/useRowSelection.js +9 -9
- package/dist/cjs/components/table/useRowSelection.js.map +1 -1
- package/dist/cjs/form/FormProvider.js +4 -4
- package/dist/cjs/form/FormProvider.js.map +1 -1
- package/dist/cjs/form/index.js +3 -3
- package/dist/cjs/form/index.js.map +1 -1
- package/dist/cjs/form/useForm.js +4 -4
- package/dist/cjs/form/useForm.js.map +1 -1
- package/dist/cjs/hooks/index.js +3 -3
- package/dist/cjs/hooks/index.js.map +1 -1
- package/dist/cjs/hooks/useControlledList.js +5 -5
- package/dist/cjs/hooks/useControlledList.js.map +1 -1
- package/dist/cjs/hooks/useParentHeight.js +2 -2
- package/dist/cjs/hooks/useParentHeight.js.map +1 -1
- package/dist/cjs/index.js +9 -9
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/theme/PlasmaColors.js +30 -30
- package/dist/cjs/theme/Plasmantine.js +4 -4
- package/dist/cjs/theme/Theme.js +15 -14
- package/dist/cjs/theme/Theme.js.map +1 -1
- package/dist/cjs/theme/index.js +2 -2
- package/dist/cjs/theme/index.js.map +1 -1
- package/dist/cjs/utils/index.js +3 -3
- package/dist/cjs/utils/index.js.map +1 -1
- package/dist/cjs/utils/overrideComponent.js +2 -2
- package/dist/cjs/utils/overrideComponent.js.map +1 -1
- package/dist/definitions/components/copyToClipboard/CopyToClipboard.d.ts +5 -1
- package/dist/definitions/components/copyToClipboard/CopyToClipboard.d.ts.map +1 -1
- package/dist/definitions/components/header/Header.d.ts.map +1 -1
- package/dist/definitions/components/table/Table.d.ts.map +1 -1
- package/dist/definitions/components/table/Table.styles.d.ts +7 -1
- package/dist/definitions/components/table/Table.styles.d.ts.map +1 -1
- package/dist/definitions/components/table/TableActions.d.ts.map +1 -1
- package/dist/definitions/components/table/TableDateRangePicker.d.ts.map +1 -1
- package/dist/definitions/components/table/TableFilter.d.ts.map +1 -1
- package/dist/definitions/components/table/TableHeader.d.ts +1 -0
- package/dist/definitions/components/table/TableHeader.d.ts.map +1 -1
- package/dist/definitions/components/table/TablePredicate.d.ts.map +1 -1
- package/dist/definitions/theme/Theme.d.ts.map +1 -1
- package/dist/esm/__tests__/Utils.js +1 -1
- package/dist/esm/components/button/Button.js +6 -6
- package/dist/esm/components/button/ButtonWithDisabledTooltip.js +3 -3
- package/dist/esm/components/code-editor/CodeEditor.js +6 -6
- package/dist/esm/components/code-editor/languages/xml.js +2 -2
- package/dist/esm/components/collection/Collection.js +3 -3
- package/dist/esm/components/collection/CollectionItem.js +4 -4
- package/dist/esm/components/copyToClipboard/CopyToClipboard.js +24 -20
- package/dist/esm/components/copyToClipboard/CopyToClipboard.js.map +1 -1
- package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js +2 -2
- package/dist/esm/components/date-range-picker/DateRangePickerPopoverCalendar.js +2 -2
- package/dist/esm/components/date-range-picker/DateRangePickerPresetSelect.js +3 -3
- package/dist/esm/components/date-range-picker/EditableDateRangePicker.js +1 -1
- package/dist/esm/components/header/Header.js +11 -11
- package/dist/esm/components/header/Header.js.map +1 -1
- package/dist/esm/components/header/__tests__/__snapshots__/Header.spec.tsx.snap +4 -8
- package/dist/esm/components/inline-confirm/InlineConfirm.js +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmButton.js +2 -2
- package/dist/esm/components/inline-confirm/InlineConfirmMenuItem.js +2 -2
- package/dist/esm/components/menu/Menu.js +2 -2
- package/dist/esm/components/modal-wizard/ModalWizard.js +4 -4
- package/dist/esm/components/prompt/Prompt.js +3 -3
- package/dist/esm/components/prompt/PromptFooter.js +3 -3
- package/dist/esm/components/sticky-footer/StickyFooter.js +3 -3
- package/dist/esm/components/table/Table.js +27 -17
- package/dist/esm/components/table/Table.js.map +1 -1
- package/dist/esm/components/table/Table.styles.js +19 -4
- package/dist/esm/components/table/Table.styles.js.map +1 -1
- package/dist/esm/components/table/TableActions.js +13 -4
- package/dist/esm/components/table/TableActions.js.map +1 -1
- package/dist/esm/components/table/TableCollapsibleColumn.js +2 -2
- package/dist/esm/components/table/TableDateRangePicker.js +45 -35
- package/dist/esm/components/table/TableDateRangePicker.js.map +1 -1
- package/dist/esm/components/table/TableFilter.js +26 -20
- package/dist/esm/components/table/TableFilter.js.map +1 -1
- package/dist/esm/components/table/TableFooter.js +3 -3
- package/dist/esm/components/table/TableHeader.js +41 -41
- package/dist/esm/components/table/TableHeader.js.map +1 -1
- package/dist/esm/components/table/TablePagination.js +2 -2
- package/dist/esm/components/table/TablePerPage.js +2 -2
- package/dist/esm/components/table/TablePredicate.js +28 -22
- package/dist/esm/components/table/TablePredicate.js.map +1 -1
- package/dist/esm/components/table/useRowSelection.js +2 -2
- package/dist/esm/form/useForm.js +2 -2
- package/dist/esm/hooks/useControlledList.js +2 -2
- package/dist/esm/hooks/useParentHeight.js +1 -1
- package/dist/esm/theme/Theme.js +4 -3
- package/dist/esm/theme/Theme.js.map +1 -1
- package/dist/esm/utils/overrideComponent.js +1 -1
- package/package.json +9 -9
- package/src/components/copyToClipboard/CopyToClipboard.tsx +20 -12
- package/src/components/copyToClipboard/__tests__/CopyToClipboard.spec.tsx +12 -2
- package/src/components/header/Header.tsx +5 -7
- package/src/components/header/__tests__/__snapshots__/Header.spec.tsx.snap +4 -8
- package/src/components/table/Table.styles.ts +21 -5
- package/src/components/table/Table.tsx +10 -4
- package/src/components/table/TableActions.tsx +9 -6
- package/src/components/table/TableDateRangePicker.tsx +23 -20
- package/src/components/table/TableFilter.tsx +21 -18
- package/src/components/table/TableHeader.tsx +35 -23
- package/src/components/table/TablePredicate.tsx +15 -12
- package/src/theme/Theme.tsx +1 -0
|
@@ -8,19 +8,19 @@ Object.defineProperty(exports, "Collection", {
|
|
|
8
8
|
return Collection;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
11
|
+
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
|
|
12
|
+
var _object_spread = require("@swc/helpers/_/_object_spread");
|
|
13
|
+
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
|
|
14
|
+
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
|
|
15
|
+
var _jsxruntime = require("react/jsx-runtime");
|
|
16
|
+
var _plasmareacticons = require("@coveord/plasma-react-icons");
|
|
17
17
|
var _core = require("@mantine/core");
|
|
18
18
|
var _hooks = require("@mantine/hooks");
|
|
19
19
|
var _react = require("react");
|
|
20
|
-
var
|
|
20
|
+
var _reactbeautifuldnd = require("react-beautiful-dnd");
|
|
21
21
|
var _button = require("../button");
|
|
22
|
-
var
|
|
23
|
-
var
|
|
22
|
+
var _Collectionstyles = /*#__PURE__*/ _interop_require_default._(require("./Collection.styles"));
|
|
23
|
+
var _CollectionItem = require("./CollectionItem");
|
|
24
24
|
var defaultProps = {
|
|
25
25
|
draggable: false,
|
|
26
26
|
addLabel: "Add item",
|
|
@@ -31,7 +31,7 @@ var defaultProps = {
|
|
|
31
31
|
};
|
|
32
32
|
var Collection = function(props) {
|
|
33
33
|
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, getItemId = _useComponentDefaultProps.getItemId, // Style props
|
|
34
|
-
classNames = _useComponentDefaultProps.classNames, className = _useComponentDefaultProps.className, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, others =
|
|
34
|
+
classNames = _useComponentDefaultProps.classNames, className = _useComponentDefaultProps.className, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, others = _object_without_properties._(_useComponentDefaultProps, [
|
|
35
35
|
"value",
|
|
36
36
|
"onChange",
|
|
37
37
|
"onRemoveItem",
|
|
@@ -59,7 +59,7 @@ var Collection = function(props) {
|
|
|
59
59
|
"styles",
|
|
60
60
|
"unstyled"
|
|
61
61
|
]);
|
|
62
|
-
var _useStyles = (0,
|
|
62
|
+
var _useStyles = (0, _Collectionstyles.default)(null, {
|
|
63
63
|
classNames: classNames,
|
|
64
64
|
name: "Collection",
|
|
65
65
|
styles: styles,
|
|
@@ -75,18 +75,18 @@ var Collection = function(props) {
|
|
|
75
75
|
JSON.stringify(value)
|
|
76
76
|
]);
|
|
77
77
|
var isRequired = typeof withAsterisk === "boolean" ? withAsterisk : required;
|
|
78
|
-
var _label = label ? /*#__PURE__*/ (0,
|
|
78
|
+
var _label = label ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Input.Label, _object_spread_props._(_object_spread._({
|
|
79
79
|
required: isRequired
|
|
80
80
|
}, labelProps), {
|
|
81
81
|
children: label
|
|
82
82
|
})) : null;
|
|
83
|
-
var _description = description ? /*#__PURE__*/ (0,
|
|
83
|
+
var _description = description ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Input.Description, _object_spread_props._(_object_spread._({}, descriptionProps), {
|
|
84
84
|
children: description
|
|
85
85
|
})) : null;
|
|
86
|
-
var _error = error ? /*#__PURE__*/ (0,
|
|
86
|
+
var _error = error ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Input.Error, _object_spread_props._(_object_spread._({}, errorProps), {
|
|
87
87
|
children: error
|
|
88
88
|
})) : null;
|
|
89
|
-
var _header = _label || _description ? /*#__PURE__*/ (0,
|
|
89
|
+
var _header = _label || _description ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
90
90
|
children: [
|
|
91
91
|
_label,
|
|
92
92
|
_description
|
|
@@ -94,7 +94,7 @@ var Collection = function(props) {
|
|
|
94
94
|
}) : null;
|
|
95
95
|
var _getItemId;
|
|
96
96
|
var items = value.map(function(item, index) {
|
|
97
|
-
/*#__PURE__*/ return (0,
|
|
97
|
+
/*#__PURE__*/ return (0, _jsxruntime.jsx)(_CollectionItem.CollectionItem, {
|
|
98
98
|
disabled: disabled,
|
|
99
99
|
draggable: draggable,
|
|
100
100
|
index: index,
|
|
@@ -109,14 +109,14 @@ var Collection = function(props) {
|
|
|
109
109
|
var _allowAdd;
|
|
110
110
|
var addAllowed = (_allowAdd = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(value)) !== null && _allowAdd !== void 0 ? _allowAdd : true;
|
|
111
111
|
var _value_length;
|
|
112
|
-
var _addButton = disabled ? null : /*#__PURE__*/ (0,
|
|
113
|
-
children: /*#__PURE__*/ (0,
|
|
112
|
+
var _addButton = disabled ? null : /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Group, {
|
|
113
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, {
|
|
114
114
|
label: addDisabledTooltip,
|
|
115
115
|
disabled: addAllowed,
|
|
116
|
-
children: /*#__PURE__*/ (0,
|
|
117
|
-
children: /*#__PURE__*/ (0,
|
|
116
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
|
|
117
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button, {
|
|
118
118
|
variant: "subtle",
|
|
119
|
-
leftIcon: /*#__PURE__*/ (0,
|
|
119
|
+
leftIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.AddSize16Px, {
|
|
120
120
|
height: 16
|
|
121
121
|
}),
|
|
122
122
|
onClick: function() {
|
|
@@ -128,7 +128,7 @@ var Collection = function(props) {
|
|
|
128
128
|
})
|
|
129
129
|
})
|
|
130
130
|
});
|
|
131
|
-
return /*#__PURE__*/ (0,
|
|
131
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactbeautifuldnd.DragDropContext, {
|
|
132
132
|
onDragEnd: function(param) {
|
|
133
133
|
var destination = param.destination, source = param.source;
|
|
134
134
|
return onReorderItem({
|
|
@@ -136,17 +136,17 @@ var Collection = function(props) {
|
|
|
136
136
|
to: (destination === null || destination === void 0 ? void 0 : destination.index) || 0
|
|
137
137
|
});
|
|
138
138
|
},
|
|
139
|
-
children: /*#__PURE__*/ (0,
|
|
139
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactbeautifuldnd.Droppable, {
|
|
140
140
|
direction: "vertical",
|
|
141
141
|
droppableId: collectionID,
|
|
142
142
|
children: function(provided) {
|
|
143
|
-
return /*#__PURE__*/ (0,
|
|
143
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Box, _object_spread_props._(_object_spread._(_object_spread_props._(_object_spread._({}, provided.droppableProps), {
|
|
144
144
|
ref: provided.innerRef,
|
|
145
145
|
className: cx(classes.root, className)
|
|
146
146
|
}), others), {
|
|
147
147
|
children: [
|
|
148
148
|
_header,
|
|
149
|
-
/*#__PURE__*/ (0,
|
|
149
|
+
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Stack, {
|
|
150
150
|
spacing: spacing,
|
|
151
151
|
children: [
|
|
152
152
|
items,
|
|
@@ -1 +1 @@
|
|
|
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} from '@mantine/hooks';\nimport {ReactNode, useId} 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 * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n *\n * This method is required when using this component with ReactHookForm.\n *\n * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.\n *\n * @param originalItem The original item\n */\n getItemId?: (originalItem: T) => string;\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 getItemId,\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();\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={(getItemId?.(item) ?? index) as string}\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","getItemId","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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"}
|
|
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} from '@mantine/hooks';\nimport {ReactNode, useId} 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 * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n *\n * This method is required when using this component with ReactHookForm.\n *\n * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.\n *\n * @param originalItem The original item\n */\n getItemId?: (originalItem: T) => string;\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 getItemId,\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();\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={(getItemId?.(item) ?? index) as string}\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","getItemId","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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"}
|
|
@@ -8,32 +8,32 @@ Object.defineProperty(exports, "CollectionItem", {
|
|
|
8
8
|
return CollectionItem;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
11
|
+
var _define_property = require("@swc/helpers/_/_define_property");
|
|
12
|
+
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
|
|
13
|
+
var _object_spread = require("@swc/helpers/_/_object_spread");
|
|
14
|
+
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
|
|
15
|
+
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
|
|
16
|
+
var _jsxruntime = require("react/jsx-runtime");
|
|
17
|
+
var _plasmareacticons = require("@coveord/plasma-react-icons");
|
|
18
18
|
var _core = require("@mantine/core");
|
|
19
|
-
var
|
|
20
|
-
var
|
|
19
|
+
var _reactbeautifuldnd = require("react-beautiful-dnd");
|
|
20
|
+
var _Collectionstyles = /*#__PURE__*/ _interop_require_default._(require("./Collection.styles"));
|
|
21
21
|
var RemoveButton = function(param) {
|
|
22
22
|
var onClick = param.onClick;
|
|
23
|
-
return /*#__PURE__*/ (0,
|
|
23
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ActionIcon, {
|
|
24
24
|
sx: {
|
|
25
25
|
alignSelf: "center"
|
|
26
26
|
},
|
|
27
27
|
variant: "subtle",
|
|
28
28
|
onClick: onClick,
|
|
29
29
|
color: "action",
|
|
30
|
-
children: /*#__PURE__*/ (0,
|
|
30
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.RemoveSize16Px, {
|
|
31
31
|
height: 16
|
|
32
32
|
})
|
|
33
33
|
});
|
|
34
34
|
};
|
|
35
35
|
var RemoveButtonPlaceholder = function() {
|
|
36
|
-
return /*#__PURE__*/ (0,
|
|
36
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
|
|
37
37
|
style: {
|
|
38
38
|
width: 28
|
|
39
39
|
}
|
|
@@ -41,14 +41,14 @@ var RemoveButtonPlaceholder = function() {
|
|
|
41
41
|
};
|
|
42
42
|
var StaticCollectionItem = function(param) {
|
|
43
43
|
var onRemove = param.onRemove, _param_removable = param.removable, removable = _param_removable === void 0 ? true : _param_removable, styles = param.styles, children = param.children;
|
|
44
|
-
var _useStyles = (0,
|
|
44
|
+
var _useStyles = (0, _Collectionstyles.default)(null, {
|
|
45
45
|
name: "Collection",
|
|
46
46
|
styles: styles
|
|
47
47
|
}), classes = _useStyles.classes, cx = _useStyles.cx;
|
|
48
|
-
var removeButton = removable && onRemove ? /*#__PURE__*/ (0,
|
|
48
|
+
var removeButton = removable && onRemove ? /*#__PURE__*/ (0, _jsxruntime.jsx)(RemoveButton, {
|
|
49
49
|
onClick: onRemove
|
|
50
|
-
}) : /*#__PURE__*/ (0,
|
|
51
|
-
return /*#__PURE__*/ (0,
|
|
50
|
+
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(RemoveButtonPlaceholder, {});
|
|
51
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
|
|
52
52
|
className: cx(classes.item),
|
|
53
53
|
children: [
|
|
54
54
|
children,
|
|
@@ -58,39 +58,39 @@ var StaticCollectionItem = function(param) {
|
|
|
58
58
|
};
|
|
59
59
|
var DisabledCollectionItem = function(param) {
|
|
60
60
|
var children = param.children, styles = param.styles;
|
|
61
|
-
var _useStyles = (0,
|
|
61
|
+
var _useStyles = (0, _Collectionstyles.default)(null, {
|
|
62
62
|
name: "Collection",
|
|
63
63
|
styles: styles
|
|
64
64
|
}), classes = _useStyles.classes, cx = _useStyles.cx;
|
|
65
|
-
return /*#__PURE__*/ (0,
|
|
65
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Group, {
|
|
66
66
|
className: cx(classes.item),
|
|
67
67
|
children: children
|
|
68
68
|
});
|
|
69
69
|
};
|
|
70
70
|
var DraggableCollectionItem = function(param) {
|
|
71
71
|
var index = param.index, onRemove = param.onRemove, _param_removable = param.removable, removable = _param_removable === void 0 ? true : _param_removable, styles = param.styles, children = param.children;
|
|
72
|
-
var _useStyles = (0,
|
|
72
|
+
var _useStyles = (0, _Collectionstyles.default)(null, {
|
|
73
73
|
name: "Collection",
|
|
74
74
|
styles: styles
|
|
75
75
|
}), classes = _useStyles.classes, cx = _useStyles.cx;
|
|
76
|
-
var removeButton = removable && onRemove ? /*#__PURE__*/ (0,
|
|
76
|
+
var removeButton = removable && onRemove ? /*#__PURE__*/ (0, _jsxruntime.jsx)(RemoveButton, {
|
|
77
77
|
onClick: onRemove
|
|
78
78
|
}) : null;
|
|
79
|
-
return /*#__PURE__*/ (0,
|
|
79
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactbeautifuldnd.Draggable, {
|
|
80
80
|
index: index,
|
|
81
81
|
draggableId: index.toString(),
|
|
82
82
|
children: function(provided, param) {
|
|
83
83
|
var isDragging = param.isDragging;
|
|
84
|
-
return /*#__PURE__*/ (0,
|
|
84
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, _object_spread_props._(_object_spread._({
|
|
85
85
|
ref: provided.innerRef
|
|
86
86
|
}, provided.draggableProps), {
|
|
87
|
-
className: cx(classes.item,
|
|
87
|
+
className: cx(classes.item, _define_property._({}, classes.itemDragging, isDragging)),
|
|
88
88
|
children: [
|
|
89
|
-
/*#__PURE__*/ (0,
|
|
89
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({}, provided.dragHandleProps), {
|
|
90
90
|
style: {
|
|
91
91
|
alignSelf: "center"
|
|
92
92
|
},
|
|
93
|
-
children: /*#__PURE__*/ (0,
|
|
93
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.DragAndDropSize16Px, {
|
|
94
94
|
height: 16
|
|
95
95
|
})
|
|
96
96
|
})),
|
|
@@ -102,17 +102,17 @@ var DraggableCollectionItem = function(param) {
|
|
|
102
102
|
}, index);
|
|
103
103
|
};
|
|
104
104
|
var CollectionItem = function(_param) {
|
|
105
|
-
var draggable = _param.draggable, disabled = _param.disabled, otherProps =
|
|
105
|
+
var draggable = _param.draggable, disabled = _param.disabled, otherProps = _object_without_properties._(_param, [
|
|
106
106
|
"draggable",
|
|
107
107
|
"disabled"
|
|
108
108
|
]);
|
|
109
109
|
if (disabled) {
|
|
110
|
-
return /*#__PURE__*/ (0,
|
|
110
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(DisabledCollectionItem, _object_spread._({}, otherProps));
|
|
111
111
|
}
|
|
112
112
|
if (draggable) {
|
|
113
|
-
return /*#__PURE__*/ (0,
|
|
113
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(DraggableCollectionItem, _object_spread._({}, otherProps));
|
|
114
114
|
}
|
|
115
|
-
return /*#__PURE__*/ (0,
|
|
115
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(StaticCollectionItem, _object_spread._({}, otherProps));
|
|
116
116
|
};
|
|
117
117
|
|
|
118
118
|
//# sourceMappingURL=CollectionItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize16Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\nimport {Draggable} from 'react-beautiful-dnd';\n\nimport useStyles from './Collection.styles';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n draggable?: boolean;\n disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {\n index: number;\n onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n <ActionIcon sx={{alignSelf: 'center'}} variant=\"subtle\" onClick={onClick} color=\"action\">\n <RemoveSize16Px height={16} />\n </ActionIcon>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n onRemove,\n removable = true,\n styles,\n children,\n}) => {\n const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n return (\n <Group className={cx(classes.item)}>\n {children}\n {removeButton}\n </Group>\n );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n children,\n styles,\n}) => {\n const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n return <Group className={cx(classes.item)}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n index,\n onRemove,\n removable = true,\n styles,\n children,\n}) => {\n const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n\n return (\n <Draggable key={index} index={index} draggableId={index.toString()}>\n {(provided, {isDragging}) => (\n <Group\n ref={provided.innerRef}\n {...provided.draggableProps}\n className={cx(classes.item, {[classes.itemDragging]: isDragging})}\n >\n <div {...provided.dragHandleProps} style={{alignSelf: 'center'}}>\n <DragAndDropSize16Px height={16} />\n </div>\n {children}\n {removeButton}\n </Group>\n )}\n </Draggable>\n );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n draggable,\n disabled,\n ...otherProps\n}) => {\n if (disabled) {\n return <DisabledCollectionItem {...otherProps} />;\n }\n if (draggable) {\n return <DraggableCollectionItem {...otherProps} />;\n }\n return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["CollectionItem","RemoveButton","onClick","ActionIcon","sx","alignSelf","variant","color","RemoveSize16Px","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","useStyles","name","classes","cx","removeButton","Group","className","item","DisabledCollectionItem","DraggableCollectionItem","index","Draggable","draggableId","toString","provided","isDragging","ref","innerRef","draggableProps","itemDragging","dragHandleProps","DragAndDropSize16Px","draggable","disabled","otherProps"],"mappings":";;;;+BAkFaA;;;eAAAA;;;;;;;;;gCAlFqC;oBACO;iCAEjC;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize16Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\nimport {Draggable} from 'react-beautiful-dnd';\n\nimport useStyles from './Collection.styles';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n draggable?: boolean;\n disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {\n index: number;\n onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n <ActionIcon sx={{alignSelf: 'center'}} variant=\"subtle\" onClick={onClick} color=\"action\">\n <RemoveSize16Px height={16} />\n </ActionIcon>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n onRemove,\n removable = true,\n styles,\n children,\n}) => {\n const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n return (\n <Group className={cx(classes.item)}>\n {children}\n {removeButton}\n </Group>\n );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n children,\n styles,\n}) => {\n const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n return <Group className={cx(classes.item)}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n index,\n onRemove,\n removable = true,\n styles,\n children,\n}) => {\n const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n\n return (\n <Draggable key={index} index={index} draggableId={index.toString()}>\n {(provided, {isDragging}) => (\n <Group\n ref={provided.innerRef}\n {...provided.draggableProps}\n className={cx(classes.item, {[classes.itemDragging]: isDragging})}\n >\n <div {...provided.dragHandleProps} style={{alignSelf: 'center'}}>\n <DragAndDropSize16Px height={16} />\n </div>\n {children}\n {removeButton}\n </Group>\n )}\n </Draggable>\n );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n draggable,\n disabled,\n ...otherProps\n}) => {\n if (disabled) {\n return <DisabledCollectionItem {...otherProps} />;\n }\n if (draggable) {\n return <DraggableCollectionItem {...otherProps} />;\n }\n return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["CollectionItem","RemoveButton","onClick","ActionIcon","sx","alignSelf","variant","color","RemoveSize16Px","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","useStyles","name","classes","cx","removeButton","Group","className","item","DisabledCollectionItem","DraggableCollectionItem","index","Draggable","draggableId","toString","provided","isDragging","ref","innerRef","draggableProps","itemDragging","dragHandleProps","DragAndDropSize16Px","draggable","disabled","otherProps"],"mappings":";;;;+BAkFaA;;;eAAAA;;;;;;;;;gCAlFqC;oBACO;iCAEjC;yEAEF;AAatB,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,gBAAU;QAACC,IAAI;YAACC,WAAW;QAAQ;QAAGC,SAAQ;QAASJ,SAASA;QAASK,OAAM;kBAC5E,cAAA,qBAACC,gCAAc;YAACC,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,qBAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,gBAKxF;QAJFC,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACd;QAAaC,SAASa;uBAAe,qBAACL,4BAA0B;IAE9G,qBACI,sBAACc,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;;YAC5BR;YACAK;;;AAGb;AAEA,IAAMI,yBAA0F,gBAG1F;QAFFT,iBAAAA,UACAD,eAAAA;IAEA,IAAsBE,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,qBAAO,qBAACE,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;kBAAIR;;AAChD;AAEA,IAAMU,0BAA2F,gBAM3F;QALFC,cAAAA,OACAd,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACd;QAAaC,SAASa;SAAe,IAAI;IAEvF,qBACI,qBAACe,4BAAS;QAAaD,OAAOA;QAAOE,aAAaF,MAAMG,QAAQ;kBAC3D,SAACC;gBAAWC,mBAAAA;iCACT,sBAACV,WAAK;gBACFW,KAAKF,SAASG,QAAQ;eAClBH,SAASI,cAAc;gBAC3BZ,WAAWH,GAAGD,QAAQK,IAAI,EAAG,uBAACL,QAAQiB,YAAY,EAAGJ;;kCAErD,qBAACvB,mDAAQsB,SAASM,eAAe;wBAAE3B,OAAO;4BAACP,WAAW;wBAAQ;kCAC1D,cAAA,qBAACmC,qCAAmB;4BAAC/B,QAAQ;;;oBAEhCS;oBACAK;;;;OAXGM;AAgBxB;AAEO,IAAM7B,iBAA4E,iBAInF;QAHFyC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,qBAACf,6CAA2BgB;IACvC,CAAC;IACD,IAAIF,WAAW;QACX,qBAAO,qBAACb,8CAA4Be;IACxC,CAAC;IACD,qBAAO,qBAAC7B,2CAAyB6B;AACrC"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
var
|
|
6
|
-
|
|
5
|
+
var _export_star = require("@swc/helpers/_/_export_star");
|
|
6
|
+
_export_star._(require("./Collection"), exports);
|
|
7
7
|
|
|
8
8
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/collection/index.ts"],"sourcesContent":["export * from './Collection';\n"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/collection/index.ts"],"sourcesContent":["export * from './Collection';\n"],"names":[],"mappings":";;;;;uBAAc"}
|
|
@@ -8,10 +8,10 @@ Object.defineProperty(exports, "CopyToClipboard", {
|
|
|
8
8
|
return CopyToClipboard;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
11
|
+
var _object_spread = require("@swc/helpers/_/_object_spread");
|
|
12
|
+
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
|
|
13
|
+
var _jsxruntime = require("react/jsx-runtime");
|
|
14
|
+
var _plasmareacticons = require("@coveord/plasma-react-icons");
|
|
15
15
|
var _core = require("@mantine/core");
|
|
16
16
|
var useStyles = (0, _core.createStyles)(function(theme) {
|
|
17
17
|
return {
|
|
@@ -21,40 +21,43 @@ var useStyles = (0, _core.createStyles)(function(theme) {
|
|
|
21
21
|
};
|
|
22
22
|
});
|
|
23
23
|
var CopyToClipboardButton = function(param) {
|
|
24
|
-
var value = param.value;
|
|
25
|
-
|
|
24
|
+
var value = param.value, onCopy = param.onCopy;
|
|
25
|
+
/*#__PURE__*/ return (0, _jsxruntime.jsx)(_core.CopyButton, {
|
|
26
26
|
value: value,
|
|
27
27
|
timeout: 2000,
|
|
28
28
|
children: function(param) {
|
|
29
29
|
var copied = param.copied, copy = param.copy;
|
|
30
|
-
|
|
30
|
+
/*#__PURE__*/ return (0, _jsxruntime.jsx)(_core.Tooltip, {
|
|
31
31
|
label: copied ? "Copied" : "Copy",
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
32
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ActionIcon, {
|
|
33
|
+
color: copied ? "success" : "gray",
|
|
34
|
+
onClick: function() {
|
|
35
|
+
copy();
|
|
36
|
+
onCopy === null || onCopy === void 0 ? void 0 : onCopy();
|
|
37
|
+
},
|
|
38
|
+
children: copied ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CheckSize16Px, {
|
|
39
|
+
height: 16
|
|
40
|
+
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CopySize16Px, {
|
|
41
|
+
height: 16
|
|
42
|
+
})
|
|
38
43
|
})
|
|
39
44
|
});
|
|
40
45
|
}
|
|
41
46
|
});
|
|
42
47
|
};
|
|
43
|
-
var CopyToClipboard = function(
|
|
44
|
-
var
|
|
48
|
+
var CopyToClipboard = function(_param) {
|
|
49
|
+
var withLabel = _param.withLabel, others = _object_without_properties._(_param, [
|
|
50
|
+
"withLabel"
|
|
51
|
+
]);
|
|
45
52
|
var classes = useStyles().classes;
|
|
46
|
-
return withLabel ? /*#__PURE__*/ (0,
|
|
53
|
+
return withLabel ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.TextInput, {
|
|
47
54
|
classNames: {
|
|
48
55
|
input: classes.input
|
|
49
56
|
},
|
|
50
|
-
value: value,
|
|
57
|
+
value: others.value,
|
|
51
58
|
readOnly: true,
|
|
52
|
-
rightSection: /*#__PURE__*/ (0,
|
|
53
|
-
|
|
54
|
-
})
|
|
55
|
-
}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(CopyToClipboardButton, {
|
|
56
|
-
value: value
|
|
57
|
-
});
|
|
59
|
+
rightSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(CopyToClipboardButton, _object_spread._({}, others))
|
|
60
|
+
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(CopyToClipboardButton, _object_spread._({}, others));
|
|
58
61
|
};
|
|
59
62
|
|
|
60
63
|
//# sourceMappingURL=CopyToClipboard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, CopyButton, createStyles, TextInput, Tooltip} from '@mantine/core';\n\nexport interface CopyToClipboardProps {\n /**\n * The value to be copied to the clipboard.\n */\n value: string;\n /**\n * Whether to display the string to be copied alongside the button.\n *\n * @default false\n */\n withLabel?: boolean;\n /**\n * Called each time the value is copied to the clipboard\n */\n onCopy?: () => void;\n}\n\nconst useStyles = createStyles((theme) => ({\n input: {\n color: theme.colors.gray[7],\n },\n}));\n\nconst CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy}) => (\n <CopyButton value={value} timeout={2000}>\n {({copied, copy}) => (\n <Tooltip label={copied ? 'Copied' : 'Copy'}>\n <ActionIcon\n color={copied ? 'success' : 'gray'}\n onClick={() => {\n copy();\n onCopy?.();\n }}\n >\n {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n);\n\nexport const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) => {\n const {classes} = useStyles();\n\n return withLabel ? (\n <TextInput\n classNames={{\n input: classes.input,\n }}\n value={others.value}\n readOnly\n rightSection={<CopyToClipboardButton {...others} />}\n />\n ) : (\n <CopyToClipboardButton {...others} />\n );\n};\n"],"names":["CopyToClipboard","useStyles","createStyles","theme","input","color","colors","gray","CopyToClipboardButton","value","onCopy","CopyButton","timeout","copied","copy","Tooltip","label","ActionIcon","onClick","CheckSize16Px","height","CopySize16Px","withLabel","others","classes","TextInput","classNames","readOnly","rightSection"],"mappings":";;;;+BA4CaA;;;eAAAA;;;;;;gCA5C6B;oBAC6B;AAmBvE,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,OAAO;YACHC,OAAOF,MAAMG,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAEA,IAAMC,wBAA0F;QAAEC,cAAAA,OAAOC,eAAAA;kBACrG,OAAA,qBAACC,gBAAU;QAACF,OAAOA;QAAOG,SAAS;kBAC9B;gBAAEC,eAAAA,QAAQC,aAAAA;0BACP,OAAA,qBAACC,aAAO;gBAACC,OAAOH,SAAS,WAAW,MAAM;0BACtC,cAAA,qBAACI,gBAAU;oBACPZ,OAAOQ,SAAS,YAAY,MAAM;oBAClCK,SAAS,WAAM;wBACXJ;wBACAJ,mBAAAA,oBAAAA,KAAAA,IAAAA;oBACJ;8BAECG,uBAAS,qBAACM,+BAAa;wBAACC,QAAQ;uCAAS,qBAACC,8BAAY;wBAACD,QAAQ;sBAAM;;;;;;AAOnF,IAAMpB,kBAAiE,iBAA4B;QAA1BsB,mBAAAA,WAAcC;QAAdD;;IAC5E,IAAM,AAACE,UAAWvB,YAAXuB;IAEP,OAAOF,0BACH,qBAACG,eAAS;QACNC,YAAY;YACRtB,OAAOoB,QAAQpB,KAAK;QACxB;QACAK,OAAOc,OAAOd,KAAK;QACnBkB,QAAQ;QACRC,4BAAc,qBAACpB,4CAA0Be;uBAG7C,qBAACf,4CAA0Be,QAC9B;AACL"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
var
|
|
6
|
-
|
|
5
|
+
var _export_star = require("@swc/helpers/_/_export_star");
|
|
6
|
+
_export_star._(require("./CopyToClipboard"), exports);
|
|
7
7
|
|
|
8
8
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/copyToClipboard/index.ts"],"sourcesContent":["export * from './CopyToClipboard';\n"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/copyToClipboard/index.ts"],"sourcesContent":["export * from './CopyToClipboard';\n"],"names":[],"mappings":";;;;;uBAAc"}
|
|
@@ -8,15 +8,15 @@ Object.defineProperty(exports, "DateRangePickerInlineCalendar", {
|
|
|
8
8
|
return DateRangePickerInlineCalendar;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
11
|
+
var _object_spread = require("@swc/helpers/_/_object_spread");
|
|
12
|
+
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
|
|
13
|
+
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
17
|
var _button = require("../button");
|
|
18
|
-
var
|
|
19
|
-
var
|
|
18
|
+
var _DateRangePickerPresetSelect = require("./DateRangePickerPresetSelect");
|
|
19
|
+
var _EditableDateRangePicker = require("./EditableDateRangePicker");
|
|
20
20
|
var DateRangePickerInlineCalendar = function(param) {
|
|
21
21
|
var initialRange = param.initialRange, onApply = param.onApply, onCancel = param.onCancel, presets = param.presets, startProps = param.startProps, endProps = param.endProps, rangeCalendarProps = param.rangeCalendarProps;
|
|
22
22
|
var form = (0, _form.useForm)({
|
|
@@ -31,9 +31,9 @@ var DateRangePickerInlineCalendar = function(param) {
|
|
|
31
31
|
}
|
|
32
32
|
onApply(form.values.dates);
|
|
33
33
|
};
|
|
34
|
-
return /*#__PURE__*/ (0,
|
|
34
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
35
35
|
children: [
|
|
36
|
-
/*#__PURE__*/ (0,
|
|
36
|
+
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
|
|
37
37
|
align: "center",
|
|
38
38
|
spacing: "xs",
|
|
39
39
|
grow: true,
|
|
@@ -45,26 +45,26 @@ var DateRangePickerInlineCalendar = function(param) {
|
|
|
45
45
|
};
|
|
46
46
|
},
|
|
47
47
|
children: [
|
|
48
|
-
/*#__PURE__*/ (0,
|
|
48
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_EditableDateRangePicker.EditableDateRangePicker, _object_spread_props._(_object_spread._({}, calendarInputProps), {
|
|
49
49
|
startProps: startProps,
|
|
50
50
|
endProps: endProps
|
|
51
51
|
})),
|
|
52
|
-
presets ? /*#__PURE__*/ (0,
|
|
52
|
+
presets ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
53
53
|
children: [
|
|
54
|
-
/*#__PURE__*/ (0,
|
|
54
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Space, {
|
|
55
55
|
w: "sm"
|
|
56
56
|
}),
|
|
57
|
-
/*#__PURE__*/ (0,
|
|
57
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_DateRangePickerPresetSelect.DateRangePickerPresetSelect, _object_spread._({
|
|
58
58
|
presets: presets
|
|
59
59
|
}, calendarInputProps))
|
|
60
60
|
]
|
|
61
61
|
}) : null
|
|
62
62
|
]
|
|
63
63
|
}),
|
|
64
|
-
/*#__PURE__*/ (0,
|
|
64
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Center, {
|
|
65
65
|
py: "sm",
|
|
66
66
|
px: "md",
|
|
67
|
-
children: /*#__PURE__*/ (0,
|
|
67
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dates.DatePicker, _object_spread._({
|
|
68
68
|
numberOfColumns: 2,
|
|
69
69
|
type: "range",
|
|
70
70
|
styles: {
|
|
@@ -78,7 +78,7 @@ var DateRangePickerInlineCalendar = function(param) {
|
|
|
78
78
|
allowSingleDateInRange: true
|
|
79
79
|
}, rangeCalendarProps, calendarInputProps))
|
|
80
80
|
}),
|
|
81
|
-
/*#__PURE__*/ (0,
|
|
81
|
+
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
|
|
82
82
|
position: "right",
|
|
83
83
|
spacing: "xs",
|
|
84
84
|
px: "md",
|
|
@@ -89,12 +89,12 @@ var DateRangePickerInlineCalendar = function(param) {
|
|
|
89
89
|
};
|
|
90
90
|
},
|
|
91
91
|
children: [
|
|
92
|
-
/*#__PURE__*/ (0,
|
|
92
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button, {
|
|
93
93
|
size: "xs",
|
|
94
94
|
onClick: onCalendarApply,
|
|
95
95
|
children: "Apply"
|
|
96
96
|
}),
|
|
97
|
-
/*#__PURE__*/ (0,
|
|
97
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button, {
|
|
98
98
|
variant: "outline",
|
|
99
99
|
size: "xs",
|
|
100
100
|
onClick: onCancel,
|