@elliemae/ds-controlled-form 2.4.1-rc.0 → 2.4.1-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/cjs/checkbox/ControlledCheckbox.js +2 -1
  2. package/cjs/checkbox/react-desc-prop-types.js +1 -0
  3. package/cjs/index.js +8 -0
  4. package/cjs/large-text-input/DSControlledLargeTextInput.js +83 -0
  5. package/cjs/large-text-input/exported-related/data-test-ids.js +11 -0
  6. package/cjs/large-text-input/exported-related/index.js +12 -0
  7. package/cjs/large-text-input/exported-related/theming.js +13 -0
  8. package/cjs/large-text-input/index.js +15 -0
  9. package/cjs/large-text-input/react-desc-prop-types.js +45 -0
  10. package/cjs/large-text-input/styles.js +40 -0
  11. package/esm/checkbox/ControlledCheckbox.js +2 -1
  12. package/esm/checkbox/react-desc-prop-types.js +1 -0
  13. package/esm/index.js +3 -0
  14. package/esm/large-text-input/DSControlledLargeTextInput.js +72 -0
  15. package/esm/large-text-input/exported-related/data-test-ids.js +7 -0
  16. package/esm/large-text-input/exported-related/index.js +2 -0
  17. package/esm/large-text-input/exported-related/theming.js +8 -0
  18. package/esm/large-text-input/index.js +3 -0
  19. package/esm/large-text-input/react-desc-prop-types.js +36 -0
  20. package/esm/large-text-input/styles.js +30 -0
  21. package/package.json +43 -23
  22. package/types/checkbox/react-desc-prop-types.d.ts +1 -0
  23. package/types/index.d.ts +1 -0
  24. package/types/large-text-input/DSControlledLargeTextInput.d.ts +5 -0
  25. package/types/large-text-input/exported-related/data-test-ids.d.ts +5 -0
  26. package/types/large-text-input/exported-related/index.d.ts +2 -0
  27. package/types/large-text-input/exported-related/theming.d.ts +6 -0
  28. package/types/large-text-input/index.d.ts +2 -0
  29. package/types/large-text-input/react-desc-prop-types.d.ts +26 -0
  30. package/types/large-text-input/styles.d.ts +3 -0
  31. package/types/large-text-input/tests/DSControlledLargeTextInput.test.d.ts +1 -0
  32. package/cjs/text-input/exported-related/name.js +0 -7
  33. package/cjs/text-input/exported-related/slots.js +0 -11
  34. package/esm/text-input/exported-related/name.js +0 -3
  35. package/esm/text-input/exported-related/slots.js +0 -7
  36. package/types/text-input/exported-related/name.d.ts +0 -1
  37. package/types/text-input/exported-related/slots.d.ts +0 -5
@@ -40,6 +40,7 @@ const DSControlledCheckbox = props => {
40
40
  label,
41
41
  hasError,
42
42
  innerRef,
43
+ wrapLabel,
43
44
  tabIndex,
44
45
  ariaLabel: legacyAriaLabel,
45
46
  ariaControls: legacyAriaControls,
@@ -92,7 +93,7 @@ const DSControlledCheckbox = props => {
92
93
  readOnly: readOnly,
93
94
  checked: checked,
94
95
  "data-testid": "ds-checkbox-label"
95
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
96
+ }, void 0, wrapLabel ? label : /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
96
97
  value: label
97
98
  })));
98
99
  };
@@ -18,6 +18,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
18
18
 
