@uxf/ui 11.7.0 → 11.8.1

package/dropzone/dropzone-list.d.ts

@@ -4,8 +4,7 @@ import { DropzoneFile } from "./types";
 export interface DropzoneListProps extends FormControlProps<DropzoneFile[] | undefined> {
     className?: string;
     errorText?: string;
-    onAbortWarning?: string;
-    onRemoveWarning?: string;
+    onRemoveConfirm?: (file: DropzoneFile) => Promise<boolean>;
     renderItem?: (file: DropzoneFile) => ReactNode;
 }
 export declare const DropzoneList: FC<DropzoneListProps>;

package/dropzone/dropzone-list.js

@@ -42,18 +42,25 @@ function formatBytes(bytes, decimals = 2) {
 const DropzoneList = (props) => {
     var _a, _b, _c;
     const context = (0, react_1.useContext)(context_1.UiContext);
-    const onRemove = (file, isUploading) => () => {
+    const handleRemove = (file, value, isUploading) => {
         var _a;
-        // eslint-disable-next-line no-alert
-        if (props.value && isUploading && confirm(props.onAbortWarning || "Do you want to abort the file?")) {
+        if (isUploading) {
             (_a = file.abortController) === null || _a === void 0 ? void 0 : _a.abort();
-            props.onChange(props.value.filter((f) => f.id !== file.id));
+        }
+        props.onChange(value.filter((f) => f.id !== file.id));
+    };
+    const onRemove = (file, isUploading) => () => {
+        if (!props.value) {
             return;
         }
-        // eslint-disable-next-line no-alert
-        if (props.value && !isUploading && confirm(props.onRemoveWarning || "Do you want to delete the file?")) {
-            props.onChange(props.value.filter((f) => f.id !== file.id));
+        if (!props.onRemoveConfirm) {
+            return handleRemove(file, props.value, isUploading);
         }
+        props.onRemoveConfirm(file).then((canRemove) => {
+            if (canRemove && props.value) {
+                return handleRemove(file, props.value, isUploading);
+            }
+        });
     };
     if (((_a = props.value) === null || _a === void 0 ? void 0 : _a.length) === 0) {
         return null;

package/dropzone/dropzone.stories.js

@@ -32,6 +32,7 @@ const upload_file_mock_1 = require("@uxf/ui/utils/mocks/upload-file.mock");
 const react_1 = __importStar(require("react"));
 const get_provider_config_1 = require("../_private-utils/get-provider-config");
 const context_1 = require("../context");
+const message_1 = require("../message");
 const action_1 = require("../utils/action");
 const index_1 = require("./index");
 exports.default = {
@@ -41,15 +42,29 @@ exports.default = {
 function Default() {
     const [files, setFiles] = (0, react_1.useState)([]);
     const onChange = (0, action_1.action)("onChange", setFiles);
+    const onRemoveConfirm = () => {
+        return new Promise((resolve) => {
+            message_1.MessageService.openConfirm({
+                acceptLabel: "Yes, delete",
+                cancelLabel: "Cancel",
+                title: "Do you want to delete the file?",
+                color: "error",
+                variant: "centered",
+                onAccept: () => resolve(true),
+                onCancel: () => resolve(false),
+                CustomIconComponent: null,
+            });
+        });
+    };
     const storyDropzone = (react_1.default.createElement("div", { className: "space-y-2" },
         react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled drag 'n' drop", label: "Use drag and drop or click to upload", noDrag: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
         react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled onClick upload", label: react_1.default.createElement("span", { className: "bg-primary-600 rounded-lg px-4 py-2 font-bold text-white" }, "JSX label"), noClick: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
         react_1.default.createElement(index_1.Dropzone, { accept: { "image/*": [] }, label: "Only images upload", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
         react_1.default.createElement(index_1.Dropzone, { label: "Single file upload", maxFilesCount: 1, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
         react_1.default.createElement(index_1.Dropzone, { isDisabled: true, label: "Disabled dropzone", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
-        react_1.default.createElement(index_1.Dropzone.List, { errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", onAbortWarning: "Opravdu chcete p\u0159eru\u0161it nahr\u00E1v\u00E1n\u00ED?", onChange: onChange, onRemoveWarning: "Opravdu chcete soubor smazat?", value: files }),
-        react_1.default.createElement(index_1.Dropzone.List, { onChange: onChange, value: files, renderItem: (file) => (react_1.default.createElement("li", { key: file.id },
-                react_1.default.createElement("pre", null, JSON.stringify(file, null, 4)))) })));
+        react_1.default.createElement(index_1.Dropzone.List, { errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", onChange: onChange, onRemoveConfirm: onRemoveConfirm, value: files }),
+        react_1.default.createElement(index_1.Dropzone.List, { onChange: onChange, onRemoveConfirm: onRemoveConfirm, renderItem: (file) => (react_1.default.createElement("li", { key: file.id },
+                react_1.default.createElement("pre", null, JSON.stringify(file, null, 4)))), value: files })));
     return (react_1.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() },
         react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
             react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyDropzone),

package/multi-combobox/_multi-combobox-base.js

@@ -121,7 +121,7 @@ exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
                 props.leftAddon && react_3.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
                 props.leftElement && react_3.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
                 react_3.default.createElement("div", { className: "uxf-multi-combobox__selected-options" },
-                    selectedOptions.map((item) => (react_3.default.createElement(chip_1.Chip, { className: "uxf-multi-combobox__input-chip", color: item.color, key: item.id, onClose: item.disabled ? undefined : handleRemove(item.id), size: "large", suppressFocus: true }, item.label))),
+                    selectedOptions.map((item) => (react_3.default.createElement(chip_1.Chip, { className: "uxf-multi-combobox__input-chip", color: item.color, key: item.id, onClose: props.isDisabled || item.disabled ? undefined : handleRemove(item.id), size: "large", suppressFocus: true }, item.label))),
                     react_3.default.createElement(react_2.Combobox.Input, { autoComplete: "off", className: "uxf-multi-combobox__input", onBlur: onBlur, onChange: handleInputChange, onKeyDown: handleInputKeyDown, placeholder: props.placeholder, type: "text", value: query })),
                 props.rightAddon && react_3.default.createElement(input_1.Input.RightAddon, null, props.rightAddon),
                 props.rightElement && react_3.default.createElement(input_1.Input.RightElement, null, props.rightElement),

package/multi-combobox/multi-combobox.stories.js

@@ -60,7 +60,10 @@ function Default() {
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { dropdownPlacement: "top", id: "multi-combobox-7", label: "MultiCombobox with dropdown top", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-8", label: "MultiCombobox with renderOption", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
                 "Option: ",
-                option.label) })));
+                option.label) }),
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-disabled", label: "MultiCombobox disabled", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
+                "Option: ",
+                option.label), isDisabled: true })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyComboboxes),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyComboboxes)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.7.0",
+  "version": "11.8.1",
   "description": "",
   "publishConfig": {
     "access": "public"