@moda/om 20.1.0 → 20.2.0

package/dist/index.cjs.js

@@ -10594,14 +10594,18 @@ var SelectOption = function SelectOption(_ref) {
   var active = _ref.active,
     selected = _ref.selected,
     option = _ref.option,
+    _ref$option = _ref.option,
+    disabled = _ref$option.disabled,
+    colorSwatch = _ref$option.colorSwatch,
+    label = _ref$option.label,
     onClick = _ref.onClick,
     className = _ref.className,
     dataTestId = _ref.dataTestId;
   var ref = React.useRef(null);
   var handleClick = React.useCallback(function (event) {
     event.preventDefault();
-    if (!option.disabled) onClick(option);
-  }, [onClick, option]);
+    if (!disabled) onClick(option);
+  }, [disabled, onClick, option]);
   React.useEffect(function () {
     if (active && ref.current) {
       e(ref.current, {
@@ -10615,14 +10619,19 @@ var SelectOption = function SelectOption(_ref) {
     className: classNames('SelectOption', className, {
       'SelectOption--active': active,
       'SelectOption--selected': selected,
-      'SelectOption--disabled': option.disabled
+      'SelectOption--disabled': disabled
     }),
     onClick: handleClick,
-    "data-test-id": dataTestId ? "".concat(dataTestId, "--").concat(option.label.replace(' ', '-')) : undefined,
-    "aria-label": option.label,
+    "data-test-id": dataTestId ? "".concat(dataTestId, "--").concat(label.replace(' ', '-')) : undefined,
+    "aria-label": label,
     "aria-selected": selected,
     role: "option"
-  }, option.label);
+  }, colorSwatch && /*#__PURE__*/React.createElement("div", {
+    className: "SelectOption__color-swatch",
+    style: {
+      backgroundColor: distExports$4.colors.all[colorSwatch]
+    }
+  }), label);
 };
 
 var _excluded$k = ["idRef", "searchable", "autoFocus", "options", "selectedOption", "onSelect", "onFocus", "className", "dataTestId"];
@@ -10695,7 +10704,7 @@ var SelectOptions = function SelectOptions(_ref) {
       active: (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value) === option.value,
       selected: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value,
       onClick: onSelect
-    }, option.label);
+    });
   })), options.length === 0 && /*#__PURE__*/React.createElement(Text, {
     className: "SelectOptions__none",
     color: "cement"
@@ -10907,12 +10916,12 @@ var Select = function Select(_ref) {
     idRef: idRef,
     label: label || (selected === undefined ? placeholder : undefined),
     hasValue: focused != null || selected != null
-  }), (_ref2 = focused !== null && focused !== void 0 ? focused : selected) === null || _ref2 === void 0 ? void 0 : _ref2.label, colorSwatch && /*#__PURE__*/React.createElement("div", {
+  }), colorSwatch && /*#__PURE__*/React.createElement("div", {
     className: "Select__selected-color",
     style: {
       backgroundColor: distExports$4.colors.all[colorSwatch]
     }
-  }), /*#__PURE__*/React.createElement("span", {
+  }), (_ref2 = focused !== null && focused !== void 0 ? focused : selected) === null || _ref2 === void 0 ? void 0 : _ref2.label, /*#__PURE__*/React.createElement("span", {
     className: classNames('Select__icon', {
       'Select__icon--shifted': shiftIconLeftwards
     })