@coveord/plasma-mantine 52.26.3 → 52.26.4
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 +34 -128
- package/dist/.tsbuildinfo +1 -1
- package/dist/esm/components/action-icon/ActionIcon.js +29 -80
- package/dist/esm/components/action-icon/ActionIcon.js.map +1 -1
- package/dist/esm/components/action-icon/index.js +1 -1
- package/dist/esm/components/blank-slate/BlankSlate.js +3 -6
- package/dist/esm/components/blank-slate/BlankSlate.js.map +1 -1
- package/dist/esm/components/blank-slate/index.js +1 -1
- package/dist/esm/components/browser-preview/BrowserPreview.js +16 -28
- package/dist/esm/components/browser-preview/BrowserPreview.js.map +1 -1
- package/dist/esm/components/browser-preview/BrowserPreview.styles.js +6 -8
- package/dist/esm/components/browser-preview/BrowserPreview.styles.js.map +1 -1
- package/dist/esm/components/browser-preview/index.js +1 -1
- package/dist/esm/components/button/Button.js +29 -80
- package/dist/esm/components/button/Button.js.map +1 -1
- package/dist/esm/components/button/ButtonWithDisabledTooltip.js +16 -28
- package/dist/esm/components/button/ButtonWithDisabledTooltip.js.map +1 -1
- package/dist/esm/components/button/index.js +1 -1
- package/dist/esm/components/code-editor/CodeEditor.js +76 -144
- package/dist/esm/components/code-editor/CodeEditor.js.map +1 -1
- package/dist/esm/components/code-editor/index.js +1 -1
- package/dist/esm/components/code-editor/languages/xml.js +18 -32
- package/dist/esm/components/code-editor/languages/xml.js.map +1 -1
- package/dist/esm/components/code-editor/search/Search.js +6 -13
- package/dist/esm/components/code-editor/search/Search.js.map +1 -1
- package/dist/esm/components/code-editor/search/index.js +1 -1
- package/dist/esm/components/collection/Collection.js +57 -110
- package/dist/esm/components/collection/Collection.js.map +1 -1
- package/dist/esm/components/collection/Collection.styles.js +7 -9
- package/dist/esm/components/collection/Collection.styles.js.map +1 -1
- package/dist/esm/components/collection/CollectionItem.js +47 -54
- package/dist/esm/components/collection/CollectionItem.js.map +1 -1
- package/dist/esm/components/collection/index.js +1 -1
- package/dist/esm/components/copyToClipboard/CopyToClipboard.js +19 -29
- package/dist/esm/components/copyToClipboard/CopyToClipboard.js.map +1 -1
- package/dist/esm/components/copyToClipboard/index.js +1 -1
- package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js +29 -32
- package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js.map +1 -1
- package/dist/esm/components/date-range-picker/DateRangePickerPopoverCalendar.js +22 -29
- package/dist/esm/components/date-range-picker/DateRangePickerPopoverCalendar.js.map +1 -1
- package/dist/esm/components/date-range-picker/DateRangePickerPresetSelect.js +19 -30
- package/dist/esm/components/date-range-picker/DateRangePickerPresetSelect.js.map +1 -1
- package/dist/esm/components/date-range-picker/EditableDateRangePicker.js +21 -22
- package/dist/esm/components/date-range-picker/EditableDateRangePicker.js.map +1 -1
- package/dist/esm/components/date-range-picker/index.js +3 -3
- package/dist/esm/components/header/Header.js +28 -48
- package/dist/esm/components/header/Header.js.map +1 -1
- package/dist/esm/components/header/Header.styles.js +7 -10
- package/dist/esm/components/header/Header.styles.js.map +1 -1
- package/dist/esm/components/header/HeaderActions/HeaderActions.js +16 -25
- package/dist/esm/components/header/HeaderActions/HeaderActions.js.map +1 -1
- package/dist/esm/components/header/HeaderActions/HeaderActions.styles.js +3 -7
- package/dist/esm/components/header/HeaderActions/HeaderActions.styles.js.map +1 -1
- package/dist/esm/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.js +13 -22
- package/dist/esm/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.js.map +1 -1
- package/dist/esm/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.styles.js +3 -7
- package/dist/esm/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.styles.js.map +1 -1
- package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.js +17 -28
- package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.js.map +1 -1
- package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.styles.js +4 -8
- package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.styles.js.map +1 -1
- package/dist/esm/components/header/index.js +1 -1
- package/dist/esm/components/index.js +15 -15
- package/dist/esm/components/inline-confirm/InlineConfirm.js +14 -20
- package/dist/esm/components/inline-confirm/InlineConfirm.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmButton.js +11 -17
- package/dist/esm/components/inline-confirm/InlineConfirmButton.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmContext.js +2 -2
- package/dist/esm/components/inline-confirm/InlineConfirmContext.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmMenuItem.js +11 -17
- package/dist/esm/components/inline-confirm/InlineConfirmMenuItem.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmPrompt.js +8 -9
- package/dist/esm/components/inline-confirm/InlineConfirmPrompt.js.map +1 -1
- package/dist/esm/components/inline-confirm/index.js +3 -3
- package/dist/esm/components/inline-confirm/useInlineConfirm.js +5 -5
- package/dist/esm/components/inline-confirm/useInlineConfirm.js.map +1 -1
- package/dist/esm/components/menu/Menu.js +13 -21
- package/dist/esm/components/menu/Menu.js.map +1 -1
- package/dist/esm/components/menu/index.js +1 -1
- package/dist/esm/components/modal-wizard/ModalWizard.js +57 -108
- package/dist/esm/components/modal-wizard/ModalWizard.js.map +1 -1
- package/dist/esm/components/modal-wizard/ModalWizardStep.js +1 -4
- package/dist/esm/components/modal-wizard/ModalWizardStep.js.map +1 -1
- package/dist/esm/components/modal-wizard/index.js +1 -1
- package/dist/esm/components/prompt/Prompt.js +29 -41
- package/dist/esm/components/prompt/Prompt.js.map +1 -1
- package/dist/esm/components/prompt/PromptFooter.js +4 -11
- package/dist/esm/components/prompt/PromptFooter.js.map +1 -1
- package/dist/esm/components/prompt/index.js +1 -1
- package/dist/esm/components/sticky-footer/StickyFooter.js +21 -35
- package/dist/esm/components/sticky-footer/StickyFooter.js.map +1 -1
- package/dist/esm/components/sticky-footer/index.js +1 -1
- package/dist/esm/components/table/Table.js +94 -123
- package/dist/esm/components/table/Table.js.map +1 -1
- package/dist/esm/components/table/Table.styles.js +11 -13
- package/dist/esm/components/table/Table.styles.js.map +1 -1
- package/dist/esm/components/table/TableContext.js +5 -5
- package/dist/esm/components/table/TableContext.js.map +1 -1
- package/dist/esm/components/table/index.js +3 -3
- package/dist/esm/components/table/layouts/RowLayout.js +59 -79
- package/dist/esm/components/table/layouts/RowLayout.js.map +1 -1
- package/dist/esm/components/table/layouts/RowLayout.styles.js +27 -28
- package/dist/esm/components/table/layouts/RowLayout.styles.js.map +1 -1
- package/dist/esm/components/table/layouts/TableLayoutControl.js +10 -13
- package/dist/esm/components/table/layouts/TableLayoutControl.js.map +1 -1
- package/dist/esm/components/table/layouts/TableLayouts.js +2 -2
- package/dist/esm/components/table/layouts/TableLayouts.js.map +1 -1
- package/dist/esm/components/table/table-actions/TableActions.js +17 -26
- package/dist/esm/components/table/table-actions/TableActions.js.map +1 -1
- package/dist/esm/components/table/table-actions/TableActions.styles.js +5 -7
- package/dist/esm/components/table/table-actions/TableActions.styles.js.map +1 -1
- package/dist/esm/components/table/table-column/TableCollapsibleColumn.js +19 -23
- package/dist/esm/components/table/table-column/TableCollapsibleColumn.js.map +1 -1
- package/dist/esm/components/table/table-column/TableSelectableColumn.js +9 -13
- package/dist/esm/components/table/table-column/TableSelectableColumn.js.map +1 -1
- package/dist/esm/components/table/table-consumer/TableConsumer.js +1 -4
- package/dist/esm/components/table/table-consumer/TableConsumer.js.map +1 -1
- package/dist/esm/components/table/table-date-range-picker/TableDateRangePicker.js +28 -43
- package/dist/esm/components/table/table-date-range-picker/TableDateRangePicker.js.map +1 -1
- package/dist/esm/components/table/table-date-range-picker/TableDateRangePicker.styles.js +3 -5
- package/dist/esm/components/table/table-date-range-picker/TableDateRangePicker.styles.js.map +1 -1
- package/dist/esm/components/table/table-filter/TableFilter.js +30 -40
- package/dist/esm/components/table/table-filter/TableFilter.js.map +1 -1
- package/dist/esm/components/table/table-filter/TableFilter.styles.js +4 -6
- package/dist/esm/components/table/table-filter/TableFilter.styles.js.map +1 -1
- package/dist/esm/components/table/table-footer/TableFooter.js +5 -13
- package/dist/esm/components/table/table-footer/TableFooter.js.map +1 -1
- package/dist/esm/components/table/table-header/TableHeader.js +20 -29
- package/dist/esm/components/table/table-header/TableHeader.js.map +1 -1
- package/dist/esm/components/table/table-header/TableHeader.styles.js +8 -10
- package/dist/esm/components/table/table-header/TableHeader.styles.js.map +1 -1
- package/dist/esm/components/table/table-header/Th.js +27 -35
- package/dist/esm/components/table/table-header/Th.js.map +1 -1
- package/dist/esm/components/table/table-header/Th.styles.js +13 -16
- package/dist/esm/components/table/table-header/Th.styles.js.map +1 -1
- package/dist/esm/components/table/table-last-updated/TableLastUpdated.js +24 -35
- package/dist/esm/components/table/table-last-updated/TableLastUpdated.js.map +1 -1
- package/dist/esm/components/table/table-last-updated/TableLastUpdated.styles.js +4 -6
- package/dist/esm/components/table/table-last-updated/TableLastUpdated.styles.js.map +1 -1
- package/dist/esm/components/table/table-loading/TableLoading.js +4 -7
- package/dist/esm/components/table/table-loading/TableLoading.js.map +1 -1
- package/dist/esm/components/table/table-pagination/TablePagination.js +21 -25
- package/dist/esm/components/table/table-pagination/TablePagination.js.map +1 -1
- package/dist/esm/components/table/table-per-page/TablePerPage.js +15 -24
- package/dist/esm/components/table/table-per-page/TablePerPage.js.map +1 -1
- package/dist/esm/components/table/table-predicate/TablePredicate.js +25 -35
- package/dist/esm/components/table/table-predicate/TablePredicate.js.map +1 -1
- package/dist/esm/components/table/table-predicate/TablePredicate.styles.js +3 -5
- package/dist/esm/components/table/table-predicate/TablePredicate.styles.js.map +1 -1
- package/dist/esm/form/FormProvider.js +9 -10
- package/dist/esm/form/FormProvider.js.map +1 -1
- package/dist/esm/form/index.js +2 -2
- package/dist/esm/form/useForm.js +18 -25
- package/dist/esm/form/useForm.js.map +1 -1
- package/dist/esm/hooks/index.js +2 -2
- package/dist/esm/hooks/useControlledList.js +24 -30
- package/dist/esm/hooks/useControlledList.js.map +1 -1
- package/dist/esm/hooks/useParentHeight.js +10 -11
- package/dist/esm/hooks/useParentHeight.js.map +1 -1
- package/dist/esm/hooks/useRowSelection.js +33 -44
- package/dist/esm/hooks/useRowSelection.js.map +1 -1
- package/dist/esm/index.js +11 -11
- package/dist/esm/theme/PlasmaColors.js +13 -15
- package/dist/esm/theme/PlasmaColors.js.map +1 -1
- package/dist/esm/theme/Plasmantine.js +3 -6
- package/dist/esm/theme/Plasmantine.js.map +1 -1
- package/dist/esm/theme/Theme.js +142 -171
- package/dist/esm/theme/Theme.js.map +1 -1
- package/dist/esm/theme/index.js +1 -1
- package/dist/esm/utils/createPolymorphicComponent.js +2 -2
- package/dist/esm/utils/createPolymorphicComponent.js.map +1 -1
- package/dist/esm/utils/index.js +2 -2
- package/dist/esm/utils/overrideComponent.js +2 -8
- package/dist/esm/utils/overrideComponent.js.map +1 -1
- package/package.json +4 -4
|
@@ -1,121 +1,77 @@
|
|
|
1
|
-
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
2
|
-
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
|
|
3
|
-
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
|
|
4
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
5
|
-
import { AddSize16Px } from
|
|
6
|
-
import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from
|
|
7
|
-
import { restrictToParentElement, restrictToVerticalAxis } from
|
|
8
|
-
import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from
|
|
9
|
-
import { Box, Group, Input, Stack, Tooltip, useComponentDefaultProps } from
|
|
10
|
-
import { useDidUpdate } from
|
|
11
|
-
import { Button } from
|
|
12
|
-
import useStyles from
|
|
13
|
-
import { CollectionItem } from
|
|
14
|
-
|
|
2
|
+
import { AddSize16Px } from '@coveord/plasma-react-icons';
|
|
3
|
+
import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
|
|
4
|
+
import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers';
|
|
5
|
+
import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
|
6
|
+
import { Box, Group, Input, Stack, Tooltip, useComponentDefaultProps } from '@mantine/core';
|
|
7
|
+
import { useDidUpdate } from '@mantine/hooks';
|
|
8
|
+
import { Button } from '../button';
|
|
9
|
+
import useStyles from './Collection.styles';
|
|
10
|
+
import { CollectionItem } from './CollectionItem';
|
|
11
|
+
const defaultProps = {
|
|
15
12
|
draggable: false,
|
|
16
|
-
addLabel:
|
|
17
|
-
addDisabledTooltip:
|
|
13
|
+
addLabel: 'Add item',
|
|
14
|
+
addDisabledTooltip: 'There is already an empty item',
|
|
18
15
|
disabled: false,
|
|
19
|
-
spacing:
|
|
16
|
+
spacing: 'xs',
|
|
20
17
|
required: false,
|
|
21
|
-
getItemId:
|
|
22
|
-
var id = param.id;
|
|
23
|
-
return id;
|
|
24
|
-
}
|
|
18
|
+
getItemId: ({ id })=>id
|
|
25
19
|
};
|
|
26
|
-
export
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
"draggable",
|
|
37
|
-
"children",
|
|
38
|
-
"spacing",
|
|
39
|
-
"required",
|
|
40
|
-
"newItem",
|
|
41
|
-
"addLabel",
|
|
42
|
-
"addDisabledTooltip",
|
|
43
|
-
"allowAdd",
|
|
44
|
-
"label",
|
|
45
|
-
"labelProps",
|
|
46
|
-
"withAsterisk",
|
|
47
|
-
"description",
|
|
48
|
-
"descriptionProps",
|
|
49
|
-
"error",
|
|
50
|
-
"errorProps",
|
|
51
|
-
"getItemId",
|
|
52
|
-
"classNames",
|
|
53
|
-
"className",
|
|
54
|
-
"styles",
|
|
55
|
-
"unstyled"
|
|
56
|
-
]);
|
|
57
|
-
var _useStyles = useStyles(null, {
|
|
58
|
-
classNames: classNames,
|
|
59
|
-
name: "Collection",
|
|
60
|
-
styles: styles,
|
|
61
|
-
unstyled: unstyled
|
|
62
|
-
}), classes = _useStyles.classes, cx = _useStyles.cx;
|
|
63
|
-
var sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
|
|
20
|
+
export const Collection = (props)=>{
|
|
21
|
+
const { value, onChange, onRemoveItem, onReorderItem, onInsertItem, disabled, draggable, children, spacing, required, newItem, addLabel, addDisabledTooltip, allowAdd, label, labelProps, withAsterisk, description, descriptionProps, error, errorProps, getItemId, // Style props
|
|
22
|
+
classNames, className, styles, unstyled, ...others } = useComponentDefaultProps('Collection', defaultProps, props);
|
|
23
|
+
const { classes, cx } = useStyles(null, {
|
|
24
|
+
classNames,
|
|
25
|
+
name: 'Collection',
|
|
26
|
+
styles,
|
|
27
|
+
unstyled
|
|
28
|
+
});
|
|
29
|
+
const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
|
|
64
30
|
coordinateGetter: sortableKeyboardCoordinates
|
|
65
31
|
}));
|
|
66
|
-
|
|
32
|
+
const hasOnlyOneItem = value.length === 1;
|
|
67
33
|
/**
|
|
68
34
|
* Enforcing onChange when the value is modified will make sure the errors are carried through.
|
|
69
|
-
*/ useDidUpdate(
|
|
70
|
-
|
|
71
|
-
(_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange(value);
|
|
35
|
+
*/ useDidUpdate(()=>{
|
|
36
|
+
onChange?.(value);
|
|
72
37
|
}, [
|
|
73
38
|
JSON.stringify(value)
|
|
74
39
|
]);
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
required: isRequired
|
|
78
|
-
|
|
40
|
+
const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;
|
|
41
|
+
const _label = label ? /*#__PURE__*/ _jsx(Input.Label, {
|
|
42
|
+
required: isRequired,
|
|
43
|
+
...labelProps,
|
|
79
44
|
children: label
|
|
80
|
-
})
|
|
81
|
-
|
|
45
|
+
}) : null;
|
|
46
|
+
const _description = description ? /*#__PURE__*/ _jsx(Input.Description, {
|
|
47
|
+
...descriptionProps,
|
|
82
48
|
children: description
|
|
83
|
-
})
|
|
84
|
-
|
|
49
|
+
}) : null;
|
|
50
|
+
const _error = error ? /*#__PURE__*/ _jsx(Input.Error, {
|
|
51
|
+
...errorProps,
|
|
85
52
|
children: error
|
|
86
|
-
})
|
|
87
|
-
|
|
53
|
+
}) : null;
|
|
54
|
+
const _header = _label || _description ? /*#__PURE__*/ _jsxs(_Fragment, {
|
|
88
55
|
children: [
|
|
89
56
|
_label,
|
|
90
57
|
_description
|
|
91
58
|
]
|
|
92
59
|
}) : null;
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
var _getItemId1;
|
|
96
|
-
return {
|
|
97
|
-
id: (_getItemId = (_getItemId1 = getItemId) === null || _getItemId1 === void 0 ? void 0 : _getItemId1(item)) !== null && _getItemId !== void 0 ? _getItemId : String(index),
|
|
60
|
+
const standardizedItems = value.map((item, index)=>({
|
|
61
|
+
id: getItemId?.(item) ?? String(index),
|
|
98
62
|
data: item
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
var items = standardizedItems.map(function(item, index) {
|
|
102
|
-
return /*#__PURE__*/ _jsx(CollectionItem, {
|
|
63
|
+
}));
|
|
64
|
+
const items = standardizedItems.map((item, index)=>/*#__PURE__*/ _jsx(CollectionItem, {
|
|
103
65
|
id: item.id,
|
|
104
66
|
disabled: disabled,
|
|
105
67
|
draggable: draggable,
|
|
106
|
-
onRemove:
|
|
107
|
-
var _onRemoveItem;
|
|
108
|
-
return (_onRemoveItem = onRemoveItem) === null || _onRemoveItem === void 0 ? void 0 : _onRemoveItem(index);
|
|
109
|
-
},
|
|
68
|
+
onRemove: ()=>onRemoveItem?.(index),
|
|
110
69
|
styles: styles,
|
|
111
70
|
removable: !(required && hasOnlyOneItem),
|
|
112
71
|
children: children(item.data, index)
|
|
113
|
-
}, item.id);
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
var addAllowed = (_allowAdd1 = (_allowAdd = allowAdd) === null || _allowAdd === void 0 ? void 0 : _allowAdd(value)) !== null && _allowAdd1 !== void 0 ? _allowAdd1 : true;
|
|
117
|
-
var _value_length;
|
|
118
|
-
var _addButton = disabled ? null : /*#__PURE__*/ _jsx(Group, {
|
|
72
|
+
}, item.id));
|
|
73
|
+
const addAllowed = allowAdd?.(value) ?? true;
|
|
74
|
+
const _addButton = disabled ? null : /*#__PURE__*/ _jsx(Group, {
|
|
119
75
|
children: /*#__PURE__*/ _jsx(Tooltip, {
|
|
120
76
|
label: addDisabledTooltip,
|
|
121
77
|
disabled: addAllowed,
|
|
@@ -125,29 +81,20 @@ export var Collection = function(props) {
|
|
|
125
81
|
leftIcon: /*#__PURE__*/ _jsx(AddSize16Px, {
|
|
126
82
|
height: 16
|
|
127
83
|
}),
|
|
128
|
-
onClick:
|
|
129
|
-
var _value;
|
|
130
|
-
return onInsertItem(newItem, (_value_length = (_value = value) === null || _value === void 0 ? void 0 : _value.length) !== null && _value_length !== void 0 ? _value_length : 0);
|
|
131
|
-
},
|
|
84
|
+
onClick: ()=>onInsertItem(newItem, value?.length ?? 0),
|
|
132
85
|
disabled: !addAllowed,
|
|
133
86
|
children: addLabel
|
|
134
87
|
})
|
|
135
88
|
})
|
|
136
89
|
})
|
|
137
90
|
});
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
return item.id === id;
|
|
141
|
-
});
|
|
142
|
-
};
|
|
143
|
-
var handleDragEnd = function(param) {
|
|
144
|
-
var over = param.over, active = param.active;
|
|
91
|
+
const getIndex = (id)=>standardizedItems.findIndex((item)=>item.id === id);
|
|
92
|
+
const handleDragEnd = ({ over, active })=>{
|
|
145
93
|
if (over) {
|
|
146
|
-
|
|
147
|
-
|
|
94
|
+
const activeIndex = getIndex(String(active.id));
|
|
95
|
+
const overIndex = getIndex(String(over.id));
|
|
148
96
|
if (activeIndex !== overIndex) {
|
|
149
|
-
|
|
150
|
-
(_onReorderItem = onReorderItem) === null || _onReorderItem === void 0 ? void 0 : _onReorderItem({
|
|
97
|
+
onReorderItem?.({
|
|
151
98
|
from: activeIndex,
|
|
152
99
|
to: overIndex
|
|
153
100
|
});
|
|
@@ -164,9 +111,9 @@ export var Collection = function(props) {
|
|
|
164
111
|
children: /*#__PURE__*/ _jsx(SortableContext, {
|
|
165
112
|
items: standardizedItems,
|
|
166
113
|
strategy: verticalListSortingStrategy,
|
|
167
|
-
children: /*#__PURE__*/ _jsxs(Box,
|
|
168
|
-
className: cx(classes.root, className)
|
|
169
|
-
|
|
114
|
+
children: /*#__PURE__*/ _jsxs(Box, {
|
|
115
|
+
className: cx(classes.root, className),
|
|
116
|
+
...others,
|
|
170
117
|
children: [
|
|
171
118
|
_header,
|
|
172
119
|
/*#__PURE__*/ _jsxs(Stack, {
|
|
@@ -178,7 +125,7 @@ export var Collection = function(props) {
|
|
|
178
125
|
]
|
|
179
126
|
})
|
|
180
127
|
]
|
|
181
|
-
})
|
|
128
|
+
})
|
|
182
129
|
})
|
|
183
130
|
});
|
|
184
131
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';\nimport {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';\nimport {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';\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} from 'react';\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 getItemId: ({id}: any) => id,\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 sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n }),\n );\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 standardizedItems = value.map((item, index) => ({id: getItemId?.(item) ?? String(index), data: item}));\n\n const items = standardizedItems.map((item, index) => (\n <CollectionItem\n key={item.id}\n id={item.id}\n disabled={disabled}\n draggable={draggable}\n onRemove={() => onRemoveItem?.(index)}\n styles={styles}\n removable={!(required && hasOnlyOneItem)}\n >\n {children(item.data, 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 const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);\n\n const handleDragEnd = ({over, active}: DragEndEvent): void => {\n if (over) {\n const activeIndex = getIndex(String(active.id));\n const overIndex = getIndex(String(over.id));\n if (activeIndex !== overIndex) {\n onReorderItem?.({from: activeIndex, to: overIndex});\n }\n }\n };\n\n return (\n <DndContext\n onDragEnd={handleDragEnd}\n sensors={sensors}\n modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n >\n <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n <Box className={cx(classes.root, className)} {...others}>\n {_header}\n <Stack spacing={spacing}>\n {items}\n {_addButton}\n {_error}\n </Stack>\n </Box>\n </SortableContext>\n </DndContext>\n );\n};\n"],"names":["AddSize16Px","DndContext","KeyboardSensor","PointerSensor","useSensor","useSensors","restrictToParentElement","restrictToVerticalAxis","SortableContext","sortableKeyboardCoordinates","verticalListSortingStrategy","Box","Group","Input","Stack","Tooltip","useComponentDefaultProps","useDidUpdate","Button","useStyles","CollectionItem","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","getItemId","id","Collection","props","allowAdd","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","name","classes","cx","sensors","coordinateGetter","hasOnlyOneItem","length","JSON","stringify","isRequired","_label","Label","_description","Description","_error","Error","_header","standardizedItems","map","item","index","String","data","items","onRemove","removable","addAllowed","_addButton","variant","leftIcon","height","onClick","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","onDragEnd","modifiers","strategy","root"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';\nimport {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';\nimport {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';\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} from 'react';\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 getItemId: ({id}: any) => id,\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 sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n }),\n );\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 standardizedItems = value.map((item, index) => ({id: getItemId?.(item) ?? String(index), data: item}));\n\n const items = standardizedItems.map((item, index) => (\n <CollectionItem\n key={item.id}\n id={item.id}\n disabled={disabled}\n draggable={draggable}\n onRemove={() => onRemoveItem?.(index)}\n styles={styles}\n removable={!(required && hasOnlyOneItem)}\n >\n {children(item.data, 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 const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);\n\n const handleDragEnd = ({over, active}: DragEndEvent): void => {\n if (over) {\n const activeIndex = getIndex(String(active.id));\n const overIndex = getIndex(String(over.id));\n if (activeIndex !== overIndex) {\n onReorderItem?.({from: activeIndex, to: overIndex});\n }\n }\n };\n\n return (\n <DndContext\n onDragEnd={handleDragEnd}\n sensors={sensors}\n modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n >\n <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n <Box className={cx(classes.root, className)} {...others}>\n {_header}\n <Stack spacing={spacing}>\n {items}\n {_addButton}\n {_error}\n </Stack>\n </Box>\n </SortableContext>\n </DndContext>\n );\n};\n"],"names":["AddSize16Px","DndContext","KeyboardSensor","PointerSensor","useSensor","useSensors","restrictToParentElement","restrictToVerticalAxis","SortableContext","sortableKeyboardCoordinates","verticalListSortingStrategy","Box","Group","Input","Stack","Tooltip","useComponentDefaultProps","useDidUpdate","Button","useStyles","CollectionItem","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","getItemId","id","Collection","props","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","classes","cx","name","sensors","coordinateGetter","hasOnlyOneItem","length","JSON","stringify","isRequired","_label","Label","_description","Description","_error","Error","_header","standardizedItems","map","item","index","String","data","items","onRemove","removable","addAllowed","_addButton","variant","leftIcon","height","onClick","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","onDragEnd","modifiers","strategy","root"],"mappings":"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"}
|
|
@@ -1,21 +1,19 @@
|
|
|
1
|
-
import { createStyles } from
|
|
2
|
-
export default createStyles(
|
|
3
|
-
return {
|
|
1
|
+
import { createStyles } from '@mantine/core';
|
|
2
|
+
export default createStyles((theme)=>({
|
|
4
3
|
root: {
|
|
5
|
-
position:
|
|
4
|
+
position: 'relative'
|
|
6
5
|
},
|
|
7
6
|
item: {
|
|
8
|
-
backgroundColor: theme.colorScheme ===
|
|
9
|
-
alignItems:
|
|
7
|
+
backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,
|
|
8
|
+
alignItems: 'baseline'
|
|
10
9
|
},
|
|
11
10
|
itemDragging: {
|
|
12
11
|
boxShadow: theme.shadows.md,
|
|
13
12
|
zIndex: 2
|
|
14
13
|
},
|
|
15
14
|
dragHandle: {
|
|
16
|
-
cursor:
|
|
15
|
+
cursor: 'move'
|
|
17
16
|
}
|
|
18
|
-
};
|
|
19
|
-
});
|
|
17
|
+
}));
|
|
20
18
|
|
|
21
19
|
//# sourceMappingURL=Collection.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/collection/Collection.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface CollectionStylesParams {}\n\nexport default createStyles((theme) => ({\n root: {\n position: 'relative',\n },\n item: {\n backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n alignItems: 'baseline',\n },\n itemDragging: {\n boxShadow: theme.shadows.md,\n zIndex: 2,\n },\n dragHandle: {\n cursor: 'move',\n },\n}));\n"],"names":["createStyles","theme","root","position","item","backgroundColor","colorScheme","white","black","alignItems","itemDragging","boxShadow","shadows","md","zIndex","dragHandle","cursor"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAI3C,eAAeA,aAAa,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/collection/Collection.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface CollectionStylesParams {}\n\nexport default createStyles((theme) => ({\n root: {\n position: 'relative',\n },\n item: {\n backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n alignItems: 'baseline',\n },\n itemDragging: {\n boxShadow: theme.shadows.md,\n zIndex: 2,\n },\n dragHandle: {\n cursor: 'move',\n },\n}));\n"],"names":["createStyles","theme","root","position","item","backgroundColor","colorScheme","white","black","alignItems","itemDragging","boxShadow","shadows","md","zIndex","dragHandle","cursor"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAI3C,eAAeA,aAAa,CAACC,QAAW,CAAA;QACpCC,MAAM;YACFC,UAAU;QACd;QACAC,MAAM;YACFC,iBAAiBJ,MAAMK,WAAW,KAAK,UAAUL,MAAMM,KAAK,GAAGN,MAAMO,KAAK;YAC1EC,YAAY;QAChB;QACAC,cAAc;YACVC,WAAWV,MAAMW,OAAO,CAACC,EAAE;YAC3BC,QAAQ;QACZ;QACAC,YAAY;YACRC,QAAQ;QACZ;IACJ,CAAA,GAAI"}
|
|
@@ -1,18 +1,12 @@
|
|
|
1
|
-
import { _ as _define_property } from "@swc/helpers/_/_define_property";
|
|
2
|
-
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
3
|
-
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
|
|
4
|
-
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
|
|
5
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
|
-
import { DragAndDropSize24Px, RemoveSize16Px } from
|
|
7
|
-
import { useSortable } from
|
|
8
|
-
import { CSS } from
|
|
9
|
-
import { ActionIcon, Group } from
|
|
10
|
-
import useStyles from
|
|
11
|
-
|
|
12
|
-
var onClick = param.onClick;
|
|
13
|
-
return /*#__PURE__*/ _jsx(ActionIcon, {
|
|
2
|
+
import { DragAndDropSize24Px, RemoveSize16Px } from '@coveord/plasma-react-icons';
|
|
3
|
+
import { useSortable } from '@dnd-kit/sortable';
|
|
4
|
+
import { CSS } from '@dnd-kit/utilities';
|
|
5
|
+
import { ActionIcon, Group } from '@mantine/core';
|
|
6
|
+
import useStyles from './Collection.styles';
|
|
7
|
+
const RemoveButton = ({ onClick })=>/*#__PURE__*/ _jsx(ActionIcon, {
|
|
14
8
|
sx: {
|
|
15
|
-
alignSelf:
|
|
9
|
+
alignSelf: 'center'
|
|
16
10
|
},
|
|
17
11
|
variant: "subtle",
|
|
18
12
|
onClick: onClick,
|
|
@@ -21,21 +15,17 @@ var RemoveButton = function(param) {
|
|
|
21
15
|
height: 16
|
|
22
16
|
})
|
|
23
17
|
});
|
|
24
|
-
|
|
25
|
-
var RemoveButtonPlaceholder = function() {
|
|
26
|
-
return /*#__PURE__*/ _jsx("div", {
|
|
18
|
+
const RemoveButtonPlaceholder = ()=>/*#__PURE__*/ _jsx("div", {
|
|
27
19
|
style: {
|
|
28
20
|
width: 28
|
|
29
21
|
}
|
|
30
22
|
});
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}), classes = _useStyles.classes, cx = _useStyles.cx;
|
|
38
|
-
var removeButton = removable && onRemove ? /*#__PURE__*/ _jsx(RemoveButton, {
|
|
23
|
+
const StaticCollectionItem = ({ onRemove, removable = true, styles, children })=>{
|
|
24
|
+
const { classes, cx } = useStyles(null, {
|
|
25
|
+
name: 'Collection',
|
|
26
|
+
styles
|
|
27
|
+
});
|
|
28
|
+
const removeButton = removable && onRemove ? /*#__PURE__*/ _jsx(RemoveButton, {
|
|
39
29
|
onClick: onRemove
|
|
40
30
|
}) : /*#__PURE__*/ _jsx(RemoveButtonPlaceholder, {});
|
|
41
31
|
return /*#__PURE__*/ _jsxs(Group, {
|
|
@@ -46,62 +36,65 @@ var StaticCollectionItem = function(param) {
|
|
|
46
36
|
]
|
|
47
37
|
});
|
|
48
38
|
};
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}), classes = _useStyles.classes, cx = _useStyles.cx;
|
|
39
|
+
const DisabledCollectionItem = ({ children, styles })=>{
|
|
40
|
+
const { classes, cx } = useStyles(null, {
|
|
41
|
+
name: 'Collection',
|
|
42
|
+
styles
|
|
43
|
+
});
|
|
55
44
|
return /*#__PURE__*/ _jsx(Group, {
|
|
56
45
|
className: cx(classes.item),
|
|
57
46
|
children: children
|
|
58
47
|
});
|
|
59
48
|
};
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
var removeButton = removable && onRemove ? /*#__PURE__*/ _jsx(RemoveButton, {
|
|
49
|
+
const DraggableCollectionItem = ({ id, onRemove, removable = true, styles, children })=>{
|
|
50
|
+
const { classes, cx } = useStyles(null, {
|
|
51
|
+
name: 'Collection',
|
|
52
|
+
styles
|
|
53
|
+
});
|
|
54
|
+
const removeButton = removable && onRemove ? /*#__PURE__*/ _jsx(RemoveButton, {
|
|
67
55
|
onClick: onRemove
|
|
68
56
|
}) : null;
|
|
69
|
-
|
|
70
|
-
id
|
|
71
|
-
})
|
|
57
|
+
const { attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef } = useSortable({
|
|
58
|
+
id
|
|
59
|
+
});
|
|
72
60
|
return /*#__PURE__*/ _jsxs(Group, {
|
|
73
61
|
ref: setNodeRef,
|
|
74
|
-
className: cx(classes.item,
|
|
62
|
+
className: cx(classes.item, {
|
|
63
|
+
[classes.itemDragging]: isDragging
|
|
64
|
+
}),
|
|
75
65
|
sx: transform ? {
|
|
76
66
|
transform: CSS.Transform.toString(transform),
|
|
77
|
-
transition
|
|
67
|
+
transition
|
|
78
68
|
} : undefined,
|
|
79
69
|
children: [
|
|
80
|
-
/*#__PURE__*/ _jsx("div",
|
|
81
|
-
ref: setActivatorNodeRef
|
|
82
|
-
|
|
70
|
+
/*#__PURE__*/ _jsx("div", {
|
|
71
|
+
ref: setActivatorNodeRef,
|
|
72
|
+
...listeners,
|
|
73
|
+
...attributes,
|
|
83
74
|
className: classes.dragHandle,
|
|
84
75
|
children: /*#__PURE__*/ _jsx(DragAndDropSize24Px, {
|
|
85
76
|
height: 16
|
|
86
77
|
})
|
|
87
|
-
})
|
|
78
|
+
}),
|
|
88
79
|
children,
|
|
89
80
|
removeButton
|
|
90
81
|
]
|
|
91
82
|
});
|
|
92
83
|
};
|
|
93
|
-
export
|
|
94
|
-
var draggable = _param.draggable, disabled = _param.disabled, otherProps = _object_without_properties(_param, [
|
|
95
|
-
"draggable",
|
|
96
|
-
"disabled"
|
|
97
|
-
]);
|
|
84
|
+
export const CollectionItem = ({ draggable, disabled, ...otherProps })=>{
|
|
98
85
|
if (disabled) {
|
|
99
|
-
return /*#__PURE__*/ _jsx(DisabledCollectionItem,
|
|
86
|
+
return /*#__PURE__*/ _jsx(DisabledCollectionItem, {
|
|
87
|
+
...otherProps
|
|
88
|
+
});
|
|
100
89
|
}
|
|
101
90
|
if (draggable) {
|
|
102
|
-
return /*#__PURE__*/ _jsx(DraggableCollectionItem,
|
|
91
|
+
return /*#__PURE__*/ _jsx(DraggableCollectionItem, {
|
|
92
|
+
...otherProps
|
|
93
|
+
});
|
|
103
94
|
}
|
|
104
|
-
return /*#__PURE__*/ _jsx(StaticCollectionItem,
|
|
95
|
+
return /*#__PURE__*/ _jsx(StaticCollectionItem, {
|
|
96
|
+
...otherProps
|
|
97
|
+
});
|
|
105
98
|
};
|
|
106
99
|
|
|
107
100
|
//# sourceMappingURL=CollectionItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize24Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\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 id: string;\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 id,\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 const {attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef} = useSortable({\n id,\n });\n\n return (\n <Group\n ref={setNodeRef}\n className={cx(classes.item, {[classes.itemDragging]: isDragging})}\n sx={\n transform\n ? {\n transform: CSS.Transform.toString(transform),\n transition,\n }\n : undefined\n }\n >\n <div ref={setActivatorNodeRef} {...listeners} {...attributes} className={classes.dragHandle}>\n <DragAndDropSize24Px height={16} />\n </div>\n {children}\n {removeButton}\n </Group>\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":["DragAndDropSize24Px","RemoveSize16Px","useSortable","CSS","ActionIcon","Group","useStyles","RemoveButton","onClick","sx","alignSelf","variant","color","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize24Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\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 id: string;\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 id,\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 const {attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef} = useSortable({\n id,\n });\n\n return (\n <Group\n ref={setNodeRef}\n className={cx(classes.item, {[classes.itemDragging]: isDragging})}\n sx={\n transform\n ? {\n transform: CSS.Transform.toString(transform),\n transition,\n }\n : undefined\n }\n >\n <div ref={setActivatorNodeRef} {...listeners} {...attributes} className={classes.dragHandle}>\n <DragAndDropSize24Px height={16} />\n </div>\n {children}\n {removeButton}\n </Group>\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":["DragAndDropSize24Px","RemoveSize16Px","useSortable","CSS","ActionIcon","Group","useStyles","RemoveButton","onClick","sx","alignSelf","variant","color","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","classes","cx","name","removeButton","className","item","DisabledCollectionItem","DraggableCollectionItem","id","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","ref","itemDragging","Transform","toString","undefined","dragHandle","CollectionItem","draggable","disabled","otherProps"],"mappings":";AAAA,SAAQA,mBAAmB,EAAEC,cAAc,QAAO,8BAA8B;AAChF,SAAQC,WAAW,QAAO,oBAAoB;AAC9C,SAAQC,GAAG,QAAO,qBAAqB;AACvC,SAAQC,UAAU,EAAgBC,KAAK,QAAkB,gBAAgB;AAGzE,OAAOC,eAAe,sBAAsB;AAa5C,MAAMC,eAED,CAAC,EAACC,OAAO,EAAC,iBACX,KAACJ;QAAWK,IAAI;YAACC,WAAW;QAAQ;QAAGC,SAAQ;QAASH,SAASA;QAASI,OAAM;kBAC5E,cAAA,KAACX;YAAeY,QAAQ;;;AAIhC,MAAMC,0BAA0B,kBAAM,KAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;AAE5D,MAAMC,uBAAwF,CAAC,EAC3FC,QAAQ,EACRC,YAAY,IAAI,EAChBC,MAAM,EACNC,QAAQ,EACX;IACG,MAAM,EAACC,OAAO,EAAEC,EAAE,EAAC,GAAGlB,UAAU,MAAM;QAACmB,MAAM;QAAcJ;IAAM;IACjE,MAAMK,eAAeN,aAAaD,yBAAW,KAACZ;QAAaC,SAASW;uBAAe,KAACL;IAEpF,qBACI,MAACT;QAAMsB,WAAWH,GAAGD,QAAQK,IAAI;;YAC5BN;YACAI;;;AAGb;AAEA,MAAMG,yBAA0F,CAAC,EAC7FP,QAAQ,EACRD,MAAM,EACT;IACG,MAAM,EAACE,OAAO,EAAEC,EAAE,EAAC,GAAGlB,UAAU,MAAM;QAACmB,MAAM;QAAcJ;IAAM;IACjE,qBAAO,KAAChB;QAAMsB,WAAWH,GAAGD,QAAQK,IAAI;kBAAIN;;AAChD;AAEA,MAAMQ,0BAA2F,CAAC,EAC9FC,EAAE,EACFZ,QAAQ,EACRC,YAAY,IAAI,EAChBC,MAAM,EACNC,QAAQ,EACX;IACG,MAAM,EAACC,OAAO,EAAEC,EAAE,EAAC,GAAGlB,UAAU,MAAM;QAACmB,MAAM;QAAcJ;IAAM;IACjE,MAAMK,eAAeN,aAAaD,yBAAW,KAACZ;QAAaC,SAASW;SAAe;IACnF,MAAM,EAACa,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,UAAU,EAAEC,mBAAmB,EAAC,GAAGpC,YAAY;QAC5G6B;IACJ;IAEA,qBACI,MAAC1B;QACGkC,KAAKL;QACLP,WAAWH,GAAGD,QAAQK,IAAI,EAAE;YAAC,CAACL,QAAQiB,YAAY,CAAC,EAAEH;QAAU;QAC/D5B,IACI0B,YACM;YACIA,WAAWhC,IAAIsC,SAAS,CAACC,QAAQ,CAACP;YAClCC;QACJ,IACAO;;0BAGV,KAAC5B;gBAAIwB,KAAKD;gBAAsB,GAAGL,SAAS;gBAAG,GAAGD,UAAU;gBAAEL,WAAWJ,QAAQqB,UAAU;0BACvF,cAAA,KAAC5C;oBAAoBa,QAAQ;;;YAEhCS;YACAI;;;AAGb;AAEA,OAAO,MAAMmB,iBAA4E,CAAC,EACtFC,SAAS,EACTC,QAAQ,EACR,GAAGC,YACN;IACG,IAAID,UAAU;QACV,qBAAO,KAAClB;YAAwB,GAAGmB,UAAU;;IACjD;IACA,IAAIF,WAAW;QACX,qBAAO,KAAChB;YAAyB,GAAGkB,UAAU;;IAClD;IACA,qBAAO,KAAC9B;QAAsB,GAAG8B,UAAU;;AAC/C,EAAE"}
|
|
@@ -1,30 +1,21 @@
|
|
|
1
|
-
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
2
|
-
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
|
|
3
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
-
import { CheckSize16Px, CopySize16Px } from
|
|
5
|
-
import { ActionIcon, CopyButton, createStyles, TextInput, Tooltip } from
|
|
6
|
-
|
|
7
|
-
return {
|
|
2
|
+
import { CheckSize16Px, CopySize16Px } from '@coveord/plasma-react-icons';
|
|
3
|
+
import { ActionIcon, CopyButton, createStyles, TextInput, Tooltip } from '@mantine/core';
|
|
4
|
+
const useStyles = createStyles((theme)=>({
|
|
8
5
|
input: {
|
|
9
6
|
color: theme.colors.gray[7]
|
|
10
7
|
}
|
|
11
|
-
};
|
|
12
|
-
})
|
|
13
|
-
var CopyToClipboardButton = function(param) {
|
|
14
|
-
var value = param.value, onCopy = param.onCopy;
|
|
15
|
-
return /*#__PURE__*/ _jsx(CopyButton, {
|
|
8
|
+
}));
|
|
9
|
+
const CopyToClipboardButton = ({ value, onCopy })=>/*#__PURE__*/ _jsx(CopyButton, {
|
|
16
10
|
value: value,
|
|
17
11
|
timeout: 2000,
|
|
18
|
-
children:
|
|
19
|
-
|
|
20
|
-
return /*#__PURE__*/ _jsx(Tooltip, {
|
|
21
|
-
label: copied ? "Copied" : "Copy",
|
|
12
|
+
children: ({ copied, copy })=>/*#__PURE__*/ _jsx(Tooltip, {
|
|
13
|
+
label: copied ? 'Copied' : 'Copy',
|
|
22
14
|
children: /*#__PURE__*/ _jsx(ActionIcon, {
|
|
23
|
-
color: copied ?
|
|
24
|
-
onClick:
|
|
25
|
-
var _onCopy;
|
|
15
|
+
color: copied ? 'success' : 'gray',
|
|
16
|
+
onClick: ()=>{
|
|
26
17
|
copy();
|
|
27
|
-
|
|
18
|
+
onCopy?.();
|
|
28
19
|
},
|
|
29
20
|
children: copied ? /*#__PURE__*/ _jsx(CheckSize16Px, {
|
|
30
21
|
height: 16
|
|
@@ -32,15 +23,10 @@ var CopyToClipboardButton = function(param) {
|
|
|
32
23
|
height: 16
|
|
33
24
|
})
|
|
34
25
|
})
|
|
35
|
-
})
|
|
36
|
-
}
|
|
26
|
+
})
|
|
37
27
|
});
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
var withLabel = _param.withLabel, others = _object_without_properties(_param, [
|
|
41
|
-
"withLabel"
|
|
42
|
-
]);
|
|
43
|
-
var classes = useStyles().classes;
|
|
28
|
+
export const CopyToClipboard = ({ withLabel, ...others })=>{
|
|
29
|
+
const { classes } = useStyles();
|
|
44
30
|
return withLabel ? /*#__PURE__*/ _jsx(TextInput, {
|
|
45
31
|
classNames: {
|
|
46
32
|
input: classes.input
|
|
@@ -48,8 +34,12 @@ export var CopyToClipboard = function(_param) {
|
|
|
48
34
|
value: others.value,
|
|
49
35
|
readOnly: true,
|
|
50
36
|
autoComplete: "off",
|
|
51
|
-
rightSection: /*#__PURE__*/ _jsx(CopyToClipboardButton,
|
|
52
|
-
|
|
37
|
+
rightSection: /*#__PURE__*/ _jsx(CopyToClipboardButton, {
|
|
38
|
+
...others
|
|
39
|
+
})
|
|
40
|
+
}) : /*#__PURE__*/ _jsx(CopyToClipboardButton, {
|
|
41
|
+
...others
|
|
42
|
+
});
|
|
53
43
|
};
|
|
54
44
|
|
|
55
45
|
//# sourceMappingURL=CopyToClipboard.js.map
|