@commercetools-uikit/multiline-text-input 0.0.0-canary-2021830134526

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,88 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# MultilineTextInput
+
+## Description
+
+A controlled text input component for multi-line strings with validation states.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/multiline-text-input
+```
+
+```
+npm --save install @commercetools-uikit/multiline-text-input
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react react-intl
+```
+
+```
+npm --save install react react-intl
+```
+
+## Usage
+
+```jsx
+import MultilineTextInput from '@commercetools-uikit/multiline-text-input';
+
+const Example = () => (
+  <MultilineTextInput
+    value="foo"
+    onChange={
+      (/** event */) => {
+        // alert(event.target.value)
+      }
+    }
+  />
+);
+
+export default Example;
+```
+
+## Properties
+
+| Props                        | Type                                                                                         | Required | Default | Description                                                                                                               |
+| ---------------------------- | -------------------------------------------------------------------------------------------- | :------: | ------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `name`                       | `string`                                                                                     |          |         | Used as HTML name of the input component. property                                                                        |
+| `autoComplete`               | `string`                                                                                     |          |         | Used as HTML `autocomplete` property                                                                                      |
+| `id`                         | `string`                                                                                     |          |         | Used as HTML id property. An id is auto-generated when it is not specified.                                               |
+| `value`                      | `string`                                                                                     |    ✅    |         | Value of the input component.                                                                                             |
+| `onChange`                   | `ChangeEventHandler`                                                                         |          |         | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. |
+| `onBlur`                     | `FocusEventHandler`                                                                          |          |         | Called when input is blurred                                                                                              |
+| `onFocus`                    | `FocusEventHandler`                                                                          |          |         | Called when input is focused                                                                                              |
+| `isAutofocussed`             | `boolean`                                                                                    |          |         | Focus the input on initial render                                                                                         |
+| `defaultExpandMultilineText` | `boolean`                                                                                    |          | `false` | Expands multiline text input initially                                                                                    |
+| `isDisabled`                 | `boolean`                                                                                    |          |         | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).                            |
+| `isReadOnly`                 | `boolean`                                                                                    |          |         | Indicates that the field is displaying read-only content                                                                  |
+| `placeholder`                | `string`                                                                                     |          |         | Placeholder text for the input                                                                                            |
+| `hasError`                   | `boolean`                                                                                    |          |         | Indicates that input has errors                                                                                           |
+| `hasWarning`                 | `boolean`                                                                                    |          |         | Control to indicate on the input if there are selected values that are potentially invalid                                |
+| `horizontalConstraint`       | `union`<br/>Possible values:<br/>`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` |          |         | Horizontal size limit of the input fields.                                                                                |
+
+## Static methods
+
+### `MultilineTextInput.isEmpty`
+
+Returns `true` when the value is considered empty, which is when the value is empty or consists of spaces and linebreaks only.
+
+```js
+MultilineTextInput.isEmpty(''); // -> true
+MultilineTextInput.isEmpty(' '); // -> true
+MultilineTextInput.isEmpty('\n'); // -> true
+MultilineTextInput.isEmpty('tree'); // -> false
+```
+
+# Dos and don'ts
+
+- Whenever a user input can hold multiline strings this `MultilineTextInput` component is recommended
+
+- Not recommended to be used when the content is single-lined (e.g email address, password etc.)
+
+- The horizontal constraint is not recommended to be smaller than `s` since content may cut off

package/dist/commercetools-uikit-multiline-text-input.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index";
+export { default } from "./declarations/src/index";

package/dist/commercetools-uikit-multiline-text-input.cjs.dev.js

@@ -0,0 +1,161 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _pt = require('prop-types');
+var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
+var react = require('react');
+var reactIntl = require('react-intl');
+require('@emotion/react');
+var icons = require('@commercetools-uikit/icons');
+var FlatButton = require('@commercetools-uikit/flat-button');
+var hooks = require('@commercetools-uikit/hooks');
+var utils = require('@commercetools-uikit/utils');
+var Stack = require('@commercetools-uikit/spacings-stack');
+var Constraints = require('@commercetools-uikit/constraints');
+var inputUtils = require('@commercetools-uikit/input-utils');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
+var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
+var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
+var Stack__default = /*#__PURE__*/_interopDefault(Stack);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var defaultProps = {
+  defaultExpandMultilineText: false
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "skgbeu",
+  styles: "display:flex;justify-content:flex-end"
+} : {
+  name: "7hlegj-MultilineTextInput",
+  styles: "display:flex;justify-content:flex-end;label:MultilineTextInput;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpbGluZS10ZXh0LWlucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4Sm9CIiwiZmlsZSI6Im11bHRpbGluZS10ZXh0LWlucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIHVzZVN0YXRlLFxuICB1c2VDYWxsYmFjayxcbiAgQ2hhbmdlRXZlbnRIYW5kbGVyLFxuICBGb2N1c0V2ZW50SGFuZGxlcixcbiAgRm9jdXNFdmVudCxcbn0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlSW50bCB9IGZyb20gJ3JlYWN0LWludGwnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgQW5nbGVVcEljb24sIEFuZ2xlRG93bkljb24gfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9pY29ucyc7XG5pbXBvcnQgRmxhdEJ1dHRvbiBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9mbGF0LWJ1dHRvbic7XG5pbXBvcnQgeyB1c2VUb2dnbGVTdGF0ZSB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2hvb2tzJztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuaW1wb3J0IFN0YWNrIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3NwYWNpbmdzLXN0YWNrJztcbmltcG9ydCBDb25zdHJhaW50cyBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb25zdHJhaW50cyc7XG5pbXBvcnQge1xuICBNdWx0aWxpbmVJbnB1dCxcbiAgbWVzc2FnZXNNdWx0aWxpbmVJbnB1dCxcbn0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvaW5wdXQtdXRpbHMnO1xuXG5leHBvcnQgdHlwZSBUTXVsdGlsaW5lVGV4dElucHV0UHJvcHMgPSB7XG4gIC8qKlxuICAgKiBVc2VkIGFzIEhUTUwgbmFtZSBvZiB0aGUgaW5wdXQgY29tcG9uZW50LiBwcm9wZXJ0eVxuICAgKi9cbiAgbmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFVzZWQgYXMgSFRNTCBgYXV0b2NvbXBsZXRlYCBwcm9wZXJ0eVxuICAgKi9cbiAgYXV0b0NvbXBsZXRlPzogc3RyaW5nO1xuICAvKipcbiAgICogVXNlZCBhcyBIVE1MIGlkIHByb3BlcnR5LiBBbiBpZCBpcyBhdXRvLWdlbmVyYXRlZCB3aGVuIGl0IGlzIG5vdCBzcGVjaWZpZWQuXG4gICAqL1xuICBpZD86IHN0cmluZztcbiAgLyoqXG4gICAqIFZhbHVlIG9mIHRoZSBpbnB1dCBjb21wb25lbnQuXG4gICAqL1xuICB2YWx1ZTogc3RyaW5nO1xuICAvKipcbiAgICogQ2FsbGVkIHdpdGggYW4gZXZlbnQgY29udGFpbmluZyB0aGUgbmV3IHZhbHVlLiBSZXF1aXJlZCB3aGVuIGlucHV0IGlzIG5vdCByZWFkIG9ubHkuIFBhcmVudCBzaG91bGQgcGFzcyBpdCBiYWNrIGFzIHZhbHVlLlxuICAgKi9cbiAgb25DaGFuZ2U/OiBDaGFuZ2VFdmVudEhhbmRsZXI7XG4gIC8qKlxuICAgKiBDYWxsZWQgd2hlbiBpbnB1dCBpcyBibHVycmVkXG4gICAqL1xuICBvbkJsdXI/OiBGb2N1c0V2ZW50SGFuZGxlcjtcbiAgLyoqXG4gICAqIENhbGxlZCB3aGVuIGlucHV0IGlzIGZvY3VzZWRcbiAgICovXG4gIG9uRm9jdXM/OiBGb2N1c0V2ZW50SGFuZGxlcjtcbiAgLyoqXG4gICAqIEZvY3VzIHRoZSBpbnB1dCBvbiBpbml0aWFsIHJlbmRlclxuICAgKi9cbiAgaXNBdXRvZm9jdXNzZWQ/OiBib29sZWFuO1xuICAvKipcbiAgICogRXhwYW5kcyBtdWx0aWxpbmUgdGV4dCBpbnB1dCBpbml0aWFsbHlcbiAgICovXG4gIGRlZmF1bHRFeHBhbmRNdWx0aWxpbmVUZXh0PzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIEluZGljYXRlcyB0aGF0IHRoZSBpbnB1dCBjYW5ub3QgYmUgbW9kaWZpZWQgKGUuZyBub3QgYXV0aG9yaXplZCwgb3IgY2hhbmdlcyBjdXJyZW50bHkgc2F2aW5nKS5cbiAgICovXG4gIGlzRGlzYWJsZWQ/OiBib29sZWFuO1xuICAvKipcbiAgICogSW5kaWNhdGVzIHRoYXQgdGhlIGZpZWxkIGlzIGRpc3BsYXlpbmcgcmVhZC1vbmx5IGNvbnRlbnRcbiAgICovXG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xuICAvKipcbiAgICogUGxhY2Vob2xkZXIgdGV4dCBmb3IgdGhlIGlucHV0XG4gICAqL1xuICBwbGFjZWhvbGRlcj86IHN0cmluZztcbiAgLyoqXG4gICAqIEluZGljYXRlcyB0aGF0IGlucHV0IGhhcyBlcnJvcnNcbiAgICovXG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIENvbnRyb2wgdG8gaW5kaWNhdGUgb24gdGhlIGlucHV0IGlmIHRoZXJlIGFyZSBzZWxlY3RlZCB2YWx1ZXMgdGhhdCBhcmUgcG90ZW50aWFsbHkgaW52YWxpZFxuICAgKi9cbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBIb3Jpem9udGFsIHNpemUgbGltaXQgb2YgdGhlIGlucHV0IGZpZWxkcy5cbiAgICovXG4gIGhvcml6b250YWxDb25zdHJhaW50PzpcbiAgICB8IDZcbiAgICB8IDdcbiAgICB8IDhcbiAgICB8IDlcbiAgICB8IDEwXG4gICAgfCAxMVxuICAgIHwgMTJcbiAgICB8IDEzXG4gICAgfCAxNFxuICAgIHwgMTVcbiAgICB8IDE2XG4gICAgfCAnc2NhbGUnXG4gICAgfCAnYXV0byc7XG59O1xuXG5jb25zdCBkZWZhdWx0UHJvcHM6IFBpY2s8XG4gIFRNdWx0aWxpbmVUZXh0SW5wdXRQcm9wcyxcbiAgJ2RlZmF1bHRFeHBhbmRNdWx0aWxpbmVUZXh0J1xuPiA9IHtcbiAgZGVmYXVsdEV4cGFuZE11bHRpbGluZVRleHQ6IGZhbHNlLFxufTtcblxuY29uc3QgTXVsdGlsaW5lVGV4dElucHV0ID0gKHByb3BzOiBUTXVsdGlsaW5lVGV4dElucHV0UHJvcHMpID0+IHtcbiAgY29uc3QgaW50bCA9IHVzZUludGwoKTtcblxuICBjb25zdCBbY29udGVudFJvd0NvdW50LCBzZXRDb250ZW50Um93Q291bnRdID0gdXNlU3RhdGU8bnVtYmVyPihcbiAgICBNdWx0aWxpbmVUZXh0SW5wdXQuTUlOX1JPV19DT1VOVFxuICApO1xuXG4gIGNvbnN0IFtpc09wZW4sIHRvZ2dsZV0gPSB1c2VUb2dnbGVTdGF0ZShwcm9wcy5kZWZhdWx0RXhwYW5kTXVsdGlsaW5lVGV4dCk7XG5cbiAgY29uc3QgeyBvbkZvY3VzIH0gPSBwcm9wcztcbiAgY29uc3QgaGFuZGxlRm9jdXMgPSB1c2VDYWxsYmFjazxGb2N1c0V2ZW50SGFuZGxlcj4oXG4gICAgKGV2ZW50OiBGb2N1c0V2ZW50KSA9PiB7XG4gICAgICBpZiAoIWlzT3BlbikgdG9nZ2xlKHRydWUpO1xuICAgICAgaWYgKG9uRm9jdXMpIG9uRm9jdXMoZXZlbnQpO1xuICAgIH0sXG4gICAgW2lzT3Blbiwgb25Gb2N1cywgdG9nZ2xlXVxuICApO1xuXG4gIGNvbnN0IGhhbmRsZUhlaWdodENoYW5nZSA9IHVzZUNhbGxiYWNrPFxuICAgIChoZWlnaHQ6IG51bWJlciwgcm93Q291bnQ6IG51bWJlcikgPT4gdm9pZFxuICA+KFxuICAgIChfLCByb3dDb3VudCkgPT4ge1xuICAgICAgc2V0Q29udGVudFJvd0NvdW50KHJvd0NvdW50KTtcbiAgICB9LFxuICAgIFtzZXRDb250ZW50Um93Q291bnRdXG4gICk7XG5cbiAgLy8gVGhpcyBjaGVja3MgaWYgdGhlIGNvbnRlbnQgaW4gdGhlIHRleHRhcmVhIG92ZXJmbG93cyB0aGUgbWluaW11bVxuICAvLyBhbW91bnQgb2YgbGluZXMgaXQgc2hvdWxkIGhhdmUgd2hlbiBjb2xsYXBzZWRcbiAgY29uc3Qgc2hvdWxkUmVuZGVyVG9nZ2xlQnV0dG9uID1cbiAgICBjb250ZW50Um93Q291bnQgPiBNdWx0aWxpbmVUZXh0SW5wdXQuTUlOX1JPV19DT1VOVDtcblxuICByZXR1cm4gKFxuICAgIDxDb25zdHJhaW50cy5Ib3Jpem9udGFsIG1heD17cHJvcHMuaG9yaXpvbnRhbENvbnN0cmFpbnR9PlxuICAgICAgPFN0YWNrIHNjYWxlPVwieHNcIj5cbiAgICAgICAgPE11bHRpbGluZUlucHV0XG4gICAgICAgICAgbmFtZT17cHJvcHMubmFtZX1cbiAgICAgICAgICBhdXRvQ29tcGxldGU9e3Byb3BzLmF1dG9Db21wbGV0ZX1cbiAgICAgICAgICB2YWx1ZT17cHJvcHMudmFsdWV9XG4gICAgICAgICAgb25DaGFuZ2U9e3Byb3BzLm9uQ2hhbmdlfVxuICAgICAgICAgIG9uSGVpZ2h0Q2hhbmdlPXtoYW5kbGVIZWlnaHRDaGFuZ2V9XG4gICAgICAgICAgaWQ9e3Byb3BzLmlkfVxuICAgICAgICAgIG9uQmx1cj17cHJvcHMub25CbHVyfVxuICAgICAgICAgIG9uRm9jdXM9e2hhbmRsZUZvY3VzfVxuICAgICAgICAgIGlzRGlzYWJsZWQ9e3Byb3BzLmlzRGlzYWJsZWR9XG4gICAgICAgICAgaGFzRXJyb3I9e3Byb3BzLmhhc0Vycm9yfVxuICAgICAgICAgIGhhc1dhcm5pbmc9e3Byb3BzLmhhc1dhcm5pbmd9XG4gICAgICAgICAgcGxhY2Vob2xkZXI9e3Byb3BzLnBsYWNlaG9sZGVyfVxuICAgICAgICAgIGlzUmVhZE9ubHk9e3Byb3BzLmlzUmVhZE9ubHl9XG4gICAgICAgICAgaXNBdXRvZm9jdXNzZWQ9e3Byb3BzLmlzQXV0b2ZvY3Vzc2VkfVxuICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgIHsuLi5maWx0ZXJEYXRhQXR0cmlidXRlcyhwcm9wcyl9XG4gICAgICAgIC8+XG4gICAgICAgIHtzaG91bGRSZW5kZXJUb2dnbGVCdXR0b24gJiYgKFxuICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtZW5kO1xuICAgICAgICAgICAgYH1cbiAgICAgICAgICA+XG4gICAgICAgICAgICA8RmxhdEJ1dHRvblxuICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB0b2dnbGUoKX1cbiAgICAgICAgICAgICAgaXNEaXNhYmxlZD17cHJvcHMuaXNEaXNhYmxlZH1cbiAgICAgICAgICAgICAgbGFiZWw9e2ludGwuZm9ybWF0TWVzc2FnZShcbiAgICAgICAgICAgICAgICBpc09wZW5cbiAgICAgICAgICAgICAgICAgID8gbWVzc2FnZXNNdWx0aWxpbmVJbnB1dC5jb2xsYXBzZVxuICAgICAgICAgICAgICAgICAgOiBtZXNzYWdlc011bHRpbGluZUlucHV0LmV4cGFuZFxuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICBpY29uPXtcbiAgICAgICAgICAgICAgICBpc09wZW4gPyAoXG4gICAgICAgICAgICAgICAgICA8QW5nbGVVcEljb24gc2l6ZT1cInNtYWxsXCIgLz5cbiAgICAgICAgICAgICAgICApIDogKFxuICAgICAgICAgICAgICAgICAgPEFuZ2xlRG93bkljb24gc2l6ZT1cInNtYWxsXCIgLz5cbiAgICAgICAgICAgICAgICApXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICl9XG4gICAgICA8L1N0YWNrPlxuICAgIDwvQ29uc3RyYWludHMuSG9yaXpvbnRhbD5cbiAgKTtcbn07XG5cbk11bHRpbGluZVRleHRJbnB1dC5kaXNwbGF5TmFtZSA9ICdNdWx0aWxpbmVUZXh0SW5wdXQnO1xuXG4vLyBUaGUgbWluaW11bSBhbW1vdW50IG9mIHJvd3MgdGhlIE11bHRpbGluZVRleHRJbnB1dCB3aWxsIHNob3cuXG4vLyBXaGVuIHRoZSBpbnB1dCBpcyBjbG9zZWQsIHRoaXMgaXMgdXNlZCBhcyB0aGUgbWF4aW11bSByb3cgY291bnQgYXMgd2VsbFxuLy8gc28gdGhhdCB0aGUgaW5wdXQgXCJjb2xsYXBzZXNcIi5cbk11bHRpbGluZVRleHRJbnB1dC5NSU5fUk9XX0NPVU5UID0gMTtcblxuTXVsdGlsaW5lVGV4dElucHV0LmlzRW1wdHkgPSAodmFsdWU6IFRNdWx0aWxpbmVUZXh0SW5wdXRQcm9wc1sndmFsdWUnXSkgPT5cbiAgIXZhbHVlIHx8IHZhbHVlLnRyaW0oKS5sZW5ndGggPT09IDA7XG5NdWx0aWxpbmVUZXh0SW5wdXQuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBNdWx0aWxpbmVUZXh0SW5wdXQ7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var MultilineTextInput = function MultilineTextInput(props) {
+  var intl = reactIntl.useIntl();
+
+  var _useState = react.useState(MultilineTextInput.MIN_ROW_COUNT),
+      _useState2 = _slicedToArray(_useState, 2),
+      contentRowCount = _useState2[0],
+      setContentRowCount = _useState2[1];
+
+  var _useToggleState = hooks.useToggleState(props.defaultExpandMultilineText),
+      _useToggleState2 = _slicedToArray(_useToggleState, 2),
+      isOpen = _useToggleState2[0],
+      toggle = _useToggleState2[1];
+
+  var onFocus = props.onFocus;
+  var handleFocus = react.useCallback(function (event) {
+    if (!isOpen) toggle(true);
+    if (onFocus) onFocus(event);
+  }, [isOpen, onFocus, toggle]);
+  var handleHeightChange = react.useCallback(function (_, rowCount) {
+    setContentRowCount(rowCount);
+  }, [setContentRowCount]); // This checks if the content in the textarea overflows the minimum
+  // amount of lines it should have when collapsed
+
+  var shouldRenderToggleButton = contentRowCount > MultilineTextInput.MIN_ROW_COUNT;
+  return jsxRuntime.jsx(Constraints__default['default'].Horizontal, {
+    max: props.horizontalConstraint,
+    children: jsxRuntime.jsxs(Stack__default['default'], {
+      scale: "xs",
+      children: [jsxRuntime.jsx(inputUtils.MultilineInput, _objectSpread({
+        name: props.name,
+        autoComplete: props.autoComplete,
+        value: props.value,
+        onChange: props.onChange,
+        onHeightChange: handleHeightChange,
+        id: props.id,
+        onBlur: props.onBlur,
+        onFocus: handleFocus,
+        isDisabled: props.isDisabled,
+        hasError: props.hasError,
+        hasWarning: props.hasWarning,
+        placeholder: props.placeholder,
+        isReadOnly: props.isReadOnly,
+        isAutofocussed: props.isAutofocussed,
+        isOpen: isOpen
+      }, utils.filterDataAttributes(props))), shouldRenderToggleButton && jsxRuntime.jsx("div", {
+        css: _ref,
+        children: jsxRuntime.jsx(FlatButton__default['default'], {
+          onClick: function onClick() {
+            return toggle();
+          },
+          isDisabled: props.isDisabled,
+          label: intl.formatMessage(isOpen ? inputUtils.messagesMultilineInput.collapse : inputUtils.messagesMultilineInput.expand),
+          icon: isOpen ? jsxRuntime.jsx(icons.AngleUpIcon, {
+            size: "small"
+          }) : jsxRuntime.jsx(icons.AngleDownIcon, {
+            size: "small"
+          })
+        })
+      })]
+    })
+  });
+};
+
+MultilineTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  name: _pt__default['default'].string,
+  autoComplete: _pt__default['default'].string,
+  id: _pt__default['default'].string,
+  value: _pt__default['default'].string.isRequired,
+  onChange: _pt__default['default'].func,
+  onBlur: _pt__default['default'].func,
+  onFocus: _pt__default['default'].func,
+  isAutofocussed: _pt__default['default'].bool,
+  defaultExpandMultilineText: _pt__default['default'].bool,
+  isDisabled: _pt__default['default'].bool,
+  isReadOnly: _pt__default['default'].bool,
+  placeholder: _pt__default['default'].string,
+  hasError: _pt__default['default'].bool,
+  hasWarning: _pt__default['default'].bool,
+  horizontalConstraint: _pt__default['default'].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'])
+} : {};
+MultilineTextInput.displayName = 'MultilineTextInput'; // The minimum ammount of rows the MultilineTextInput will show.
+// When the input is closed, this is used as the maximum row count as well
+// so that the input "collapses".
+
+MultilineTextInput.MIN_ROW_COUNT = 1;
+
+MultilineTextInput.isEmpty = function (value) {
+  return !value || _trimInstanceProperty__default['default'](value).call(value).length === 0;
+};
+
+MultilineTextInput.defaultProps = defaultProps;
+var MultilineTextInput$1 = MultilineTextInput;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = MultilineTextInput$1;
+exports.version = version;

package/dist/commercetools-uikit-multiline-text-input.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-uikit-multiline-text-input.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-uikit-multiline-text-input.cjs.dev.js");
+}

package/dist/commercetools-uikit-multiline-text-input.cjs.prod.js

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+require('prop-types');
+var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
+var react = require('react');
+var reactIntl = require('react-intl');
+require('@emotion/react');
+var icons = require('@commercetools-uikit/icons');
+var FlatButton = require('@commercetools-uikit/flat-button');
+var hooks = require('@commercetools-uikit/hooks');
+var utils = require('@commercetools-uikit/utils');
+var Stack = require('@commercetools-uikit/spacings-stack');
+var Constraints = require('@commercetools-uikit/constraints');
+var inputUtils = require('@commercetools-uikit/input-utils');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
+var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
+var Stack__default = /*#__PURE__*/_interopDefault(Stack);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+var defaultProps = {
+  defaultExpandMultilineText: false
+};
+
+var _ref = {
+  name: "skgbeu",
+  styles: "display:flex;justify-content:flex-end"
+} ;
+
+var MultilineTextInput = function MultilineTextInput(props) {
+  var intl = reactIntl.useIntl();
+
+  var _useState = react.useState(MultilineTextInput.MIN_ROW_COUNT),
+      _useState2 = _slicedToArray(_useState, 2),
+      contentRowCount = _useState2[0],
+      setContentRowCount = _useState2[1];
+
+  var _useToggleState = hooks.useToggleState(props.defaultExpandMultilineText),
+      _useToggleState2 = _slicedToArray(_useToggleState, 2),
+      isOpen = _useToggleState2[0],
+      toggle = _useToggleState2[1];
+
+  var onFocus = props.onFocus;
+  var handleFocus = react.useCallback(function (event) {
+    if (!isOpen) toggle(true);
+    if (onFocus) onFocus(event);
+  }, [isOpen, onFocus, toggle]);
+  var handleHeightChange = react.useCallback(function (_, rowCount) {
+    setContentRowCount(rowCount);
+  }, [setContentRowCount]); // This checks if the content in the textarea overflows the minimum
+  // amount of lines it should have when collapsed
+
+  var shouldRenderToggleButton = contentRowCount > MultilineTextInput.MIN_ROW_COUNT;
+  return jsxRuntime.jsx(Constraints__default['default'].Horizontal, {
+    max: props.horizontalConstraint,
+    children: jsxRuntime.jsxs(Stack__default['default'], {
+      scale: "xs",
+      children: [jsxRuntime.jsx(inputUtils.MultilineInput, _objectSpread({
+        name: props.name,
+        autoComplete: props.autoComplete,
+        value: props.value,
+        onChange: props.onChange,
+        onHeightChange: handleHeightChange,
+        id: props.id,
+        onBlur: props.onBlur,
+        onFocus: handleFocus,
+        isDisabled: props.isDisabled,
+        hasError: props.hasError,
+        hasWarning: props.hasWarning,
+        placeholder: props.placeholder,
+        isReadOnly: props.isReadOnly,
+        isAutofocussed: props.isAutofocussed,
+        isOpen: isOpen
+      }, utils.filterDataAttributes(props))), shouldRenderToggleButton && jsxRuntime.jsx("div", {
+        css: _ref,
+        children: jsxRuntime.jsx(FlatButton__default['default'], {
+          onClick: function onClick() {
+            return toggle();
+          },
+          isDisabled: props.isDisabled,
+          label: intl.formatMessage(isOpen ? inputUtils.messagesMultilineInput.collapse : inputUtils.messagesMultilineInput.expand),
+          icon: isOpen ? jsxRuntime.jsx(icons.AngleUpIcon, {
+            size: "small"
+          }) : jsxRuntime.jsx(icons.AngleDownIcon, {
+            size: "small"
+          })
+        })
+      })]
+    })
+  });
+};
+
+MultilineTextInput.propTypes = {};
+MultilineTextInput.displayName = 'MultilineTextInput'; // The minimum ammount of rows the MultilineTextInput will show.
+// When the input is closed, this is used as the maximum row count as well
+// so that the input "collapses".
+
+MultilineTextInput.MIN_ROW_COUNT = 1;
+
+MultilineTextInput.isEmpty = function (value) {
+  return !value || _trimInstanceProperty__default['default'](value).call(value).length === 0;
+};
+
+MultilineTextInput.defaultProps = defaultProps;
+var MultilineTextInput$1 = MultilineTextInput;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = MultilineTextInput$1;
+exports.version = version;

package/dist/commercetools-uikit-multiline-text-input.esm.js

@@ -0,0 +1,140 @@
+import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
+import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import _pt from 'prop-types';
+import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';
+import { useState, useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import '@emotion/react';
+import { AngleUpIcon, AngleDownIcon } from '@commercetools-uikit/icons';
+import FlatButton from '@commercetools-uikit/flat-button';
+import { useToggleState } from '@commercetools-uikit/hooks';
+import { filterDataAttributes } from '@commercetools-uikit/utils';
+import Stack from '@commercetools-uikit/spacings-stack';
+import Constraints from '@commercetools-uikit/constraints';
+import { MultilineInput, messagesMultilineInput } from '@commercetools-uikit/input-utils';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var defaultProps = {
+  defaultExpandMultilineText: false
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "skgbeu",
+  styles: "display:flex;justify-content:flex-end"
+} : {
+  name: "7hlegj-MultilineTextInput",
+  styles: "display:flex;justify-content:flex-end;label:MultilineTextInput;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpbGluZS10ZXh0LWlucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4Sm9CIiwiZmlsZSI6Im11bHRpbGluZS10ZXh0LWlucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIHVzZVN0YXRlLFxuICB1c2VDYWxsYmFjayxcbiAgQ2hhbmdlRXZlbnRIYW5kbGVyLFxuICBGb2N1c0V2ZW50SGFuZGxlcixcbiAgRm9jdXNFdmVudCxcbn0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlSW50bCB9IGZyb20gJ3JlYWN0LWludGwnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgQW5nbGVVcEljb24sIEFuZ2xlRG93bkljb24gfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9pY29ucyc7XG5pbXBvcnQgRmxhdEJ1dHRvbiBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9mbGF0LWJ1dHRvbic7XG5pbXBvcnQgeyB1c2VUb2dnbGVTdGF0ZSB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2hvb2tzJztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuaW1wb3J0IFN0YWNrIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3NwYWNpbmdzLXN0YWNrJztcbmltcG9ydCBDb25zdHJhaW50cyBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb25zdHJhaW50cyc7XG5pbXBvcnQge1xuICBNdWx0aWxpbmVJbnB1dCxcbiAgbWVzc2FnZXNNdWx0aWxpbmVJbnB1dCxcbn0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvaW5wdXQtdXRpbHMnO1xuXG5leHBvcnQgdHlwZSBUTXVsdGlsaW5lVGV4dElucHV0UHJvcHMgPSB7XG4gIC8qKlxuICAgKiBVc2VkIGFzIEhUTUwgbmFtZSBvZiB0aGUgaW5wdXQgY29tcG9uZW50LiBwcm9wZXJ0eVxuICAgKi9cbiAgbmFtZT86IHN0cmluZztcbiAgLyoqXG4gICAqIFVzZWQgYXMgSFRNTCBgYXV0b2NvbXBsZXRlYCBwcm9wZXJ0eVxuICAgKi9cbiAgYXV0b0NvbXBsZXRlPzogc3RyaW5nO1xuICAvKipcbiAgICogVXNlZCBhcyBIVE1MIGlkIHByb3BlcnR5LiBBbiBpZCBpcyBhdXRvLWdlbmVyYXRlZCB3aGVuIGl0IGlzIG5vdCBzcGVjaWZpZWQuXG4gICAqL1xuICBpZD86IHN0cmluZztcbiAgLyoqXG4gICAqIFZhbHVlIG9mIHRoZSBpbnB1dCBjb21wb25lbnQuXG4gICAqL1xuICB2YWx1ZTogc3RyaW5nO1xuICAvKipcbiAgICogQ2FsbGVkIHdpdGggYW4gZXZlbnQgY29udGFpbmluZyB0aGUgbmV3IHZhbHVlLiBSZXF1aXJlZCB3aGVuIGlucHV0IGlzIG5vdCByZWFkIG9ubHkuIFBhcmVudCBzaG91bGQgcGFzcyBpdCBiYWNrIGFzIHZhbHVlLlxuICAgKi9cbiAgb25DaGFuZ2U/OiBDaGFuZ2VFdmVudEhhbmRsZXI7XG4gIC8qKlxuICAgKiBDYWxsZWQgd2hlbiBpbnB1dCBpcyBibHVycmVkXG4gICAqL1xuICBvbkJsdXI/OiBGb2N1c0V2ZW50SGFuZGxlcjtcbiAgLyoqXG4gICAqIENhbGxlZCB3aGVuIGlucHV0IGlzIGZvY3VzZWRcbiAgICovXG4gIG9uRm9jdXM/OiBGb2N1c0V2ZW50SGFuZGxlcjtcbiAgLyoqXG4gICAqIEZvY3VzIHRoZSBpbnB1dCBvbiBpbml0aWFsIHJlbmRlclxuICAgKi9cbiAgaXNBdXRvZm9jdXNzZWQ/OiBib29sZWFuO1xuICAvKipcbiAgICogRXhwYW5kcyBtdWx0aWxpbmUgdGV4dCBpbnB1dCBpbml0aWFsbHlcbiAgICovXG4gIGRlZmF1bHRFeHBhbmRNdWx0aWxpbmVUZXh0PzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIEluZGljYXRlcyB0aGF0IHRoZSBpbnB1dCBjYW5ub3QgYmUgbW9kaWZpZWQgKGUuZyBub3QgYXV0aG9yaXplZCwgb3IgY2hhbmdlcyBjdXJyZW50bHkgc2F2aW5nKS5cbiAgICovXG4gIGlzRGlzYWJsZWQ/OiBib29sZWFuO1xuICAvKipcbiAgICogSW5kaWNhdGVzIHRoYXQgdGhlIGZpZWxkIGlzIGRpc3BsYXlpbmcgcmVhZC1vbmx5IGNvbnRlbnRcbiAgICovXG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xuICAvKipcbiAgICogUGxhY2Vob2xkZXIgdGV4dCBmb3IgdGhlIGlucHV0XG4gICAqL1xuICBwbGFjZWhvbGRlcj86IHN0cmluZztcbiAgLyoqXG4gICAqIEluZGljYXRlcyB0aGF0IGlucHV0IGhhcyBlcnJvcnNcbiAgICovXG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIENvbnRyb2wgdG8gaW5kaWNhdGUgb24gdGhlIGlucHV0IGlmIHRoZXJlIGFyZSBzZWxlY3RlZCB2YWx1ZXMgdGhhdCBhcmUgcG90ZW50aWFsbHkgaW52YWxpZFxuICAgKi9cbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBIb3Jpem9udGFsIHNpemUgbGltaXQgb2YgdGhlIGlucHV0IGZpZWxkcy5cbiAgICovXG4gIGhvcml6b250YWxDb25zdHJhaW50PzpcbiAgICB8IDZcbiAgICB8IDdcbiAgICB8IDhcbiAgICB8IDlcbiAgICB8IDEwXG4gICAgfCAxMVxuICAgIHwgMTJcbiAgICB8IDEzXG4gICAgfCAxNFxuICAgIHwgMTVcbiAgICB8IDE2XG4gICAgfCAnc2NhbGUnXG4gICAgfCAnYXV0byc7XG59O1xuXG5jb25zdCBkZWZhdWx0UHJvcHM6IFBpY2s8XG4gIFRNdWx0aWxpbmVUZXh0SW5wdXRQcm9wcyxcbiAgJ2RlZmF1bHRFeHBhbmRNdWx0aWxpbmVUZXh0J1xuPiA9IHtcbiAgZGVmYXVsdEV4cGFuZE11bHRpbGluZVRleHQ6IGZhbHNlLFxufTtcblxuY29uc3QgTXVsdGlsaW5lVGV4dElucHV0ID0gKHByb3BzOiBUTXVsdGlsaW5lVGV4dElucHV0UHJvcHMpID0+IHtcbiAgY29uc3QgaW50bCA9IHVzZUludGwoKTtcblxuICBjb25zdCBbY29udGVudFJvd0NvdW50LCBzZXRDb250ZW50Um93Q291bnRdID0gdXNlU3RhdGU8bnVtYmVyPihcbiAgICBNdWx0aWxpbmVUZXh0SW5wdXQuTUlOX1JPV19DT1VOVFxuICApO1xuXG4gIGNvbnN0IFtpc09wZW4sIHRvZ2dsZV0gPSB1c2VUb2dnbGVTdGF0ZShwcm9wcy5kZWZhdWx0RXhwYW5kTXVsdGlsaW5lVGV4dCk7XG5cbiAgY29uc3QgeyBvbkZvY3VzIH0gPSBwcm9wcztcbiAgY29uc3QgaGFuZGxlRm9jdXMgPSB1c2VDYWxsYmFjazxGb2N1c0V2ZW50SGFuZGxlcj4oXG4gICAgKGV2ZW50OiBGb2N1c0V2ZW50KSA9PiB7XG4gICAgICBpZiAoIWlzT3BlbikgdG9nZ2xlKHRydWUpO1xuICAgICAgaWYgKG9uRm9jdXMpIG9uRm9jdXMoZXZlbnQpO1xuICAgIH0sXG4gICAgW2lzT3Blbiwgb25Gb2N1cywgdG9nZ2xlXVxuICApO1xuXG4gIGNvbnN0IGhhbmRsZUhlaWdodENoYW5nZSA9IHVzZUNhbGxiYWNrPFxuICAgIChoZWlnaHQ6IG51bWJlciwgcm93Q291bnQ6IG51bWJlcikgPT4gdm9pZFxuICA+KFxuICAgIChfLCByb3dDb3VudCkgPT4ge1xuICAgICAgc2V0Q29udGVudFJvd0NvdW50KHJvd0NvdW50KTtcbiAgICB9LFxuICAgIFtzZXRDb250ZW50Um93Q291bnRdXG4gICk7XG5cbiAgLy8gVGhpcyBjaGVja3MgaWYgdGhlIGNvbnRlbnQgaW4gdGhlIHRleHRhcmVhIG92ZXJmbG93cyB0aGUgbWluaW11bVxuICAvLyBhbW91bnQgb2YgbGluZXMgaXQgc2hvdWxkIGhhdmUgd2hlbiBjb2xsYXBzZWRcbiAgY29uc3Qgc2hvdWxkUmVuZGVyVG9nZ2xlQnV0dG9uID1cbiAgICBjb250ZW50Um93Q291bnQgPiBNdWx0aWxpbmVUZXh0SW5wdXQuTUlOX1JPV19DT1VOVDtcblxuICByZXR1cm4gKFxuICAgIDxDb25zdHJhaW50cy5Ib3Jpem9udGFsIG1heD17cHJvcHMuaG9yaXpvbnRhbENvbnN0cmFpbnR9PlxuICAgICAgPFN0YWNrIHNjYWxlPVwieHNcIj5cbiAgICAgICAgPE11bHRpbGluZUlucHV0XG4gICAgICAgICAgbmFtZT17cHJvcHMubmFtZX1cbiAgICAgICAgICBhdXRvQ29tcGxldGU9e3Byb3BzLmF1dG9Db21wbGV0ZX1cbiAgICAgICAgICB2YWx1ZT17cHJvcHMudmFsdWV9XG4gICAgICAgICAgb25DaGFuZ2U9e3Byb3BzLm9uQ2hhbmdlfVxuICAgICAgICAgIG9uSGVpZ2h0Q2hhbmdlPXtoYW5kbGVIZWlnaHRDaGFuZ2V9XG4gICAgICAgICAgaWQ9e3Byb3BzLmlkfVxuICAgICAgICAgIG9uQmx1cj17cHJvcHMub25CbHVyfVxuICAgICAgICAgIG9uRm9jdXM9e2hhbmRsZUZvY3VzfVxuICAgICAgICAgIGlzRGlzYWJsZWQ9e3Byb3BzLmlzRGlzYWJsZWR9XG4gICAgICAgICAgaGFzRXJyb3I9e3Byb3BzLmhhc0Vycm9yfVxuICAgICAgICAgIGhhc1dhcm5pbmc9e3Byb3BzLmhhc1dhcm5pbmd9XG4gICAgICAgICAgcGxhY2Vob2xkZXI9e3Byb3BzLnBsYWNlaG9sZGVyfVxuICAgICAgICAgIGlzUmVhZE9ubHk9e3Byb3BzLmlzUmVhZE9ubHl9XG4gICAgICAgICAgaXNBdXRvZm9jdXNzZWQ9e3Byb3BzLmlzQXV0b2ZvY3Vzc2VkfVxuICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgIHsuLi5maWx0ZXJEYXRhQXR0cmlidXRlcyhwcm9wcyl9XG4gICAgICAgIC8+XG4gICAgICAgIHtzaG91bGRSZW5kZXJUb2dnbGVCdXR0b24gJiYgKFxuICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtZW5kO1xuICAgICAgICAgICAgYH1cbiAgICAgICAgICA+XG4gICAgICAgICAgICA8RmxhdEJ1dHRvblxuICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB0b2dnbGUoKX1cbiAgICAgICAgICAgICAgaXNEaXNhYmxlZD17cHJvcHMuaXNEaXNhYmxlZH1cbiAgICAgICAgICAgICAgbGFiZWw9e2ludGwuZm9ybWF0TWVzc2FnZShcbiAgICAgICAgICAgICAgICBpc09wZW5cbiAgICAgICAgICAgICAgICAgID8gbWVzc2FnZXNNdWx0aWxpbmVJbnB1dC5jb2xsYXBzZVxuICAgICAgICAgICAgICAgICAgOiBtZXNzYWdlc011bHRpbGluZUlucHV0LmV4cGFuZFxuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICBpY29uPXtcbiAgICAgICAgICAgICAgICBpc09wZW4gPyAoXG4gICAgICAgICAgICAgICAgICA8QW5nbGVVcEljb24gc2l6ZT1cInNtYWxsXCIgLz5cbiAgICAgICAgICAgICAgICApIDogKFxuICAgICAgICAgICAgICAgICAgPEFuZ2xlRG93bkljb24gc2l6ZT1cInNtYWxsXCIgLz5cbiAgICAgICAgICAgICAgICApXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICl9XG4gICAgICA8L1N0YWNrPlxuICAgIDwvQ29uc3RyYWludHMuSG9yaXpvbnRhbD5cbiAgKTtcbn07XG5cbk11bHRpbGluZVRleHRJbnB1dC5kaXNwbGF5TmFtZSA9ICdNdWx0aWxpbmVUZXh0SW5wdXQnO1xuXG4vLyBUaGUgbWluaW11bSBhbW1vdW50IG9mIHJvd3MgdGhlIE11bHRpbGluZVRleHRJbnB1dCB3aWxsIHNob3cuXG4vLyBXaGVuIHRoZSBpbnB1dCBpcyBjbG9zZWQsIHRoaXMgaXMgdXNlZCBhcyB0aGUgbWF4aW11bSByb3cgY291bnQgYXMgd2VsbFxuLy8gc28gdGhhdCB0aGUgaW5wdXQgXCJjb2xsYXBzZXNcIi5cbk11bHRpbGluZVRleHRJbnB1dC5NSU5fUk9XX0NPVU5UID0gMTtcblxuTXVsdGlsaW5lVGV4dElucHV0LmlzRW1wdHkgPSAodmFsdWU6IFRNdWx0aWxpbmVUZXh0SW5wdXRQcm9wc1sndmFsdWUnXSkgPT5cbiAgIXZhbHVlIHx8IHZhbHVlLnRyaW0oKS5sZW5ndGggPT09IDA7XG5NdWx0aWxpbmVUZXh0SW5wdXQuZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBNdWx0aWxpbmVUZXh0SW5wdXQ7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var MultilineTextInput = function MultilineTextInput(props) {
+  var intl = useIntl();
+
+  var _useState = useState(MultilineTextInput.MIN_ROW_COUNT),
+      _useState2 = _slicedToArray(_useState, 2),
+      contentRowCount = _useState2[0],
+      setContentRowCount = _useState2[1];
+
+  var _useToggleState = useToggleState(props.defaultExpandMultilineText),
+      _useToggleState2 = _slicedToArray(_useToggleState, 2),
+      isOpen = _useToggleState2[0],
+      toggle = _useToggleState2[1];
+
+  var onFocus = props.onFocus;
+  var handleFocus = useCallback(function (event) {
+    if (!isOpen) toggle(true);
+    if (onFocus) onFocus(event);
+  }, [isOpen, onFocus, toggle]);
+  var handleHeightChange = useCallback(function (_, rowCount) {
+    setContentRowCount(rowCount);
+  }, [setContentRowCount]); // This checks if the content in the textarea overflows the minimum
+  // amount of lines it should have when collapsed
+
+  var shouldRenderToggleButton = contentRowCount > MultilineTextInput.MIN_ROW_COUNT;
+  return jsx(Constraints.Horizontal, {
+    max: props.horizontalConstraint,
+    children: jsxs(Stack, {
+      scale: "xs",
+      children: [jsx(MultilineInput, _objectSpread({
+        name: props.name,
+        autoComplete: props.autoComplete,
+        value: props.value,
+        onChange: props.onChange,
+        onHeightChange: handleHeightChange,
+        id: props.id,
+        onBlur: props.onBlur,
+        onFocus: handleFocus,
+        isDisabled: props.isDisabled,
+        hasError: props.hasError,
+        hasWarning: props.hasWarning,
+        placeholder: props.placeholder,
+        isReadOnly: props.isReadOnly,
+        isAutofocussed: props.isAutofocussed,
+        isOpen: isOpen
+      }, filterDataAttributes(props))), shouldRenderToggleButton && jsx("div", {
+        css: _ref,
+        children: jsx(FlatButton, {
+          onClick: function onClick() {
+            return toggle();
+          },
+          isDisabled: props.isDisabled,
+          label: intl.formatMessage(isOpen ? messagesMultilineInput.collapse : messagesMultilineInput.expand),
+          icon: isOpen ? jsx(AngleUpIcon, {
+            size: "small"
+          }) : jsx(AngleDownIcon, {
+            size: "small"
+          })
+        })
+      })]
+    })
+  });
+};
+
+MultilineTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  name: _pt.string,
+  autoComplete: _pt.string,
+  id: _pt.string,
+  value: _pt.string.isRequired,
+  onChange: _pt.func,
+  onBlur: _pt.func,
+  onFocus: _pt.func,
+  isAutofocussed: _pt.bool,
+  defaultExpandMultilineText: _pt.bool,
+  isDisabled: _pt.bool,
+  isReadOnly: _pt.bool,
+  placeholder: _pt.string,
+  hasError: _pt.bool,
+  hasWarning: _pt.bool,
+  horizontalConstraint: _pt.oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'])
+} : {};
+MultilineTextInput.displayName = 'MultilineTextInput'; // The minimum ammount of rows the MultilineTextInput will show.
+// When the input is closed, this is used as the maximum row count as well
+// so that the input "collapses".
+
+MultilineTextInput.MIN_ROW_COUNT = 1;
+
+MultilineTextInput.isEmpty = function (value) {
+  return !value || _trimInstanceProperty(value).call(value).length === 0;
+};
+
+MultilineTextInput.defaultProps = defaultProps;
+var MultilineTextInput$1 = MultilineTextInput;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+export { MultilineTextInput$1 as default, version };

package/dist/declarations/src/export-types.d.ts

@@ -0,0 +1,2 @@
+import type { TMultilineTextInputProps as MultilineTextInputProps } from './multiline-text-input';
+export declare type TMultilineTextInputProps = MultilineTextInputProps;

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './multiline-text-input';
+export { default as version } from './version';
+export * from './export-types';

package/dist/declarations/src/multiline-text-input.d.ts

@@ -0,0 +1,26 @@
+import { ChangeEventHandler, FocusEventHandler } from 'react';
+export declare type TMultilineTextInputProps = {
+    name?: string;
+    autoComplete?: string;
+    id?: string;
+    value: string;
+    onChange?: ChangeEventHandler;
+    onBlur?: FocusEventHandler;
+    onFocus?: FocusEventHandler;
+    isAutofocussed?: boolean;
+    defaultExpandMultilineText?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    placeholder?: string;
+    hasError?: boolean;
+    hasWarning?: boolean;
+    horizontalConstraint?: 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
+};
+declare const MultilineTextInput: {
+    (props: TMultilineTextInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    MIN_ROW_COUNT: number;
+    isEmpty(value: TMultilineTextInputProps['value']): boolean;
+    defaultProps: Pick<TMultilineTextInputProps, "defaultExpandMultilineText">;
+};
+export default MultilineTextInput;

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "0.0.0-canary-2021830134526";
+export default _default;

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@commercetools-uikit/multiline-text-input",
+  "description": "A controlled text input component for multi-line strings with validation states.",
+  "version": "0.0.0-canary-2021830134526",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/inputs/multiline-text-input"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": [
+    "javascript",
+    "design system",
+    "react",
+    "uikit"
+  ],
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-multiline-text-input.cjs.js",
+  "module": "dist/commercetools-uikit-multiline-text-input.esm.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepare": "../../../../scripts/version.js replace"
+  },
+  "dependencies": {
+    "@babel/runtime": "7.14.8",
+    "@babel/runtime-corejs3": "7.14.9",
+    "@commercetools-uikit/constraints": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/design-system": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/flat-button": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/hooks": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/icons": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/input-utils": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/spacings-inline": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/spacings-stack": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/tooltip": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/utils": "12.2.0",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "downshift": "6.1.7",
+    "prop-types": "15.7.2",
+    "react-required-if": "1.0.3",
+    "react-textarea-autosize": "8.3.3"
+  },
+  "devDependencies": {
+    "react": "17.0.2",
+    "react-intl": "5.20.7"
+  },
+  "peerDependencies": {
+    "react": "17.x",
+    "react-intl": "5.x"
+  }
+}