@decisiv/ui-components 2.0.1-alpha.8 → 2.0.1-alpha.82

package/lib/atoms/InputField/Containers.js

@@ -32,6 +32,7 @@ var InputFieldContainer = (0, _styledComponents.default)(_Flex.default).attrs({
   componentId: "me30fz-0"
 })(["flex:1;max-width:100%;", ";"], (0, _styleModifiers.when)('overflow', 'auto', (0, _styledComponents.css)(["overflow:auto;"])));
 exports.InputFieldContainer = InputFieldContainer;
+var hiddenLabelStyles = (0, _styledComponents.css)(["min-height:32px;"]);
 var inactiveStyles = (0, _styledComponents.css)(["background:", ";border-color:", ";cursor:not-allowed;position:relative;&:active,&:hover{background:", ";border-color:", ";", ";}*{cursor:not-allowed;}"], (0, _toColorString.default)(_color.default.opacity.fullMoon50), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _toColorString.default)(_color.default.opacity.fullMoon50), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _focusRingWithColor.default)({
   red: 0,
   green: 0,
@@ -42,22 +43,21 @@ var onFocusStyles = (0, _styledComponents.css)(["border-color:", ";", ";&:hover{
 var InputContainer = (0, _styledComponents.default)(_Flex.default).withConfig({
   displayName: "Containers__InputContainer",
   componentId: "me30fz-1"
-})(["background:", ";border:1px solid ", ";box-sizing:border-box;min-height:50px;position:relative;width:100%;", ";& ~ *{cursor:default;margin-top:", "px;width:100%;}&:hover{border-color:", ";}&:active{border-color:", ";", ";}", ";", ";", ";", ";"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _dynamicModifiers.applyDynamicModifiers)('cursor'), _spacing.default.base * 0.5, (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40), (0, _styleModifiers.when)('isFocused', onFocusStyles), (0, _styleModifiers.when)('hasWarning', (0, _styledComponents.css)(["border-color:", ";&:active,&:hover{border-color:", ";}"], (0, _toColorString.default)(_color.default.status.warning.medium), (0, _toColorString.default)(_color.default.status.warning.medium))), (0, _styleModifiers.when)('disabled', inactiveStyles), (0, _styleModifiers.when)('readOnly', inactiveStyles));
+})(["background:", ";border:1px solid ", ";box-sizing:border-box;min-height:50px;position:relative;width:100%;", ";& ~ *{cursor:default;margin-top:", "px;width:100%;}&:hover{border-color:", ";}&:active{border-color:", ";", ";}", ";", ";", ";", ";", ";", ""], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _dynamicModifiers.applyDynamicModifiers)('cursor'), _spacing.default.base * 0.5, (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40), (0, _styleModifiers.when)('isFocused', onFocusStyles), (0, _styleModifiers.when)('hasWarning', (0, _styledComponents.css)(["border-color:", ";&:active,&:hover{border-color:", ";}"], (0, _toColorString.default)(_color.default.status.warning.medium), (0, _toColorString.default)(_color.default.status.warning.medium))), (0, _styleModifiers.when)('disabled', inactiveStyles), (0, _styleModifiers.when)('readOnly', inactiveStyles), (0, _styleModifiers.when)('hiddenLabel', hiddenLabelStyles), (0, _styleModifiers.whenNot)('isTextArea', (0, _styledComponents.css)(["height:32px;"])));
 exports.InputContainer = InputContainer;
 var IconContainer = (0, _styledComponents.default)(_Flex.default).attrs({
-  alignItems: 'center',
+  alignItems: 'flex-start',
   justifyContent: 'center'
 }).withConfig({
   displayName: "Containers__IconContainer",
   componentId: "me30fz-2"
-})(["color:", ";margin:6px 0 6px 10px;width:30px;"], (0, _toColorString.default)(_color.default.base.alaskanHusky));
+})(["color:", ";margin:16px 0 6px 15px;", ""], (0, _toColorString.default)(_color.default.base.alaskanHusky), (0, _styleModifiers.when)('hiddenLabel', (0, _styledComponents.css)(["margin:8px 0 8px 10px;"])));
 exports.IconContainer = IconContainer;
 var InputInnerContainer = (0, _styledComponents.default)(_Flex.default).attrs({
   flex: 1,
-  flexWrap: 'wrap',
-  paddingLeft: 1
+  flexWrap: 'wrap'
 }).withConfig({
   displayName: "Containers__InputInnerContainer",
   componentId: "me30fz-3"
-})(["max-width:100%;", ";"], (0, _styleModifiers.when)('hasIcon', (0, _styledComponents.css)(["max-width:calc(100% - 40px);"])));
+})(["max-width:100%;padding-top:6px;padding-left:15px;", ";", ";", ";"], (0, _styleModifiers.when)('hasIcon', (0, _styledComponents.css)(["max-width:calc(100% - 10px);"])), (0, _styleModifiers.whenNot)('hasIcon', (0, _styledComponents.css)(["padding-left:10px;"])), (0, _styleModifiers.whenAll)([['hasIcon', true], ['hiddenLabel', true]], (0, _styledComponents.css)(["padding-left:10px;"])));
 exports.InputInnerContainer = InputInnerContainer;

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

