@uxf/ui 10.0.0-beta.63 → 10.0.0-beta.68
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/message/message.d.ts
CHANGED
package/message/message.js
CHANGED
|
@@ -42,6 +42,6 @@ exports.Message = (0, react_1.forwardRef)((props, ref) => {
|
|
|
42
42
|
message: innerRef.current.message,
|
|
43
43
|
}), []);
|
|
44
44
|
return content ? (react_1.default.createElement(dialog_1.Dialog, { className: (0, cx_1.cx)("uxf-message", `uxf-message--variant-${(_a = content.variant) !== null && _a !== void 0 ? _a : "simple"}`, `uxf-message--color-${content.color}`, content.className), disableBackdropClose: true, onClose: close, open: !!content },
|
|
45
|
-
react_1.default.createElement(message_content_1.MessageContent, { CustomIconComponent: content.CustomIconComponent, acceptLabel: content.acceptLabel, cancelLabel: content.cancelLabel, color: content.color, description: content.description, onAccept: content.onAccept, onCancel: content.onCancel, onClose: close, title: content.title, variant: content.variant }))) : null;
|
|
45
|
+
react_1.default.createElement(message_content_1.MessageContent, { CustomIconComponent: content.CustomIconComponent, acceptLabel: content.acceptLabel, cancelLabel: content.cancelLabel, color: content.color, description: content.description, onAccept: content.onAccept, onCancel: content.onCancel, onClose: close, title: content.title, variant: content.variant }, content.children))) : null;
|
|
46
46
|
});
|
|
47
47
|
exports.Message.displayName = "UxfUiMessage";
|
|
@@ -38,6 +38,7 @@ const label_1 = require("@uxf/ui/label");
|
|
|
38
38
|
const react_2 = __importStar(require("react"));
|
|
39
39
|
const checkbox_input_1 = require("../checkbox-input");
|
|
40
40
|
const react_3 = require("@floating-ui/react");
|
|
41
|
+
const input_1 = require("@uxf/ui/input");
|
|
41
42
|
exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
|
|
42
43
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
43
44
|
const isAsync = !!props.loadOptions;
|
|
@@ -94,8 +95,13 @@ exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
|
|
|
94
95
|
var _a, _b;
|
|
95
96
|
const inputElement = (react_2.default.createElement(react_2.default.Fragment, null,
|
|
96
97
|
react_2.default.createElement(react_1.Combobox.Button, { "aria-invalid": props.isInvalid, "aria-describedby": props.errorId, as: "div", className: (0, cx_1.cx)("uxf-multi-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, 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), onBlur: input.onBlur, onFocus: input.onFocus, ref: stableRef },
|
|
97
|
-
|
|
98
|
-
react_2.default.createElement(
|
|
98
|
+
props.leftAddon && react_2.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
|
|
99
|
+
props.leftElement && react_2.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
|
|
100
|
+
react_2.default.createElement("div", { className: "uxf-multi-combobox__selected-options" },
|
|
101
|
+
selectedOptions.map((item) => (react_2.default.createElement(chip_1.Chip, { className: "uxf-multi-combobox__input-chip", color: item.color, key: item.id, onClose: handleRemove(item.id), size: "large", suppressFocus: true }, item.label))),
|
|
102
|
+
react_2.default.createElement(react_1.Combobox.Input, { autoComplete: "off", className: "uxf-multi-combobox__input", onChange: handleInputChange, onKeyDown: handleInputKeyDown, placeholder: props.placeholder, type: "text", value: query })),
|
|
103
|
+
props.rightAddon && react_2.default.createElement(input_1.Input.RightAddon, null, props.rightAddon),
|
|
104
|
+
props.rightElement && react_2.default.createElement(input_1.Input.RightElement, null, props.rightElement),
|
|
99
105
|
react_2.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 })),
|
|
100
106
|
renderProps.open && (react_2.default.createElement(react_3.FloatingPortal, null,
|
|
101
107
|
react_2.default.createElement(react_1.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) => {
|
|
@@ -25,12 +25,16 @@ export interface MultiComboboxProps<ValueId = MultiComboboxValueId, Option = Mul
|
|
|
25
25
|
id?: string;
|
|
26
26
|
keyExtractor?: (option: Option) => string | number;
|
|
27
27
|
label: string;
|
|
28
|
+
leftAddon?: ReactNode;
|
|
29
|
+
leftElement?: ReactNode;
|
|
28
30
|
loadOptions?: (query: string) => Promise<Option[]>;
|
|
29
31
|
noQueryMessage?: string;
|
|
30
32
|
notFoundMessage?: string;
|
|
31
33
|
options?: Option[];
|
|
32
34
|
placeholder?: string;
|
|
33
35
|
renderOption?: (option: Option) => ReactNode;
|
|
36
|
+
rightAddon?: ReactNode;
|
|
37
|
+
rightElement?: ReactNode;
|
|
34
38
|
size?: keyof InputGroupSizes;
|
|
35
39
|
variant?: keyof InputGroupVariants;
|
|
36
40
|
withCheckboxes?: boolean;
|