@uxf/ui 10.8.1 → 10.8.2

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.
Files changed (8) hide show
  1. package/_file-input-base/file-input-base.d.ts +1 -1
  2. package/_file-input-base/file-input-base.js +0 -3
  3. package/dropzone/dropzone-input.d.ts +1 -1
  4. package/file-input/file-input.js +11 -2
  5. package/multi-combobox/_multi-combobox-base.js +7 -3
  6. package/package.json +1 -1
  7. package/utils/mocks/upload-file.mock.d.ts +1 -1
  8. package/utils/mocks/upload-file.mock.js +30 -33
package/_file-input-base/file-input-base.d.ts CHANGED
@@ -8,6 +8,6 @@ export interface FileInputBaseProps extends FormControlProps<FileResponse | null
8
8
  id?: string;
9
9
  maxFileSize?: number;
10
10
  onUploadError?: (err: unknown) => void;
11
- onUploadFile: (file: File | undefined) => Promise<FileResponse | null>;
11
+ onUploadFile: (file: File) => Promise<FileResponse>;
12
12
  }
13
13
  export declare const _FileInputBase: React.ForwardRefExoticComponent<FileInputBaseProps & React.RefAttributes<HTMLInputElement>>;
package/_file-input-base/file-input-base.js CHANGED
@@ -42,9 +42,6 @@ exports._FileInputBase = (0, react_1.forwardRef)((props, ref) => {
42
42
  (_b = props.onUploadError) === null || _b === void 0 ? void 0 : _b.call(props, err);
43
43
  }
44
44
  }
45
- else {
46
- props.onChange(null, e);
47
- }
48
45
  };
49
46
  return (react_1.default.createElement("input", { accept: props.accept, "aria-invalid": props.isInvalid, "aria-describedby": props["aria-describedby"], className: props.className, disabled: props.isDisabled, form: props.form, id: props.id, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, readOnly: props.isReadOnly, ref: ref, required: props.isRequired, tabIndex: props.isDisabled ? -1 : undefined, type: "file" }));
50
47
  });
package/dropzone/dropzone-input.d.ts CHANGED
@@ -15,6 +15,6 @@ export interface DropzoneInputProps extends FormControlProps<DropzoneFile[] | un
15
15
  noClick?: boolean;
16
16
  noDrag?: boolean;
17
17
  onUploadError?: (err: unknown) => void;
18
- onUploadFile: (file: File | undefined, options?: UploadOptions) => Promise<FileResponse | null>;
18
+ onUploadFile: (file: File, options?: UploadOptions) => Promise<FileResponse>;
19
19
  }
20
20
  export declare const DropzoneInput: React.ForwardRefExoticComponent<DropzoneInputProps & React.RefAttributes<HTMLDivElement>>;
package/file-input/file-input.js CHANGED
@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
26
26
  exports.FileInput = void 0;
27
27
  const classes_1 = require("@uxf/core/constants/classes");
28
28
  const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
29
+ const composeRefs_1 = require("@uxf/core/utils/composeRefs");
29
30
  const cx_1 = require("@uxf/core/utils/cx");
30
31
  const context_1 = require("@uxf/ui/context");
31
32
  const input_1 = require("@uxf/ui/input");
