@moda/om 16.2.1 → 17.1.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.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)
+
+
+### Features
+
+* **select:** adds data-test-id to Select component ([#2790](https://github.com/ModaOperandi/om/issues/2790)) ([2ba14ed](https://github.com/ModaOperandi/om/commit/2ba14ed15c7d588bf735fbb4202e09495d58e341))
+
 ## [16.2.1](https://github.com/ModaOperandi/om/compare/v16.2.0...v16.2.1) (2022-07-01)
 
 

package/dist/index.cjs.js

@@ -1000,20 +1000,20 @@ var typography_1 = typography;
 
 var text = function text(name, font) {
   if (font === void 0) {
-    font = "sans";
+    font = 'sans';
   }
 
-  var treatment = typography_1.typography["text-treatments"][name];
+  var treatment = typography_1.typography['text-treatments'][name];
   return __assign$b(__assign$b({}, treatment), {
-    "font-family": typography_1.typography.fonts[font].join(","),
-    "line-height": "" + treatment["line-height"]
+    'font-family': typography_1.typography.fonts[font].join(','),
+    'line-height': "".concat(treatment['line-height'])
   });
 };
 
 helpers.text = text;
 
 var remToUnitlessPx = function remToUnitlessPx(value) {
-  return parseFloat(value) * parseInt(typography_1.typography["root-font-size"], 0);
+  return parseFloat(value) * parseInt(typography_1.typography['root-font-size'], 10);
 };
 
 helpers.remToUnitlessPx = remToUnitlessPx;
@@ -1022,18 +1022,19 @@ var color = function color(name, alpha) {
   var _a;
 
   var color = colors_1.colors.all[name];
-  return alpha != null ? colorString.to.rgb(__spreadArray$1(__spreadArray$1([], ((_a = colorString.get.rgb(color)) === null || _a === void 0 ? void 0 : _a.slice(0, 3)) || [], true), [alpha], false)) : color;
+  return alpha != null ? // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  colorString.to.rgb(__spreadArray$1(__spreadArray$1([], ((_a = colorString.get.rgb(color)) === null || _a === void 0 ? void 0 : _a.slice(0, 3)) || [], true), [alpha], false)) : color;
 };
 
 helpers.color = color;
 
-var spacing = function spacing(ty, rx, b, l) {
-  return [ty, rx, b, l].reduce(function (acc, v) {
+var spacing = function spacing(topY, rightX, bottom, left) {
+  return [topY, rightX, bottom, left].reduce(function (acc, value) {
     var _a;
 
-    if (v === undefined) return acc;
-    return [acc, (_a = space_1.space.scale[v]) !== null && _a !== void 0 ? _a : v].join(" ");
-  }, "");
+    if (value === undefined) return acc;
+    return [acc, (_a = space_1.space.scale[value]) !== null && _a !== void 0 ? _a : value].join(' ');
+  }, '');
 };
 
 helpers.spacing = spacing;
@@ -1042,12 +1043,18 @@ helpers.spacing = spacing;
 
   var __createBinding = commonjsGlobal && commonjsGlobal.__createBinding || (Object.create ? function (o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, {
-      enumerable: true,
-      get: function get() {
-        return m[k];
-      }
-    });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = {
+        enumerable: true,
+        get: function get() {
+          return m[k];
+        }
+      };
+    }
+
+    Object.defineProperty(o, k2, desc);
   } : function (o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -9213,7 +9220,8 @@ var SelectOption = function SelectOption(_ref) {
       selected = _ref.selected,
       option = _ref.option,
       onClick = _ref.onClick,
-      className = _ref.className;
+      className = _ref.className,
+      dataTestId = _ref.dataTestId;
   var ref = React.useRef(null);
   var handleClick = React.useCallback(function (event) {
     event.preventDefault();
@@ -9235,13 +9243,14 @@ var SelectOption = function SelectOption(_ref) {
       'SelectOption--disabled': option.disabled
     }),
     onClick: handleClick,
+    "data-test-id": dataTestId ? "".concat(dataTestId, "--").concat(option.label.replace(' ', '-')) : undefined,
     "aria-label": option.label,
     "aria-selected": selected,
     role: "option"
   }, option.label);
 };
 
-var _excluded$m = ["idRef", "searchable", "autoFocus", "options", "selectedOption", "onSelect", "onFocus", "className"];
+var _excluded$m = ["idRef", "searchable", "autoFocus", "options", "selectedOption", "onSelect", "onFocus", "className", "dataTestId"];
 var SelectOptions = function SelectOptions(_ref) {
   var idRef = _ref.idRef,
       searchable = _ref.searchable,
@@ -9252,6 +9261,7 @@ var SelectOptions = function SelectOptions(_ref) {
       onSelect = _ref.onSelect,
       onFocus = _ref.onFocus,
       className = _ref.className,
+      dataTestId = _ref.dataTestId,
       rest = _objectWithoutProperties(_ref, _excluded$m);
 
   var _useState = React.useState(''),
@@ -9309,6 +9319,7 @@ var SelectOptions = function SelectOptions(_ref) {
       id: "SelectOption--".concat(option.value, "-").concat(idRef),
       key: option.value,
       option: option,
+      dataTestId: dataTestId,
       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
@@ -9430,7 +9441,7 @@ var useSelect = function useSelect(_ref) {
   };
 };
 
-var _excluded$l = ["allowAutoFill", "autoSelect", "className", "defaultValue", "disabled", "dropDirection", "error", "idRef", "label", "name", "onChange", "options", "placeholder", "searchable", "shiftIconLeftwards", "value"];
+var _excluded$l = ["allowAutoFill", "autoSelect", "className", "defaultValue", "disabled", "dropDirection", "error", "idRef", "label", "name", "onChange", "options", "placeholder", "searchable", "shiftIconLeftwards", "value", "dataTestId"];
 var Select = function Select(_ref) {
   var _ref2;
 
@@ -9456,6 +9467,7 @@ var Select = function Select(_ref) {
       _ref$shiftIconLeftwar = _ref.shiftIconLeftwards,
       shiftIconLeftwards = _ref$shiftIconLeftwar === void 0 ? false : _ref$shiftIconLeftwar,
       value = _ref.value,
+      dataTestId = _ref.dataTestId,
       rest = _objectWithoutProperties(_ref, _excluded$l);
 
   var _useSelect = useSelect({
@@ -9524,6 +9536,7 @@ var Select = function Select(_ref) {
     className: "Select__value",
     disabled: disabled,
     onClick: handleToggle,
+    "data-test-id": dataTestId,
     "aria-haspopup": "listbox",
     "aria-expanded": state.mode === Mode.Open,
     "aria-labelledby": "Select__label--".concat(idRef, " Select__value--").concat(idRef),
@@ -9543,6 +9556,7 @@ var Select = function Select(_ref) {
       'Select__options--up': dropDirection === 'up',
       'Select__options--down': dropDirection === 'down'
     }),
+    dataTestId: dataTestId,
     searchable: searchable,
     options: options,
     onSelect: handleSelect,
@@ -11356,7 +11370,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,
@@ -11366,20 +11380,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