@moda/om 16.3.0 → 17.2.0

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [17.2.0](https://github.com/ModaOperandi/om/compare/v17.1.0...v17.2.0) (2022-08-22)
+
+
+### Features
+
+* **colorswatch:** add title to the callbacks ([a259d7a](https://github.com/ModaOperandi/om/commit/a259d7a76785dccc30fb6489702e3ab1d5ee0055))
+
+# [17.1.0](https://github.com/ModaOperandi/om/compare/v17.0.0...v17.1.0) (2022-08-17)
+
+
+### Features
+
+* **expandable:** onToggle ([4a63534](https://github.com/ModaOperandi/om/commit/4a635341fab096716b343fbac498f804dc5eed4c))
+
+# [17.0.0](https://github.com/ModaOperandi/om/compare/v16.3.0...v17.0.0) (2022-08-17)
+
+
+### Features
+
+* **expandable:** allow it to be controlled ([#2848](https://github.com/ModaOperandi/om/issues/2848)) ([d7128b6](https://github.com/ModaOperandi/om/commit/d7128b60276da6f155acd4cb5abb910648a3a904))
+
+
+### BREAKING CHANGES
+
+* **expandable:** 'expanded' will now control the component completely
+
 # [16.3.0](https://github.com/ModaOperandi/om/compare/v16.2.1...v16.3.0) (2022-07-06)
 
 

package/dist/index.cjs.js

@@ -5991,7 +5991,7 @@ 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 className = _ref.className,
       size = _ref.size,
@@ -6005,14 +6005,15 @@ var ColorSwatch = function ColorSwatch(_ref) {
       onClick = _ref.onClick,
       onMouseEnter = _ref.onMouseEnter,
       disabled = _ref.disabled,
+      title = _ref.title,
       rest = _objectWithoutProperties(_ref, _excluded$s);
 
   var handleClick = React.useCallback(function (_event) {
-    onClick && onClick(color);
-  }, [color, onClick]);
+    onClick && onClick(color, title);
+  }, [color, title, onClick]);
   var handleMouseEnter = React.useCallback(function (_event) {
-    onMouseEnter && onMouseEnter(color);
-  }, [color, onMouseEnter]);
+    onMouseEnter && onMouseEnter(color, title);
+  }, [color, title, onMouseEnter]);
   var backgroundColor = SKU_COLORS[color];
 
   var styles = _objectSpread2({
@@ -6034,7 +6035,8 @@ var ColorSwatch = function ColorSwatch(_ref) {
     }, className),
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,
-    disabled: disabled
+    disabled: disabled,
+    title: title
   }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "ColorSwatch__chip",
     style: styles
@@ -11370,7 +11372,7 @@ var DefinitionList = function DefinitionList(_ref) {
   }, rest), /*#__PURE__*/React__default["default"].createElement("dt", null, term), /*#__PURE__*/React__default["default"].createElement("dd", null, children));
 };
 
-var _excluded$f = ["name", "children", "className", "virtual", "icon", "data-testid", "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,
@@ -11380,20 +11382,26 @@ var Expandable = function Expandable(_ref) {
       _ref$icon = _ref.icon,
       icon = _ref$icon === void 0 ? 'plus-minus' : _ref$icon,
       dataTestId = _ref['data-testid'],
-      _ref$expanded = _ref.expanded,
-      __expanded__ = _ref$expanded === void 0 ? false : _ref$expanded,
+      _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 = React.useState(__expanded__),
+  var _useState = React.useState(defaultExpanded),
       _useState2 = _slicedToArray(_useState, 2),
       expanded = _useState2[0],
       setExpanded = _useState2[1];
 
+  React.useEffect(function () {
+    if (__expanded__ != null && __expanded__ !== expanded) setExpanded(__expanded__);
+  }, [expanded, __expanded__]);
   var handleClick = React.useCallback(function () {
-    return setExpanded(function (expanded) {
+    setExpanded(function (expanded) {
       return !expanded;
     });
-  }, []);
+    onToggle === null || onToggle === void 0 ? void 0 : onToggle();
+  }, [onToggle]);
   return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
     className: classNames('Expandable', {
       'Expandable--expanded': expanded