react-widgets - npm Package Compare versions

Comparing version 5.3.0 to 5.4.0

cjs/Combobox.js

@@ -341,2 +341,21 @@ "use strict";
   (inputProps == null ? void 0 : inputProps.readOnly) != null ? inputProps == null ? void 0 : inputProps.readOnly : readOnly;
+  let inputAddon = false;
+
+  if (!hideCaret) {
+    inputAddon = /*#__PURE__*/React.createElement(_InputAddon.default, {
+      busy: busy,
+      icon: selectIcon,
+      spinner: busySpinner,
+      onClick: handleClick,
+      disabled: !!isDisabled || isReadOnly // FIXME
+      ,
+      label: messages.openCombobox()
+    });
+  } else if (busy) {
+    inputAddon = /*#__PURE__*/React.createElement("span", {
+      "aria-hidden": "true",
+      className: "rw-btn rw-picker-caret"
+    }, busySpinner || _Icon.Spinner);
+  }
+
   return /*#__PURE__*/React.createElement(_Widget.default, _extends({}, elementProps, {
@@ -353,4 +372,3 @@ ref: ref,
   }), /*#__PURE__*/React.createElement(_WidgetPicker.default, {
-    className: containerClassName,
-    hideCaret: hideCaret
+    className: (0, _classnames.default)(containerClassName, hideCaret && 'rw-widget-input', hideCaret && !busy && 'rw-hide-caret')
   }, /*#__PURE__*/React.createElement(_Input.default, _extends({}, inputProps, {
@@ -361,3 +379,3 @@ role: "combobox",
     className: (0, _classnames.default)( // @ts-ignore
-    inputProps && inputProps.className, 'rw-widget-input rw-combobox-input'),
+    inputProps && inputProps.className, 'rw-combobox-input', !hideCaret && 'rw-widget-input'),
     autoFocus: autoFocus,
@@ -377,11 +395,3 @@ tabIndex: tabIndex,
     ref: inputRef
-  })), !hideCaret && /*#__PURE__*/React.createElement(_InputAddon.default, {
-    busy: busy,
-    icon: selectIcon,
-    spinner: busySpinner,
-    onClick: handleClick,
-    disabled: !!isDisabled || isReadOnly // FIXME
-    ,
-    label: messages.openCombobox()
-  })), /*#__PURE__*/React.createElement(_FocusListContext.FocusListContext.Provider, {
+  })), inputAddon), /*#__PURE__*/React.createElement(_FocusListContext.FocusListContext.Provider, {
     value: list.context
@@ -388,0 +398,0 @@ }, shouldRenderPopup && /*#__PURE__*/React.createElement(Popup, {

cjs/WidgetPicker.d.ts

 import React from 'react';
-declare function WidgetPicker({ className, hideCaret, ...props }: React.HTMLProps<HTMLDivElement> & {
-    hideCaret?: boolean;
-}): JSX.Element;
+declare function WidgetPicker({ className, ...props }: React.HTMLProps<HTMLDivElement>): JSX.Element;
 export default WidgetPicker;
 //# sourceMappingURL=WidgetPicker.d.ts.map

cjs/WidgetPicker.js

@@ -18,9 +18,8 @@ "use strict";
   let {
-    className,
-    hideCaret = false
+    className
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["className", "hideCaret"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["className"]);
 
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, props, {
-    className: (0, _classnames.default)(className, 'rw-widget-picker', 'rw-widget-container', hideCaret && 'rw-hide-caret')
+    className: (0, _classnames.default)(className, 'rw-widget-picker', 'rw-widget-container')
   }));
@@ -27,0 +26,0 @@ }

esm/Combobox.js

@@ -26,2 +26,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { notify, useFirstFocusedRender, useInstanceId } from './WidgetHelpers';
+import { Spinner } from './Icon';
 
@@ -313,2 +314,21 @@ function indexOf(data, searchTerm, text) {
   (inputProps == null ? void 0 : inputProps.readOnly) != null ? inputProps == null ? void 0 : inputProps.readOnly : readOnly;
+  let inputAddon = false;
+
+  if (!hideCaret) {
+    inputAddon = /*#__PURE__*/React.createElement(InputAddon, {
+      busy: busy,
+      icon: selectIcon,
+      spinner: busySpinner,
+      onClick: handleClick,
+      disabled: !!isDisabled || isReadOnly // FIXME
+      ,
+      label: messages.openCombobox()
+    });
+  } else if (busy) {
+    inputAddon = /*#__PURE__*/React.createElement("span", {
+      "aria-hidden": "true",
+      className: "rw-btn rw-picker-caret"
+    }, busySpinner || Spinner);
+  }
+
   return /*#__PURE__*/React.createElement(Widget, _extends({}, elementProps, {
@@ -325,4 +345,3 @@ ref: ref,
   }), /*#__PURE__*/React.createElement(WidgetPicker, {
-    className: containerClassName,
-    hideCaret: hideCaret
+    className: cn(containerClassName, hideCaret && 'rw-widget-input', hideCaret && !busy && 'rw-hide-caret')
   }, /*#__PURE__*/React.createElement(Input, _extends({}, inputProps, {
@@ -333,3 +352,3 @@ role: "combobox",
     className: cn( // @ts-ignore
-    inputProps && inputProps.className, 'rw-widget-input rw-combobox-input'),
+    inputProps && inputProps.className, 'rw-combobox-input', !hideCaret && 'rw-widget-input'),
     autoFocus: autoFocus,
@@ -349,11 +368,3 @@ tabIndex: tabIndex,
     ref: inputRef
-  })), !hideCaret && /*#__PURE__*/React.createElement(InputAddon, {
-    busy: busy,
-    icon: selectIcon,
-    spinner: busySpinner,
-    onClick: handleClick,
-    disabled: !!isDisabled || isReadOnly // FIXME
-    ,
-    label: messages.openCombobox()
-  })), /*#__PURE__*/React.createElement(FocusListContext.Provider, {
+  })), inputAddon), /*#__PURE__*/React.createElement(FocusListContext.Provider, {
     value: list.context
@@ -360,0 +371,0 @@ }, shouldRenderPopup && /*#__PURE__*/React.createElement(Popup, {

esm/WidgetPicker.d.ts

 import React from 'react';
-declare function WidgetPicker({ className, hideCaret, ...props }: React.HTMLProps<HTMLDivElement> & {
-    hideCaret?: boolean;
-}): JSX.Element;
+declare function WidgetPicker({ className, ...props }: React.HTMLProps<HTMLDivElement>): JSX.Element;
 export default WidgetPicker;
 //# sourceMappingURL=WidgetPicker.d.ts.map

esm/WidgetPicker.js

@@ -10,9 +10,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   let {
-    className,
-    hideCaret = false
+    className
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["className", "hideCaret"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["className"]);
 
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: cn(className, 'rw-widget-picker', 'rw-widget-container', hideCaret && 'rw-hide-caret')
+    className: cn(className, 'rw-widget-picker', 'rw-widget-container')
   }));
@@ -19,0 +18,0 @@ }

package.json

 {
   "name": "react-widgets",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "An à la carte set of polished, extensible, and accessible inputs built for React",
@@ -60,3 +60,3 @@ "main": "cjs/index.js",
   },
-  "gitHead": "38b3f15713a57a5284fa6bdc530acec6b63ee1c2"
+  "gitHead": "15f188d3bedff045854acb458fef8604b060f5ae"
 }

No alert changes

Improved metrics

Total package byte prevSize

1514968

increased by0.06%

Lines of code

15678

increased by0.07%

No dependency changes