@evoke-platform/ui-components 1.0.0-dev.195 → 1.0.0-dev.197

package/dist/published/components/custom/MultiSelect/MultiSelect.d.ts

@@ -5,6 +5,7 @@ export declare type DropdownOption = {
     value: boolean;
     disabled?: boolean;
     tooltip?: string;
+    deleted?: boolean;
 };
 export declare type MultiSelectProps = {
     options: DropdownOption[];

package/dist/published/components/custom/MultiSelect/MultiSelect.js

@@ -7,7 +7,7 @@ import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, us
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { restrictToVerticalAxis, restrictToWindowEdges } from '@dnd-kit/modifiers';
 import { SortableItem } from './SortableItem';
-import { Tooltip } from '../../core';
+import { Link, Tooltip } from '../../core';
 const styles = {
     textField: {
         borderRadius: '8px',
@@ -51,6 +51,7 @@ export default function MultiSelect(props) {
     const [optionsArray, setOptions] = useState(options);
     const [selectAll, setSelectAll] = useState(false);
     const [searchText, setSearchText] = useState('');
+    const [deletedOptions] = useState(options.filter((opt) => opt.deleted).map((opt) => { var _a; return (_a = opt.id) !== null && _a !== void 0 ? _a : ''; }));
     const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
         coordinateGetter: sortableKeyboardCoordinates,
     }), useSensor(PointerSensor, {
@@ -96,6 +97,16 @@ export default function MultiSelect(props) {
         updateOptions(false);
         setSelectAll(false);
     };
+    const handleDeletedOptions = (event) => {
+        const newOptions = optionsArray.map((option) => {
+            if (option.id && deletedOptions.includes(option.id)) {
+                option.value = false;
+            }
+            return option;
+        });
+        onChange(newOptions);
+        setOptions(newOptions);
+    };
     const filterItems = (event) => {
         setSearchText(event.target.value);
         const keyword = event.target.value.toLowerCase();
@@ -137,12 +148,19 @@ export default function MultiSelect(props) {
                         startAdornment: (React.createElement(InputAdornment, { position: "start" },
                             React.createElement(Search, null))),
                     }, fullWidth: true, sx: styles.textField, value: searchText, onChange: filterItems }))),
-            (optionsArray === null || optionsArray === void 0 ? void 0 : optionsArray.length) > 1 && (React.createElement(Grid, { container: true },
-                React.createElement(Grid, null,
-                    React.createElement(Button, { sx: styles.button, variant: "text", onClick: (e) => handleSelectAllChange(e), disabled: optionsArray.every((option) => option.disabled === true || selectAll) }, "Select All")),
-                React.createElement(Grid, { item: true, xs: 6 },
-                    React.createElement(Button, { sx: Object.assign({}, styles.button), variant: "text", onClick: (e) => handleClearAll(e), disabled: optionsArray.every((option) => option.disabled === true) ||
-                            optionsArray.every((option) => option.value === false) }, "Clear All")))),
+            (optionsArray === null || optionsArray === void 0 ? void 0 : optionsArray.length) ? (React.createElement(Grid, { container: true },
+                deletedOptions.length ? (React.createElement(Grid, { item: true, xs: 6, sx: { display: 'flex', justifyContent: 'start', textAlign: 'center' } },
+                    React.createElement(Link, { sx: {
+                            color: 'red',
+                            '&:hover': { backgroundColor: 'transparent', cursor: 'pointer' },
+                            textDecoration: 'none',
+                            margin: '8px',
+                        }, onClick: (e) => handleDeletedOptions(e) }, `Clear ${deletedOptions.length} deleted fields`))) : (React.createElement(React.Fragment, null)),
+                React.createElement(Grid, { item: true, xs: 3 },
+                    React.createElement(Button, { sx: Object.assign(Object.assign({}, styles.button), { fontWeight: 'bold' }), variant: "text", onClick: (e) => handleSelectAllChange(e), disabled: optionsArray.every((option) => option.disabled === true || selectAll) }, "Select All")),
+                React.createElement(Grid, { item: true, xs: 3 },
+                    React.createElement(Button, { sx: Object.assign(Object.assign({}, styles.button), { color: 'gray', fontWeight: 'bold' }), variant: "text", onClick: (e) => handleClearAll(e), disabled: optionsArray.every((option) => option.disabled === true) ||
+                            optionsArray.every((option) => option.value === false) }, "Clear All")))) : (React.createElement(React.Fragment, null)),
             React.createElement(Box, { sx: Object.assign(Object.assign({}, styles.list), { maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : 'auto' }) }, isSortable ? (React.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, modifiers: [restrictToVerticalAxis, restrictToWindowEdges] },
                 React.createElement(SortableContext, { items: optionsArray, strategy: verticalListSortingStrategy }, optionsArray.map((option) => {
                     var _a, _b;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.195",
+    "version": "1.0.0-dev.197",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",