19
19
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
20
20
  const defaultProps = {
21
+ wrapLabel: false,
21
22
  hasError: false,
22
23
  tabIndex: undefined,
23
24
  checked: false
package/cjs/index.js CHANGED
@@ -23,6 +23,9 @@ var DSInputText = require('./text-input/DSInputText.js');
23
23
  var dataTestIds = require('./text-input/exported-related/data-test-ids.js');
24
24
  var theming = require('./text-input/exported-related/theming.js');
25
25
  var ControlledToggle = require('./toggle/ControlledToggle.js');
26
+ var DSControlledLargeTextInput = require('./large-text-input/DSControlledLargeTextInput.js');
27
+ var dataTestIds$1 = require('./large-text-input/exported-related/data-test-ids.js');
28
+ var theming$1 = require('./large-text-input/exported-related/theming.js');
26
29
 
27
30
 
28
31
 
@@ -63,3 +66,8 @@ exports.DSInputTextName = theming.DSInputTextName;
63
66
  exports.DSInputTextSlots = theming.DSInputTextSlots;
64
67
  exports.DSControlledToggle = ControlledToggle.DSControlledToggle;
65
68
  exports.DSControlledToggleWithSchema = ControlledToggle.DSControlledToggleWithSchema;
69
+ exports.DSControlledLargeTextInput = DSControlledLargeTextInput.DSControlledLargeTextInput;
70
+ exports.DSControlledLargeTextInputWithSchema = DSControlledLargeTextInput.DSControlledLargeTextInputWithSchema;
71
+ exports.DSControlledLargetTextInputDatatestids = dataTestIds$1.DSControlledLargetTextInputDatatestids;
72
+ exports.DSControlledLargeTextInputName = theming$1.DSControlledLargeTextInputName;
73
+ exports.DSControlledLargeTextInputSlots = theming$1.DSControlledLargeTextInputSlots;
@@ -0,0 +1,83 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ require('core-js/modules/esnext.async-iterator.filter.js');
6
+ require('core-js/modules/esnext.iterator.constructor.js');
7
+ require('core-js/modules/esnext.iterator.filter.js');
8
+ require('core-js/modules/esnext.async-iterator.for-each.js');
9
+ require('core-js/modules/esnext.iterator.for-each.js');
10
+ var _jsx = require('@babel/runtime/helpers/jsx');
11
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
12
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
13
+ var React = require('react');
14
+ var dsPropsHelpers = require('@elliemae/ds-props-helpers');
15
+ var reactDescPropTypes = require('./react-desc-prop-types.js');
16
+ var styles = require('./styles.js');
17
+ var dataTestIds = require('./exported-related/data-test-ids.js');
18
+ var jsxRuntime = require('react/jsx-runtime');
19
+
20
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
21
+
22
+ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
23
+ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
24
+ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
25
+
26
+ const _excluded = ["maxLength", "value", "onChange", "innerRef", "resizable", "name", "id", "withoutCharacterCounter", "hasError"],
27
+ _excluded2 = ["className"];
28
+
29
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
30
+
31
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
32
+
33
+ const DSControlledLargeTextInput = props => {
34
+ dsPropsHelpers.useValidateTypescriptPropTypes(props, reactDescPropTypes.propTypes);
35
+ const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.defaultProps);
36
+
37
+ const {
38
+ maxLength,
39
+ value,
40
+ onChange,
41
+ innerRef,
42
+ resizable,
43
+ name,
44
+ id,
45
+ withoutCharacterCounter,
46
+ hasError
47
+ } = propsWithDefault,
48
+ otherProps = _objectWithoutProperties__default["default"](propsWithDefault, _excluded);
49
+
50
+ const _useGetGlobalAttribut = dsPropsHelpers.useGetGlobalAttributes(otherProps),
51
+ {
52
+ className
53
+ } = _useGetGlobalAttribut,
54
+ globalAttributes = _objectWithoutProperties__default["default"](_useGetGlobalAttribut, _excluded2);
55
+
56
+ const xstyledProps = dsPropsHelpers.useGetXstyledProps(otherProps);
57
+ const handleOnChange = React.useCallback(e => onChange(e.target.value, e), [onChange]);
58
+ return /*#__PURE__*/jsxRuntime.jsxs(styles.StyledContainer, _objectSpread(_objectSpread({
59
+ className: className,
60
+ "data-testid": dataTestIds.DSControlledLargetTextInputDatatestids.CONTAINER
61
+ }, xstyledProps), {}, {
62
+ children: [/*#__PURE__*/jsxRuntime.jsx(styles.StyledTextArea, _objectSpread({
63
+ ref: innerRef,
64
+ maxLength: maxLength,
65
+ "aria-multiline": true,
66
+ value: value,
67
+ onChange: handleOnChange,
68
+ resizable: resizable,
69
+ name: name,
70
+ id: id,
71
+ "data-testid": dataTestIds.DSControlledLargetTextInputDatatestids.INPUT,
72
+ hasError: hasError
73
+ }, globalAttributes)), maxLength && !withoutCharacterCounter && /*#__PURE__*/_jsx__default["default"](styles.StyledCharCounter, {
74
+ "data-testid": dataTestIds.DSControlledLargetTextInputDatatestids.CHAR_COUNTER
75
+ }, void 0, "".concat(value.length, "/").concat(maxLength))]
76
+ }));
77
+ };
78
+
79
+ const DSControlledLargeTextInputWithSchema = dsPropsHelpers.describe(DSControlledLargeTextInput);
80
+ DSControlledLargeTextInputWithSchema.propTypes = reactDescPropTypes.propTypes;
81
+
82
+ exports.DSControlledLargeTextInput = DSControlledLargeTextInput;
83
+ exports.DSControlledLargeTextInputWithSchema = DSControlledLargeTextInputWithSchema;
@@ -0,0 +1,11 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const DSControlledLargetTextInputDatatestids = {
6
+ CONTAINER: 'ds-controlled-large-text-input-container',
7
+ CHAR_COUNTER: 'ds-controlled-large-text-input-char-counter',
8
+ INPUT: 'ds-controlled-large-text-input'
9
+ };
10
+
11
+ exports.DSControlledLargetTextInputDatatestids = DSControlledLargetTextInputDatatestids;
@@ -0,0 +1,12 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var dataTestIds = require('./data-test-ids.js');
6
+ var theming = require('./theming.js');
7
+
8
+
9
+
10
+ exports.DSControlledLargetTextInputDatatestids = dataTestIds.DSControlledLargetTextInputDatatestids;
11
+ exports.DSControlledLargeTextInputName = theming.DSControlledLargeTextInputName;
12
+ exports.DSControlledLargeTextInputSlots = theming.DSControlledLargeTextInputSlots;
@@ -0,0 +1,13 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const DSControlledLargeTextInputName = 'ds-controlled-large-text-input';
6
+ const DSControlledLargeTextInputSlots = {
7
+ CONTAINER: 'root',
8
+ INPUT: 'input',
9
+ CHAR_COUNTER: 'char-counter'
10
+ };
11
+
12
+ exports.DSControlledLargeTextInputName = DSControlledLargeTextInputName;
13
+ exports.DSControlledLargeTextInputSlots = DSControlledLargeTextInputSlots;
@@ -0,0 +1,15 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var DSControlledLargeTextInput = require('./DSControlledLargeTextInput.js');
6
+ var dataTestIds = require('./exported-related/data-test-ids.js');
7
+ var theming = require('./exported-related/theming.js');
8
+
9
+
10
+
11
+ exports.DSControlledLargeTextInput = DSControlledLargeTextInput.DSControlledLargeTextInput;
12
+ exports.DSControlledLargeTextInputWithSchema = DSControlledLargeTextInput.DSControlledLargeTextInputWithSchema;
13
+ exports.DSControlledLargetTextInputDatatestids = dataTestIds.DSControlledLargetTextInputDatatestids;
14
+ exports.DSControlledLargeTextInputName = theming.DSControlledLargeTextInputName;
15
+ exports.DSControlledLargeTextInputSlots = theming.DSControlledLargeTextInputSlots;
@@ -0,0 +1,45 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ require('core-js/modules/esnext.async-iterator.filter.js');
6
+ require('core-js/modules/esnext.iterator.constructor.js');
7
+ require('core-js/modules/esnext.iterator.filter.js');
8
+ require('core-js/modules/esnext.async-iterator.for-each.js');
9
+ require('core-js/modules/esnext.iterator.for-each.js');
10
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
11
+ var dsPropsHelpers = require('@elliemae/ds-props-helpers');
12
+
13
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
+
15
+ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
16
+
17
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
18
+
19
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
20
+
21
+ const noop = () => {};
22
+
23
+ const defaultProps = {
24
+ value: '',
25
+ onChange: noop,
26
+ withoutCharacterCounter: false,
27
+ resizable: false,
28
+ hasError: false
29
+ };
30
+ const propTypes = _objectSpread(_objectSpread(_objectSpread({}, dsPropsHelpers.globalAttributesPropTypes), dsPropsHelpers.xstyledPropTypes), {}, {
31
+ value: dsPropsHelpers.PropTypes.string.description('Text are value.').defaultValue(''),
32
+ onChange: dsPropsHelpers.PropTypes.func.description('OnChange cb.').defaultValue('() => {}'),
33
+ resizable: dsPropsHelpers.PropTypes.bool.description('Enables to resize the component.').defaultValue(false),
34
+ rows: dsPropsHelpers.PropTypes.string.description('Sets the number of lines for the default height. Once lines are reached, scroll behavior enables.'),
35
+ withoutCharacterCounter: dsPropsHelpers.PropTypes.bool.description('Removes the character counter.').defaultValue(false),
36
+ id: dsPropsHelpers.PropTypes.string.description('Unique id.'),
37
+ innerRef: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.object, dsPropsHelpers.PropTypes.func]).description('Inner ref to the input.'),
38
+ maxLength: dsPropsHelpers.PropTypes.string.description('Max characters allowed.'),
39
+ disabled: dsPropsHelpers.PropTypes.bool.description('Set disabled state.'),
40
+ readOnly: dsPropsHelpers.PropTypes.bool.description('Set readonly state.'),
41
+ hasError: dsPropsHelpers.PropTypes.bool.description('Set error state.').defaultValue(false)
42
+ });
43
+
44
+ exports.defaultProps = defaultProps;
45
+ exports.propTypes = propTypes;
@@ -0,0 +1,40 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
+ var dsSystem = require('@elliemae/ds-system');
7
+ var styledComponents = require('@xstyled/styled-components');
8
+ var theming = require('./exported-related/theming.js');
9
+
10
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
+
12
+ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
13
+
14
+ var _templateObject, _templateObject2, _templateObject3;
15
+ const StyledContainer = dsSystem.styled('div', {
16
+ name: theming.DSControlledLargeTextInputName,
17
+ slot: theming.DSControlledLargeTextInputSlots.CONTAINER
18
+ })(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n display: grid;\n grid-gap: 4px;\n grid-template-rows: auto auto;\n grid-template-columns: fit-content;\n ", "\n ", "\n ", "\n"])), styledComponents.layout, styledComponents.space, styledComponents.sizing);
19
+ const StyledCharCounter = dsSystem.styled('span', {
20
+ name: theming.DSControlledLargeTextInputName,
21
+ slot: theming.DSControlledLargeTextInputSlots.CHAR_COUNTER
22
+ })(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n justify-self: flex-end;\n"])));
23
+ const StyledTextArea = dsSystem.styled('textarea', {
24
+ name: theming.DSControlledLargeTextInputName,
25
+ slot: theming.DSControlledLargeTextInputSlots.INPUT
26
+ })(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n width: 100%;\n ", "\n &:disabled {\n &:hover {\n cursor: not-allowed;\n }\n }\n\n ", "\n"])), _ref => {
27
+ let {
28
+ resizable
29
+ } = _ref;
30
+ return resizable ? "" : "resize: none;";
31
+ }, _ref2 => {
32
+ let {
33
+ hasError
34
+ } = _ref2;
35
+ return hasError ? "border: 1px solid red;" : "";
36
+ });
37
+
38
+ exports.StyledCharCounter = StyledCharCounter;
39
+ exports.StyledContainer = StyledContainer;
40
+ exports.StyledTextArea = StyledTextArea;
@@ -30,6 +30,7 @@ const DSControlledCheckbox = props => {
30
30
  label,
31
31
  hasError,
32
32
  innerRef,
33
+ wrapLabel,
33
34
  tabIndex,
34
35
  ariaLabel: legacyAriaLabel,
35
36
  ariaControls: legacyAriaControls,
@@ -82,7 +83,7 @@ const DSControlledCheckbox = props => {
82
83
  readOnly: readOnly,
83
84
  checked: checked,
84
85
  "data-testid": "ds-checkbox-label"
85
- }, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
86
+ }, void 0, wrapLabel ? label : /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
86
87
  value: label
87
88
  })));
