@decisiv/ui-components 2.0.1-alpha.13 → 2.0.1-alpha.131

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAqC,CAAC;AAiElD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAqC,CAAC;AAsElD,eAAe,MAAM,CAAC"}

package/lib/atoms/InputField/schema.js

@@ -16,6 +16,7 @@ schema.makePropTypes = function () {
   return {
     disabled: _reactDesc.PropTypes.bool.description('Sets the input state to disabled if true.'),
     helpMessage: _reactDesc.PropTypes.string.description("A short message to help clarify the input's purpose to the user."),
+    hideLabel: _reactDesc.PropTypes.bool.description("Visually hides the label, but leaves it available for screen readers. Use this only if you are sure the input doesn't need a visual label").defaultValue('false'),
     icon: _reactDesc.PropTypes.element.description('An icon to be rendered on the left side of the input.'),
     id: _reactDesc.PropTypes.string.description('A unique ID for the input.'),
     inputContainerRef: _reactDesc.PropTypes.oneOfType([// Either a function

package/lib/atoms/OptionsList/Category.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-declare const Category: ({ borderRadius, label, items, }: import("./types").Category) => JSX.Element;
+declare const Category: ({ borderRadius, label, items, showCheckbox, }: import("./types").Category) => JSX.Element;
 export default Category;
 //# sourceMappingURL=Category.d.ts.map

package/lib/atoms/OptionsList/Category.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/Category.tsx"],"names":[],"mappings":";AAuBA,QAAA,MAAM,QAAQ,8EAkBb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/Category.tsx"],"names":[],"mappings":";AAuBA,QAAA,MAAM,QAAQ,4FAyBb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/atoms/OptionsList/Category.js

@@ -36,13 +36,15 @@ var StyledCategory = _styledComponents.default.li.attrs({
 var Category = function Category(_ref) {
   var borderRadius = _ref.borderRadius,
       label = _ref.label,
-      items = _ref.items;
+      items = _ref.items,
+      showCheckbox = _ref.showCheckbox;
   return _react.default.createElement(_react.Fragment, null, _react.default.createElement(StyledCategory, null, label), items.map(function (subItem) {
     var id = (0, _utils.getId)(subItem);
     return _react.default.createElement(_Option.default, _extends({}, subItem, {
       key: id,
       id: id,
-      borderRadius: borderRadius
+      borderRadius: borderRadius,
+      showCheckbox: showCheckbox
     }));
   }));
 };

package/lib/atoms/OptionsList/Footer.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FooterActions } from './types';
+interface Props {
+    actions: FooterActions;
+}
+declare function DropdownFooter(props: Props): JSX.Element;
+export default DropdownFooter;
+//# sourceMappingURL=Footer.d.ts.map

package/lib/atoms/OptionsList/Footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/Footer.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,aAAa,EAAe,MAAM,SAAS,CAAC;AAErD,UAAU,KAAK;IACb,OAAO,EAAE,aAAa,CAAC;CACxB;AAOD,iBAAS,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6BjD;AAED,eAAe,cAAc,CAAC"}

package/lib/atoms/OptionsList/Footer.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _Button = _interopRequireDefault(require("../../components/Button"));
+
+var _Flex = _interopRequireDefault(require("../../components/Flex"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var ButtonsRow = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "Footer__ButtonsRow",
+  componentId: "sc-1nxwudp-0"
+})(["border-top:1px solid ", ";background-color:", ";"], (0, _toColorString.default)(_designTokens.color.opacity.charcoal15), (0, _toColorString.default)(_designTokens.color.opacity.fullMoon50));
+
+function DropdownFooter(props) {
+  var actions = props.actions;
+
+  var buttonRender = function buttonRender(_ref) {
+    var id = _ref.id,
+        rest = _objectWithoutProperties(_ref, ["id"]);
+
+    return _react.default.createElement(_Flex.default, {
+      key: id,
+      paddingLeft: 0.25,
+      paddingRight: 0.25
+    }, _react.default.createElement(_Button.default, _extends({
+      size: "small"
+    }, rest)));
+  };
+
+  return Array.isArray(actions) ? _react.default.createElement(ButtonsRow, {
+    flex: 1,
+    padding: 1
+  }, _react.default.createElement(_Flex.default, {
+    flex: 1,
+    justifyContent: "flex-start"
+  }, actions.map(buttonRender))) : _react.default.createElement(ButtonsRow, {
+    flex: 1,
+    padding: 1
+  }, _react.default.createElement(_Flex.default, {
+    flex: 1,
+    justifyContent: "space-between"
+  }, _react.default.createElement(_Flex.default, {
+    flex: 1,
+    justifyContent: "flex-start"
+  }, actions.left && actions.left.map(buttonRender)), _react.default.createElement(_Flex.default, {
+    flex: 1,
+    justifyContent: "flex-end",
+    paddingLeft: 2
+  }, actions.right && actions.right.map(buttonRender))));
+}
+
+var _default = DropdownFooter;
+exports.default = _default;

package/lib/atoms/OptionsList/Option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/Option.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAK/D,OAAO,EACL,WAAW,EAMZ,MAAM,SAAS,CAAC;AA+MjB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA+F/C;;AAED,wBAAkC"}
+{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/Option.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAK/D,OAAO,EACL,WAAW,EAMZ,MAAM,SAAS,CAAC;AA+MjB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA4G/C;;AAED,wBAAkC"}

package/lib/atoms/OptionsList/Option.js

@@ -108,7 +108,9 @@ function Option(props) {
       label = props.label,
       decoration = props.decoration,
       disabled = props.disabled,
-      borderRadius = props.borderRadius;
+      borderRadius = props.borderRadius,
+      _props$showCheckbox = props.showCheckbox,
+      showCheckbox = _props$showCheckbox === void 0 ? true : _props$showCheckbox;
   var decorationType = (0, _get.default)(decoration, 'type');
 
   var _useOptionsList = (0, _context.useOptionsList)(),
@@ -136,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;
@@ -168,7 +170,7 @@ function Option(props) {
     text: label,
     icon: isDecoration(decoration) && decoration.type === 'Icon' ? decoration.icon : undefined,
     disabled: !!disabled
-  }) : _react.default.createElement(LabelWrapper, null, selectable && (multiple ? _react.default.createElement(_Checkbox.default, _extends({}, commonProps, {
+  }) : _react.default.createElement(LabelWrapper, null, selectable && (multiple && !!showCheckbox ? _react.default.createElement(_Checkbox.default, _extends({}, commonProps, {
     disabled: !!disabled,
     size: "small",
     value: props.value
@@ -182,7 +184,8 @@ function Option(props) {
     id: id,
     label: label,
     value: props.value,
-    disabled: disabled
+    disabled: disabled,
+    meta: props.meta
   }) : _react.default.createElement(_Typography.P, {
     as: "span",
     color: "inherit"

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAIf,OAAO,EAGL,gBAAgB,EAIjB,MAAM,SAAS,CAAC;AAyBjB,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAmCrB,CAAC;AAoRF,QAAA,MAAM,2BAA2B,2FAA0B,CAAC;AAc5D,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAcf,OAAO,EAGL,gBAAgB,EAIjB,MAAM,SAAS,CAAC;AAwBjB,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAmCrB,CAAC;AA4SF,QAAA,MAAM,2BAA2B,2FAA0B,CAAC;AAkC5D,eAAe,2BAA2B,CAAC"}

package/lib/atoms/OptionsList/index.js

@@ -7,21 +7,17 @@ exports.default = exports.Container = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
 
 var _isArray = _interopRequireDefault(require("lodash/isArray"));
 
-var _context = require("./context");
-
-var _Option = _interopRequireDefault(require("./Option"));
+var _Button = require("../../components/Button");
 
-var _Category = _interopRequireDefault(require("./Category"));
-
-var _utils = require("./utils");
-
-var _schema = _interopRequireDefault(require("./schema"));
+var _Grid = _interopRequireDefault(require("../../components/Grid"));
 
 var _canUseDOM = _interopRequireDefault(require("../../utils/canUseDOM"));
 
@@ -31,8 +27,20 @@ var _assignRef = _interopRequireDefault(require("../../utils/assignRef"));
 
 var _isCtrlCmd = _interopRequireDefault(require("../../utils/isCtrlCmd"));
 
+var _Option = _interopRequireDefault(require("./Option"));
+
+var _Category = _interopRequireDefault(require("./Category"));
+
+var _Footer = _interopRequireDefault(require("./Footer"));
+
+var _context = require("./context");
+
+var _utils = require("./utils");
+
 var _useListSelectionKeyboardActions = _interopRequireDefault(require("./useListSelectionKeyboardActions"));
 
+var _schema = _interopRequireDefault(require("./schema"));
+
 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; } }
@@ -61,6 +69,7 @@ function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d =
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+var Row = _Grid.default.Row;
 var isUsingKeyboard = false;
 
 if (_canUseDOM.default) {
@@ -75,7 +84,7 @@ if (_canUseDOM.default) {
 var Container = _styledComponents.default.ul.withConfig({
   displayName: "OptionsList__Container",
   componentId: "sc-107p8d5-0"
-})(["list-style:none;margin:0;width:auto;height:auto;max-height:", ";max-width:", ";padding:0;overflow:auto;position:relative;", " ", " ", " &:focus{outline:none;}"], (0, _rem.default)(310), (0, _rem.default)(340), function (_ref) {
+})(["list-style:none;margin:0;width:100%;height:auto;max-height:", ";max-width:", ";padding:0;overflow:auto;position:relative;", " ", " ", " &:focus{outline:none;}"], (0, _rem.default)(310), (0, _rem.default)(340), function (_ref) {
   var minWidth = _ref.minWidth;
   return minWidth ? "\n          min-width: ".concat(minWidth, ";\n        ") : '';
 }, function (_ref2) {
@@ -89,7 +98,8 @@ var Container = _styledComponents.default.ul.withConfig({
 exports.Container = Container;
 
 function OptionsList(props, forwardedRef) {
-  var items = props.items,
+  var actions = props.actions,
+      items = props.items,
       multiple = props.multiple,
       onChange = props.onChange,
       name = props.name,
@@ -100,6 +110,7 @@ function OptionsList(props, forwardedRef) {
       activeIdProp = props.activeId,
       onChangeActiveItem = props.onChangeActiveItem,
       onKeyDownProp = props.onKeyDown,
+      showCheckbox = props.showCheckbox,
       tabIndex = props.tabIndex,
       selectable = props.selectable,
       defaultSelected = props.defaultSelected,
@@ -266,7 +277,7 @@ function OptionsList(props, forwardedRef) {
       selectable: !!selectable,
       itemRole: itemRole
     }
-  }, _react.default.createElement(Container, {
+  }, _react.default.createElement(_Grid.default.Container, null, _react.default.createElement(Row, null, _react.default.createElement(Container, {
     "aria-activedescendant": activeId,
     "aria-multiselectable": !!multiple,
     ref: setContainerRefFunc,
@@ -287,25 +298,41 @@ function OptionsList(props, forwardedRef) {
     if ((0, _utils.isCategory)(item)) {
       return _react.default.createElement(_Category.default, _extends({}, item, {
         key: id,
-        borderRadius: borderRadius
+        borderRadius: borderRadius,
+        showCheckbox: showCheckbox
       }));
     }
 
     return _react.default.createElement(_Option.default, _extends({}, item, {
       key: id,
-      borderRadius: borderRadius
+      borderRadius: borderRadius,
+      showCheckbox: showCheckbox
     }));
-  })));
+  }))), actions && _react.default.createElement(Row, null, _react.default.createElement(_Footer.default, {
+    actions: actions
+  }))));
 }
 
 var OptionsListWithContainerRef = (0, _react.forwardRef)(OptionsList); // @ts-ignore
 
-OptionsListWithContainerRef.propTypes = _objectSpread({}, _schema.default.propTypes);
+OptionsListWithContainerRef.propTypes = _objectSpread({}, _schema.default.propTypes, {
+  actions: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape((0, _Button.makeButtonSchemaPropTypes)({
+    id: _propTypes.default.string.isRequired
+  }))), _propTypes.default.shape({
+    left: _propTypes.default.arrayOf(_propTypes.default.shape((0, _Button.makeButtonSchemaPropTypes)({
+      id: _propTypes.default.string.isRequired
+    }))),
+    right: _propTypes.default.arrayOf(_propTypes.default.shape((0, _Button.makeButtonSchemaPropTypes)({
+      id: _propTypes.default.string.isRequired
+    })))
+  })])
+});
 OptionsListWithContainerRef.defaultProps = {
   role: 'listbox',
   itemRole: 'option',
   tabIndex: 0,
-  selectable: true
+  selectable: true,
+  showCheckbox: true
 };
 var _default = OptionsListWithContainerRef;
 exports.default = _default;

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];
 
@@ -259,5 +322,38 @@ describe('OptionsList', function () {
 
       expect(onChange).toHaveBeenLastCalledWith([subItem.id]);
     });
+    it('adds a footer with buttons when actions are provided', function () {
+      var onClick = jest.fn();
+      var actions = [{
+        id: '1',
+        text: 'apply',
+        onClick: onClick
+      }, {
+        id: '2',
+        text: 'cancel',
+        kind: 'secondary',
+        onClick: onClick
+      }, {
+        id: '3',
+        text: 'clear',
+        kind: 'secondary',
+        variant: 'ghost',
+        paddingLeft: 4,
+        onClick: onClick
+      }];
+
+      var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        actions: actions,
+        multiple: true
+      }))),
+          baseElement = _render10.baseElement,
+          getByText = _render10.getByText;
+
+      actions.forEach(function (_ref5) {
+        var label = _ref5.text;
+        return expect(getByText(label)).toBeTruthy();
+      });
+      expect(baseElement).toMatchSnapshot();
+    });
   });
 });

package/lib/atoms/OptionsList/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AA2DxD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAoExD,eAAe,MAAM,CAAC"}

package/lib/atoms/OptionsList/schema.js

@@ -15,6 +15,10 @@ var schema = (0, _reactDesc.describe)({
 schema.makePropTypes = function () {
   return {
     defaultSelected: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.string, _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.string)]).description('These IDs will appear as selected the first time the user opens the dropdown.'),
+    actions: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.object), _reactDesc.PropTypes.shape({
+      left: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.object),
+      right: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.object)
+    })]).description('A collection of objects, each containing a subset of props valid for a Button component. Check the notes below.'),
     items: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({
       decoration: _reactDesc.PropTypes.shape({
         type: _reactDesc.PropTypes.oneOf(['Avatar', 'Badge', 'Icon'])

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

@@ -4,6 +4,7 @@ import { IconProps } from '@decisiv/iconix';
 import { AvatarProps } from '../../components/Avatar';
 import { BadgeProps } from '../../components/Badge';
 import { DimensionsProps } from '../../modifiers/dimensions';
+import { ButtonProps } from '../../components/Button';
 export declare type OptionAvatarProps = Omit<AvatarProps, 'ref' | 'size'>;
 export declare type OptionBadgeProps = Omit<BadgeProps, 'size' | 'variant'>;
 export declare type InputMethod = 'mouse' | 'keyboard' | undefined;
@@ -22,12 +23,21 @@ interface IconDecoration {
     icon: IconComponent;
     disabled?: boolean;
 }
+export interface ActionProps extends ButtonProps {
+    id: string;
+}
+interface SideActionProps {
+    left?: ActionProps[];
+    right?: ActionProps[];
+}
+export declare type FooterActions = SideActionProps | ActionProps[];
 export declare type Decoration = AvatarDecoration | BadgeDecoration | IconDecoration;
 export interface Category {
     borderRadius?: BorderRadiusProperty<string>;
     id?: string;
     items: Option[];
     label: string;
+    showCheckbox?: boolean;
 }
 export declare type CategoryProps = Category;
 export declare type IconComponent = (props: IconProps) => JSX.Element;
@@ -37,6 +47,8 @@ interface BaseOption {
     disabled?: boolean;
     id: string;
     label: string;
+    showCheckbox?: boolean;
+    meta?: object;
 }
 export interface ItemOption extends BaseOption {
     value?: string;
@@ -49,6 +61,7 @@ export declare type OptionProps = Option;
 export declare type Item = Category | Option;
 export interface OptionsListProps extends OptionsListDimensions {
     items: Item[];
+    actions?: FooterActions;
     name?: string;
     multiple?: boolean;
     onChange: (ids: Selection) => void;
@@ -59,6 +72,7 @@ export interface OptionsListProps extends OptionsListDimensions {
     defaultActiveId?: string;
     onChangeActiveItem?: (activeId: string) => void;
     onKeyDown?: (event: KeyboardEvent) => void;
+    showCheckbox?: boolean;
     tabIndex?: number;
     selectable?: boolean;
     defaultSelected?: Selection;