@@ -51,13 +52,21 @@ exports.FileInput = (0, react_1.forwardRef)((props, ref) => {
51
52
  setIsUploading(false);
52
53
  return response;
53
54
  };
55
+ const onChange = (value, event) => {
56
+ const inputNode = innerRef.current;
57
+ // this ensures that the input is cleared after the upload, so there is no problem with uploading the same file again
58
+ if (!value && inputNode) {
59
+ inputNode.value = "";
60
+ }
61
+ props.onChange(value, event);
62
+ };
54
63
  return (react_1.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(input.focused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label, hiddenLabel: props.hiddenLabel },
55
64
  react_1.default.createElement(react_1.default.Fragment, null,
56
- react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: `uxf-file-input__input ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, form: props.form, id: id, isDisabled: props.isDisabled || isUploading, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onChange: props.onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: onUploadFile, ref: ref, value: props.value }),
65
+ react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: `uxf-file-input__input ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, form: props.form, id: id, isDisabled: props.isDisabled || isUploading, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onChange: onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: onUploadFile, ref: (0, composeRefs_1.composeRefs)(ref, innerRef), value: props.value }),
57
66
  react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-input", "uxf-file-input__label", input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, isUploading && classes_1.CLASSES.IS_LOADING, isUploading && "uxf-file-input__label--has-right-addon", `uxf-input--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-input--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`), htmlFor: id },
58
67
  react_1.default.createElement("div", { className: "uxf-input__left-addon uxf-file-input__label__button" }, !isUploading ? ((_d = props.uploadButtonLabel) !== null && _d !== void 0 ? _d : "Vyberte soubor") : (react_1.default.createElement(loader_1.Loader, { className: "uxf-file-input__label__loader", size: "sm" }))),
59
68
  react_1.default.createElement("div", { className: "uxf-file-input__label__wrapper" },
60
69
  (context === null || context === void 0 ? void 0 : context.domain) && props.value ? (react_1.default.createElement("a", { className: "uxf-file-input__label__wrapper__file-name-link", href: (0, get_file_url_1.getFileUrl)(context.domain, props.value), target: "_blank", rel: "noreferrer noopenner" }, fileName)) : (react_1.default.createElement("span", { className: "uxf-file-input__label__wrapper__file-name" }, fileName)),
61
- props.value && !props.isDisabled && !props.isReadOnly && props.isClearable && (react_1.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange })))))));
70
+ props.value && !props.isDisabled && !props.isReadOnly && props.isClearable && (react_1.default.createElement(input_1.Input.RemoveButton, { onChange: onChange })))))));
62
71
  });
63
72
  exports.FileInput.displayName = "UxfUiFileInput";
package/multi-combobox/_multi-combobox-base.js CHANGED
@@ -108,6 +108,11 @@ exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
108
108
  ? (_f = props.allOptionsSelectedMessage) !== null && _f !== void 0 ? _f : "Všechny možnosti jsou již vybrány"
109
109
  : (_g = props.notFoundMessage) !== null && _g !== void 0 ? _g : "Nic nenalezeno";
110
110
  const withoutPopover = !props.withPopover;
111
+ const onBlur = (e) => {
112
+ var _a;
113
+ setQuery("");
114
+ (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
115
+ };
111
116
  return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)(withoutPopover && "uxf-form-component", "uxf-multi-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleComboboxValueChange, value: selectedOptions }, (renderProps) => {
112
117
  var _a, _b;
113
118
  const inputElement = (react_3.default.createElement(react_3.default.Fragment, null,
@@ -116,15 +121,14 @@ exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
116
121
  props.leftElement && react_3.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
117
122
  react_3.default.createElement("div", { className: "uxf-multi-combobox__selected-options" },
118
123
  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))),
119
- react_3.default.createElement(react_2.Combobox.Input, { autoComplete: "off", className: "uxf-multi-combobox__input", onChange: handleInputChange, onKeyDown: handleInputKeyDown, placeholder: props.placeholder, type: "text", value: query })),
124
+ 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 })),
120
125
  props.rightAddon && react_3.default.createElement(input_1.Input.RightAddon, null, props.rightAddon),
121
126
  props.rightElement && react_3.default.createElement(input_1.Input.RightElement, null, props.rightElement),
122
127
  react_3.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select-base__arrow-icon", (props.withPopover ? props.isPopoverOpen : renderProps.open) && classes_1.CLASSES.IS_OPEN), name: iconName })),
123
128
  renderProps.open && (react_3.default.createElement(react_1.FloatingPortal, null,
124
129
  react_3.default.createElement(react_2.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", `uxf-dropdown--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-dropdown--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.refs.setFloating, static: true, style: dropdown.floatingStyles }, filteredData.length > 0 ? (filteredData.map((option) => {
125
130
  var _a, _b, _c, _d;
126
- const label = (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.label;
127
- return (react_3.default.createElement(OptionElement, { option: option, key: (_d = (_c = props.keyExtractor) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.id, label: label, handleCheckboxChange: handleCheckboxChange(option.id), withCheckboxes: props.withCheckboxes, withoutPopover: withoutPopover }));
131
+ return (react_3.default.createElement(OptionElement, { option: option, key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id, label: (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.label, handleCheckboxChange: handleCheckboxChange(option.id), withCheckboxes: props.withCheckboxes, withoutPopover: withoutPopover }));
128
132
  })) : (react_3.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, emptyMessage))))),
