@decisiv/ui-components 2.0.0 → 2.0.1-alpha.100

package/lib/components/Badge/index.test.js

@@ -10,6 +10,8 @@ var _Home = _interopRequireDefault(require("@decisiv/iconix/lib/components/Home"
 
 var _ = _interopRequireDefault(require("."));
 
+var _constants = require("./constants");
+
 var _commonUIColors = require("../../utils/commonUIColors");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -53,16 +55,25 @@ describe('Badge', function () {
       expect(container).toMatchSnapshot();
     });
   });
+  it("renders correctly with size=\"small\" and variant=\"square\"", function () {
+    var _renderBadge3 = renderBadge({
+      size: 'small',
+      variant: 'square'
+    }),
+        container = _renderBadge3.container;
+
+    expect(container).toMatchSnapshot();
+  });
   it('renders correctly in any of the common UI colors', function () {
     Object.entries(_commonUIColors.commonUIColors).forEach(function (_ref) {
       var _ref2 = _slicedToArray(_ref, 2),
           key = _ref2[0],
           value = _ref2[1];
 
-      var _renderBadge3 = renderBadge({
+      var _renderBadge4 = renderBadge({
         color: key
       }),
-          container = _renderBadge3.container;
+          container = _renderBadge4.container;
 
       expect(container.firstChild).toHaveStyleRule('background-color', (0, _toColorString.default)(value));
     });
@@ -75,12 +86,44 @@ describe('Badge', function () {
       // @ts-ignore
       console.error.mockRestore();
     });
-    it('warns if variant="square" and size="large"', function () {
-      renderBadge({
-        size: 'large',
-        variant: 'square'
-      });
-      expect(console.error).toHaveBeenCalledWith("Warning: Failed prop type: The prop 'variant' can not be 'square' if the 'size' prop is 'large'.\n    in Badge");
+    it('warns for invalid size/variant combinations', function () {
+      var sizes = ['small', 'medium', 'large'];
+      var variants = ['round', 'square'];
+      var validCombinations = Object.keys(_constants.sizeStyles);
+
+      for (var _i2 = 0, _sizes = sizes; _i2 < _sizes.length; _i2++) {
+        var size = _sizes[_i2];
+        var _iteratorNormalCompletion = true;
+        var _didIteratorError = false;
+        var _iteratorError = undefined;
+
+        try {
+          for (var _iterator = variants[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+            var variant = _step.value;
+
+            if (!validCombinations.includes("".concat(size, ".").concat(variant))) {
+              renderBadge({
+                size: size,
+                variant: variant
+              });
+              expect(console.error).toHaveBeenCalledWith("Warning: Failed prop type: The Badge component does not support the '".concat(size, "' size and '").concat(variant, "' variant props combination.\n    in Badge"));
+            }
+          }
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+              _iterator.return();
+            }
+          } finally {
+            if (_didIteratorError) {
+              throw _iteratorError;
+            }
+          }
+        }
+      }
     });
   });
 });

package/lib/components/Badge/schema.js

@@ -15,7 +15,7 @@ schema.propTypes = {
   'aria-label': _reactDesc.PropTypes.string.description('Descriptive text for accessibility purposes').isRequired,
   color: _reactDesc.PropTypes.string.description('(See note) Sets the color for the background and the icon').defaultValue('information'),
   icon: _reactDesc.PropTypes.element.description('Must be an icon component from `@decisiv/iconix`').isRequired,
-  size: _reactDesc.PropTypes.oneOf(['medium', 'large']).description('(See note) Sets the size of the badge').defaultValue('medium'),
+  size: _reactDesc.PropTypes.oneOf(['small', 'medium', 'large']).description('(See note) Sets the size of the badge').defaultValue('medium'),
   variant: _reactDesc.PropTypes.oneOf(['round', 'square']).description('(See note) Controls primary style variations of the badge').defaultValue('round')
 };
 var _default = schema;

package/lib/components/Badge/types.d.ts

@@ -8,7 +8,7 @@ export interface BadgeProps {
     'aria-label': string;
     color?: CommonUIColorKeys;
     icon: IconComponent;
-    size?: 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large';
     variant?: 'round' | 'square';
 }
 declare function variantValidator(props: BadgeProps, propName: 'variant', componentName: 'Badge'): Error | null;

package/lib/components/Badge/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,iBAAiB,EAElB,MAAM,4BAA4B,CAAC;AAEpC,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,oBAAY,QAAQ,GAAG,cAAc,CAAC;AAEtC,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,iBAAS,gBAAgB,CACvB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,SAAS,EACnB,aAAa,EAAE,OAAO,GACrB,KAAK,GAAG,IAAI,CAqBd;AAED,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAGxB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,iBAAiB,EAElB,MAAM,4BAA4B,CAAC;AAIpC,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,oBAAY,QAAQ,GAAG,cAAc,CAAC;AAItC,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,iBAAS,gBAAgB,CACvB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,SAAS,EACnB,aAAa,EAAE,OAAO,GACrB,KAAK,GAAG,IAAI,CAqBd;AAED,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAGxB,CAAC"}

package/lib/components/Badge/types.js

@@ -9,15 +9,19 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _commonUIColors = require("../../utils/commonUIColors");
 
+var _constants = require("./constants");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var validSizeVariantCombinations = Object.keys(_constants.sizeStyles);
+
 function variantValidator(props, propName, componentName) {
   if (process.env.NODE_ENV !== 'production') {
     var size = props.size,
         variant = props[propName];
 
-    if (size === 'large' && variant === 'square') {
-      return Error("The prop '".concat(propName, "' can not be 'square' if the 'size' prop is 'large'."));
+    if (!validSizeVariantCombinations.includes("".concat(size, ".").concat(variant))) {
+      return Error("The Badge component does not support the '".concat(size, "' size and '").concat(variant, "' variant props combination."));
     }
 
     _propTypes.default.checkPropTypes({
@@ -33,7 +37,7 @@ function variantValidator(props, propName, componentName) {
 var propTypes = {
   color: _propTypes.default.oneOf(_commonUIColors.commonUIColorKeys),
   icon: _propTypes.default.elementType.isRequired,
-  size: _propTypes.default.oneOf(['medium', 'large']),
+  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
   variant: variantValidator
 };
 exports.propTypes = propTypes;

package/lib/components/Breadcrumbs/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Button/schema.d.ts

@@ -1,4 +1,9 @@
-export declare const makeButtonSchemaPropTypes: () => object;
+import { Validator } from 'prop-types';
+export declare const makeButtonSchemaPropTypes: (extensions?: {
+    [x: string]: Validator<unknown>;
+} | undefined) => {
+    [x: string]: Validator<unknown>;
+};
 declare const schema: any;
 export default schema;
 //# sourceMappingURL=schema.d.ts.map

package/lib/components/Button/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Button/schema.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,yBAAyB,cA4BpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Button/schema.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,eAAO,MAAM,yBAAyB;;;;CAiCpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}

package/lib/components/Button/schema.js

@@ -7,9 +7,14 @@ exports.default = exports.makeButtonSchemaPropTypes = void 0;
 
 var _reactDesc = require("react-desc");
 
-// @ts-ignore no module typings
-var makeButtonSchemaPropTypes = function makeButtonSchemaPropTypes() {
-  return {
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var makeButtonSchemaPropTypes = function makeButtonSchemaPropTypes(extensions) {
+  return _objectSpread({
     text: _reactDesc.PropTypes.string.description("The button's text"),
     disabled: _reactDesc.PropTypes.bool.description('Defines if the button will be disabled').defaultValue('false'),
     size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description('Defines the size of the button').defaultValue('medium'),
@@ -18,7 +23,7 @@ var makeButtonSchemaPropTypes = function makeButtonSchemaPropTypes() {
     intent: _reactDesc.PropTypes.oneOf(['success', 'danger']).description('Applies desired hover state of button'),
     kind: _reactDesc.PropTypes.oneOf(['primary', 'secondary']).description('Applies inverted button styles'),
     variant: _reactDesc.PropTypes.oneOf(['normal', 'inverted']).description('Applies secondary button styles')
-  };
+  }, extensions);
 };
 
 exports.makeButtonSchemaPropTypes = makeButtonSchemaPropTypes;

package/lib/components/Button/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAO,sBAAsB,EAAc,MAAM,OAAO,CAAC;AAGvE,OAAqB,EACnB,KAAK,IAAI,UAAU,EACnB,YAAY,EACb,MAAM,0BAA0B,CAAC;AAElC,oBAAY,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AAQ7C,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAAC,YAAY,EAAE,KAAK,CAEhE,CAAC;AAiBF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAO,sBAAsB,EAAc,MAAM,OAAO,CAAC;AAGvE,OAAqB,EACnB,KAAK,IAAI,UAAU,EACnB,YAAY,EACb,MAAM,0BAA0B,CAAC;AAElC,oBAAY,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AAQ7C,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAAC,YAAY,EAAE,KAAK,CAEhE,CAAC;AAmBF,eAAe,eAAe,CAAC"}

package/lib/components/Checkbox/index.js

@@ -33,13 +33,15 @@ CheckboxWithRef.propTypes = {
   label: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   readOnly: _propTypes.default.bool,
+  required: _propTypes.default.bool,
   size: _propTypes.default.oneOf(['normal', 'small']),
   status: _propTypes.default.oneOf(['normal', 'warning']),
   warningMessage: _propTypes.default.string
 };
 CheckboxWithRef.defaultProps = {
   size: 'normal',
-  status: 'normal'
+  status: 'normal',
+  required: false
 };
 var _default = CheckboxWithRef;
 exports.default = _default;

package/lib/components/Checkbox/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAwC,CAAC;AAgDrD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAwC,CAAC;AA4DrD,eAAe,MAAM,CAAC"}

package/lib/components/Checkbox/schema.js

@@ -18,6 +18,8 @@ schema.propTypes = {
   defaultChecked: _reactDesc.PropTypes.bool.description('Whether or not the checkbox is initially checked. Use if you do not want to manually control the state.').defaultValue('false'),
   disabled: _reactDesc.PropTypes.bool.description('If the checkbox should be disabled and ignore user interactions.').defaultValue('false'),
   readOnly: _reactDesc.PropTypes.bool.description('Ignore user interactions, but still display the label in a readable manner.').defaultValue('false'),
+  required: _reactDesc.PropTypes.bool.description('Whether or not the checkbox should be required. Renders an indicator if true.').defaultValue('false'),
+  requiredMessage: _reactDesc.PropTypes.string.description('The text to display in the tooltip when hovering over the required icon. It displays "Required" by default').defaultValue('Required'),
   size: _reactDesc.PropTypes.oneOf(['normal', 'small']).description('Controls the size of the checkbox and label.').defaultValue('normal'),
   status: _reactDesc.PropTypes.oneOf(['normal', 'warning']).description('Whether or not to render the warning state.').defaultValue('normal'),
   warningMessage: _reactDesc.PropTypes.string.description('The warning message to display below the checkbox. If provided, the `status` prop is automatically set to `warning`.')

package/lib/components/Combobox/Target.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Target.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Target.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAO,sBAAsB,EAAc,MAAM,OAAO,CAAC;AAgBvE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA0HtC,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,gBAAgB,EAChB,WAAW,CACS,CAAC;AAGvB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"Target.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Target.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAO,sBAAsB,EAAc,MAAM,OAAO,CAAC;AAkBvE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAiLtC,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,gBAAgB,EAChB,WAAW,CACS,CAAC;AAGvB,eAAe,aAAa,CAAC"}

package/lib/components/Combobox/Target.js

@@ -31,6 +31,8 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _Flex = _interopRequireDefault(require("../Flex"));
 
+var _Tag = _interopRequireDefault(require("../Tag"));
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -44,21 +46,23 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var TargetContainer = _styledComponents.default.div.withConfig({
   displayName: "Target__TargetContainer",
   componentId: "sc-1obpsql-0"
-})(["align-items:center;display:flex;justify-content:space-between;position:relative;width:100%;"]);
+})(["align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-start;width:100%;padding-right:15px;", ""], (0, _styleModifiers.when)('hasExpandIndicator', (0, _styledComponents.css)(["padding-right:45px;"])));
 
 var Input = _styledComponents.default.input.withConfig({
   displayName: "Target__Input",
   componentId: "sc-1obpsql-1"
-})(["font-family:", ";font-size:", ";font-weight:", ";overflow:visible;&::-moz-focus-inner{border:0;padding:0;margin:0;}background-color:inherit;border:transparent;display:block;line-height:140%;padding:1px 10px 6px 1px;width:100%;&:active,&:focus{outline:none;}"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default);
+})(["font-family:", ";font-size:", ";font-weight:", ";overflow:visible;&::-moz-focus-inner{border:0;padding:0;margin:0;}background-color:inherit;border:transparent;display:block;line-height:140%;padding:0 10px 5px 1px;flex-grow:100;&:active,&:focus{outline:none;}"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default);
 
+var ClearButtonContainer = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "Target__ClearButtonContainer",
+  componentId: "sc-1obpsql-2"
+})(["position:absolute;bottom:0;right:0;padding-bottom:2px;padding-left:10px;padding-right:10px;", ""], (0, _styleModifiers.when)('hasExpandIndicator', (0, _styledComponents.css)(["right:20px;"])));
 var ExpandedIndicatorContainer = (0, _styledComponents.default)(_Flex.default).attrs({
-  alignItems: 'center',
-  paddingBottom: 0.2,
-  paddingRight: 1
+  alignItems: 'center'
 }).withConfig({
   displayName: "Target__ExpandedIndicatorContainer",
-  componentId: "sc-1obpsql-2"
-})(["color:", ";&:hover{color:", ";}", ";"], (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["color:", ";&:hover{color:", ";}"], (0, _toColorString.default)(_color.default.opacity.charcoal40), (0, _toColorString.default)(_color.default.opacity.charcoal40))));
+  componentId: "sc-1obpsql-3"
+})(["position:absolute;bottom:2px;right:10px;color:", ";&:hover{color:", ";}", ";"], (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["color:", ";&:hover{color:", ";}"], (0, _toColorString.default)(_color.default.opacity.charcoal40), (0, _toColorString.default)(_color.default.opacity.charcoal40))));
 
 function Target(_ref, ref) {
   var clearButtonLabel = _ref.clearButtonLabel,
@@ -67,19 +71,46 @@ function Target(_ref, ref) {
       inputFieldLabel = _ref.inputFieldLabel,
       isPopoverVisible = _ref.isPopoverVisible,
       onClear = _ref.onClear,
+      multiple = _ref.multiple,
+      selectedValues = _ref.selectedValues,
+      removeSelected = _ref.removeSelected,
       readOnly = _ref.readOnly,
       variant = _ref.variant,
       toggleIsPopoverVisible = _ref.toggleIsPopoverVisible,
-      rest = _objectWithoutProperties(_ref, ["clearButtonLabel", "disabled", "hasClearButton", "inputFieldLabel", "isPopoverVisible", "onClear", "readOnly", "variant", "toggleIsPopoverVisible"]);
+      autoComplete = _ref.autoComplete,
+      rest = _objectWithoutProperties(_ref, ["clearButtonLabel", "disabled", "hasClearButton", "inputFieldLabel", "isPopoverVisible", "onClear", "multiple", "selectedValues", "removeSelected", "readOnly", "variant", "toggleIsPopoverVisible", "autoComplete"]);
 
   var translate = (0, _useTranslations.default)();
-  return _react.default.createElement(TargetContainer, null, _react.default.createElement(Input, _extends({}, rest, {
-    autoComplete: "false",
+  var hasExpandIndicator = !readOnly && variant === 'sync';
+  return _react.default.createElement(TargetContainer, {
+    hasExpandIndicator: hasExpandIndicator
+  }, multiple && selectedValues && selectedValues.map(function (_ref2) {
+    var id = _ref2.id,
+        label = _ref2.label;
+    return _react.default.createElement(_Tag.default, {
+      key: id,
+      text: label,
+      style: {
+        margin: '2px'
+      },
+      action: function action(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        removeSelected(id);
+      },
+      color: 'licoriceMousse',
+      actionIntent: "danger",
+      actionIcon: _Times.default,
+      actionAttributes: {
+        'aria-label': 'Delete'
+      }
+    });
+  }), _react.default.createElement(Input, _extends({
+    autoComplete: autoComplete || 'off',
     disabled: disabled,
     ref: ref
-  })), hasClearButton && !readOnly && _react.default.createElement(_Flex.default, {
-    paddingBottom: 0.2,
-    paddingX: 1
+  }, rest)), hasClearButton && !readOnly && _react.default.createElement(ClearButtonContainer, {
+    hasExpandIndicator: hasExpandIndicator
   }, _react.default.createElement(_Button.default, {
     "aria-label": translate(clearButtonLabel, 'combobox.clearButtonLabel', {
       label: inputFieldLabel
@@ -97,7 +128,7 @@ function Target(_ref, ref) {
     },
     size: "small",
     variant: "ghost"
-  })), !readOnly && variant === 'sync' && _react.default.createElement(ExpandedIndicatorContainer, {
+  })), hasExpandIndicator && _react.default.createElement(ExpandedIndicatorContainer, {
     disabled: disabled
   }, _react.default.createElement(_Button.default, {
     variant: "ghost",

package/lib/components/Combobox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AAMA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA0Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AA0ahE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAIzB,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AAqiBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}