@useblu/ocean-react 1.54.0 → 1.55.0

package/index.js

@@ -46430,13 +46430,17 @@ var CardListItem = function (_a) {
 };
 
 var Options = function (_a) {
-    var options = _a.options, _b = _a.selectedOptions, selectedOptions = _b === void 0 ? [] : _b, clearLabel = _a.clearLabel, filterLabel = _a.filterLabel, multiChoice = _a.multiChoice, onSelect = _a.onSelect, filterOptions = _a.filterOptions, clearOptions = _a.clearOptions;
+    var options = _a.options, selectedOptions = _a.selectedOptions, clearLabel = _a.clearLabel, filterLabel = _a.filterLabel, multiChoice = _a.multiChoice, onSelect = _a.onSelect, filterOptions = _a.filterOptions, clearOptions = _a.clearOptions;
     var columns = multiChoice ? Math.ceil(10 / 5) : 1;
     return (e__default["default"].createElement("div", { className: "ods-chips__options", "data-testid": "ods-chips-option" },
         e__default["default"].createElement("div", { className: classNames('ods-chips__options--content', "ods-chips__options--content--columns-".concat(columns)) }, options.map(function (_a) {
             var label = _a.label, value = _a.value;
-            return (e__default["default"].createElement("button", { key: label, type: "button", value: value, onClick: function () { return onSelect(label, value); }, className: "ods-chips__options--option" },
-                multiChoice && (e__default["default"].createElement(Checkbox, { checked: !!selectedOptions.find(function (option) { return option.value === value; }), readOnly: true })),
+            return (e__default["default"].createElement("button", { key: label, type: "button", value: value, onClick: function () { return onSelect(label, value); }, className: classNames('ods-chips__options--option', {
+                    'ods-chips__options--option--selected': !multiChoice &&
+                        !Array.isArray(selectedOptions) &&
+                        selectedOptions.value === value
+                }) },
+                multiChoice && Array.isArray(selectedOptions) && (e__default["default"].createElement(Checkbox, { checked: !!selectedOptions.find(function (option) { return option.value === value; }), readOnly: true })),
                 label));
         })),
         multiChoice && (e__default["default"].createElement("div", { className: "ods-chips__options--footer" },
@@ -46445,7 +46449,7 @@ var Options = function (_a) {
 };
 
 var Chips = function (_a) {
-    var label = _a.label, icon = _a.icon, disabled = _a.disabled, defaultValue = _a.defaultValue, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.multiChoice, multiChoice = _c === void 0 ? false : _c, _d = _a.clearLabel, clearLabel = _d === void 0 ? 'Limpar' : _d, _e = _a.filterLabel, filterLabel = _e === void 0 ? 'Filtrar' : _e, initialCounter = _a.initialCounter, onClick = _a.onClick, onChange = _a.onChange;
+    var label = _a.label, icon = _a.icon, disabled = _a.disabled, defaultValue = _a.defaultValue, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.multiChoice, multiChoice = _c === void 0 ? false : _c, _d = _a.clearLabel, clearLabel = _d === void 0 ? 'Limpar' : _d, _e = _a.filterLabel, filterLabel = _e === void 0 ? 'Filtrar' : _e, initialCounter = _a.initialCounter, selectedValue = _a.selectedValue, onClick = _a.onClick, onChange = _a.onChange, onClose = _a.onClose;
     var wrapperRef = e.useRef(null);
     var _f = e__default["default"].useState(0), counter = _f[0], setCounter = _f[1];
     var _g = e__default["default"].useState(false), selectionIsOpen = _g[0], setSelectionIsOpen = _g[1];
@@ -46455,7 +46459,14 @@ var Chips = function (_a) {
         if (wrapperRef.current && !wrapperRef.current.contains(target)) {
             setSelectionIsOpen(false);
         }
+        if (onClose)
+            onClose();
     }
+    e.useEffect(function () {
+        if (selectedValue && selectedValue !== selectedOptions && !multiChoice) {
+            setSelectedOptions(selectedValue);
+        }
+    }, [selectedValue]);
     e.useEffect(function () {
         document.addEventListener('mousedown', handleClickOutside);
         return function () {
@@ -46510,9 +46521,8 @@ var Chips = function (_a) {
     };
     var filterOptions = function () {
         setSelectionIsOpen(false);
-        if (onChange) {
-            onChange(selectedOptions);
-        }
+        if (onClose)
+            onClose();
     };
     return (e__default["default"].createElement("div", { className: "ods-chips", ref: wrapperRef },
         e__default["default"].createElement("button", { type: "button", onClick: handleClickChips, disabled: disabled, className: classNames('ods-chips__button', {
@@ -46527,7 +46537,7 @@ var Chips = function (_a) {
             (counter > 0 || initialCounter) && (e__default["default"].createElement(Badge, { color: "brand", className: "ods-chips__badge" }, initialCounter !== null && initialCounter !== void 0 ? initialCounter : counter)),
             options && (options === null || options === void 0 ? void 0 : options.length) > 0 && !selectionIsOpen && e__default["default"].createElement(J, null),
             options && (options === null || options === void 0 ? void 0 : options.length) > 0 && selectionIsOpen && e__default["default"].createElement(re, null)),
-        selectionIsOpen && options && (e__default["default"].createElement(Options, { options: options, onSelect: handleSelectOption, selectedOptions: Array.isArray(selectedOptions) ? selectedOptions : undefined, clearLabel: clearLabel, filterLabel: filterLabel, multiChoice: multiChoice, clearOptions: clearOptions, filterOptions: filterOptions }))));
+        selectionIsOpen && options && (e__default["default"].createElement(Options, { options: options, onSelect: handleSelectOption, selectedOptions: selectedOptions, clearLabel: clearLabel, filterLabel: filterLabel, multiChoice: multiChoice, clearOptions: clearOptions, filterOptions: filterOptions }))));
 };
 Chips.displayName = 'Chips';