129
133
  props.helperText && withoutPopover && (react_3.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: props.errorId }, props.helperText))));
130
134
  return (react_3.default.createElement(react_3.default.Fragment, null, withoutPopover ? (react_3.default.createElement(react_3.default.Fragment, null,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "10.8.1",
3
+ "version": "10.8.2",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/utils/mocks/upload-file.mock.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { FileResponse, UploadOptions } from "@uxf/ui/types";
2
- export declare function uploadFile(file: File | undefined, uploadOptions?: UploadOptions): Promise<FileResponse | null>;
2
+ export declare function uploadFile(file: File, uploadOptions?: UploadOptions): Promise<FileResponse>;
package/utils/mocks/upload-file.mock.js CHANGED
@@ -10,40 +10,37 @@ function getRandomUuid() {
10
10
  .join(""))
11
11
  .join("-");
12
12
  }
13
- async function uploadFile(file, uploadOptions) {
14
- if (file) {
15
- // axios.put("/api/upload", file, { signal: uploadOptions?.abortController?.signal, onUploadProgress: uploadOptions?.onUploadProgress });
16
- return new Promise((resolve) => {
17
- const time = file.size / 100;
18
- const interval = time / 10;
19
- let loaded = 0;
20
- const intervalTimer = window.setInterval(() => {
21
- var _a, _b;
22
- if ((_a = uploadOptions === null || uploadOptions === void 0 ? void 0 : uploadOptions.abortController) === null || _a === void 0 ? void 0 : _a.signal.aborted) {
23
- clearInterval(intervalTimer);
24
- // eslint-disable-next-line @typescript-eslint/no-use-before-define
25
- clearTimeout(timeoutTimer);
26
- return;
27
- }
28
- loaded += (file.size / time) * interval;
29
- (_b = uploadOptions === null || uploadOptions === void 0 ? void 0 : uploadOptions.onUploadProgress) === null || _b === void 0 ? void 0 : _b.call(uploadOptions, {
30
- lengthComputable: true,
31
- loaded,
32
- total: file.size,
33
- });
34
- }, interval);
35
- const timeoutTimer = window.setTimeout(() => {
13
+ function uploadFile(file, uploadOptions) {
14
+ // axios.put("/api/upload", file, { signal: uploadOptions?.abortController?.signal, onUploadProgress: uploadOptions?.onUploadProgress });
15
+ return new Promise((resolve) => {
16
+ const time = file.size / 100;
17
+ const interval = time / 10;
18
+ let loaded = 0;
19
+ const intervalTimer = window.setInterval(() => {
20
+ var _a, _b;
21
+ if ((_a = uploadOptions === null || uploadOptions === void 0 ? void 0 : uploadOptions.abortController) === null || _a === void 0 ? void 0 : _a.signal.aborted) {
36
22
  clearInterval(intervalTimer);
23
+ // eslint-disable-next-line @typescript-eslint/no-use-before-define
37
24
  clearTimeout(timeoutTimer);
38
- resolve({
39
- id: Math.round(Math.random() * 100000000),
40
- uuid: getRandomUuid(),
41
- name: file.name,
42
- extension: file.name.split(".").slice(-1).join(""),
43
- });
44
- }, time);
45
- });
46
- }
47
- return null;
25
+ return;
26
+ }
27
+ loaded += (file.size / time) * interval;
28
+ (_b = uploadOptions === null || uploadOptions === void 0 ? void 0 : uploadOptions.onUploadProgress) === null || _b === void 0 ? void 0 : _b.call(uploadOptions, {
29
+ lengthComputable: true,
30
+ loaded,
31
+ total: file.size,
32
+ });
33
+ }, interval);
34
+ const timeoutTimer = window.setTimeout(() => {
35
+ clearInterval(intervalTimer);
36
+ clearTimeout(timeoutTimer);
37
+ resolve({
38
+ id: Math.round(Math.random() * 100000000),
39
+ uuid: getRandomUuid(),
40
+ name: file.name,
41
+ extension: file.name.split(".").slice(-1).join(""),
42
+ });
43
+ }, time);
44
+ });
48
45
  }
49
46
  exports.uploadFile = uploadFile;