@decisiv/ui-components 2.0.1-alpha.21 → 2.0.1-alpha.210

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;AAqErD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAwC,CAAC;AAkGrD,eAAe,MAAM,CAAC"}

package/lib/components/Combobox/schema.js

@@ -24,12 +24,15 @@ 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.'),
   onChange: _reactDesc.PropTypes.func.description('This event handler is not called by Combobox. Prefer the more specific `onChangeInputValue` or `onChangeValue` props.').format('DO NOT USE'),
   onChangeInputValue: _reactDesc.PropTypes.func.description('An event handler called when the text value in the `<input>` is changed (including when it is cleared). IMPORTANT NOTE: This handler may be called with a change event, or with _NO_ arguments (indicates the input value was cleared). Your function must be able to handle both.'),
-  onChangeValue: _reactDesc.PropTypes.func.description('An event handler called when a option in the dropdown is selected (with keyboard or click). Called with the `id` of the selected option.'),
+  onChangeValue: _reactDesc.PropTypes.func.description('An event handler called when a option in the dropdown is selected (with keyboard or click). Called with the `id` of the selected option (may be null under circumstances). Second argument is an object with key: value of `removed: boolean`.'),
+  onHide: _reactDesc.PropTypes.func.description('An event handler called when the options list is expanded. Called with no arguments.'),
+  onShow: _reactDesc.PropTypes.func.description('An event handler called when the options list is collapsed. Called with no arguments.'),
   options: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({
     decoration: _reactDesc.PropTypes.shape({
       type: _reactDesc.PropTypes.oneOf(['Avatar', 'Badge'])
@@ -40,10 +43,17 @@ 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`.'),
-  value: _reactDesc.PropTypes.string.description('The ID of the option that is selected. If provided, controlling the Select must be handled externally. Overrides `defaultValue`.'),
+  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`.'),
+  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,23 +1,30 @@
 import { InputHTMLAttributes, Ref } from 'react';
 import { BaseInputFieldProps } from '../../atoms/InputField';
+import { ActionHandler } from '../Tag/types';
 import { PopoverProps } from '../Popover/types';
 import { Items, DropdownListProps } from '../DropdownList';
 export declare type ComboboxInputRef = HTMLInputElement;
 declare type Variant = 'async' | 'sync';
-export interface ComboboxProps extends Omit<React.InputHTMLAttributes<ComboboxInputRef>, 'onChange'>, Omit<BaseInputFieldProps, 'children' | 'onChange' | 'value'>, Pick<DropdownListProps, 'renderOptionLabel'> {
+interface TOnChangeMeta {
+    removed: boolean;
+}
+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;
     inputValue?: string;
+    isPopoverVisible?: boolean;
+    multiple?: boolean;
+    maxWidth?: string;
     loading?: boolean;
     onBlur?: React.FocusEventHandler;
     onChangeInputValue?: (event?: React.ChangeEvent) => void;
-    onChangeValue?: (optionId?: string) => void;
+    onChangeValue?: (optionId: string | null, onChangeMeta: TOnChangeMeta) => void;
     onClick?: React.MouseEventHandler;
     onFocus?: React.FocusEventHandler;
     onKeyDown?: React.KeyboardEventHandler;
     options?: Items;
-    value?: string;
+    value?: string | Items;
     variant?: Variant;
     zIndex?: PopoverProps['zIndex'];
 }
@@ -36,6 +43,9 @@ export interface TargetProps extends InputHTMLAttributes<HTMLInputElement> {
     hasClearButton?: boolean;
     inputFieldLabel: string;
     isPopoverVisible?: boolean;
+    multiple?: boolean;
+    selectedValues?: any[];
+    removeSelected: (id: string) => ActionHandler | undefined;
     onClear?: () => void;
     ref?: Ref<HTMLInputElement>;
     variant: Variant;

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":"AAAA,OAAO,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,oBAAY,gBAAgB,GAAG,gBAAgB,CAAC;AAEhD,aAAK,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,EACnE,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,EAC5D,IAAI,CAAC,iBAAiB,EAAE,mBAAmB,CAAC;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,kBAAkB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;IACzD,aAAa,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,aAAa;IAC5B,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,oBAAY,eAAe,GAAG,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC;AAEpE,oBAAY,IAAI,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;AAE/E,MAAM,WAAW,WAAW;IAC1B,kBAAkB,EAAE,MAAM,eAAe,CAAC;IAC1C,kBAAkB,EAAE,MAAM,CAAC;IAC3B,qBAAqB,EAAE,CAAC,kBAAkB,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9D;AAED,MAAM,WAAW,WAAY,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,sBAAsB,EAAE,MAAM,IAAI,CAAC;CACpC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/types.ts"],"names":[],"mappings":"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"}

package/lib/components/Combobox/types.js

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

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: 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;AAmBhD,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,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;CACvD;AAED,oBAAY,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAE5E,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmHjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Drawer/index.js

@@ -0,0 +1,115 @@
+"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"));
+
+var _useClickOutside = _interopRequireDefault(require("../../utils/useClickOutside"));
+
+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 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]);
+  (0, _useClickOutside.default)([contentRef], handleOnClickOutside); // 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"
+  }, _react.default.createElement(_styles.Content, {
+    ref: contentRef,
+    side: side,
+    visible: visible,
+    "data-testid": "content"
+  }, 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;

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

@@ -0,0 +1,139 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+require("jest-styled-components");
+
+var _react2 = require("@testing-library/react");
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
+var _ = _interopRequireDefault(require("."));
+
+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; }
+
+var render = function render(ui, options) {
+  return (0, _react2.render)(ui, _objectSpread({}, options, {
+    wrapper: function wrapper(_ref) {
+      var children = _ref.children;
+      return _react.default.createElement(_ConfigProvider.ConfigProvider, null, children);
+    }
+  }));
+};
+
+describe('Drawer', function () {
+  describe('visible', function () {
+    describe('when "visible" is false', function () {
+      it('renders with the property "display: none"', function () {
+        var _render = render(_react.default.createElement(_.default, {
+          visible: false
+        })),
+            getByTestId = _render.getByTestId;
+
+        expect(getByTestId(/overlay/i)).toHaveStyleRule('display', 'none');
+      });
+    });
+  });
+  describe('title', function () {
+    it('renders the text passed as "title" in an h3 tag', function () {
+      var title = 'This is the title';
+
+      var _render2 = render(_react.default.createElement(_.default, {
+        visible: true,
+        title: title
+      })),
+          getByText = _render2.getByText;
+
+      expect(getByText(title, {
+        selector: 'h3'
+      })).toBeInTheDocument();
+    });
+  });
+  describe('onClose', function () {
+    var onClose = jest.fn();
+    it('renders a close button if "onClose" is passed', function () {
+      var _render3 = render(_react.default.createElement(_.default, {
+        visible: true,
+        onClose: onClose
+      })),
+          getByLabelText = _render3.getByLabelText;
+
+      var closeBtn = getByLabelText(/close drawer/i);
+      expect(closeBtn).toBeInTheDocument();
+    });
+    it('does not render a close button if "onClose" is not passed', function () {
+      var _render4 = render(_react.default.createElement(_.default, {
+        visible: true
+      })),
+          queryByLabelText = _render4.queryByLabelText;
+
+      var closeBtn = queryByLabelText(/close drawer/i);
+      expect(closeBtn).not.toBeInTheDocument();
+    });
+    it('calls the "onClose" function when clicking the close button', function () {
+      var _render5 = render(_react.default.createElement(_.default, {
+        visible: true,
+        onClose: onClose
+      })),
+          getByLabelText = _render5.getByLabelText;
+
+      var closeBtn = getByLabelText(/close drawer/i);
+
+      _react2.fireEvent.click(closeBtn);
+
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+  describe('actions', function () {
+    describe('when an array of actions is provided', function () {
+      var onSubmit = jest.fn();
+      var onCancel = jest.fn();
+      var actions = [{
+        id: '1',
+        text: 'Submit',
+        onClick: onSubmit
+      }, {
+        id: '2',
+        text: 'Cancel',
+        onClick: onCancel
+      }];
+      it('renders the array as buttons in the footer of the Drawer', function () {
+        var _render6 = render(_react.default.createElement(_.default, {
+          visible: true,
+          actions: actions
+        })),
+            getByText = _render6.getByText;
+
+        expect(getByText(/submit/i, {
+          selector: 'button'
+        })).toBeInTheDocument();
+        expect(getByText(/cancel/i, {
+          selector: 'button'
+        })).toBeInTheDocument();
+      });
+    });
+  });
+  describe('click outside', function () {
+    it('calls the "onClose" function when clicking outside the Drawer', function () {
+      var onClose = jest.fn();
+
+      var _render7 = render(_react.default.createElement(_.default, {
+        visible: true,
+        onClose: onClose
+      })),
+          getByTestId = _render7.getByTestId;
+
+      var overlay = getByTestId(/overlay/i);
+
+      _react2.fireEvent.click(overlay);
+
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,3 @@
+declare const schema: any;
+export default schema;
+//# sourceMappingURL=schema.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/schema.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAqBnD,eAAe,MAAM,CAAC"}

package/lib/components/Drawer/schema.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactDesc = require("react-desc");
+
+var _schema = require("../Button/schema");
+
+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 schema = (0, _reactDesc.describe)({
+  displayName: 'Drawer'
+});
+schema.propTypes = {
+  visible: _reactDesc.PropTypes.bool.description('This controls the visibility of the drawer').defaultValue('false'),
+  onClose: _reactDesc.PropTypes.func.description('a callback function called when clicking the close button'),
+  side: _reactDesc.PropTypes.oneOf(['left', 'right']).description('used to define the side where the Drawer will come up from').defaultValue('left'),
+  title: _reactDesc.PropTypes.string.description('Text to show as title'),
+  description: _reactDesc.PropTypes.string.description('Text to show as description'),
+  actions: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape(_objectSpread({
+    id: _reactDesc.PropTypes.string
+  }, (0, _schema.makeButtonSchemaPropTypes)()))).description('An array of button props objects with an identifier, all rendered in order in the footer')
+};
+var _default = schema;
+exports.default = _default;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ButtonProps } from '../Button';
+import { DrawerProps } from '.';
+export declare const Overlay: import("styled-components").StyledComponent<"div", any, Pick<DrawerProps, "zIndex" | "visible" | "side">, never>;
+export declare const Content: import("styled-components").StyledComponent<"div", any, Pick<DrawerProps, "visible" | "side">, never>;
+export declare const Header: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"h3", any, import("../Typography").TypographyProps, never>;
+export declare const Body: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Footer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<import("react").RefForwardingComponent<HTMLButtonElement, ButtonProps>, any, ButtonProps, never>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/styles.ts"],"names":[],"mappings":";AAMA,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAgB,MAAM,GAAG,CAAC;AAE9C,eAAO,MAAM,OAAO,kHAYnB,CAAC;AAMF,eAAO,MAAM,OAAO,uGAqCnB,CAAC;AAEF,eAAO,MAAM,MAAM,oEAMlB,CAAC;AAEF,eAAO,MAAM,KAAK,wGAEjB,CAAC;AAEF,eAAO,MAAM,IAAI,oEAKhB,CAAC;AAEF,eAAO,MAAM,MAAM,oEAOlB,CAAC;AAEF,eAAO,MAAM,WAAW,8IAIvB,CAAC"}

package/lib/components/Drawer/styles.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CloseButton = exports.Footer = exports.Body = exports.Title = exports.Header = exports.Content = exports.Overlay = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _dynamicModifiers = require("../../utils/dynamicModifiers");
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _Typography = require("../Typography");
+
+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 Overlay = _styledComponents.default.div.withConfig({
+  displayName: "styles__Overlay",
+  componentId: "p3l2i8-0"
+})(["display:", ";position:fixed;background:", ";bottom:0;left:0;right:0;top:0;justify-content:", ";", ";"], function (_ref) {
+  var visible = _ref.visible;
+  return visible ? 'flex' : 'none';
+}, (0, _toColorString.default)(_designTokens.color.opacity.charcoal75), function (_ref2) {
+  var side = _ref2.side;
+  return side === 'left' ? 'start' : 'end';
+}, (0, _dynamicModifiers.applyDynamicModifiers)('zIndex', 'z-index'));
+
+exports.Overlay = Overlay;
+var DRAWER_WIDTH = (0, _rem.default)(_designTokens.spacing.base * 40);
+
+var Content = _styledComponents.default.div.withConfig({
+  displayName: "styles__Content",
+  componentId: "p3l2i8-1"
+})(["position:relative;height:100%;width:", ";top:0;display:flex;flex-direction:column;background-color:", ";animation-duration:0.75s;@keyframes fadeinleft{from{left:-", ";}to{left:0;}}@keyframes fadeinright{from{right:-", ";}to{right:0;}}", ""], DRAWER_WIDTH, (0, _toColorString.default)(_designTokens.color.base.snowWhite), DRAWER_WIDTH, DRAWER_WIDTH, function (_ref3) {
+  var side = _ref3.side;
+  return side === 'left' ? (0, _styledComponents.css)(["animation-name:fadeinleft;"]) : (0, _styledComponents.css)(["animation-name:fadeinright;"]);
+});
+
+exports.Content = Content;
+
+var Header = _styledComponents.default.div.withConfig({
+  displayName: "styles__Header",
+  componentId: "p3l2i8-2"
+})(["display:flex;flex-direction:column;padding:", ";min-height:fit-content;background-color:", ";"], (0, _rem.default)(_designTokens.spacing.base * 2), (0, _toColorString.default)(_designTokens.color.base.snowWhite));
+
+exports.Header = Header;
+var Title = (0, _styledComponents.default)(_Typography.H3).withConfig({
+  displayName: "styles__Title",
+  componentId: "p3l2i8-3"
+})(["word-break:break-word;"]);
+exports.Title = Title;
+
+var Body = _styledComponents.default.div.withConfig({
+  displayName: "styles__Body",
+  componentId: "p3l2i8-4"
+})(["display:flex;height:100%;overflow-y:auto;background-color:", ";"], (0, _toColorString.default)(_designTokens.color.base.snowWhite));
+
+exports.Body = Body;
+
+var Footer = _styledComponents.default.div.withConfig({
+  displayName: "styles__Footer",
+  componentId: "p3l2i8-5"
+})(["height:", ";display:flex;padding:", " ", ";margin-top:auto;background-color:", ";border-top:1px solid ", ";"], (0, _rem.default)(_designTokens.spacing.base * 6.2), (0, _rem.default)(_designTokens.spacing.base * 1.5), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _toColorString.default)(_designTokens.color.base.fullMoon), (0, _toColorString.default)(_designTokens.color.opacity.charcoal15));
+
+exports.Footer = Footer;
+var CloseButton = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "styles__CloseButton",
+  componentId: "p3l2i8-6"
+})(["padding-right:0;padding-left:", ";margin-left:auto;"], (0, _rem.default)(_designTokens.spacing.base));
+exports.CloseButton = CloseButton;

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

@@ -11,6 +11,7 @@ declare namespace DropdownList {
     var propTypes: any;
     var defaultProps: {
         actions: undefined;
+        defaultFooter: boolean;
     };
 }
 export default DropdownList;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownList/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,EACL,QAAQ,IAAI,YAAY,EACxB,MAAM,IAAI,UAAU,EAErB,MAAM,+BAA+B,CAAC;AAGvC,OAAO,KAAK,EAAE,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGlD,OAAO,EACL,YAAY,IAAI,oBAAoB,EACpC,gBAAgB,EAChB,MAAM,IAAI,kBAAkB,EAC5B,KAAK,IAAI,iBAAiB,GAC3B,CAAC;AAEF,oBAAY,KAAK,GAAG,gBAAgB,EAAE,CAAC;AACvC,oBAAY,QAAQ,GAAG,YAAY,CAAC;AACpC,oBAAY,MAAM,GAAG,UAAU,CAAC;AAEhC,iBAAS,YAAY,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAsI/C;kBAtIQ,YAAY;;;;;;;AA8KrB,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownList/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,EACL,QAAQ,IAAI,YAAY,EACxB,MAAM,IAAI,UAAU,EAErB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EAAE,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIlD,OAAO,EACL,YAAY,IAAI,oBAAoB,EACpC,gBAAgB,EAChB,MAAM,IAAI,kBAAkB,EAC5B,KAAK,IAAI,iBAAiB,GAC3B,CAAC;AAEF,oBAAY,KAAK,GAAG,gBAAgB,EAAE,CAAC;AACvC,oBAAY,QAAQ,GAAG,YAAY,CAAC;AACpC,oBAAY,MAAM,GAAG,UAAU,CAAC;AAEhC,iBAAS,YAAY,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+L/C;kBA/LQ,YAAY;;;;;;;;AAuNrB,eAAe,YAAY,CAAC"}