88
89
  };
@@ -10,6 +10,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
10
10
 
11
11
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
12
12
  const defaultProps = {
13
+ wrapLabel: false,
13
14
  hasError: false,
14
15
  tabIndex: undefined,
15
16
  checked: false
package/esm/index.js CHANGED
@@ -19,3 +19,6 @@ export { DSInputText, DSInputTextWithSchema } from './text-input/DSInputText.js'
19
19
  export { DSInputTextDataTestIds } from './text-input/exported-related/data-test-ids.js';
20
20
  export { DSInputTextName, DSInputTextSlots } from './text-input/exported-related/theming.js';
21
21
  export { DSControlledToggle, DSControlledToggleWithSchema } from './toggle/ControlledToggle.js';
22
+ export { DSControlledLargeTextInput, DSControlledLargeTextInputWithSchema } from './large-text-input/DSControlledLargeTextInput.js';
23
+ export { DSControlledLargetTextInputDatatestids } from './large-text-input/exported-related/data-test-ids.js';
24
+ export { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './large-text-input/exported-related/theming.js';
@@ -0,0 +1,72 @@
1
+ import 'core-js/modules/esnext.async-iterator.filter.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.filter.js';
4
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.iterator.for-each.js';
6
+ import _jsx from '@babel/runtime/helpers/esm/jsx';
7
+ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
8
+ import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
9
+ import { useCallback } from 'react';
10
+ import { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';
11
+ import { propTypes, defaultProps } from './react-desc-prop-types.js';
12
+ import { StyledContainer, StyledTextArea, StyledCharCounter } from './styles.js';
13
+ import { DSControlledLargetTextInputDatatestids } from './exported-related/data-test-ids.js';
14
+ import { jsxs, jsx } from 'react/jsx-runtime';
15
+
16
+ const _excluded = ["maxLength", "value", "onChange", "innerRef", "resizable", "name", "id", "withoutCharacterCounter", "hasError"],
17
+ _excluded2 = ["className"];
18
+
19
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
20
+
21
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
22
+
23
+ const DSControlledLargeTextInput = props => {
24
+ useValidateTypescriptPropTypes(props, propTypes);
25
+ const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
26
+
27
+ const {
28
+ maxLength,
29
+ value,
30
+ onChange,
31
+ innerRef,
32
+ resizable,
33
+ name,
34
+ id,
35
+ withoutCharacterCounter,
36
+ hasError
37
+ } = propsWithDefault,
38
+ otherProps = _objectWithoutProperties(propsWithDefault, _excluded);
39
+
40
+ const _useGetGlobalAttribut = useGetGlobalAttributes(otherProps),
41
+ {
42
+ className
43
+ } = _useGetGlobalAttribut,
44
+ globalAttributes = _objectWithoutProperties(_useGetGlobalAttribut, _excluded2);
45
+
46
+ const xstyledProps = useGetXstyledProps(otherProps);
47
+ const handleOnChange = useCallback(e => onChange(e.target.value, e), [onChange]);
48
+ return /*#__PURE__*/jsxs(StyledContainer, _objectSpread(_objectSpread({
49
+ className: className,
50
+ "data-testid": DSControlledLargetTextInputDatatestids.CONTAINER
51
+ }, xstyledProps), {}, {
52
+ children: [/*#__PURE__*/jsx(StyledTextArea, _objectSpread({
53
+ ref: innerRef,
54
+ maxLength: maxLength,
55
+ "aria-multiline": true,
56
+ value: value,
57
+ onChange: handleOnChange,
58
+ resizable: resizable,
59
+ name: name,
60
+ id: id,
61
+ "data-testid": DSControlledLargetTextInputDatatestids.INPUT,
62
+ hasError: hasError
63
+ }, globalAttributes)), maxLength && !withoutCharacterCounter && /*#__PURE__*/_jsx(StyledCharCounter, {
64
+ "data-testid": DSControlledLargetTextInputDatatestids.CHAR_COUNTER
65
+ }, void 0, "".concat(value.length, "/").concat(maxLength))]
66
+ }));
67
+ };
68
+
69
+ const DSControlledLargeTextInputWithSchema = describe(DSControlledLargeTextInput);
70
+ DSControlledLargeTextInputWithSchema.propTypes = propTypes;
71
+
72
+ export { DSControlledLargeTextInput, DSControlledLargeTextInputWithSchema };
@@ -0,0 +1,7 @@
1
+ const DSControlledLargetTextInputDatatestids = {
2
+ CONTAINER: 'ds-controlled-large-text-input-container',
3
+ CHAR_COUNTER: 'ds-controlled-large-text-input-char-counter',
4
+ INPUT: 'ds-controlled-large-text-input'
5
+ };
6
+
7
+ export { DSControlledLargetTextInputDatatestids };
@@ -0,0 +1,2 @@
1
+ export { DSControlledLargetTextInputDatatestids } from './data-test-ids.js';
2
+ export { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './theming.js';
@@ -0,0 +1,8 @@
1
+ const DSControlledLargeTextInputName = 'ds-controlled-large-text-input';
2
+ const DSControlledLargeTextInputSlots = {
3
+ CONTAINER: 'root',
4
+ INPUT: 'input',
5
+ CHAR_COUNTER: 'char-counter'
6
+ };
7
+
8
+ export { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots };
@@ -0,0 +1,3 @@
1
+ export { DSControlledLargeTextInput, DSControlledLargeTextInputWithSchema } from './DSControlledLargeTextInput.js';
2
+ export { DSControlledLargetTextInputDatatestids } from './exported-related/data-test-ids.js';
3
+ export { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './exported-related/theming.js';
@@ -0,0 +1,36 @@
1
+ import 'core-js/modules/esnext.async-iterator.filter.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.filter.js';
4
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.iterator.for-each.js';
6
+ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
+ import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';
8
+
9
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
10
+
11
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
12
+
13
+ const noop = () => {};
14
+
15
+ const defaultProps = {
16
+ value: '',
17
+ onChange: noop,
18
+ withoutCharacterCounter: false,
19
+ resizable: false,
20
+ hasError: false
21
+ };
22
+ const propTypes = _objectSpread(_objectSpread(_objectSpread({}, globalAttributesPropTypes), xstyledPropTypes), {}, {
23
+ value: PropTypes.string.description('Text are value.').defaultValue(''),
24
+ onChange: PropTypes.func.description('OnChange cb.').defaultValue('() => {}'),
25
+ resizable: PropTypes.bool.description('Enables to resize the component.').defaultValue(false),
26
+ rows: PropTypes.string.description('Sets the number of lines for the default height. Once lines are reached, scroll behavior enables.'),
27
+ withoutCharacterCounter: PropTypes.bool.description('Removes the character counter.').defaultValue(false),
28
+ id: PropTypes.string.description('Unique id.'),
29
+ innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to the input.'),
30
+ maxLength: PropTypes.string.description('Max characters allowed.'),
31
+ disabled: PropTypes.bool.description('Set disabled state.'),
32
+ readOnly: PropTypes.bool.description('Set readonly state.'),
33
+ hasError: PropTypes.bool.description('Set error state.').defaultValue(false)
34
+ });
35
+
36
+ export { defaultProps, propTypes };
@@ -0,0 +1,30 @@
1
+ import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
+ import { styled } from '@elliemae/ds-system';
3
+ import { layout, space, sizing } from '@xstyled/styled-components';
4
+ import { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './exported-related/theming.js';
5
+
6
+ var _templateObject, _templateObject2, _templateObject3;
7
+ const StyledContainer = styled('div', {
8
+ name: DSControlledLargeTextInputName,
9
+ slot: DSControlledLargeTextInputSlots.CONTAINER
10
+ })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: grid;\n grid-gap: 4px;\n grid-template-rows: auto auto;\n grid-template-columns: fit-content;\n ", "\n ", "\n ", "\n"])), layout, space, sizing);
11
+ const StyledCharCounter = styled('span', {
12
+ name: DSControlledLargeTextInputName,
13
+ slot: DSControlledLargeTextInputSlots.CHAR_COUNTER
14
+ })(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n justify-self: flex-end;\n"])));
15
+ const StyledTextArea = styled('textarea', {
16
+ name: DSControlledLargeTextInputName,
17
+ slot: DSControlledLargeTextInputSlots.INPUT
18
+ })(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 100%;\n ", "\n &:disabled {\n &:hover {\n cursor: not-allowed;\n }\n }\n\n ", "\n"])), _ref => {
19
+ let {
20
+ resizable
21
+ } = _ref;
22
+ return resizable ? "" : "resize: none;";
23
+ }, _ref2 => {
24
+ let {
25
+ hasError
26
+ } = _ref2;
27
+ return hasError ? "border: 1px solid red;" : "";
28
+ });
29
+
30
+ export { StyledCharCounter, StyledContainer, StyledTextArea };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-controlled-form",
3
- "version": "2.4.1-rc.0",
3
+ "version": "2.4.1-rc.4",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Controllers",
6
6
  "module": "./esm/index.js",
@@ -59,14 +59,6 @@
59
59
  "import": "./esm/text-input/exported-related/theming.js",
60
60
  "require": "./cjs/text-input/exported-related/theming.js"
61
61
  },
62
- "./text-input/exported-related/slots": {
63
- "import": "./esm/text-input/exported-related/slots.js",
64
- "require": "./cjs/text-input/exported-related/slots.js"
65
- },
66
- "./text-input/exported-related/name": {
67
- "import": "./esm/text-input/exported-related/name.js",
68
- "require": "./cjs/text-input/exported-related/name.js"
69
- },
70
62
  "./text-input/exported-related": {
71
63
  "import": "./esm/text-input/exported-related/index.js",
72
64
  "require": "./cjs/text-input/exported-related/index.js"
@@ -131,6 +123,34 @@
131
123
  "import": "./esm/mask-hook/hooks/index.js",
132
124
  "require": "./cjs/mask-hook/hooks/index.js"
133
125
  },
126
+ "./large-text-input/styles": {
127
+ "import": "./esm/large-text-input/styles.js",
128
+ "require": "./cjs/large-text-input/styles.js"
129
+ },
130
+ "./large-text-input/react-desc-prop-types": {
131
+ "import": "./esm/large-text-input/react-desc-prop-types.js",
132
+ "require": "./cjs/large-text-input/react-desc-prop-types.js"
133
+ },
134
+ "./large-text-input": {
135
+ "import": "./esm/large-text-input/index.js",
136
+ "require": "./cjs/large-text-input/index.js"
137
+ },
138
+ "./large-text-input/exported-related/theming": {
139
+ "import": "./esm/large-text-input/exported-related/theming.js",
140
+ "require": "./cjs/large-text-input/exported-related/theming.js"
141
+ },
142
+ "./large-text-input/exported-related": {
143
+ "import": "./esm/large-text-input/exported-related/index.js",
144
+ "require": "./cjs/large-text-input/exported-related/index.js"
145
+ },
146
+ "./large-text-input/exported-related/data-test-ids": {
147
+ "import": "./esm/large-text-input/exported-related/data-test-ids.js",
148
+ "require": "./cjs/large-text-input/exported-related/data-test-ids.js"
149
+ },
150
+ "./large-text-input/DSControlledLargeTextInput": {
151
+ "import": "./esm/large-text-input/DSControlledLargeTextInput.js",
152
+ "require": "./cjs/large-text-input/DSControlledLargeTextInput.js"
153
+ },
134
154
  "./date-time-picker/utils/timeHelpers": {
135
155
  "import": "./esm/date-time-picker/utils/timeHelpers.js",
136
156
  "require": "./cjs/date-time-picker/utils/timeHelpers.js"
@@ -836,20 +856,20 @@
836
856
  "build": "node ../../scripts/build/build.js"
837
857
  },
838
858
  "dependencies": {
839
- "@elliemae/ds-button": "2.4.1-rc.0",
840
- "@elliemae/ds-circular-progress-indicator": "2.4.1-rc.0",
841
- "@elliemae/ds-controlled-form": "2.4.1-rc.0",
842
- "@elliemae/ds-form": "2.4.1-rc.0",
843
- "@elliemae/ds-form-layout-blocks": "2.4.1-rc.0",
844
- "@elliemae/ds-grid": "2.4.1-rc.0",
845
- "@elliemae/ds-icon": "2.4.1-rc.0",
846
- "@elliemae/ds-icons": "2.4.1-rc.0",
847
- "@elliemae/ds-pills": "2.4.1-rc.0",
848
- "@elliemae/ds-popperjs": "2.4.1-rc.0",
849
- "@elliemae/ds-props-helpers": "2.4.1-rc.0",
850
- "@elliemae/ds-system": "2.4.1-rc.0",
851
- "@elliemae/ds-tooltip": "2.4.1-rc.0",
852
- "@elliemae/ds-truncated-tooltip-text": "2.4.1-rc.0",
859
+ "@elliemae/ds-button": "2.4.1-rc.4",
860
+ "@elliemae/ds-circular-progress-indicator": "2.4.1-rc.4",
861
+ "@elliemae/ds-controlled-form": "2.4.1-rc.4",
862
+ "@elliemae/ds-form": "2.4.1-rc.4",
863
+ "@elliemae/ds-form-layout-blocks": "2.4.1-rc.4",
864
+ "@elliemae/ds-grid": "2.4.1-rc.4",
865
+ "@elliemae/ds-icon": "2.4.1-rc.4",
866
+ "@elliemae/ds-icons": "2.4.1-rc.4",
867
+ "@elliemae/ds-pills": "2.4.1-rc.4",
868
+ "@elliemae/ds-popperjs": "2.4.1-rc.4",
869
+ "@elliemae/ds-props-helpers": "2.4.1-rc.4",
870
+ "@elliemae/ds-system": "2.4.1-rc.4",
871
+ "@elliemae/ds-tooltip": "2.4.1-rc.4",
872
+ "@elliemae/ds-truncated-tooltip-text": "2.4.1-rc.4",
853
873
  "prop-types": "~15.7.2",
854
874
  "react-desc": "~4.1.3",
855
875
  "react-popper": "~2.2.5",
@@ -6,6 +6,7 @@ export declare namespace DSControlledCheckboxT {
6
6
  tabIndex?: number;
7
7
  hasError?: boolean;
8
8
  'data-testid'?: string;
9
+ wrapLabel: boolean;
9
10
  }
10
11
  interface OptionalProps {
11
12
  innerRef: React.RefObject<HTMLInputElement> | React.LegacyRef<HTMLInputElement>;
package/types/index.d.ts CHANGED
@@ -6,3 +6,4 @@ export * from './date-time-picker';
6
6
  export * from './mask-hook';
7
7
  export * from './text-input';
8
8
  export * from './toggle';
9
+ export * from './large-text-input';
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ import type { DSControlledLargeTextInputT } from './react-desc-prop-types';
3
+ declare const DSControlledLargeTextInput: (props: DSControlledLargeTextInputT.Props) => JSX.Element;
4
+ declare const DSControlledLargeTextInputWithSchema: any;
5
+ export { DSControlledLargeTextInput, DSControlledLargeTextInputWithSchema };
@@ -0,0 +1,5 @@
1
+ export declare const DSControlledLargetTextInputDatatestids: {
2
+ CONTAINER: string;
3
+ CHAR_COUNTER: string;
4
+ INPUT: string;
5
+ };
@@ -0,0 +1,2 @@
1
+ export * from './data-test-ids';
2
+ export * from './theming';
@@ -0,0 +1,6 @@
1
+ export declare const DSControlledLargeTextInputName = "ds-controlled-large-text-input";
2
+ export declare const DSControlledLargeTextInputSlots: {
3
+ CONTAINER: string;
4
+ INPUT: string;
5
+ CHAR_COUNTER: string;
6
+ };
@@ -0,0 +1,2 @@
1
+ export * from './DSControlledLargeTextInput';
2
+ export * from './exported-related';
@@ -0,0 +1,26 @@
1
+ /// <reference types="react" />
2
+ export declare namespace DSControlledLargeTextInputT {
3
+ interface DefaultProps {
4
+ value: string;
5
+ onChange: () => void;
6
+ withoutCharacterCounter: boolean;
7
+ resizable: boolean;
8
+ hasError: boolean;
9
+ }
10
+ interface RequiredProps {
11
+ name: string;
12
+ id: string;
13
+ }
14
+ interface PropsOptional {
15
+ disabled?: boolean;
16
+ readOnly?: boolean;
17
+ innerRef?: React.MutableRefObject<HTMLTextAreaElement | null>;
18
+ maxLength?: string;
19
+ rows?: string;
20
+ hasError?: boolean;
21
+ }
22
+ interface Props extends DefaultProps, PropsOptional, RequiredProps {
23
+ }
24
+ }
25
+ export declare const defaultProps: DSControlledLargeTextInputT.DefaultProps;
26
+ export declare const propTypes: any;
@@ -0,0 +1,3 @@
1
+ export declare const StyledContainer: any;
2
+ export declare const StyledCharCounter: any;
3
+ export declare const StyledTextArea: any;
@@ -1,7 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const DSInputTextName = 'ds-input-text';
6
-
7
- exports.DSInputTextName = DSInputTextName;
@@ -1,11 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const DSInputTextSlots = {
6
- INPUT: 'input',
7
- INPUT_WRAPPER: 'input-wrapper',
8
- CLEAR_BUTTON: 'input-clear-button'
9
- };
10
-
11
- exports.DSInputTextSlots = DSInputTextSlots;
@@ -1,3 +0,0 @@
1
- const DSInputTextName = 'ds-input-text';
2
-
3
- export { DSInputTextName };
@@ -1,7 +0,0 @@
1
- const DSInputTextSlots = {
2
- INPUT: 'input',
3
- INPUT_WRAPPER: 'input-wrapper',
4
- CLEAR_BUTTON: 'input-clear-button'
5
- };
6
-
7
- export { DSInputTextSlots };
@@ -1 +0,0 @@
1
- export declare const DSInputTextName = "ds-input-text";
@@ -1,5 +0,0 @@
1
- export declare const DSInputTextSlots: {
2
- INPUT: string;
3
- INPUT_WRAPPER: string;
4
- CLEAR_BUTTON: string;
5
- };