@uxf/ui 1.0.0-beta.103 → 1.0.0-beta.104

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 (2) hide show
  1. package/mutli-combobox/multi-combobox.js +5 -7
  2. package/package.json +1 -1
package/mutli-combobox/multi-combobox.js CHANGED
@@ -39,13 +39,13 @@ const icon_1 = require("../icon");
39
39
  const label_1 = require("../label");
40
40
  const use_async_loading_1 = require("../hooks/use-async-loading");
41
41
  exports.MultiCombobox = (0, forwardRef_1.forwardRef)("MultiCombobox", (props, ref) => {
42
- var _a, _b, _c, _d;
42
+ var _a, _b, _c, _d, _e;
43
43
  const generatedId = (0, react_2.useId)();
44
44
  const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
45
45
  const isAsync = !!props.loadOptions;
46
46
  const [query, setQuery] = (0, react_2.useState)("");
47
47
  const options = (0, use_async_loading_1.useAsyncLoading)(query, (_b = props.options) !== null && _b !== void 0 ? _b : [], props.loadOptions);
48
- const [selectedOptions, setSelectedOptions] = (0, react_2.useState)(() => options.filter((option) => { var _a; return (_a = props.value) === null || _a === void 0 ? void 0 : _a.some((v) => v.id === option.id); }));
48
+ const selectedOptions = (_c = props.value) !== null && _c !== void 0 ? _c : [];
49
49
  const filteredData = isAsync
50
50
  ? options
51
51
  : options.filter((item) => {
@@ -56,12 +56,11 @@ exports.MultiCombobox = (0, forwardRef_1.forwardRef)("MultiCombobox", (props, re
56
56
  const innerRef = (0, react_2.useRef)(null);
57
57
  const errorId = props.isInvalid ? `${id}--error-message` : undefined;
58
58
  const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
59
- const dropdown = (0, use_dropdown_1.useDropdown)((_c = props.dropdownPlacement) !== null && _c !== void 0 ? _c : "bottom", true);
59
+ const dropdown = (0, use_dropdown_1.useDropdown)((_d = props.dropdownPlacement) !== null && _d !== void 0 ? _d : "bottom", true);
60
60
  const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
61
- const iconName = (_d = props.iconName) !== null && _d !== void 0 ? _d : "chevronDown";
61
+ const iconName = (_e = props.iconName) !== null && _e !== void 0 ? _e : "chevronDown";
62
62
  const handleRemove = (valueId) => () => {
63
63
  var _a, _b, _c;
64
- setSelectedOptions((prev) => prev.filter((v) => v.id !== valueId));
65
64
  (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, (_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b.filter((v) => v.id !== valueId)) !== null && _c !== void 0 ? _c : []);
66
65
  };
67
66
  const handleCheckboxChange = (valueId) => (checked) => {
@@ -84,11 +83,10 @@ exports.MultiCombobox = (0, forwardRef_1.forwardRef)("MultiCombobox", (props, re
84
83
  const handleInputChange = (event) => setQuery(event.target.value);
85
84
  const handleComboboxValueChange = (v) => {
86
85
  var _a;
87
- setSelectedOptions(v);
88
86
  (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.map((option) => option));
89
87
  setQuery("");
90
88
  };
91
- return (react_2.default.createElement(react_1.Combobox, { as: "div", className: (0, cx_1.cx)("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), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleComboboxValueChange, value: selectedOptions }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
89
+ return (react_2.default.createElement(react_1.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)("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), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleComboboxValueChange, value: selectedOptions }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
92
90
  react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
93
91
  react_2.default.createElement(react_1.Combobox.Button, { 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" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && classes_1.CLASSES.IS_OPEN), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
94
92
  selectedOptions.map((item) => (react_2.default.createElement(chip_1.Chip, { className: "mr-2 mt-2", color: item.color, key: item.id, onClose: handleRemove(item.id), size: "large" }, item.label))),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "1.0.0-beta.103",
3
+ "version": "1.0.0-beta.104",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"