@uxf/ui 11.21.0 → 11.21.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.
package/combobox/combobox.d.ts
CHANGED
|
@@ -19,6 +19,7 @@ export interface ComboboxProps<Id = ComboboxValueId, Option = ComboboxOption<Id>
|
|
|
19
19
|
dropdownMaxHeight?: number;
|
|
20
20
|
dropdownPlacement?: Placement;
|
|
21
21
|
dropdownStrategy?: Strategy;
|
|
22
|
+
form?: string;
|
|
22
23
|
helperText?: ReactNode;
|
|
23
24
|
hiddenLabel?: boolean;
|
|
24
25
|
iconName?: keyof IconsSet;
|
package/combobox/combobox.js
CHANGED
|
@@ -41,7 +41,8 @@ const input_1 = require("@uxf/ui/input");
|
|
|
41
41
|
const label_1 = require("@uxf/ui/label");
|
|
42
42
|
const react_3 = __importStar(require("react"));
|
|
43
43
|
function Option(props) {
|
|
44
|
-
|
|
44
|
+
const option = props.option;
|
|
45
|
+
return (react_3.default.createElement(react_2.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-combobox__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: option.disabled, value: option }, (optionState) => { var _a, _b; return react_3.default.createElement(react_3.default.Fragment, null, (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, props.option, optionState.selected)) !== null && _b !== void 0 ? _b : option.label); }));
|
|
45
46
|
}
|
|
46
47
|
Option.displayName = "UxfUiComboboxOption";
|
|
47
48
|
function Options(props) {
|
|
@@ -75,19 +76,17 @@ function Combobox(props) {
|
|
|
75
76
|
const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
|
|
76
77
|
const dropdown = (0, use_dropdown_1.useDropdown)((_f = props.dropdownPlacement) !== null && _f !== void 0 ? _f : "bottom", (_g = props.dropdownMatchesInputWidth) !== null && _g !== void 0 ? _g : true, props.dropdownMaxHeight, props.dropdownStrategy);
|
|
77
78
|
const stableRef = (0, react_3.useMemo)(() => (0, compose_refs_1.composeRefs)(innerRef, props.inputGroupRef, dropdown.refs.setReference), [dropdown.refs.setReference, props.inputGroupRef]);
|
|
78
|
-
|
|
79
|
+
const isNotInteractive = props.isDisabled || props.isReadOnly;
|
|
80
|
+
return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-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), "data-name": props.name, disabled: isNotInteractive, form: props.form, name: props.name, onChange: onChange, style: props.style, value: selectedOption }, (renderProps) => (react_3.default.createElement(react_3.default.Fragment, null,
|
|
79
81
|
react_3.default.createElement("div", { className: "uxf-form-component__label" },
|
|
80
|
-
react_3.default.createElement(react_2.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick:
|
|
82
|
+
react_3.default.createElement(react_2.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: isNotInteractive ? undefined : input.focus }, props.label)),
|
|
81
83
|
react_3.default.createElement("div", { className: "uxf-form-component__input" },
|
|
82
84
|
react_3.default.createElement(react_2.Combobox.Button, { as: input_1.Input, "aria-invalid": props.isInvalid, "aria-describedby": errorId, className: (0, cx_1.cx)("uxf-combobox__button", dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), customInputElementDisplayName: react_2.Combobox.Input.displayName, inputFocus: input, inputGroupRef: stableRef, inputWrapperRef: props.inputWrapperRef, isDisabled: props.isDisabled, isFocused: renderProps.open, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, ref: props.inputRef, size: props.size, variant: props.variant },
|
|
83
85
|
props.leftAddon && react_3.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
|
|
84
86
|
props.leftElement && react_3.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
|
|
85
87
|
react_3.default.createElement(react_2.Combobox.Input, { autoComplete: "off", className: "uxf-input__element", displayValue: displayValue, onBlur: props.onBlur, onChange: onInputChange, placeholder: props.placeholder, type: "text" }),
|
|
86
88
|
react_3.default.createElement(input_1.Input.RightElement, null,
|
|
87
|
-
react_3.default.createElement(show_1.Show, { when: Boolean(props.isClearable) &&
|
|
88
|
-
(0, is_not_nil_1.isNotNil)(selectedOption) &&
|
|
89
|
-
!props.isDisabled &&
|
|
90
|
-
!props.isReadOnly },
|
|
89
|
+
react_3.default.createElement(show_1.Show, { when: Boolean(props.isClearable) && (0, is_not_nil_1.isNotNil)(selectedOption) && !isNotInteractive },
|
|
91
90
|
react_3.default.createElement(input_1.Input.RemoveButton, { onChange: onChange })),
|
|
92
91
|
props.inputArrow ? (react_3.default.createElement(react_2.Combobox.Button, null, props.inputArrow(renderProps.open))) : (react_3.default.createElement(input_1.Input.ArrowIcon, { iconName: props.iconName, isOpen: renderProps.open }))),
|
|
93
92
|
props.rightAddon && react_3.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),
|
|
@@ -66,7 +66,7 @@ function Default() {
|
|
|
66
66
|
react_1.default.createElement(index_1.Dropzone, { isDisabled: true, label: "Disabled dropzone", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-disabled" }),
|
|
67
67
|
react_1.default.createElement(index_1.Dropzone.List, { errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", onChange: onChange, onRemoveConfirm: onRemoveConfirm, value: files, name: "dropzone-error-message" }),
|
|
68
68
|
react_1.default.createElement(index_1.Dropzone.List, { onChange: onChange, onRemoveConfirm: onRemoveConfirm, renderItem: (file) => (react_1.default.createElement("li", { key: file.id },
|
|
69
|
-
react_1.default.createElement("pre",
|
|
69
|
+
react_1.default.createElement("pre", { className: "text-wrap" }, JSON.stringify(file, null, 4)))), value: files, name: "dropzone-list" })));
|
|
70
70
|
}
|
|
71
71
|
exports.Default = Default;
|
|
72
72
|
function ComponentStructure() {
|
|
@@ -56,15 +56,15 @@ function handleInputKeyDownRecursion(selectedOptions, onRemove) {
|
|
|
56
56
|
}
|
|
57
57
|
function Option(props) {
|
|
58
58
|
const option = props.option;
|
|
59
|
-
return (react_3.default.createElement(react_2.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-multi-combobox__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: option.disabled, value: option }, (optionState) => (react_3.default.createElement(react_3.default.Fragment, null, props.withCheckboxes ? (react_3.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: props.label, onChange: props.handleCheckboxChange, value: optionState.selected
|
|
59
|
+
return (react_3.default.createElement(react_2.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-multi-combobox__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: option.disabled, value: option }, (optionState) => (react_3.default.createElement(react_3.default.Fragment, null, props.withCheckboxes ? (react_3.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: props.label, name: option.id.toString(), onChange: props.handleCheckboxChange, value: optionState.selected })) : (props.label)))));
|
|
60
60
|
}
|
|
61
61
|
Option.displayName = "UxfUiMultiComboboxOption";
|
|
62
62
|
function Options(props) {
|
|
63
63
|
var _a, _b;
|
|
64
64
|
return (react_3.default.createElement(react_2.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown uxf-multi-combobox__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"}`, props.matchWidth ? "uxf-dropdown--match-width" : "uxf-dropdown--not-match-width", props.placement === "bottom" && "uxf-dropdown--bottom", props.placement === "top" && "uxf-dropdown--top", props.className), ref: props.forwardRef, static: true, style: props.style }, (0, is_not_empty_1.isNotEmpty)(props.options) ? (props.options.map((option) => {
|
|
65
65
|
var _a, _b, _c, _d;
|
|
66
|
-
const
|
|
67
|
-
return (react_3.default.createElement(Option, {
|
|
66
|
+
const optionTyped = option;
|
|
67
|
+
return (react_3.default.createElement(Option, { handleCheckboxChange: props.onCheckboxChange(optionTyped.id), key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : optionTyped.id, label: (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : optionTyped.label, option: optionTyped, withCheckboxes: props.withCheckboxes }));
|
|
68
68
|
})) : (react_3.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, props.emptyMessage))));
|
|
69
69
|
}
|
|
70
70
|
Options.displayName = "UxfUiMultiComboboxOptions";
|
|
@@ -129,7 +129,7 @@ exports.MultiCombobox = (0, react_3.forwardRef)((props, ref) => {
|
|
|
129
129
|
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
130
130
|
};
|
|
131
131
|
const isNotInteractive = props.isDisabled || props.isReadOnly;
|
|
132
|
-
return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)("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), "data-name": props.name, disabled: isNotInteractive, multiple: true, onChange: changeHandler, style: props.style, value: selectedOptions }, (renderProps) => {
|
|
132
|
+
return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)("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), "data-name": props.name, disabled: isNotInteractive, form: props.form, multiple: true, name: props.name, onChange: changeHandler, style: props.style, value: selectedOptions }, (renderProps) => {
|
|
133
133
|
var _a, _b;
|
|
134
134
|
return (react_3.default.createElement(react_3.default.Fragment, null,
|
|
135
135
|
react_3.default.createElement("div", { className: "uxf-form-component__label" },
|
|
@@ -54,7 +54,7 @@ function handleInputKeyDownRecursion(selectedOptions, onRemove) {
|
|
|
54
54
|
function Option(props) {
|
|
55
55
|
var _a, _b;
|
|
56
56
|
const option = props.option;
|
|
57
|
-
return (react_3.default.createElement(react_2.Listbox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-multi-select__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED),
|
|
57
|
+
return (react_3.default.createElement(react_2.Listbox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-multi-select__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: option.disabled, value: option }, (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, props.option)) !== null && _b !== void 0 ? _b : option.label));
|
|
58
58
|
}
|
|
59
59
|
Option.displayName = "UxfUiMultiSelectOption";
|
|
60
60
|
function Options(props) {
|
|
@@ -91,7 +91,7 @@ exports.MultiSelect = (0, react_3.forwardRef)((props, ref) => {
|
|
|
91
91
|
props.onChange((_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.filter((v) => v.id !== valueId)) !== null && _b !== void 0 ? _b : []);
|
|
92
92
|
};
|
|
93
93
|
const isNotInteractive = props.isDisabled || props.isReadOnly;
|
|
94
|
-
return (react_3.default.createElement(react_2.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-form-component uxf-multi-select", 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), "data-name": props.name, disabled: isNotInteractive, multiple: true, onChange: changeHandler, value: selectedOptions }, (renderProps) => {
|
|
94
|
+
return (react_3.default.createElement(react_2.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-form-component uxf-multi-select", 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), "data-name": props.name, disabled: isNotInteractive, form: props.form, multiple: true, name: props.name, onChange: changeHandler, value: selectedOptions }, (renderProps) => {
|
|
95
95
|
var _a, _b;
|
|
96
96
|
return (react_3.default.createElement(react_3.default.Fragment, null,
|
|
97
97
|
react_3.default.createElement("div", { className: "uxf-form-component__label" },
|
package/package.json
CHANGED
package/select/select.d.ts
CHANGED
|
@@ -17,6 +17,7 @@ export interface SelectProps<Value = SelectValue, Option = SelectOption<Value>>
|
|
|
17
17
|
dropdownMaxHeight?: number;
|
|
18
18
|
dropdownPlacement?: Placement;
|
|
19
19
|
dropdownStrategy?: Strategy;
|
|
20
|
+
form?: string;
|
|
20
21
|
helperText?: ReactNode;
|
|
21
22
|
hiddenLabel?: boolean;
|
|
22
23
|
iconName?: keyof IconsSet;
|
package/select/select.js
CHANGED
|
@@ -38,7 +38,8 @@ const input_1 = require("@uxf/ui/input");
|
|
|
38
38
|
const label_1 = require("@uxf/ui/label");
|
|
39
39
|
const react_3 = __importStar(require("react"));
|
|
40
40
|
function Option(props) {
|
|
41
|
-
|
|
41
|
+
const option = props.option;
|
|
42
|
+
return (react_3.default.createElement(react_2.Listbox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-select__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: option.disabled, value: option }, (optionState) => { var _a, _b; return react_3.default.createElement(react_3.default.Fragment, null, (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, props.option, optionState.selected)) !== null && _b !== void 0 ? _b : option.label); }));
|
|
42
43
|
}
|
|
43
44
|
Option.displayName = "UxfUiSelectOption";
|
|
44
45
|
function Options(props) {
|
|
@@ -69,11 +70,12 @@ function Select(props) {
|
|
|
69
70
|
const dropdown = (0, use_dropdown_1.useDropdown)((_c = props.dropdownPlacement) !== null && _c !== void 0 ? _c : "bottom", (_d = props.dropdownMatchesInputWidth) !== null && _d !== void 0 ? _d : true, props.dropdownMaxHeight, props.dropdownStrategy);
|
|
70
71
|
const stableRef = (0, react_3.useMemo)(() => (0, compose_refs_1.composeRefs)(innerRef, props.inputGroupRef, dropdown.refs.setReference), [dropdown.refs.setReference, props.inputGroupRef]);
|
|
71
72
|
const value = selectedOption;
|
|
72
|
-
|
|
73
|
+
const isNotInteractive = props.isDisabled || props.isReadOnly;
|
|
74
|
+
return (react_3.default.createElement(react_2.Listbox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-select", 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), "data-name": props.name, disabled: isNotInteractive, form: props.form, name: props.name, onChange: onChange, style: props.style, value: value }, (renderProps) => {
|
|
73
75
|
var _a, _b, _c;
|
|
74
76
|
return (react_3.default.createElement(react_3.default.Fragment, null,
|
|
75
77
|
react_3.default.createElement("div", { className: "uxf-form-component__label" },
|
|
76
|
-
react_3.default.createElement(react_2.Listbox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick:
|
|
78
|
+
react_3.default.createElement(react_2.Listbox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: isNotInteractive ? undefined : input.focus }, props.label)),
|
|
77
79
|
react_3.default.createElement("div", { className: "uxf-form-component__input" },
|
|
78
80
|
react_3.default.createElement(react_2.Listbox.Button, { as: input_1.Input, "aria-invalid": props.isInvalid, "aria-describedby": errorId, className: (0, cx_1.cx)("uxf-select__button", dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), customInputElementDisplayName: (_a = SelectedValue.displayName) !== null && _a !== void 0 ? _a : "", inputFocus: input, inputGroupRef: stableRef, inputWrapperRef: props.inputWrapperRef, isDisabled: props.isDisabled, isFocused: renderProps.open, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, ref: props.inputRef, size: props.size, variant: props.variant },
|
|
79
81
|
props.leftAddon && react_3.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
|
|
@@ -82,10 +84,7 @@ function Select(props) {
|
|
|
82
84
|
? (_c = (_b = props.renderSelectedOption) === null || _b === void 0 ? void 0 : _b.call(props, selectedOption)) !== null && _c !== void 0 ? _c : selectedOption.label
|
|
83
85
|
: props.placeholder),
|
|
84
86
|
react_3.default.createElement(input_1.Input.RightElement, null,
|
|
85
|
-
react_3.default.createElement(show_1.Show, { when: Boolean(props.isClearable) &&
|
|
86
|
-
(0, is_not_nil_1.isNotNil)(value) &&
|
|
87
|
-
!props.isDisabled &&
|
|
88
|
-
!props.isReadOnly },
|
|
87
|
+
react_3.default.createElement(show_1.Show, { when: Boolean(props.isClearable) && (0, is_not_nil_1.isNotNil)(value) && !isNotInteractive },
|
|
89
88
|
react_3.default.createElement(input_1.Input.RemoveButton, { onChange: onChange })),
|
|
90
89
|
props.inputArrow ? (props.inputArrow(renderProps.open)) : (react_3.default.createElement(input_1.Input.ArrowIcon, { iconName: props.iconName, isOpen: renderProps.open }))),
|
|
91
90
|
props.rightAddon && react_3.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),
|