@@ -4,6 +4,7 @@ interface InputLabelProps extends PProps, React.LabelHTMLAttributes<HTMLLabelEle
     color?: PProps['color'];
     disabled?: boolean;
     readOnly?: boolean;
+    hidden?: boolean;
 }
 declare const InputLabel: import("styled-components").StyledComponent<"p", any, PProps & {
     as: string;

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

@@ -1 +1 @@
-{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/InputLabel.ts"],"names":[],"mappings":";AAIA,OAAO,EAAK,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAExD,UAAU,eACR,SAAQ,MAAM,EACZ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAUD,QAAA,MAAM,UAAU;;;;6CAmBf,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/InputLabel.ts"],"names":[],"mappings":";AAIA,OAAO,EAAK,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAExD,UAAU,eACR,SAAQ,MAAM,EACZ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAqBD,QAAA,MAAM,UAAU;;;;6CAoBf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/atoms/InputField/InputLabel.js

@@ -14,6 +14,7 @@ var _Typography = require("../../components/Typography");
 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 inactiveStyles = (0, _styledComponents.css)(["cursor:not-allowed;*{cursor:not-allowed;}"]);
+var visuallyHiddenStyles = (0, _styledComponents.css)(["border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;"]);
 var InputLabel = (0, _styledComponents.default)(_Typography.P).attrs({
   as: 'label',
   color: 'alaskanHusky',
@@ -21,6 +22,6 @@ var InputLabel = (0, _styledComponents.default)(_Typography.P).attrs({
 }).withConfig({
   displayName: "InputLabel",
   componentId: "ldhs58-0"
-})(["display:block;padding-top:6px;padding-right:10px;text-align:left;width:100%;cursor:inherit;*{cursor:inherit;}", ";", ";"], (0, _styleModifiers.when)('disabled', inactiveStyles), (0, _styleModifiers.when)('readOnly', inactiveStyles));
+})(["display:block;padding-right:10px;text-align:left;width:100%;cursor:inherit;*{cursor:inherit;}", ";", ";", ";"], (0, _styleModifiers.when)('disabled', inactiveStyles), (0, _styleModifiers.when)('readOnly', inactiveStyles), (0, _styleModifiers.when)('hidden', visuallyHiddenStyles));
 var _default = InputLabel;
 exports.default = _default;

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

@@ -14,6 +14,8 @@ export interface InputComponentProps {
     ref: Ref<any>;
     required?: boolean;
     value?: string | number | string[];
+    autoComplete?: string;
+    type?: string;
 }
 export interface BaseInputFieldProps {
     children: (props: InputComponentProps) => JSX.Element;
@@ -37,9 +39,11 @@ export interface BaseInputFieldProps {
     required?: boolean;
     requiredMessage?: string;
     showCharacterCount?: boolean;
+    hideLabel?: boolean;
     style?: React.CSSProperties;
     value: string;
     warningMessage?: string;
+    isTextArea?: boolean;
 }
 declare const InputFieldWithRef: RefForwardingComponent<Ref<any>, BaseInputFieldProps>;
 export default InputFieldWithRef;

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

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

package/lib/atoms/InputField/index.js

@@ -29,7 +29,7 @@ var _Containers = require("./Containers");
 
 var _InputLabel = _interopRequireDefault(require("./InputLabel"));
 
-var _RequiredIcon = _interopRequireDefault(require("./RequiredIcon"));
+var _RequiredIcon = _interopRequireDefault(require("../RequiredIcon"));
 
 var _HelpMessage = _interopRequireDefault(require("./HelpMessage"));
 
@@ -62,6 +62,8 @@ 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,
       id = props.id,
@@ -82,7 +84,9 @@ 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,
+      rest = _objectWithoutProperties(props, ["children", "cursor", "disabled", "hideLabel", "helpMessage", "icon", "id", "inputContainerRef", "label", "labelId", "maxLength", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "overflow", "readOnly", "required", "requiredMessage", "showCharacterCount", "style", "value", "warningMessage", "isTextArea"]);
 
   var fallbackTargetRef = (0, _react.useRef)(null);
   var finalTargetRef = targetRef || fallbackTargetRef;
@@ -132,8 +136,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 +155,24 @@ 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
+  }, 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) {

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;