@decisiv/ui-components 2.0.1-alpha.70 → 2.0.1-alpha.74

package/lib/atoms/BooleanInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/BooleanInput/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAKZ,sBAAsB,EACvB,MAAM,OAAO,CAAC;AASf,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE9C,cAAc,SAAS,CAAC;AA+ExB,QAAA,MAAM,mBAAmB,EAAE,sBAAsB,CAC/C,YAAY,EACZ,KAAK,CACqB,CAAC;AAE7B,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/BooleanInput/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAKZ,sBAAsB,EACvB,MAAM,OAAO,CAAC;AAaf,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE9C,cAAc,SAAS,CAAC;AAsGxB,QAAA,MAAM,mBAAmB,EAAE,sBAAsB,CAC/C,YAAY,EACZ,KAAK,CACqB,CAAC;AAE7B,eAAe,mBAAmB,CAAC"}

package/lib/atoms/BooleanInput/index.js

@@ -12,6 +12,12 @@ var _Check = _interopRequireDefault(require("@decisiv/iconix/lib/components/Chec
 
 var _Message = _interopRequireDefault(require("../../components/Message"));
 
+var _Tooltip = _interopRequireDefault(require("../../components/Tooltip"));
+
+var _RequiredIcon = _interopRequireDefault(require("../RequiredIcon"));
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
 var _useUniqueId = _interopRequireDefault(require("../../utils/useUniqueId"));
 
 var _elements = require("./elements");
@@ -50,6 +56,8 @@ var BooleanInput = function BooleanInput(props, ref) {
       className = props.className,
       disabled = props.disabled,
       id = props.id,
+      required = props.required,
+      requiredMessageProp = props.requiredMessage,
       label = props.label,
       readOnly = props.readOnly,
       size = props.size,
@@ -57,7 +65,7 @@ var BooleanInput = function BooleanInput(props, ref) {
       inputRef = props.inputRef,
       providedType = props.type,
       warningMessage = props.warningMessage,
-      rest = _objectWithoutProperties(props, ["aria-describedby", "className", "disabled", "id", "label", "readOnly", "size", "status", "inputRef", "type", "warningMessage"]);
+      rest = _objectWithoutProperties(props, ["aria-describedby", "className", "disabled", "id", "required", "requiredMessage", "label", "readOnly", "size", "status", "inputRef", "type", "warningMessage"]);
 
   var type = !validTypes.includes(providedType) ? 'checkbox' : providedType;
   var uuid = (0, _useUniqueId.default)(id, 'input-');
@@ -67,6 +75,8 @@ var BooleanInput = function BooleanInput(props, ref) {
   var Mark = (0, _react.useMemo)(function () {
     return marks[type];
   }, [type]);
+  var translate = (0, _useTranslations.default)();
+  var requiredMessage = translate(requiredMessageProp, 'textField.requiredMessage');
   var warningMessageId = (0, _useUniqueId.default)(undefined, 'input-warning-', [warningMessage]);
   return _react.default.createElement(_elements.Container, {
     className: className,
@@ -78,6 +88,7 @@ var BooleanInput = function BooleanInput(props, ref) {
     warningMessage: warningMessage
   }, _react.default.createElement("input", _extends({}, rest, {
     "aria-describedby": warningMessage ? "".concat(ariaDescribedBy || '', " ").concat(warningMessageId) : ariaDescribedBy,
+    required: required,
     ref: inputRef,
     id: uuid,
     type: type // Checkbox/Radio inputs don't support read-only,
@@ -93,7 +104,13 @@ var BooleanInput = function BooleanInput(props, ref) {
   }, _react.default.createElement(_elements.StyledInput, null, _react.default.createElement(Mark, {
     size: size === 'small' ? 'small' : 'medium',
     "aria-hidden": true
-  })), text && _react.default.createElement("span", null, text)), warningMessage && _react.default.createElement(_Message.default, {
+  })), text && _react.default.createElement("span", null, text, required && _react.default.createElement(_Tooltip.default, {
+    placement: "top",
+    target: _react.default.createElement(_RequiredIcon.default, {
+      marginTop: "-3px",
+      "aria-label": requiredMessage
+    })
+  }, requiredMessage))), warningMessage && _react.default.createElement(_Message.default, {
     id: warningMessageId,
     intent: "warning"
   }, warningMessage));

package/lib/atoms/BooleanInput/index.test.js

@@ -95,35 +95,46 @@ describe('BooleanInput', function () {
         var input = container.querySelector('input');
         expect(input.checked).toBe(true);
       });
-      it('renders correctly with status warning', function () {
+      it('renders correctly when required', function () {
         var _render8 = (0, _react2.render)(_react.default.createElement(_.default, {
           id: "input",
           type: type,
-          status: "warning"
+          required: true,
+          label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
         })),
             container = _render8.container;
 
         expect(container).toMatchSnapshot();
       });
-      it('renders correctly with a warning message', function () {
+      it('renders correctly with status warning', function () {
         var _render9 = (0, _react2.render)(_react.default.createElement(_.default, {
           id: "input",
           type: type,
-          warningMessage: "warning message"
+          status: "warning"
         })),
             container = _render9.container;
 
         expect(container).toMatchSnapshot();
       });
+      it('renders correctly with a warning message', function () {
+        var _render10 = (0, _react2.render)(_react.default.createElement(_.default, {
+          id: "input",
+          type: type,
+          warningMessage: "warning message"
+        })),
+            container = _render10.container;
+
+        expect(container).toMatchSnapshot();
+      });
     });
   });
   it('falls back to type "checkbox" when provided an invalid type', function () {
-    var _render10 = (0, _react2.render)( // @ts-ignore invalid type
+    var _render11 = (0, _react2.render)( // @ts-ignore invalid type
     _react.default.createElement(_.default, {
       type: "foo",
       "data-testid": "input"
     })),
-        getByTestId = _render10.getByTestId;
+        getByTestId = _render11.getByTestId;
 
     expect(getByTestId('input').getAttribute('type')).toBe('checkbox');
   });

package/lib/atoms/BooleanInput/types.d.ts

@@ -8,6 +8,8 @@ export interface Props extends BaseProps {
     inputRef?: Ref<InputRef>;
     label?: string;
     readOnly?: boolean;
+    required?: boolean;
+    requiredMessage?: string;
     ref?: Ref<ContainerRef>;
     size?: 'normal' | 'small';
     status?: 'normal' | 'warning';

package/lib/atoms/BooleanInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/BooleanInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEtD,oBAAY,QAAQ,GAAG,gBAAgB,CAAC;AACxC,oBAAY,YAAY,GAAG,cAAc,CAAC;AAE1C,aAAK,SAAS,GAAG,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC;AAEjE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,IAAI,EAAE,UAAU,GAAG,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/BooleanInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEtD,oBAAY,QAAQ,GAAG,gBAAgB,CAAC;AACxC,oBAAY,YAAY,GAAG,cAAc,CAAC;AAE1C,aAAK,SAAS,GAAG,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC;AAEjE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,IAAI,EAAE,UAAU,GAAG,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB"}

package/lib/atoms/InputField/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,GAAG,EACH,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA+JD,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,GAAG,CAAC,GAAG,CAAC,EACR,mBAAmB,CACK,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,GAAG,EACH,sBAAsB,EAGvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAgKD,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,GAAG,CAAC,GAAG,CAAC,EACR,mBAAmB,CACK,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}

package/lib/atoms/InputField/index.js

@@ -29,7 +29,7 @@ var _Containers = require("./Containers");
 
 var _InputLabel = _interopRequireDefault(require("./InputLabel"));
 
-var _RequiredIcon = _interopRequireDefault(require("./RequiredIcon"));
+var _RequiredIcon = _interopRequireDefault(require("../RequiredIcon"));
 
 var _HelpMessage = _interopRequireDefault(require("./HelpMessage"));
 
@@ -132,8 +132,9 @@ function InputField(props, targetRef) {
   };
 
   var onChangeHandler = function onChangeHandler(event) {
-    if (event && event.target.value) {
-      setContentLength(event.target.value.length);
+    if (event && event.target) {
+      var targetValue = event.target.value;
+      setContentLength(targetValue ? targetValue.length : 0);
     }
 
     if (onChange) {

package/lib/atoms/InputField/index.test.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require("."));
+
+var _providers = require("../../providers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+describe('InputField', function () {
+  var wrapper = function wrapper(_ref) {
+    var children = _ref.children;
+    return _react.default.createElement(_providers.ConfigProvider, null, children);
+  };
+
+  var render = function render(ui, options) {
+    return (0, _react2.render)(ui, _objectSpread({}, options, {
+      wrapper: wrapper
+    }));
+  };
+
+  var Dummy = _styledComponents.default.textarea.attrs({
+    'data-testid': 'test-textarea'
+  }).withConfig({
+    displayName: "indextest__Dummy",
+    componentId: "i3buhi-0"
+  })([""]);
+
+  var textFinder = function textFinder(text) {
+    return function (content, node) {
+      var hasText = function hasText(n) {
+        return n.textContent === text;
+      };
+
+      var nodeHasText = hasText(node);
+      var childrenDontHaveText = Array.from(node.children).every(function (child) {
+        return !hasText(child);
+      });
+      return nodeHasText && childrenDontHaveText;
+    };
+  };
+
+  describe('character counter', function () {
+    it('updates as text is entered', function () {
+      var label = 'label';
+      var initialValue = 'Initial text';
+
+      var _render = render(_react.default.createElement(_.default, {
+        label: label,
+        value: initialValue,
+        showCharacterCount: true,
+        maxLength: 100
+      }, function (p) {
+        return _react.default.createElement(Dummy, p);
+      })),
+          getByText = _render.getByText,
+          getByTestId = _render.getByTestId;
+
+      expect(getByText(textFinder("You have ".concat(100 - initialValue.length, " characters left (100 max).")))).toBeTruthy();
+      var textarea = getByTestId('test-textarea');
+      var newValue = "".concat(initialValue, " with some additional text");
+
+      _react2.fireEvent.change(textarea, {
+        target: {
+          value: newValue
+        }
+      });
+
+      expect(getByText(textFinder("You have ".concat(100 - newValue.length, " characters left (100 max).")))).toBeTruthy();
+
+      _react2.fireEvent.change(textarea, {
+        target: {
+          value: ''
+        }
+      });
+
+      expect(getByText(textFinder("You have 100 characters left (100 max)."))).toBeTruthy();
+    });
+  });
+});

package/lib/atoms/OptionsList/Option.js

@@ -138,8 +138,8 @@ function Option(props) {
     updateActiveId(disabled ? '' : id);
   }, [setInputMethod, updateActiveId, disabled, id]);
   var handleClick = (0, _react.useCallback)(function () {
-    toggleItemSelection(id);
-  }, [toggleItemSelection, id]);
+    if (!disabled) toggleItemSelection(id);
+  }, [toggleItemSelection, id, disabled]);
   var LabelWrapper = (0, _react.useMemo)(function () {
     return function (_ref2) {
       var children = _ref2.children;

package/lib/atoms/OptionsList/index.test.js

@@ -41,6 +41,8 @@ var item0Id = '0';
 var item0Label = 'Option 0';
 var item2Id = '2';
 var item2Label = 'Option 2';
+var disabledItemLabel = 'Option 4';
+var disabledItemId = '4';
 var items = [{
   id: item0Id,
   label: item0Label,
@@ -75,8 +77,8 @@ var items = [{
 }, {
   label: 'Category 2',
   items: [{
-    id: '4',
-    label: 'Option 4',
+    id: disabledItemId,
+    label: disabledItemLabel,
     value: '4',
     disabled: true
   }, {
@@ -189,15 +191,58 @@ describe('OptionsList', function () {
     expect(onChange).toHaveBeenCalledWith(selectedItem.id);
     expect(getByLabelText(selectedItem.label)).toBeChecked();
   });
+  describe('selecting disabled element with keyboard', function () {
+    it('selects an item with Enter or Space key', function () {
+      var onChange = jest.fn();
+      var onlyDisabledItems = [{
+        id: '2',
+        label: 'Option 2',
+        value: '2',
+        disabled: true
+      }, {
+        id: disabledItemId,
+        label: disabledItemLabel,
+        value: '4',
+        disabled: true
+      }];
+
+      var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        items: onlyDisabledItems,
+        onChange: onChange
+      }))),
+          getByLabelText = _render5.getByLabelText,
+          container = _render5.container;
+
+      var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
+
+      _react2.fireEvent.keyDown(container, {
+        key: 'Tab'
+      });
+
+      _react2.fireEvent.focus(optionsList);
+
+      _react2.fireEvent.keyDown(optionsList, {
+        key: 'ArrowDown'
+      });
+
+      _react2.fireEvent.keyDown(optionsList, {
+        key: 'Enter'
+      });
+
+      expect(onChange).not.toHaveBeenCalledWith(disabledItemId);
+      expect(onChange).not.toHaveBeenCalled();
+      expect(getByLabelText(disabledItemLabel)).not.toBeChecked();
+    });
+  });
   describe('single selection', function () {
     it('calls onChange with id when item is clicked', function () {
       var onChange = jest.fn();
 
-      var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         onChange: onChange
       }))),
-          getByText = _render5.getByText,
-          getByLabelText = _render5.getByLabelText;
+          getByText = _render6.getByText,
+          getByLabelText = _render6.getByLabelText;
 
       var item = items[0];
 
@@ -212,15 +257,33 @@ describe('OptionsList', function () {
 
       expect(getByLabelText(subItem.label)).toBeChecked();
     });
+    describe('disabled element', function () {
+      it('does not calls onChange when item is clicked', function () {
+        var onChange = jest.fn();
+
+        var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          onChange: onChange
+        }))),
+            getByText = _render7.getByText,
+            getByLabelText = _render7.getByLabelText;
+
+        _react2.fireEvent.click(getByText(disabledItemLabel));
+
+        expect(onChange).not.toHaveBeenLastCalledWith(disabledItemId);
+        expect(onChange).not.toHaveBeenCalled(); // the item shouldn't be marked as selected
+
+        expect(getByLabelText(disabledItemLabel)).not.toBeChecked();
+      });
+    });
     describe('controlled', function () {
       it('prefers value over internal', function () {
         var selected = items[1];
 
-        var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           selected: selected.id
         }))),
-            getByText = _render6.getByText,
-            getByLabelText = _render6.getByLabelText;
+            getByText = _render8.getByText,
+            getByLabelText = _render8.getByLabelText;
 
         var item = items[0];
 
@@ -235,12 +298,12 @@ describe('OptionsList', function () {
     it('calls onChange with array of selected ids when item is clicked', function () {
       var onChange = jest.fn();
 
-      var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         onChange: onChange,
         multiple: true
       }))),
-          getByText = _render7.getByText,
-          getByLabelText = _render7.getByLabelText;
+          getByText = _render9.getByText,
+          getByLabelText = _render9.getByLabelText;
 
       var item = items[0];
 
@@ -279,12 +342,12 @@ describe('OptionsList', function () {
         onClick: onClick
       }];
 
-      var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         actions: actions,
         multiple: true
       }))),
-          baseElement = _render8.baseElement,
-          getByText = _render8.getByText;
+          baseElement = _render10.baseElement,
+          getByText = _render10.getByText;
 
       actions.forEach(function (_ref5) {
         var label = _ref5.text;

package/lib/atoms/RequiredIcon.d.ts

@@ -0,0 +1,9 @@
+import { RefForwardingComponent, RefAttributes } from 'react';
+interface Props {
+    marginLeft?: string;
+    marginTop?: string;
+}
+declare type RequiredIconType = RefForwardingComponent<HTMLDivElement, RefAttributes<HTMLDivElement> & Props>;
+declare const RequiredIcon: RequiredIconType;
+export default RequiredIcon;
+//# sourceMappingURL=RequiredIcon.d.ts.map

package/lib/atoms/RequiredIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequiredIcon.d.ts","sourceRoot":"","sources":["../../src/atoms/RequiredIcon.tsx"],"names":[],"mappings":"AACA,OAAc,EACZ,sBAAsB,EAGtB,aAAa,EACd,MAAM,OAAO,CAAC;AAOf,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,aAAK,gBAAgB,GAAG,sBAAsB,CAC5C,cAAc,EACd,aAAa,CAAC,cAAc,CAAC,GAAG,KAAK,CACtC,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,gBASnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/atoms/{InputField/RequiredIcon.js → RequiredIcon.js}

@@ -21,10 +21,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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); }
 
-var RequiredIconContainer = _styledComponents.default.span.withConfig({
+var RequiredIconContainer = _styledComponents.default.div.withConfig({
   displayName: "RequiredIcon__RequiredIconContainer",
-  componentId: "d5jm3s-0"
-})(["margin-left:5px;"]);
+  componentId: "sc-18pnvm5-0"
+})(["display:inline;margin-left:", ";margin-top:", ";"], function (props) {
+  return props.marginLeft || '3px';
+}, function (props) {
+  return props.marginTop || '0px';
+});
 
 var RequiredIcon = (0, _react.forwardRef)(function (props, ref) {
   return _react.default.createElement(RequiredIconContainer, _extends({}, props, {

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/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AAQA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AA+hBhE,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;AAIzB,eAAe,eAAe,CAAC"}

package/lib/components/Combobox/index.js

@@ -13,6 +13,8 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _union = _interopRequireDefault(require("lodash/union"));
 
+var _isArray = _interopRequireDefault(require("lodash/isArray"));
+
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 
 var _last = _interopRequireDefault(require("lodash/last"));
@@ -175,17 +177,38 @@ function Combobox(props, ref) {
       return !old;
     });
   }, [setIsPopoverVisibleState]);
+  /**
+   * This generates a flat list of the options (including those in categories)
+   * in the order they are presented in the dropdown list. Filtering disabled elements.
+   */
+
+  var flatOptions = (0, _react.useMemo)(function () {
+    return options.reduce(function (acc, curr) {
+      if ((0, _utils.isCategory)(curr)) {
+        var items = (0, _isArray.default)(curr.items) ? curr.items.filter(function (option) {
+          return !option.disabled;
+        }) : [];
+        return acc.concat(items);
+      }
+
+      if (!curr.disabled) {
+        return acc.concat(curr);
+      }
+
+      return acc;
+    }, []);
+  }, [options]);
   (0, _react.useEffect)(function () {
-    // Set the "default" active ID to the first, if it exists.
-    if (!(0, _isEmpty.default)(options) && !activeId) {
-      setActiveId((0, _get.default)(options, '0.id'));
+    // Set the "default" active ID to the first in flatOptions, if it exists.
+    if (!(0, _isEmpty.default)(flatOptions) && !activeId) {
+      setActiveId((0, _get.default)(flatOptions, '0.id'));
     } // For async comboboxes, if the input is focused, the dropdown should be open.
 
 
     if (isFocused && variant === 'async' || multiple && internalInputValue !== '') {
       updateIsPopoverVisible(true);
     }
-  }, [activeId, isFocused, options, variant, multiple, internalInputValue, updateIsPopoverVisible]); // The selectedValue is the id of the selectedOption, or an empty string if none selected.
+  }, [activeId, isFocused, flatOptions, variant, multiple, internalInputValue, updateIsPopoverVisible]); // The selectedValue is the id of the selectedOption, or an empty string if none selected.
 
   var _useState7 = (0, _react.useState)(!Array.isArray(propValue) && propValue || !Array.isArray(defaultValue) && defaultValue || undefined),
       _useState8 = _slicedToArray(_useState7, 2),
@@ -344,20 +367,6 @@ function Combobox(props, ref) {
     setIsFocused(true);
     onFocus && onFocus(event);
   }, [onFocus, updateIsPopoverVisible, variant]);
-  /**
-   * This generates a flat list of the options (including those in categories)
-   * in the order they are presented in the dropdown list.
-   */
-
-  var flatOptions = (0, _react.useMemo)(function () {
-    return options.reduce(function (acc, curr) {
-      if ((0, _utils.isCategory)(curr)) {
-        return acc.concat(curr.items);
-      }
-
-      return acc.concat(curr);
-    }, []);
-  }, [options]);
   /**
    * Pressing certain keys when focused on the Combobox component should trigger some actions.
    */

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

@@ -429,6 +429,54 @@ describe('Combobox', function () {
         }));
         expect(queryByLabelText('test')).toHaveValue(defaultOptions[0].label);
       });
