@useblu/ocean-react 1.113.1 → 1.114.0

package/index.js

@@ -46925,16 +46925,21 @@ CardListItem.displayName = 'CardListItem';
 var Options = function (_a) {
     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(options.length / 5) : 1;
+    var isMultiArray = Array.isArray(selectedOptions);
     return (e.createElement("div", { className: "ods-chips__options", "data-testid": "ods-chips-option" },
         e.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.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.createElement(Checkbox, { checked: !!selectedOptions.find(function (option) { return option.value === value; }), readOnly: true })),
-                label));
+            if (multiChoice && isMultiArray) {
+                var isSelected_1 = selectedOptions.some(function (option) { return option.value === value; });
+                return (e.createElement("div", { key: value, className: classNames('ods-chips__options--option', 'ods-chips__options--option-container', {
+                        'ods-chips__options--option--selected': isSelected_1,
+                    }) },
+                    e.createElement(Checkbox, { checked: isSelected_1, id: "chips-option-".concat(value), onClick: function () { return onSelect(label, value); }, readOnly: true, label: label })));
+            }
+            var isSelected = !multiChoice && !isMultiArray && selectedOptions.value === value;
+            return (e.createElement("button", { key: value, type: "button", value: value, onClick: function () { return onSelect(label, value); }, className: classNames('ods-chips__options--option', {
+                    'ods-chips__options--option--selected': isSelected,
+                }) }, label));
         })),
         multiChoice && (e.createElement("div", { className: "ods-chips__options--footer" },
             e.createElement("button", { type: "button", onClick: clearOptions, className: "ods-btn ods-btn--sm ods-btn--text" }, clearLabel),