pebble-web 2.3.2 → 2.4.0

package/dist/pebble-web.js

@@ -1990,13 +1990,13 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
 
 function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var rowWrapper = /*#__PURE__*/emotion.css(_objectSpread$c(_objectSpread$c(_objectSpread$c(_objectSpread$c({}, typography.normal.regular), {}, {
+var rowWrapper = /*#__PURE__*/emotion.css(_objectSpread$c(_objectSpread$c(_objectSpread$c({}, typography.normal.regular), {}, {
   cursor: "pointer",
   padding: "12px 18px",
   position: "relative",
   lineHeight: "28px",
   zIndex: 999
-}, textEllipsis), flexSpaceBetween), {}, {
+}, textEllipsis), {}, {
   alignItems: "center",
   display: "flex",
   "&:last-of-type": {
@@ -2007,8 +2007,8 @@ var rowWrapper = /*#__PURE__*/emotion.css(_objectSpread$c(_objectSpread$c(_objec
   }
 }), ";label:rowWrapper;" + ( "" ));
 var labelWrap = /*#__PURE__*/emotion.css( {
-  name: "12vt42m-labelWrap",
-  styles: "user-select:none;overflow:hidden;text-overflow:ellipsis;;label:labelWrap;"
+  name: "1glxdhg-labelWrap",
+  styles: "user-select:none;flex-grow:1;overflow:hidden;text-overflow:ellipsis;;label:labelWrap;"
 } );
 var activeRow = /*#__PURE__*/emotion.css({
   backgroundColor: pebbleShared.colors.gray.lightest
@@ -2029,7 +2029,8 @@ var defaultProps = {
   rightElement: function rightElement(_ref) {
     var isSelected = _ref.isSelected,
         multiSelect = _ref.multiSelect,
-        indeterminate = _ref.indeterminate;
+        indeterminate = _ref.indeterminate,
+        iconClassName = _ref.iconClassName;
     var iconClass = emotion.cx("pi", {
       "pi-checkbox-selected": !indeterminate && isSelected,
       "pi-checkbox-unselected": !indeterminate && !isSelected,
@@ -2040,7 +2041,7 @@ var defaultProps = {
       fontSize: "20px"
     }, ";label:iconClass;" + ( "" )));
     return multiSelect ? /*#__PURE__*/React.createElement("i", {
-      className: iconClass
+      className: emotion.cx(iconClass, iconClassName)
     }) : null;
   }
 };
@@ -2060,6 +2061,7 @@ var Option = /*#__PURE__*/function (_React$Component) {
           label = _this$props.label,
           isActive = _this$props.isActive,
           isSelected = _this$props.isSelected,
+          leftElement = _this$props.leftElement,
           rightElement = _this$props.rightElement,
           labelClassName = _this$props.labelClassName,
           className = _this$props.className;
@@ -2069,7 +2071,7 @@ var Option = /*#__PURE__*/function (_React$Component) {
         type: this.props.multiSelect ? "checkbox" : "radio",
         className: _class
       }), function () {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, leftElement && leftElement(_this.props), /*#__PURE__*/React.createElement("div", {
           className: emotion.cx(labelWrap, labelClassName)
         }, label), rightElement(_this.props), /*#__PURE__*/React.createElement(Ink, null));
       });
@@ -2455,17 +2457,18 @@ var OptionGroupCheckBox = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
+          wrapClassName = _this$props2.wrapClassName,
           onApply = _this$props2.onApply,
           onClear = _this$props2.onClear,
           isSelected = _this$props2.isSelected,
           onChange = _this$props2.onChange,
-          rest = _objectWithoutProperties(_this$props2, ["onApply", "onClear", "isSelected", "onChange"]);
+          rest = _objectWithoutProperties(_this$props2, ["wrapClassName", "onApply", "onClear", "isSelected", "onChange"]);
       var advancedOptionsProps = _objectSpread$g({
         selectVisible: this.selectVisible,
         clearVisible: this.clearVisible
       }, this.props.advancedOptionsProps);
       return /*#__PURE__*/React.createElement("div", {
-        className: optionGroupCheckBoxWrap
+        className: emotion.cx(optionGroupCheckBoxWrap, wrapClassName)
       }, /*#__PURE__*/React.createElement(OptionGroup, Object.assign({}, rest, {
         advancedOptionsProps: advancedOptionsProps,
         isSelected: isSelected || this.isSelected,