+      describe('with first element disabled', function () {
+        it('selects the first element that is not disabled', function () {
+          var onChangeValue = jest.fn();
+          var options = [{
+            id: '0',
+            label: 'option 0',
+            value: 'option 0',
+            disabled: true
+          }, {
+            id: '1',
+            label: 'option 1',
+            value: 'option 1'
+          }, {
+            id: '2',
+            label: 'option 2',
+            value: 'option 2'
+          }];
+
+          var _render14 = render(_react.default.createElement(_.default, {
+            label: "test",
+            onChangeValue: onChangeValue,
+            options: options
+          })),
+              baseElement = _render14.baseElement,
+              queryByText = _render14.queryByText,
+              queryByLabelText = _render14.queryByLabelText;
+
+          _react2.fireEvent.click(queryByText('test'));
+
+          _react2.fireEvent.change(queryByLabelText('test'), {
+            target: {
+              value: 'value'
+            }
+          });
+
+          expect((0, _react2.queryByText)(baseElement, options[1].label)).toBeInTheDocument();
+
+          _react2.fireEvent.keyDown(queryByLabelText('test'), {
+            key: 'Enter',
+            keyCode: 13
+          });
+
+          expect(onChangeValue).toHaveBeenCalledWith(options[1].id, expect.objectContaining({
+            removed: false
+          }));
+          expect(queryByLabelText('test')).toHaveValue(options[1].label);
+        });
+      });
     });
     describe('when pressing the TAB key', function () {
       it('closes the dropdown, advances focus', function () {
@@ -437,14 +485,14 @@ describe('Combobox', function () {
 
         var chevronDownPathD = chevronDownContainer.querySelector('svg path').getAttribute('d');
 
-        var _render14 = render(_react.default.createElement(_.default, {
+        var _render15 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions
         })),
-            baseElement = _render14.baseElement,
-            container = _render14.container,
-            queryByText = _render14.queryByText,
-            queryByLabelText = _render14.queryByLabelText;
+            baseElement = _render15.baseElement,
+            container = _render15.container,
+            queryByText = _render15.queryByText,
+            queryByLabelText = _render15.queryByLabelText;
 
         _react2.fireEvent.click(queryByText('test'));
 
@@ -473,12 +521,12 @@ describe('Combobox', function () {
       it('preserves the typed text, does NOT make a selection', function () {
         var onChangeValue = jest.fn();
 
-        var _render15 = render(_react.default.createElement(_.default, {
+        var _render16 = render(_react.default.createElement(_.default, {
           label: "test",
           onChangeValue: onChangeValue,
           options: defaultOptions
         })),
-            queryByLabelText = _render15.queryByLabelText;
+            queryByLabelText = _render16.queryByLabelText;
 
         var value = 'value';
 
@@ -506,20 +554,20 @@ describe('Combobox', function () {
         var onChangeInputValue = jest.fn();
         var onChangeValue = jest.fn();
 
-        var _render16 = render(_react.default.createElement(_.default, {
+        var _render17 = render(_react.default.createElement(_.default, {
           label: "test",
           onChangeInputValue: onChangeInputValue,
           onChangeValue: onChangeValue,
           options: defaultOptions
         })),
-            baseElement = _render16.baseElement,
-            queryByLabelText = _render16.queryByLabelText; // You can not fire an event on the input in the UI unless you are already focused on it.
+            baseElement = _render17.baseElement,
+            queryByLabelText = _render17.queryByLabelText; // You can not fire an event on the input in the UI unless you are already focused on it.
         // This click focuses on the input.
 
 
         _react2.fireEvent.click(queryByLabelText('test'));
 
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label)).toBeInTheDocument(); // The first element should be "active" by default.
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label)).toBeInTheDocument(); // The first element should be "active" by default if it's not disabled.
 
         expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        ")); // The focus should always remain on the input. The "active" item is kind of a fake.
 
@@ -545,16 +593,88 @@ describe('Combobox', function () {
         expect(onChangeInputValue).not.toHaveBeenCalled();
         expect(onChangeValue).not.toHaveBeenCalled();
       });
+      describe('with a disabled option', function () {
+        it('expands and navigates through the dropdown list, keeps focus on the input', function () {
+          var onChangeInputValue = jest.fn();
+          var onChangeValue = jest.fn();
+          var enabledElements = ['enabled 1', 'enabled 2'];
+          var options = [{
+            id: enabledElements[0],
+            label: enabledElements[0],
+            value: 'option 0'
+          }, {
+            id: '1',
+            label: 'option 1',
+            value: 'option 1',
+            disabled: true
+          }, {
+            label: 'category 0',
+            items: [{
+              id: 'cat0Opt0',
+              label: 'category 0 option 0',
+              value: 'category 0 option 0',
+              disabled: true
+            }, {
+              id: enabledElements[1],
+              label: enabledElements[1],
+              value: 'category 0 option 1'
+            }]
+          }];
+
+          var _render18 = render(_react.default.createElement(_.default, {
+            label: "test",
+            onChangeInputValue: onChangeInputValue,
+            onChangeValue: onChangeValue,
+            options: options
+          })),
+              baseElement = _render18.baseElement,
+              queryByLabelText = _render18.queryByLabelText; // You can not fire an event on the input in the UI unless you are already focused on it.
+          // This click focuses on the input.
+
+
+          _react2.fireEvent.click(queryByLabelText('test'));
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[0])).toBeInTheDocument(); // The first element should be "active" by default if it's not disabled.
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[0]).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          ")); // The focus should always remain on the input. The "active" item is kind of a fake.
+
+          expect(queryByLabelText('test')).toHaveFocus();
+
+          _react2.fireEvent.keyDown(queryByLabelText('test'), {
+            key: 'ArrowDown',
+            keyCode: 40
+          });
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[0]).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          ")); // The next active element should be the next element in the list
+          // that is not marked as disabled
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[1]).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          "));
+          expect(queryByLabelText('test')).toHaveFocus();
+
+          _react2.fireEvent.keyDown(queryByLabelText('test'), {
+            key: 'ArrowUp',
+            keyCode: 38
+          });
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[1]).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          ")); // The next active element should be the previous element in the list
+          // that is not marked as disabled
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[0]).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          "));
+          expect(queryByLabelText('test')).toHaveFocus();
+          expect(onChangeInputValue).not.toHaveBeenCalled();
+          expect(onChangeValue).not.toHaveBeenCalled();
+        });
+      });
     });
     describe('when pressing the ESCAPE key', function () {
       it('closes the dropdown, keeps focus on input', function () {
-        var _render17 = render(_react.default.createElement(_.default, {
+        var _render19 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions
         })),
-            baseElement = _render17.baseElement,
-            queryByLabelText = _render17.queryByLabelText,
-            queryByText = _render17.queryByText;
+            baseElement = _render19.baseElement,
+            queryByLabelText = _render19.queryByLabelText,
+            queryByText = _render19.queryByText;
 
         _react2.fireEvent.click(queryByText('test'));
 
@@ -572,13 +692,13 @@ describe('Combobox', function () {
       it('preserves the typed text, does NOT make a selection', function () {
         var onChangeValue = jest.fn();
 
-        var _render18 = render(_react.default.createElement(_.default, {
+        var _render20 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           onChangeValue: onChangeValue
         })),
-            queryByLabelText = _render18.queryByLabelText,
-            queryByText = _render18.queryByText;
+            queryByLabelText = _render20.queryByLabelText,
+            queryByText = _render20.queryByText;
 
         var value = 'value';
 
@@ -604,18 +724,18 @@ describe('Combobox', function () {
   });
   describe('when the input field has text', function () {
     it('renders the "clear" button', function () {
-      var _render19 = render(_react.default.createElement(_Times.default, null)),
-          timesContainer = _render19.container;
+      var _render21 = render(_react.default.createElement(_Times.default, null)),
+          timesContainer = _render21.container;
 
       var timesPathD = timesContainer.querySelector('svg path').getAttribute('d');
 
-      var _render20 = render(_react.default.createElement(_.default, {
+      var _render22 = render(_react.default.createElement(_.default, {
         defaultInputValue: "value",
         label: "test",
         options: defaultOptions
       })),
-          container = _render20.container,
-          queryByLabelText = _render20.queryByLabelText;
+          container = _render22.container,
+          queryByLabelText = _render22.queryByLabelText;
 
       expect(queryByLabelText('test')).toHaveValue('value');
       expect(container.querySelectorAll('svg path')[0]).toHaveAttribute('d', timesPathD);
@@ -627,12 +747,12 @@ describe('Combobox', function () {
           inputValue = event ? event.target.value : '';
         });
 
-        var _render21 = render(_react.default.createElement(_.default, {
+        var _render23 = render(_react.default.createElement(_.default, {
           label: "test",
           onChangeInputValue: onChangeInputValue
         })),
-            container = _render21.container,
-            queryByLabelText = _render21.queryByLabelText;
+            container = _render23.container,
+            queryByLabelText = _render23.queryByLabelText;
 
         var value = 'value';
 
@@ -658,13 +778,13 @@ describe('Combobox', function () {
     it('updates the input value with the label of the selection', function () {
       var onChangeValue = jest.fn();
 
-      var _render22 = render(_react.default.createElement(_.default, {
+      var _render24 = render(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions,
         onChangeValue: onChangeValue
       })),
-          baseElement = _render22.baseElement,
-          queryByLabelText = _render22.queryByLabelText;
+          baseElement = _render24.baseElement,
+          queryByLabelText = _render24.queryByLabelText;
 
       _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -678,13 +798,13 @@ describe('Combobox', function () {
       expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label)).not.toBeInTheDocument();
     });
     it('shows the selected tag when multiple select is enabled', function () {
-      var _render23 = render(_react.default.createElement(_.default, {
+      var _render25 = render(_react.default.createElement(_.default, {
         label: "test",
         multiple: true,
         options: defaultOptions
       })),
-          baseElement = _render23.baseElement,
-          queryByLabelText = _render23.queryByLabelText;
+          baseElement = _render25.baseElement,
+          queryByLabelText = _render25.queryByLabelText;
 
       _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -693,12 +813,12 @@ describe('Combobox', function () {
       expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label)).toBeInTheDocument();
     });
     it('renders as "selected" in the dropdown list', function () {
-      var _render24 = render(_react.default.createElement(_.default, {
+      var _render26 = render(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions
       })),
-          baseElement = _render24.baseElement,
-          queryByLabelText = _render24.queryByLabelText;
+          baseElement = _render26.baseElement,
+          queryByLabelText = _render26.queryByLabelText;
 
       _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -716,14 +836,14 @@ describe('Combobox', function () {
       it('does NOT update the selection automatically', function () {
         var onChangeValue = jest.fn();
 
-        var _render25 = render(_react.default.createElement(_.default, {
+        var _render27 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           onChangeValue: onChangeValue
         })),
-            baseElement = _render25.baseElement,
-            queryByLabelText = _render25.queryByLabelText,
-            queryByText = _render25.queryByText;
+            baseElement = _render27.baseElement,
+            queryByLabelText = _render27.queryByLabelText,
+            queryByText = _render27.queryByText;
 
         _react2.fireEvent.click(queryByText('test'));
 
@@ -750,13 +870,13 @@ describe('Combobox', function () {
       it('clears the selection', function () {
         var onChangeValue = jest.fn();
 
-        var _render26 = render(_react.default.createElement(_.default, {
+        var _render28 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           onChangeValue: onChangeValue
         })),
-            baseElement = _render26.baseElement,
-            queryByLabelText = _render26.queryByLabelText;
+            baseElement = _render28.baseElement,
+            queryByLabelText = _render28.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -781,7 +901,7 @@ describe('Combobox', function () {
       var onChangeInputValue = jest.fn();
       var onChangeValue = jest.fn();
 
-      var _render27 = render(_react.default.createElement(_.default, {
+      var _render29 = render(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions,
         defaultInputValue: "value",
@@ -789,9 +909,9 @@ describe('Combobox', function () {
         onChangeInputValue: onChangeInputValue,
         onChangeValue: onChangeValue
       })),
-          baseElement = _render27.baseElement,
-          queryByLabelText = _render27.queryByLabelText,
-          rerender = _render27.rerender;
+          baseElement = _render29.baseElement,
+          queryByLabelText = _render29.queryByLabelText,
+          rerender = _render29.rerender;
 
       _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -814,7 +934,7 @@ describe('Combobox', function () {
   });
   describe('when a controlled component', function () {
     it('initializes with and prefers prop values', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var newInputValue, onChangeInputValue, onChangeValue, _render28, baseElement, queryByLabelText, rerender;
+      var newInputValue, onChangeInputValue, onChangeValue, _render30, baseElement, queryByLabelText, rerender;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -824,7 +944,7 @@ describe('Combobox', function () {
                 newInputValue = event ? event.target.value : '';
               });
               onChangeValue = jest.fn();
-              _render28 = render(_react.default.createElement(_.default, {
+              _render30 = render(_react.default.createElement(_.default, {
                 label: "test",
                 options: defaultOptions,
                 inputValue: "value",
@@ -833,7 +953,7 @@ describe('Combobox', function () {
                 onChangeValue: onChangeValue,
                 autoComplete: "auto-complete-test",
                 type: "search"
-              })), baseElement = _render28.baseElement, queryByLabelText = _render28.queryByLabelText, rerender = _render28.rerender;
+              })), baseElement = _render30.baseElement, queryByLabelText = _render30.queryByLabelText, rerender = _render30.rerender;
 
               _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -891,7 +1011,7 @@ describe('Combobox', function () {
           it('calls the onChangeValue prop with removed: true', function () {
             var onChangeValue = jest.fn();
 
-            var _render29 = render(_react.default.createElement(_.default, {
+            var _render31 = render(_react.default.createElement(_.default, {
               label: "test",
               options: defaultOptions,
               inputValue: "",
@@ -899,8 +1019,8 @@ describe('Combobox', function () {
               onChangeValue: onChangeValue,
               multiple: true
             })),
-                queryByText = _render29.queryByText,
-                queryByLabelText = _render29.queryByLabelText;
+                queryByText = _render31.queryByText,
+                queryByLabelText = _render31.queryByLabelText;
 
             expect(queryByText(defaultOptions[1].label)).toBeInTheDocument();
 

package/lib/providers/ConfigProvider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/ConfigProvider/index.tsx"],"names":[],"mappings":"AACA,OAAc,EACZ,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAUf,OAAO,EAGL,aAAa,EACb,aAAa,EACd,MAAM,iBAAiB,CAAC;AAQzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AAErC,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,aAAa,CAoGpD,CAAC;AAQF,QAAA,MAAM,SAAS,qBACkB,CAAC;AAElC,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/ConfigProvider/index.tsx"],"names":[],"mappings":"AACA,OAAc,EACZ,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAUf,OAAO,EAGL,aAAa,EACb,aAAa,EACd,MAAM,iBAAiB,CAAC;AAQzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AAErC,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,aAAa,CAwGpD,CAAC;AAQF,QAAA,MAAM,SAAS,qBACkB,CAAC;AAElC,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC"}

package/lib/providers/ConfigProvider/index.js

@@ -166,7 +166,11 @@ var ConfigProvider = function ConfigProvider(props) {
     var managerProps = {};
 
     if (extraScope) {
-      managerProps.stylisPlugins = [(0, _stylisPluginExtraScope.default)(extraScope)];
+      var extraScopePlugin = (0, _stylisPluginExtraScope.default)(extraScope);
+      Object.defineProperty(extraScopePlugin, 'name', {
+        value: 'extraScopePlugin'
+      });
+      managerProps.stylisPlugins = [extraScopePlugin];
     }
 
     return managerProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.70+22b2938",
+  "version": "2.0.1-alpha.74+9a06b08",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "22b2938757afb05e066c533b7df0027a2576ebc0"
+  "gitHead": "9a06b08f6ec5f760dc211acf0a795e031183034f"
 }

package/lib/atoms/InputField/RequiredIcon.d.ts

@@ -1,4 +0,0 @@
-import { RefForwardingComponent, RefAttributes } from 'react';
-declare const RequiredIcon: RefForwardingComponent<HTMLDivElement, RefAttributes<HTMLDivElement>>;
-export default RequiredIcon;
-//# sourceMappingURL=RequiredIcon.d.ts.map

package/lib/atoms/InputField/RequiredIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RequiredIcon.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/RequiredIcon.tsx"],"names":[],"mappings":"AACA,OAAc,EAEZ,sBAAsB,EAEtB,aAAa,EACd,MAAM,OAAO,CAAC;AAWf,QAAA,MAAM,YAAY,EAAE,sBAAsB,CACxC,cAAc,EACd,aAAa,CAAC,cAAc,CAAC,CAU9B,CAAC;AAEF,eAAe,YAAY,CAAC"}