@decisiv/ui-components 2.0.1-alpha.16 → 2.0.1-alpha.161

package/lib/atoms/InputField/index.js

@@ -29,7 +29,7 @@ var _Containers = require("./Containers");
 
 var _InputLabel = _interopRequireDefault(require("./InputLabel"));
 
-var _RequiredIcon = _interopRequireDefault(require("./RequiredIcon"));
+var _RequiredIcon = _interopRequireDefault(require("../RequiredIcon"));
 
 var _HelpMessage = _interopRequireDefault(require("./HelpMessage"));
 
@@ -62,8 +62,11 @@ function InputField(props, targetRef) {
       _props$cursor = props.cursor,
       cursor = _props$cursor === void 0 ? 'text' : _props$cursor,
       disabled = props.disabled,
+      _props$hideLabel = props.hideLabel,
+      hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel,
       helpMessage = props.helpMessage,
       IconComponent = props.icon,
+      secondaryElement = props.secondaryElement,
       id = props.id,
       inputContainerRef = props.inputContainerRef,
       label = props.label,
@@ -82,7 +85,11 @@ function InputField(props, targetRef) {
       style = props.style,
       value = props.value,
       warningMessage = props.warningMessage,
-      rest = _objectWithoutProperties(props, ["children", "cursor", "disabled", "helpMessage", "icon", "id", "inputContainerRef", "label", "labelId", "maxLength", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "overflow", "readOnly", "required", "requiredMessage", "showCharacterCount", "style", "value", "warningMessage"]);
+      _props$isTextArea = props.isTextArea,
+      isTextArea = _props$isTextArea === void 0 ? false : _props$isTextArea,
+      _props$multiple = props.multiple,
+      multiple = _props$multiple === void 0 ? false : _props$multiple,
+      rest = _objectWithoutProperties(props, ["children", "cursor", "disabled", "hideLabel", "helpMessage", "icon", "secondaryElement", "id", "inputContainerRef", "label", "labelId", "maxLength", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "overflow", "readOnly", "required", "requiredMessage", "showCharacterCount", "style", "value", "warningMessage", "isTextArea", "multiple"]);
 
   var fallbackTargetRef = (0, _react.useRef)(null);
   var finalTargetRef = targetRef || fallbackTargetRef;
@@ -132,8 +139,9 @@ function InputField(props, targetRef) {
   };
 
   var onChangeHandler = function onChangeHandler(event) {
-    if (event && event.target.value) {
-      setContentLength(event.target.value.length);
+    if (event && event.target) {
+      var targetValue = event.target.value;
+      setContentLength(targetValue ? targetValue.length : 0);
     }
 
     if (onChange) {
@@ -150,18 +158,25 @@ function InputField(props, targetRef) {
     style: style
   }, _react.default.createElement(_Containers.InputContainer, {
     cursor: cursor,
+    hiddenLabel: hideLabel,
     disabled: disabled,
     hasWarning: !!warningMessage,
     isFocused: isFocused,
     readOnly: readOnly,
     ref: inputContainerRef,
     onClick: onInputContainerClickHandler,
-    onKeyDown: onKeyDown
-  }, IconComponent && _react.default.createElement(_Containers.IconContainer, null, _react.default.createElement(IconComponent, null)), _react.default.createElement(_Containers.InputInnerContainer, {
-    hasIcon: !!IconComponent
+    onKeyDown: onKeyDown,
+    isTextArea: isTextArea,
+    multiple: multiple
+  }, IconComponent && _react.default.createElement(_Containers.IconContainer, {
+    hiddenLabel: hideLabel
+  }, _react.default.createElement(IconComponent, null)), _react.default.createElement(_Containers.InputInnerContainer, {
+    hasIcon: !!IconComponent,
+    hiddenLabel: hideLabel
   }, _react.default.createElement(_InputLabel.default, {
     disabled: disabled,
     htmlFor: targetId,
+    hidden: hideLabel,
     id: labelId,
     readOnly: readOnly,
     onClick: function onClick(event) {
@@ -185,7 +200,9 @@ function InputField(props, targetRef) {
     ref: finalTargetRef,
     required: required,
     value: value
-  })))), warningMessage && _react.default.createElement(_Message.default, {
+  }))), secondaryElement && _react.default.createElement(_Containers.IconContainer, {
+    rightPlacement: true
+  }, secondaryElement)), warningMessage && _react.default.createElement(_Message.default, {
     intent: "warning"
   }, warningMessage), _react.default.createElement(_HelpMessage.default, {
     contentLength: contentLength,

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,12 +16,13 @@ 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
-    _reactDesc.PropTypes.func, // Or the instance of a DOM native element (see the note about SSR)
+    _reactDesc.PropTypes.func, // Or the instance of a DOM native element (current will be an instance of HTMLDivElement)
     _reactDesc.PropTypes.shape({
-      current: _reactDesc.PropTypes.instanceOf(HTMLDivElement)
+      current: _reactDesc.PropTypes.any
     })]).description('A reference to the container component for the input field.'),
     label: _reactDesc.PropTypes.string.description('A label for the input field.').isRequired,
     labelId: _reactDesc.PropTypes.string.description("A unique ID for the input's label. This will be used in some ARIA attributes as well."),

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;AA8NjB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAsH/C;;AAED,wBAAkC"}

package/lib/atoms/OptionsList/Option.js

@@ -60,7 +60,12 @@ var StyledLink = (0, _styledComponents.default)(_Link.default).withConfig({
 var Container = _styledComponents.default.li.withConfig({
   displayName: "Option__Container",
   componentId: "sc-679ny4-1"
-})(["&:focus{outline:none;}> .label,> ", "{align-items:center;border:1px solid transparent;color:", ";display:flex;padding:", ";pointer-events:none;width:100%;white-space:nowrap;", ";> *{margin-right:", ";}}> ", "{pointer-events:auto;background-color:transparent;text-decoration:none;}&:first-child > .label,&:first-child > ", "{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child > .label,&:last-child > ", "{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}&:hover:not([aria-disabled='true']):not([aria-selected='true']) > .label,&:hover:not([aria-disabled='true']):not([aria-selected='true']) > ", "{color:", ";text-decoration:none;.label > *{border-color:", ";}}&[aria-selected='true'] > .label{background:", ";color:", ";}", ";", " &[aria-disabled='true']{cursor:not-allowed;", "{pointer-events:none;}}&[aria-disabled='true'] > .label,&[aria-disabled='true'] > ", "{background:", ";color:", ";}"], StyledLink, (0, _toColorString.default)(_color.default.interaction.pacificOcean), "".concat((0, _rem.default)(7), " ").concat((0, _rem.default)(20), " ").concat((0, _rem.default)(7), " ").concat((0, _rem.default)(10)), (0, _styleModifiers.when)('compact', (0, _styledComponents.css)(["padding:", ";"], "".concat((0, _rem.default)(5), " ").concat((0, _rem.default)(20), " ").concat((0, _rem.default)(5), " ").concat((0, _rem.default)(10)))), (0, _rem.default)(10), StyledLink, StyledLink, getBorderRadius, getBorderRadius, StyledLink, getBorderRadius, getBorderRadius, StyledLink, (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.base.snowWhite), (0, _styleModifiers.when)('isActive', (0, _styledComponents.css)(["color:", ";background:", ";.label > *{border-color:", ";}"], (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean15), (0, _toColorString.default)(_color.default.interaction.indianOcean))), (0, _styleModifiers.when)([['isActive'], ['inputMethod', 'keyboard']], (0, _styledComponents.css)(["background:none;> .label,> ", "{border-color:", ";", "}&[aria-selected='true'] > .label,&[aria-selected='true'] > ", "{color:", ";", "}"], StyledLink, (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40), StyledLink, (0, _toColorString.default)(_color.default.base.snowWhite), (0, _focusRingWithColor.default)(_color.default.opacity.fullMoon50))), StyledLink, StyledLink, (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.opacity.charcoal40)); // This is used below to silence a React warning about
+})(["text-align:left;&:focus{outline:none;}> .label,> ", "{align-items:center;border:1px solid transparent;color:", ";display:flex;padding:", ";pointer-events:none;width:100%;white-space:nowrap;", ";> *{margin-right:", ";}}> ", "{pointer-events:auto;background-color:transparent;text-decoration:none;}&:first-child > .label,&:first-child > ", "{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child > .label,&:last-child > ", "{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}&:hover:not([aria-disabled='true']):not([aria-selected='true']) > .label,&:hover:not([aria-disabled='true']):not([aria-selected='true']) > ", "{color:", ";text-decoration:none;.label > *{border-color:", ";}}&[aria-selected='true'] > .label{background:", ";color:", ";}&[aria-selected='true'] > .label > div > #optionLabelDetails{background:", ";color:", ";}", ";", " &[aria-disabled='true']{cursor:not-allowed;", "{pointer-events:none;}}&[aria-disabled='true'] > .label,&[aria-disabled='true'] > ", "{background:", ";color:", ";}"], StyledLink, (0, _toColorString.default)(_color.default.interaction.pacificOcean), "".concat((0, _rem.default)(7), " ").concat((0, _rem.default)(20), " ").concat((0, _rem.default)(7), " ").concat((0, _rem.default)(10)), (0, _styleModifiers.when)('compact', (0, _styledComponents.css)(["padding:", ";"], "".concat((0, _rem.default)(5), " ").concat((0, _rem.default)(20), " ").concat((0, _rem.default)(5), " ").concat((0, _rem.default)(10)))), (0, _rem.default)(10), StyledLink, StyledLink, getBorderRadius, getBorderRadius, StyledLink, getBorderRadius, getBorderRadius, StyledLink, (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.base.snowWhite), (0, _styleModifiers.when)('isActive', (0, _styledComponents.css)(["color:", ";background:", ";.label > *{border-color:", ";}"], (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean15), (0, _toColorString.default)(_color.default.interaction.indianOcean))), (0, _styleModifiers.when)([['isActive'], ['inputMethod', 'keyboard']], (0, _styledComponents.css)(["background:none;> .label,> ", "{border-color:", ";", "}&[aria-selected='true'] > .label,&[aria-selected='true'] > ", "{color:", ";", "}"], StyledLink, (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40), StyledLink, (0, _toColorString.default)(_color.default.base.snowWhite), (0, _focusRingWithColor.default)(_color.default.opacity.fullMoon50))), StyledLink, StyledLink, (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.opacity.charcoal40));
+
+var StyleLabelWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Option__StyleLabelWrapper",
+  componentId: "sc-679ny4-2"
+})(["display:flex;flex:1;flex-direction:column;"]); // This is used below to silence a React warning about
 // having a controlled input without a change handler.
 
 
@@ -98,7 +103,7 @@ function DecorationComponent(props) {
 
 var DecorationComponentContainer = _styledComponents.default.div.withConfig({
   displayName: "Option__DecorationComponentContainer",
-  componentId: "sc-679ny4-2"
+  componentId: "sc-679ny4-3"
 })(["", ";"], (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["opacity:0.3;img{opacity:0.3;}"]))); // We always render the checkbox/radio inputs so that regular form
 // submission (i.e. one not handled programmatically) still works.
 
@@ -108,7 +113,10 @@ function Option(props) {
       label = props.label,
       decoration = props.decoration,
       disabled = props.disabled,
-      borderRadius = props.borderRadius;
+      borderRadius = props.borderRadius,
+      labelDetails = props.labelDetails,
+      _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 +144,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 +176,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
@@ -181,12 +189,19 @@ function Option(props) {
   }, _react.default.createElement(DecorationComponent, decoration)), renderOptionLabel ? renderOptionLabel({
     id: id,
     label: label,
+    labelDetails: labelDetails,
     value: props.value,
-    disabled: disabled
-  }) : _react.default.createElement(_Typography.P, {
+    disabled: disabled,
+    meta: props.meta
+  }) : _react.default.createElement(StyleLabelWrapper, null, _react.default.createElement(_Typography.P, {
     as: "span",
     color: "inherit"
-  }, label)));
+  }, label), labelDetails && _react.default.createElement(_Typography.P, {
+    as: "span",
+    shade: 1,
+    size: "small",
+    id: "optionLabelDetails"
+  }, labelDetails))));
 }
 
 var _default = _react.default.memo(Option);

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,
@@ -222,7 +233,7 @@ function OptionsList(props, forwardedRef) {
   }, [containerRef, activeId, inputMethod, previousActiveId]);
 
   var setContainerRefFunc = function setContainerRefFunc(el) {
-    _react.forwardRef && (0, _assignRef.default)(forwardedRef, el);
+    (0, _assignRef.default)(forwardedRef, el);
     setContainerRef(el);
   };
 
@@ -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;