@moda/om 17.0.0 → 17.2.1

package/dist/index.esm.js

@@ -5964,8 +5964,10 @@ var SKU_COLORS = {
   yellow: '#ffca44'
 };
 
-var _excluded$s = ["className", "size", "color", "backgroundUrl", "focus", "hover", "selected", "soldOut", "onSale", "onClick", "onMouseEnter", "disabled"];
+var _excluded$s = ["className", "size", "color", "backgroundUrl", "focus", "hover", "selected", "soldOut", "onSale", "onClick", "onMouseEnter", "disabled", "title"];
 var ColorSwatch = function ColorSwatch(_ref) {
+  var _SKU_COLORS;
+
   var className = _ref.className,
       size = _ref.size,
       color = _ref.color,
@@ -5978,18 +5980,20 @@ var ColorSwatch = function ColorSwatch(_ref) {
       onClick = _ref.onClick,
       onMouseEnter = _ref.onMouseEnter,
       disabled = _ref.disabled,
+      title = _ref.title,
       rest = _objectWithoutProperties(_ref, _excluded$s);
 
   var handleClick = useCallback(function (_event) {
-    onClick && onClick(color);
-  }, [color, onClick]);
+    onClick && onClick(color, title);
+  }, [color, title, onClick]);
   var handleMouseEnter = useCallback(function (_event) {
-    onMouseEnter && onMouseEnter(color);
-  }, [color, onMouseEnter]);
-  var backgroundColor = SKU_COLORS[color];
+    onMouseEnter && onMouseEnter(color, title);
+  }, [color, title, onMouseEnter]);
+  var backgroundColor = (_SKU_COLORS = SKU_COLORS[color]) !== null && _SKU_COLORS !== void 0 ? _SKU_COLORS : color;
+  var isWhite = !backgroundUrl && (!backgroundColor.startsWith('#') || backgroundColor.toLowerCase() === '#fff' || backgroundColor.toLowerCase() === '#ffffff');
 
   var styles = _objectSpread2({
-    backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : color
+    backgroundColor: backgroundColor
   }, backgroundUrl ? {
     backgroundImage: "url(".concat(backgroundUrl, ")"),
     backgroundSize: 'cover'
@@ -5997,7 +6001,7 @@ var ColorSwatch = function ColorSwatch(_ref) {
 
   return /*#__PURE__*/React__default.createElement(Clickable, _extends$1({
     className: classNames("ColorSwatch", {
-      'ColorSwatch--light': !backgroundColor || backgroundColor === '#fff',
+      'ColorSwatch--light': isWhite,
       'ColorSwatch--small': size === 'small',
       'ColorSwatch--hover': hover,
       'ColorSwatch--focus': focus,
@@ -6007,7 +6011,8 @@ var ColorSwatch = function ColorSwatch(_ref) {
     }, className),
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,
-    disabled: disabled
+    disabled: disabled,
+    title: title
   }, rest), /*#__PURE__*/React__default.createElement("div", {
     className: "ColorSwatch__chip",
     style: styles
@@ -11343,7 +11348,7 @@ var DefinitionList = function DefinitionList(_ref) {
   }, rest), /*#__PURE__*/React__default.createElement("dt", null, term), /*#__PURE__*/React__default.createElement("dd", null, children));
 };
 
-var _excluded$f = ["name", "children", "className", "virtual", "icon", "data-testid", "defaultExpanded", "expanded"];
+var _excluded$f = ["name", "children", "className", "virtual", "icon", "data-testid", "defaultExpanded", "expanded", "onToggle"];
 var Expandable = function Expandable(_ref) {
   var name = _ref.name,
       children = _ref.children,
@@ -11356,6 +11361,7 @@ var Expandable = function Expandable(_ref) {
       _ref$defaultExpanded = _ref.defaultExpanded,
       defaultExpanded = _ref$defaultExpanded === void 0 ? false : _ref$defaultExpanded,
       __expanded__ = _ref.expanded,
+      onToggle = _ref.onToggle,
       rest = _objectWithoutProperties(_ref, _excluded$f);
 
   var _useState = useState(defaultExpanded),
@@ -11367,10 +11373,11 @@ var Expandable = function Expandable(_ref) {
     if (__expanded__ != null && __expanded__ !== expanded) setExpanded(__expanded__);
   }, [expanded, __expanded__]);
   var handleClick = useCallback(function () {
-    return setExpanded(function (expanded) {
+    setExpanded(function (expanded) {
       return !expanded;
     });
-  }, []);
+    onToggle === null || onToggle === void 0 ? void 0 : onToggle();
+  }, [onToggle]);
   return /*#__PURE__*/React__default.createElement("div", _extends$1({
     className: classNames('Expandable', {
       'Expandable--expanded': expanded