@decisiv/ui-components 2.0.1-alpha.99 → 2.0.1

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

@@ -110,7 +110,7 @@ describe('Combobox', function () {
       expect(getByLabelText('test')).toBeVisible();
     });
   });
-  describe('when the input field has focus', function () {
+  describe('when the input field is clicked', function () {
     it('displays the list of options', function () {
       var _render4 = render(_react.default.createElement(_.default, {
         label: "test",
@@ -143,7 +143,7 @@ describe('Combobox', function () {
       // returns the <span>, but we need the `<li>`
 
 
-      var li = (0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement; // These two CSS values make an option look "active".
+      var li = (0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement.parentElement; // These two CSS values make an option look "active".
 
       expect(li).toHaveStyle("\n        background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n        color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n      "));
     });
@@ -593,7 +593,7 @@ describe('Combobox', function () {
 
         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.
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.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();
 
@@ -602,8 +602,8 @@ describe('Combobox', function () {
           keyCode: 40
         });
 
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).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        "));
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].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        "));
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.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        "));
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.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'), {
@@ -611,8 +611,8 @@ describe('Combobox', function () {
           keyCode: 38
         });
 
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).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        "));
-        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        "));
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.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        "));
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.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();
@@ -660,7 +660,7 @@ describe('Combobox', function () {
 
           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((0, _react2.queryByText)(baseElement, enabledElements[0]).parentElement.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();
 
@@ -672,7 +672,7 @@ describe('Combobox', function () {
           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((0, _react2.queryByText)(baseElement, enabledElements[1]).parentElement.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'), {
@@ -683,7 +683,7 @@ describe('Combobox', function () {
           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((0, _react2.queryByText)(baseElement, enabledElements[0]).parentElement.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();
@@ -854,7 +854,8 @@ describe('Combobox', function () {
       _react2.fireEvent.click(queryByLabelText('test'));
 
       expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label)).toBeInTheDocument();
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement).toHaveStyle("\n        background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n      "));
+      var li = (0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement.parentElement;
+      expect(li).toHaveAttribute('aria-selected', 'true');
     });
     describe('when typing', function () {
       it('does NOT update the selection automatically', function () {
@@ -887,7 +888,8 @@ describe('Combobox', function () {
         });
 
         expect(onChangeValue).toHaveBeenCalledTimes(1);
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+        var li = (0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement.parentElement;
+        expect(li).toHaveAttribute('aria-selected', 'true');
       });
     });
     describe('when clicking the clear button', function () {
@@ -940,7 +942,7 @@ describe('Combobox', function () {
       _react2.fireEvent.click(queryByLabelText('test'));
 
       expect(queryByLabelText('test')).toHaveValue('value');
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
       rerender(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions,
@@ -950,15 +952,15 @@ describe('Combobox', function () {
         onChangeValue: onChangeValue
       }));
       expect(queryByLabelText('test')).toHaveValue('value');
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+      expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
       expect(onChangeInputValue).not.toHaveBeenCalled();
       expect(onChangeValue).not.toHaveBeenCalled();
     });
   });
   describe('when a controlled component', function () {
     it('initializes with and prefers prop values', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var newInputValue, onChangeInputValue, onChangeValue, _render32, baseElement, queryByLabelText, rerender;
+      var newInputValue, onChangeInputValue, onChangeValue, _render32, baseElement, queryByLabelText, rerender, li, li2;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -984,7 +986,7 @@ describe('Combobox', function () {
               expect(queryByLabelText('test')).toHaveValue('value');
               expect(queryByLabelText('test')).toHaveAttribute('autoComplete', 'auto-complete-test');
               expect(queryByLabelText('test')).toHaveAttribute('type', 'search');
-              expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+              expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
               rerender(_react.default.createElement(_.default, {
                 label: "test",
                 options: defaultOptions,
@@ -994,8 +996,8 @@ describe('Combobox', function () {
                 onChangeValue: onChangeValue
               }));
               expect(queryByLabelText('test')).toHaveValue('second value');
-              expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
-              expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+              expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+              expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
               expect(onChangeInputValue).not.toHaveBeenCalled();
               expect(onChangeValue).not.toHaveBeenCalled();
 
@@ -1019,10 +1021,12 @@ describe('Combobox', function () {
 
               _react2.fireEvent.click(queryByLabelText('test'));
 
-              expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
-              expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+              li = (0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement.parentElement;
+              expect(li).toHaveAttribute('aria-selected', 'true');
+              li2 = (0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement.parentElement;
+              expect(li2).toHaveAttribute('aria-selected', 'false');
 
-            case 23:
+            case 25:
             case "end":
               return _context.stop();
           }
@@ -1031,12 +1035,12 @@ describe('Combobox', function () {
     })));
     describe('when in multiple select mode', function () {
       describe('when a value is selected', function () {
-        describe('when the "X" button is clicked to deselect a value', function () {
-          it('calls the onChangeValue prop with removed: true', function () {
+        describe('clicking the same value again', function () {
+          it('calls the onChangeValue prop with the expected values', function () {
             var onChangeValue = jest.fn();
 
             var _render33 = render(_react.default.createElement(_.default, {
-              label: "test",
+              label: "test label",
               options: defaultOptions,
               inputValue: "",
               value: [defaultOptions[1]],
@@ -1048,6 +1052,32 @@ describe('Combobox', function () {
 
             expect(queryByText(defaultOptions[1].label)).toBeInTheDocument();
 
+            _react2.fireEvent.click(queryByText('test label'));
+
+            _react2.fireEvent.click(queryByLabelText(defaultOptions[1].label));
+
+            expect(onChangeValue).toHaveBeenCalledWith(defaultOptions[1].id, expect.objectContaining({
+              removed: true
+            }));
+          });
+        });
+        describe('when the "X" button is clicked to deselect a value', function () {
+          it('calls the onChangeValue prop with removed: true', function () {
+            var onChangeValue = jest.fn();
+
+            var _render34 = render(_react.default.createElement(_.default, {
+              label: "test",
+              options: defaultOptions,
+              inputValue: "",
+              value: [defaultOptions[1]],
+              onChangeValue: onChangeValue,
+              multiple: true
+            })),
+                queryByText = _render34.queryByText,
+                queryByLabelText = _render34.queryByLabelText;
+
+            expect(queryByText(defaultOptions[1].label)).toBeInTheDocument();
+
             _react2.fireEvent.click(queryByLabelText('Delete'));
 
             expect(onChangeValue).toHaveBeenCalledWith(defaultOptions[1].id, expect.objectContaining({
@@ -1058,4 +1088,59 @@ describe('Combobox', function () {
       });
     });
   });
+  describe('when the isPopoverVisible is true', function () {
+    it('opens the popover', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var _render35, baseElement;
+
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _render35 = render(_react.default.createElement(_.default, {
+                label: "test",
+                options: defaultOptions,
+                hideLabel: true,
+                isPopoverVisible: true
+              })), baseElement = _render35.baseElement;
+              defaultOptions.forEach(function (_ref6) {
+                var label = _ref6.label;
+                expect((0, _react2.queryByText)(baseElement, label)).toBeInTheDocument();
+              });
+
+            case 2:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+    it('does not automatically close the popover', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      var _render36, baseElement, queryByLabelText;
+
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _render36 = render(_react.default.createElement(_.default, {
+                label: "test",
+                options: defaultOptions,
+                hideLabel: true,
+                isPopoverVisible: true
+              })), baseElement = _render36.baseElement, queryByLabelText = _render36.queryByLabelText;
+
+              _react2.fireEvent.click(queryByLabelText(defaultOptions[0].label));
+
+              defaultOptions.forEach(function (_ref8) {
+                var label = _ref8.label;
+                expect((0, _react2.queryByText)(baseElement, label)).toBeInTheDocument();
+              });
+
+            case 3:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    })));
+  });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAwC,CAAC;AAuFrD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAwC,CAAC;AAsGrD,eAAe,MAAM,CAAC"}

package/lib/components/Combobox/schema.js

@@ -24,6 +24,7 @@ var schema = (0, _reactDesc.describe)({
 });
 schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makePropTypes(), 'children', 'maxLength', 'onChange', 'showCharacterCount'), {
   clearButtonLabel: _reactDesc.PropTypes.string.description("A hidden label value for the clear button. The select component's label is available within the string for clarity.").defaultValue('Clear {label} value'),
+  containerSelector: _reactDesc.PropTypes.string.description("A CSS selector to the element where the Combobox should be rendered in, or \"parent\" to render the Combobox in-place.").defaultValue('body'),
   defaultInputValue: _reactDesc.PropTypes.string.description('The default text value for the input field.'),
   defaultValue: _reactDesc.PropTypes.string.description('The ID of the option that should be selected by default.'),
   loading: _reactDesc.PropTypes.bool.description('Useful if variant="async". When true, a loading message will render in the dropdown instead of options.'),
@@ -42,15 +43,20 @@ schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makeP
     value: _reactDesc.PropTypes.string.description('The value for an option in the dropdown list.')
   })).description('The array of data for the options that will be rendered'),
   inputValue: _reactDesc.PropTypes.string.description('The text value for the input field. If provided, controlling the Combobox must be handled externally. Overrides `defaultInputValue`.'),
+  isPopoverVisible: _reactDesc.PropTypes.bool.description("Whether or not the Combobox's popover should be visible. Setting this prop makes the Combobox's popover a \"controlled\" component."),
   value: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.string, _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({
     id: _reactDesc.PropTypes.string,
     label: _reactDesc.PropTypes.string,
     value: _reactDesc.PropTypes.string
   }))]).description('The ID of the option that is selected. If provided, controlling the Select must be handled externally. Overrides `defaultValue`.'),
+  listRef: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.func, _reactDesc.PropTypes.shape({
+    current: _reactDesc.PropTypes.any
+  })]).description('A ref for the list container.'),
   multiple: _reactDesc.PropTypes.bool.description('Used when multiple selections can be made in the Combobox').defaultValue(false),
   variant: _reactDesc.PropTypes.oneOf(['async', 'sync']).description('Enables different logic for rendering the dropdown list.').defaultValue('sync'),
   renderOptionLabel: _reactDesc.PropTypes.func.description('Function to customize render of option labels, called with the item value'),
-  zIndex: _reactDesc.PropTypes.number.description('Sets the z-index style property of the options list')
+  zIndex: _reactDesc.PropTypes.number.description('Sets the z-index style property of the options list'),
+  pointerEvents: _reactDesc.PropTypes.string.description('Defines the value of pointer-events of the options.').defaultValue('none')
 });
 var _default = schema;
 exports.default = _default;

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

@@ -1,20 +1,25 @@
-import { InputHTMLAttributes, Ref } from 'react';
+import { InputHTMLAttributes, Ref, RefObject } from 'react';
 import { BaseInputFieldProps } from '../../atoms/InputField';
 import { ActionHandler } from '../Tag/types';
 import { PopoverProps } from '../Popover/types';
 import { Items, DropdownListProps } from '../DropdownList';
+import { FlattenedItem, Size } from '../../atoms/OptionsList/types';
 export declare type ComboboxInputRef = HTMLInputElement;
 declare type Variant = 'async' | 'sync';
 interface TOnChangeMeta {
     removed: boolean;
 }
-export interface ComboboxProps extends Omit<React.InputHTMLAttributes<ComboboxInputRef>, 'onChange' | 'value'>, Omit<BaseInputFieldProps, 'children' | 'onChange' | 'value'>, Pick<DropdownListProps, 'onShow' | 'onHide' | 'renderOptionLabel'> {
+export interface ComboboxProps extends Omit<React.InputHTMLAttributes<ComboboxInputRef>, 'onChange' | 'value'>, Omit<BaseInputFieldProps, 'children' | 'onChange' | 'value'>, Pick<DropdownListProps, 'onShow' | 'onHide' | 'renderOptionLabel' | 'containerSelector' | 'pointerEvents'> {
     clearButtonLabel?: string;
     defaultInputValue?: string;
     defaultValue?: string;
+    enableVirtualization?: boolean;
+    getItemHeight?: (item: FlattenedItem, size: Size) => number;
     inputValue?: string;
+    isPopoverVisible?: boolean;
     multiple?: boolean;
     maxWidth?: string;
+    listRef?: RefObject<HTMLUListElement>;
     loading?: boolean;
     onBlur?: React.FocusEventHandler;
     onChangeInputValue?: (event?: React.ChangeEvent) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/types.ts"],"names":[],"mappings":"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"}

package/lib/components/Drawer/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ButtonProps } from '../Button';
+interface HeaderProps {
+    title?: string;
+    description?: string;
+}
+interface Action extends ButtonProps {
+    id: string;
+}
+interface FooterProps {
+    actions?: Action[];
+}
+export interface DrawerProps extends HeaderProps, FooterProps {
+    side?: 'left' | 'right';
+    zIndex?: number;
+    visible?: boolean;
+    onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent> | KeyboardEvent) => void;
+}
+export declare type OverlayProps = Pick<DrawerProps, 'zIndex' | 'side' | 'visible'>;
+declare const Drawer: React.FC<DrawerProps>;
+export default Drawer;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAkBhD,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,MAAO,SAAQ,WAAW;IAClC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,WAAW;IAC3D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,GAAG,aAAa,KAChE,IAAI,CAAC;CACX;AAED,oBAAY,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAM5E,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuHjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Drawer/index.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Times = _interopRequireDefault(require("@decisiv/iconix/lib/components/Times"));
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+
+var _Typography = require("../Typography");
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
+var _canUseDOM = _interopRequireDefault(require("../../utils/canUseDOM"));
+
+var _styles = require("./styles");
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; } }
+
+var stopPropagation = function stopPropagation(e) {
+  e.stopPropagation();
+};
+
+var Drawer = function Drawer(_ref) {
+  var title = _ref.title,
+      description = _ref.description,
+      children = _ref.children,
+      onClose = _ref.onClose,
+      _ref$zIndex = _ref.zIndex,
+      zIndex = _ref$zIndex === void 0 ? 100 : _ref$zIndex,
+      _ref$side = _ref.side,
+      side = _ref$side === void 0 ? 'right' : _ref$side,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? null : _ref$actions,
+      _ref$visible = _ref.visible,
+      visible = _ref$visible === void 0 ? false : _ref$visible;
+
+  var _useConfig = (0, _ConfigProvider.useConfig)(),
+      createPortal = _useConfig.createPortal;
+
+  var translate = (0, _useTranslations.default)();
+  var contentRef = (0, _react.useRef)(null);
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key === 'Escape') {
+      onClose && onClose(event);
+    }
+  }, [onClose]);
+  var handleOnClickOutside = (0, _react.useCallback)(function (event) {
+    if (onClose && visible) {
+      onClose(event);
+    }
+  }, [onClose, visible]); // Allow closing the modal by pressing the Escape key
+
+  (0, _react.useEffect)(function () {
+    if (visible && _canUseDOM.default) {
+      document.addEventListener('keydown', onKeyDown);
+      return function () {
+        document.removeEventListener('keydown', onKeyDown);
+      };
+    } // eslint has issues with no return statement here...
+
+
+    return undefined;
+  }, [visible, onKeyDown]);
+  var showHeader = !!onClose || !!title;
+  var showFooter = actions && actions.length > 0;
+  var closeBtnTooltip = translate('Close', 'drawer.closeBtnTooltip');
+  var closeDrawerLabel = translate('Close Drawer', 'drawer.closeBtn');
+  return createPortal(_react.default.createElement(_styles.Overlay, {
+    zIndex: zIndex,
+    side: side,
+    visible: visible,
+    "data-testid": "overlay",
+    onClick: handleOnClickOutside,
+    role: "presentation",
+    tabIndex: -1
+  }, _react.default.createElement(_styles.Content, {
+    ref: contentRef,
+    side: side,
+    visible: visible,
+    "data-testid": "content",
+    onClick: stopPropagation,
+    "aria-modal": "true",
+    role: "dialog"
+  }, showHeader && _react.default.createElement(_styles.Header, {
+    "data-testid": "drawer-header"
+  }, _react.default.createElement(_Flex.default, null, title && _react.default.createElement(_styles.Title, null, title), onClose && _react.default.createElement(_Tooltip.default, {
+    zIndex: 101,
+    target: // eslint-disable-next-line react/jsx-wrap-multilines
+    _react.default.createElement(_styles.CloseButton, {
+      variant: "ghost",
+      icon: _Times.default,
+      onClick: onClose,
+      "aria-label": closeDrawerLabel
+    })
+  }, closeBtnTooltip)), description && _react.default.createElement(_Typography.P, {
+    shade: 1,
+    paddingTop: 1
+  }, description)), _react.default.createElement(_styles.Body, null, children), showFooter && _react.default.createElement(_styles.Footer, {
+    "data-testid": "drawer-footer"
+  }, actions && actions.map(function (action, i) {
+    return _react.default.createElement(_Flex.default, {
+      key: action.id,
+      marginLeft: i > 0 ? 0.5 : 0
+    }, _react.default.createElement(_Button.default, action));
+  })))));
+};
+
+var _default = Drawer;
+exports.default = _default;