@uxf/ui 10.0.0-beta.63 → 10.0.0-beta.67

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

@@ -38,6 +38,7 @@ const label_1 = require("@uxf/ui/label");
 const react_2 = __importStar(require("react"));
 const checkbox_input_1 = require("../checkbox-input");
 const react_3 = require("@floating-ui/react");
+const input_1 = require("@uxf/ui/input");
 exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const isAsync = !!props.loadOptions;
@@ -94,8 +95,13 @@ exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
         var _a, _b;
         const inputElement = (react_2.default.createElement(react_2.default.Fragment, null,
             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 },
-                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))),
-                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 }),
+                props.leftAddon && react_2.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
+                props.leftElement && react_2.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
+                react_2.default.createElement("div", { className: "uxf-multi-combobox__selected-options" },
+                    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))),
+                    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 })),
+                props.rightAddon && react_2.default.createElement(input_1.Input.RightAddon, null, props.rightAddon),
+                props.rightElement && react_2.default.createElement(input_1.Input.RightElement, null, props.rightElement),
                 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 })),
             renderProps.open && (react_2.default.createElement(react_3.FloatingPortal, null,
                 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) => {

package/multi-combobox/types.d.ts

@@ -25,12 +25,16 @@ export interface MultiComboboxProps<ValueId = MultiComboboxValueId, Option = Mul
     id?: string;
     keyExtractor?: (option: Option) => string | number;
     label: string;
+    leftAddon?: ReactNode;
+    leftElement?: ReactNode;
     loadOptions?: (query: string) => Promise<Option[]>;
     noQueryMessage?: string;
     notFoundMessage?: string;
     options?: Option[];
     placeholder?: string;
     renderOption?: (option: Option) => ReactNode;
+    rightAddon?: ReactNode;
+    rightElement?: ReactNode;
     size?: keyof InputGroupSizes;
     variant?: keyof InputGroupVariants;
     withCheckboxes?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "10.0.0-beta.63",
+  "version": "10.0.0-beta.67",
   "description": "",
   "publishConfig": {
     "access": "public"