@pingux/astro 2.83.0-alpha.0 → 2.84.0-alpha.0
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.
- package/lib/cjs/components/TextAreaField/TextAreaField.d.ts +4 -0
- package/lib/cjs/components/TextAreaField/TextAreaField.js +32 -94
- package/lib/cjs/components/TextAreaField/TextAreaField.stories.d.ts +39 -0
- package/lib/cjs/components/TextAreaField/TextAreaField.stories.js +8 -0
- package/lib/cjs/components/TextAreaField/TextAreaField.test.d.ts +1 -0
- package/lib/cjs/components/TextAreaField/TextAreaField.test.js +1 -1
- package/lib/cjs/components/TextAreaField/index.d.ts +1 -0
- package/lib/cjs/hooks/useColumnStyles/useColumnStyles.d.ts +1 -1
- package/lib/cjs/types/TextAreaField.d.ts +57 -0
- package/lib/cjs/types/TextAreaField.js +6 -0
- package/lib/components/TextAreaField/TextAreaField.js +35 -97
- package/lib/components/TextAreaField/TextAreaField.stories.js +8 -0
- package/lib/components/TextAreaField/TextAreaField.test.js +1 -1
- package/lib/types/TextAreaField.js +1 -0
- package/package.json +1 -1
@@ -19,13 +19,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
|
|
19
19
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
20
20
|
var _react = _interopRequireWildcard(require("react"));
|
21
21
|
var _utils = require("@react-aria/utils");
|
22
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
23
22
|
var _uuid = require("uuid");
|
24
23
|
var _ = require("../..");
|
25
24
|
var _hooks = require("../../hooks");
|
26
25
|
var _pendoID = require("../../utils/devUtils/constants/pendoID");
|
27
|
-
var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
|
28
|
-
var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
|
29
26
|
var _statusProp = require("../../utils/docUtils/statusProp");
|
30
27
|
var _react2 = require("@emotion/react");
|
31
28
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
@@ -38,47 +35,54 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
38
35
|
isUnresizable = props.isUnresizable,
|
39
36
|
rows = props.rows,
|
40
37
|
status = props.status,
|
41
|
-
slots = props.slots
|
42
|
-
|
43
|
-
|
44
|
-
};
|
38
|
+
slots = props.slots,
|
39
|
+
resizeCallback = props.resizeCallback,
|
40
|
+
labelMode = props.labelMode;
|
45
41
|
var _useField = (0, _hooks.useField)(_objectSpread({
|
46
|
-
statusClasses:
|
42
|
+
statusClasses: {
|
43
|
+
isUnresizable: !!isUnresizable
|
44
|
+
}
|
47
45
|
}, props)),
|
48
46
|
fieldContainerProps = _useField.fieldContainerProps,
|
49
47
|
fieldControlInputProps = _useField.fieldControlInputProps,
|
50
48
|
fieldControlWrapperProps = _useField.fieldControlWrapperProps,
|
51
49
|
fieldLabelProps = _useField.fieldLabelProps;
|
52
50
|
var containerRef = (0, _react.useRef)();
|
53
|
-
var fieldControlWrapperRef = (0, _react.useRef)();
|
54
|
-
var labelRef = (0, _react.useRef)();
|
55
|
-
var labelWrapperRef = (0, _react.useRef)();
|
56
|
-
var slotContainer = (0, _react.useRef)();
|
57
|
-
var textAreaRef = (0, _react.useRef)();
|
51
|
+
var fieldControlWrapperRef = (0, _react.useRef)(null);
|
52
|
+
var labelRef = (0, _react.useRef)(null);
|
53
|
+
var labelWrapperRef = (0, _react.useRef)(null);
|
54
|
+
var slotContainer = (0, _react.useRef)(null);
|
58
55
|
var helperTextId = (0, _uuid.v4)();
|
59
56
|
(0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
|
57
|
+
|
60
58
|
/* istanbul ignore next */
|
61
|
-
(0,
|
62
|
-
return textAreaRef.current;
|
63
|
-
});
|
59
|
+
var textAreaRef = (0, _hooks.useLocalOrForwardRef)(ref);
|
64
60
|
|
65
61
|
/* istanbul ignore next */
|
62
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
66
63
|
var resizeFloatLabel = function resizeFloatLabel() {
|
67
64
|
/* istanbul ignore next */
|
68
|
-
labelRef.current
|
69
|
-
|
65
|
+
if (labelRef.current) {
|
66
|
+
labelRef.current.style.width = textAreaRef.current.style.width;
|
67
|
+
}
|
68
|
+
if (labelWrapperRef.current) {
|
69
|
+
labelWrapperRef.current.style.width = "".concat(textAreaRef.current.clientWidth - 2, "px");
|
70
|
+
}
|
70
71
|
};
|
71
72
|
|
72
73
|
/* istanbul ignore next */
|
74
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
73
75
|
var resizeSlotContainer = function resizeSlotContainer() {
|
74
|
-
fieldControlWrapperRef.current
|
76
|
+
if (fieldControlWrapperRef.current) {
|
77
|
+
fieldControlWrapperRef.current.style.width = textAreaRef.current.style.width;
|
78
|
+
}
|
75
79
|
};
|
76
80
|
var onResize = (0, _react.useCallback)(function () {
|
77
81
|
/* istanbul ignore next */
|
78
82
|
if (slots !== null && slots !== void 0 && slots.inContainer) {
|
79
83
|
resizeSlotContainer();
|
80
84
|
}
|
81
|
-
}, [
|
85
|
+
}, [resizeSlotContainer, slots === null || slots === void 0 ? void 0 : slots.inContainer]);
|
82
86
|
(0, _utils.useResizeObserver)({
|
83
87
|
ref: textAreaRef,
|
84
88
|
onResize: onResize
|
@@ -90,23 +94,23 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
90
94
|
}),
|
91
95
|
isLabelHigher = _useLabelHeight.isLabelHigher;
|
92
96
|
var columnStyleProps = (0, _hooks.useColumnStyles)({
|
93
|
-
labelMode:
|
97
|
+
labelMode: labelMode
|
94
98
|
});
|
95
99
|
(0, _react.useEffect)(function () {
|
96
100
|
var thisRef = textAreaRef.current;
|
97
|
-
if (!
|
98
|
-
thisRef.addEventListener('mousemove',
|
101
|
+
if (!isUnresizable && labelMode === 'float') {
|
102
|
+
thisRef.addEventListener('mousemove', resizeCallback || resizeFloatLabel);
|
99
103
|
}
|
100
104
|
return function () {
|
101
|
-
thisRef.removeEventListener('mousemove',
|
105
|
+
thisRef.removeEventListener('mousemove', resizeCallback || resizeFloatLabel);
|
102
106
|
};
|
103
|
-
}, [
|
107
|
+
}, [isUnresizable, labelMode, resizeCallback, resizeFloatLabel, textAreaRef]);
|
104
108
|
var labelNode = (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
|
105
109
|
ref: labelRef
|
106
110
|
}, fieldLabelProps, {
|
107
|
-
sx: isLabelHigher
|
111
|
+
sx: isLabelHigher ? {
|
108
112
|
gridRow: '1/5'
|
109
|
-
}
|
113
|
+
} : {}
|
110
114
|
}));
|
111
115
|
var wrappedLabel = (0, _react2.jsx)(_.Box, {
|
112
116
|
variant: "forms.textarea.floatLabelWrapper",
|
@@ -118,7 +122,7 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
118
122
|
sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx),
|
119
123
|
ref: containerRef,
|
120
124
|
maxWidth: "100%"
|
121
|
-
}),
|
125
|
+
}), labelMode === 'float' ? wrappedLabel : labelNode, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
|
122
126
|
isRow: true,
|
123
127
|
variant: "forms.input.fieldControlWrapper",
|
124
128
|
minWidth: "40px",
|
@@ -142,72 +146,6 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
142
146
|
id: helperTextId
|
143
147
|
}, helperText));
|
144
148
|
});
|
145
|
-
TextAreaField.propTypes = _objectSpread(_objectSpread(_objectSpread({
|
146
|
-
/** The rendered label for the field. */
|
147
|
-
label: _propTypes["default"].node,
|
148
|
-
/** Text rendered below the textarea. */
|
149
|
-
helperText: _propTypes["default"].node,
|
150
|
-
/** If present this prop will cause a help hint to render in the label of the field. */
|
151
|
-
hintText: _propTypes["default"].string,
|
152
|
-
/** The unique identifier for the textarea element. */
|
153
|
-
id: _propTypes["default"].string,
|
154
|
-
/** A string designating whether or not the label is a float label. */
|
155
|
-
labelMode: _propTypes["default"].string,
|
156
|
-
/** Whether the textarea is unable to be resized. */
|
157
|
-
isUnresizable: _propTypes["default"].bool,
|
158
|
-
/** The name for the textarea element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name). */
|
159
|
-
name: _propTypes["default"].string,
|
160
|
-
/**
|
161
|
-
* Callback fired when the value is changed on the textarea element.
|
162
|
-
*
|
163
|
-
* @param {object} event The event source of the callback.
|
164
|
-
* You can pull out the new value by accessing `event.target.value` (string).
|
165
|
-
*/
|
166
|
-
onChange: _propTypes["default"].func,
|
167
|
-
/** The value for the textarea element (controlled). */
|
168
|
-
value: _propTypes["default"].string,
|
169
|
-
/** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
|
170
|
-
autoComplete: _propTypes["default"].string,
|
171
|
-
/** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
|
172
|
-
autocomplete: _propTypes["default"].string,
|
173
|
-
/** A list of class names to apply to the textarea element. */
|
174
|
-
className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
|
175
|
-
/** The default value for the textarea element. */
|
176
|
-
defaultValue: _propTypes["default"].string,
|
177
|
-
/** Whether the textarea element is automatically focused when loaded onto the page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autofocus). */
|
178
|
-
hasAutoFocus: _propTypes["default"].bool,
|
179
|
-
/** Whether the field has a status indicator. */
|
180
|
-
hasNoStatusIndicator: _propTypes["default"].bool,
|
181
|
-
/** Whether the field is disabled. */
|
182
|
-
isDisabled: _propTypes["default"].bool,
|
183
|
-
/** Whether the input can be selected, but not changed by the user. */
|
184
|
-
isReadOnly: _propTypes["default"].bool,
|
185
|
-
/** Whether the field is required. */
|
186
|
-
isRequired: _propTypes["default"].bool,
|
187
|
-
/** Add max Length to input value */
|
188
|
-
maxLength: _propTypes["default"].number,
|
189
|
-
/**
|
190
|
-
* Callback fired when focus is lost on the textarea element.
|
191
|
-
*/
|
192
|
-
onBlur: _propTypes["default"].func,
|
193
|
-
/**
|
194
|
-
* Callback fired when focus is lost on the textarea element.
|
195
|
-
*/
|
196
|
-
onFocus: _propTypes["default"].func,
|
197
|
-
/**
|
198
|
-
* Callback fired when textfield is resized.
|
199
|
-
*/
|
200
|
-
resizeCallback: _propTypes["default"].func,
|
201
|
-
/** The placeholder text to display in the textarea element. */
|
202
|
-
placeholder: _propTypes["default"].string,
|
203
|
-
/** The number of rows to display for the textarea. Controls the default height. */
|
204
|
-
rows: _propTypes["default"].number,
|
205
|
-
/** Provides a way to insert markup in specified places. */
|
206
|
-
slots: _propTypes["default"].shape({
|
207
|
-
/** The given node will be inserted into the field container. */
|
208
|
-
inContainer: _propTypes["default"].node
|
209
|
-
})
|
210
|
-
}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
|
211
149
|
TextAreaField.defaultProps = _objectSpread({
|
212
150
|
hasAutoFocus: false,
|
213
151
|
isDisabled: false,
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
declare const _default: {
|
3
|
+
title: string;
|
4
|
+
component: React.ForwardRefExoticComponent<import("../../types/TextAreaField").TextAreaFieldProps & React.RefAttributes<HTMLInputElement>>;
|
5
|
+
parameters: {
|
6
|
+
docs: {
|
7
|
+
page: () => React.JSX.Element;
|
8
|
+
source: {
|
9
|
+
type: string;
|
10
|
+
};
|
11
|
+
};
|
12
|
+
a11y: {
|
13
|
+
config: {
|
14
|
+
rules: {
|
15
|
+
id: string;
|
16
|
+
enabled: boolean;
|
17
|
+
}[];
|
18
|
+
};
|
19
|
+
};
|
20
|
+
};
|
21
|
+
argTypes: any;
|
22
|
+
args: {
|
23
|
+
label: string;
|
24
|
+
labelMode: string;
|
25
|
+
};
|
26
|
+
};
|
27
|
+
export default _default;
|
28
|
+
export declare const Default: (args: any) => React.JSX.Element;
|
29
|
+
export declare const WithSlots: (args: any) => React.JSX.Element;
|
30
|
+
export declare const FloatLabel: () => React.JSX.Element;
|
31
|
+
export declare const Controlled: () => React.JSX.Element;
|
32
|
+
export declare const Disabled: () => React.JSX.Element;
|
33
|
+
export declare const ReadOnly: () => React.JSX.Element;
|
34
|
+
export declare const Required: () => React.JSX.Element;
|
35
|
+
export declare const Rows: () => React.JSX.Element;
|
36
|
+
export declare const Unresizable: () => React.JSX.Element;
|
37
|
+
export declare const Error: () => React.JSX.Element;
|
38
|
+
export declare const WithoutStatusIndicator: () => React.JSX.Element;
|
39
|
+
export declare const MaxLength: () => React.JSX.Element;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -83,7 +83,7 @@ test('mousemove calls resize event', function () {
|
|
83
83
|
expect(mockfunction).toHaveBeenCalledTimes(2);
|
84
84
|
});
|
85
85
|
test('label will receive gridRow attribute if it will be higher than textarea', function () {
|
86
|
-
var originalOffsetHeight = (0, _getOwnPropertyDescriptor["default"])(HTMLElement.prototype, 'offsetHeight');
|
86
|
+
var originalOffsetHeight = (0, _getOwnPropertyDescriptor["default"])(HTMLElement.prototype, 'offsetHeight') || {};
|
87
87
|
(0, _defineProperties["default"])(window.HTMLElement.prototype, {
|
88
88
|
offsetHeight: {
|
89
89
|
get: function get() {
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './TextAreaField';
|
@@ -0,0 +1,57 @@
|
|
1
|
+
import { ReactNode } from 'react';
|
2
|
+
import { TestingAttributes } from './shared/test';
|
3
|
+
import { Status } from './item';
|
4
|
+
import { LabelModeProps } from './label';
|
5
|
+
import { ValidPositiveInteger } from './shared';
|
6
|
+
export interface TextAreaFieldProps extends TestingAttributes {
|
7
|
+
/** The rendered label for the field. */
|
8
|
+
label: string;
|
9
|
+
/** Text rendered below the textarea. */
|
10
|
+
helperText?: string;
|
11
|
+
/** If present this prop will cause a help hint to render in the label of the field. */
|
12
|
+
hintText?: string;
|
13
|
+
/** A string designating whether or not the label is a float label. */
|
14
|
+
labelMode?: LabelModeProps;
|
15
|
+
/** Whether the textarea is unable to be resized. */
|
16
|
+
isUnresizable?: boolean;
|
17
|
+
/**
|
18
|
+
* Callback fired when the value is changed on the textarea element.
|
19
|
+
*
|
20
|
+
* @param {object} event The event source of the callback.
|
21
|
+
* You can pull out the new value by accessing `event.target.value` (string).
|
22
|
+
*/
|
23
|
+
onChange?: ((e: any) => void);
|
24
|
+
/**
|
25
|
+
* Callback fired when focus is lost on the textarea element.
|
26
|
+
*/
|
27
|
+
onBlur?: () => void;
|
28
|
+
/**
|
29
|
+
* Callback fired when focussed on the textarea element.
|
30
|
+
*/
|
31
|
+
onFocus?: () => void;
|
32
|
+
/**
|
33
|
+
* Callback fired when textfield is resized.
|
34
|
+
*/
|
35
|
+
resizeCallback?: () => void;
|
36
|
+
/** Add max Length to input value */
|
37
|
+
maxLength?: ValidPositiveInteger;
|
38
|
+
/** Whether the field has a status indicator. */
|
39
|
+
hasNoStatusIndicator?: boolean;
|
40
|
+
/** Whether the field is required. */
|
41
|
+
isRequired?: boolean;
|
42
|
+
/** Whether the input can be selected, but not changed by the user. */
|
43
|
+
isReadOnly?: boolean;
|
44
|
+
/** Whether the field is disabled. */
|
45
|
+
isDisabled?: boolean;
|
46
|
+
/** The value for the textarea element (controlled). */
|
47
|
+
value?: string;
|
48
|
+
/** The number of rows to display for the textarea. Controls the default height. */
|
49
|
+
rows?: number;
|
50
|
+
/** Provides a way to insert markup in specified places. */
|
51
|
+
slots?: {
|
52
|
+
/** The given node will be inserted into the field container. */
|
53
|
+
inContainer: ReactNode;
|
54
|
+
};
|
55
|
+
/** Status of the textarea field */
|
56
|
+
status?: Status;
|
57
|
+
}
|
@@ -10,16 +10,13 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
|
10
10
|
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
11
11
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
12
12
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
13
|
-
import React, { forwardRef, useCallback, useEffect,
|
13
|
+
import React, { forwardRef, useCallback, useEffect, useRef } from 'react';
|
14
14
|
import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
|
15
|
-
import PropTypes from 'prop-types';
|
16
15
|
import { v4 as uuid } from 'uuid';
|
17
16
|
import { Box, FieldHelperText, Label, TextArea } from '../..';
|
18
|
-
import { useColumnStyles, useField, useLabelHeight, usePropWarning } from '../../hooks';
|
17
|
+
import { useColumnStyles, useField, useLabelHeight, useLocalOrForwardRef, usePropWarning } from '../../hooks';
|
19
18
|
import { getPendoID } from '../../utils/devUtils/constants/pendoID';
|
20
|
-
import {
|
21
|
-
import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
|
22
|
-
import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
|
19
|
+
import { statusDefaultProp } from '../../utils/docUtils/statusProp';
|
23
20
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
24
21
|
var displayName = 'TextAreaField';
|
25
22
|
var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
|
@@ -27,47 +24,54 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
27
24
|
isUnresizable = props.isUnresizable,
|
28
25
|
rows = props.rows,
|
29
26
|
status = props.status,
|
30
|
-
slots = props.slots
|
31
|
-
|
32
|
-
|
33
|
-
};
|
27
|
+
slots = props.slots,
|
28
|
+
resizeCallback = props.resizeCallback,
|
29
|
+
labelMode = props.labelMode;
|
34
30
|
var _useField = useField(_objectSpread({
|
35
|
-
statusClasses:
|
31
|
+
statusClasses: {
|
32
|
+
isUnresizable: !!isUnresizable
|
33
|
+
}
|
36
34
|
}, props)),
|
37
35
|
fieldContainerProps = _useField.fieldContainerProps,
|
38
36
|
fieldControlInputProps = _useField.fieldControlInputProps,
|
39
37
|
fieldControlWrapperProps = _useField.fieldControlWrapperProps,
|
40
38
|
fieldLabelProps = _useField.fieldLabelProps;
|
41
39
|
var containerRef = useRef();
|
42
|
-
var fieldControlWrapperRef = useRef();
|
43
|
-
var labelRef = useRef();
|
44
|
-
var labelWrapperRef = useRef();
|
45
|
-
var slotContainer = useRef();
|
46
|
-
var textAreaRef = useRef();
|
40
|
+
var fieldControlWrapperRef = useRef(null);
|
41
|
+
var labelRef = useRef(null);
|
42
|
+
var labelWrapperRef = useRef(null);
|
43
|
+
var slotContainer = useRef(null);
|
47
44
|
var helperTextId = uuid();
|
48
45
|
usePropWarning(props, 'disabled', 'isDisabled');
|
46
|
+
|
49
47
|
/* istanbul ignore next */
|
50
|
-
|
51
|
-
return textAreaRef.current;
|
52
|
-
});
|
48
|
+
var textAreaRef = useLocalOrForwardRef(ref);
|
53
49
|
|
54
50
|
/* istanbul ignore next */
|
51
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
55
52
|
var resizeFloatLabel = function resizeFloatLabel() {
|
56
53
|
/* istanbul ignore next */
|
57
|
-
labelRef.current
|
58
|
-
|
54
|
+
if (labelRef.current) {
|
55
|
+
labelRef.current.style.width = textAreaRef.current.style.width;
|
56
|
+
}
|
57
|
+
if (labelWrapperRef.current) {
|
58
|
+
labelWrapperRef.current.style.width = "".concat(textAreaRef.current.clientWidth - 2, "px");
|
59
|
+
}
|
59
60
|
};
|
60
61
|
|
61
62
|
/* istanbul ignore next */
|
63
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
62
64
|
var resizeSlotContainer = function resizeSlotContainer() {
|
63
|
-
fieldControlWrapperRef.current
|
65
|
+
if (fieldControlWrapperRef.current) {
|
66
|
+
fieldControlWrapperRef.current.style.width = textAreaRef.current.style.width;
|
67
|
+
}
|
64
68
|
};
|
65
69
|
var onResize = useCallback(function () {
|
66
70
|
/* istanbul ignore next */
|
67
71
|
if (slots !== null && slots !== void 0 && slots.inContainer) {
|
68
72
|
resizeSlotContainer();
|
69
73
|
}
|
70
|
-
}, [
|
74
|
+
}, [resizeSlotContainer, slots === null || slots === void 0 ? void 0 : slots.inContainer]);
|
71
75
|
useResizeObserver({
|
72
76
|
ref: textAreaRef,
|
73
77
|
onResize: onResize
|
@@ -79,23 +83,23 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
79
83
|
}),
|
80
84
|
isLabelHigher = _useLabelHeight.isLabelHigher;
|
81
85
|
var columnStyleProps = useColumnStyles({
|
82
|
-
labelMode:
|
86
|
+
labelMode: labelMode
|
83
87
|
});
|
84
88
|
useEffect(function () {
|
85
89
|
var thisRef = textAreaRef.current;
|
86
|
-
if (!
|
87
|
-
thisRef.addEventListener('mousemove',
|
90
|
+
if (!isUnresizable && labelMode === 'float') {
|
91
|
+
thisRef.addEventListener('mousemove', resizeCallback || resizeFloatLabel);
|
88
92
|
}
|
89
93
|
return function () {
|
90
|
-
thisRef.removeEventListener('mousemove',
|
94
|
+
thisRef.removeEventListener('mousemove', resizeCallback || resizeFloatLabel);
|
91
95
|
};
|
92
|
-
}, [
|
96
|
+
}, [isUnresizable, labelMode, resizeCallback, resizeFloatLabel, textAreaRef]);
|
93
97
|
var labelNode = ___EmotionJSX(Label, _extends({
|
94
98
|
ref: labelRef
|
95
99
|
}, fieldLabelProps, {
|
96
|
-
sx: isLabelHigher
|
100
|
+
sx: isLabelHigher ? {
|
97
101
|
gridRow: '1/5'
|
98
|
-
}
|
102
|
+
} : {}
|
99
103
|
}));
|
100
104
|
var wrappedLabel = ___EmotionJSX(Box, {
|
101
105
|
variant: "forms.textarea.floatLabelWrapper",
|
@@ -107,7 +111,7 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
107
111
|
sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx),
|
108
112
|
ref: containerRef,
|
109
113
|
maxWidth: "100%"
|
110
|
-
}),
|
114
|
+
}), labelMode === 'float' ? wrappedLabel : labelNode, ___EmotionJSX(Box, _extends({
|
111
115
|
isRow: true,
|
112
116
|
variant: "forms.input.fieldControlWrapper",
|
113
117
|
minWidth: "40px",
|
@@ -131,72 +135,6 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
131
135
|
id: helperTextId
|
132
136
|
}, helperText));
|
133
137
|
});
|
134
|
-
TextAreaField.propTypes = _objectSpread(_objectSpread(_objectSpread({
|
135
|
-
/** The rendered label for the field. */
|
136
|
-
label: PropTypes.node,
|
137
|
-
/** Text rendered below the textarea. */
|
138
|
-
helperText: PropTypes.node,
|
139
|
-
/** If present this prop will cause a help hint to render in the label of the field. */
|
140
|
-
hintText: PropTypes.string,
|
141
|
-
/** The unique identifier for the textarea element. */
|
142
|
-
id: PropTypes.string,
|
143
|
-
/** A string designating whether or not the label is a float label. */
|
144
|
-
labelMode: PropTypes.string,
|
145
|
-
/** Whether the textarea is unable to be resized. */
|
146
|
-
isUnresizable: PropTypes.bool,
|
147
|
-
/** The name for the textarea element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name). */
|
148
|
-
name: PropTypes.string,
|
149
|
-
/**
|
150
|
-
* Callback fired when the value is changed on the textarea element.
|
151
|
-
*
|
152
|
-
* @param {object} event The event source of the callback.
|
153
|
-
* You can pull out the new value by accessing `event.target.value` (string).
|
154
|
-
*/
|
155
|
-
onChange: PropTypes.func,
|
156
|
-
/** The value for the textarea element (controlled). */
|
157
|
-
value: PropTypes.string,
|
158
|
-
/** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
|
159
|
-
autoComplete: PropTypes.string,
|
160
|
-
/** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
|
161
|
-
autocomplete: PropTypes.string,
|
162
|
-
/** A list of class names to apply to the textarea element. */
|
163
|
-
className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
164
|
-
/** The default value for the textarea element. */
|
165
|
-
defaultValue: PropTypes.string,
|
166
|
-
/** Whether the textarea element is automatically focused when loaded onto the page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autofocus). */
|
167
|
-
hasAutoFocus: PropTypes.bool,
|
168
|
-
/** Whether the field has a status indicator. */
|
169
|
-
hasNoStatusIndicator: PropTypes.bool,
|
170
|
-
/** Whether the field is disabled. */
|
171
|
-
isDisabled: PropTypes.bool,
|
172
|
-
/** Whether the input can be selected, but not changed by the user. */
|
173
|
-
isReadOnly: PropTypes.bool,
|
174
|
-
/** Whether the field is required. */
|
175
|
-
isRequired: PropTypes.bool,
|
176
|
-
/** Add max Length to input value */
|
177
|
-
maxLength: PropTypes.number,
|
178
|
-
/**
|
179
|
-
* Callback fired when focus is lost on the textarea element.
|
180
|
-
*/
|
181
|
-
onBlur: PropTypes.func,
|
182
|
-
/**
|
183
|
-
* Callback fired when focus is lost on the textarea element.
|
184
|
-
*/
|
185
|
-
onFocus: PropTypes.func,
|
186
|
-
/**
|
187
|
-
* Callback fired when textfield is resized.
|
188
|
-
*/
|
189
|
-
resizeCallback: PropTypes.func,
|
190
|
-
/** The placeholder text to display in the textarea element. */
|
191
|
-
placeholder: PropTypes.string,
|
192
|
-
/** The number of rows to display for the textarea. Controls the default height. */
|
193
|
-
rows: PropTypes.number,
|
194
|
-
/** Provides a way to insert markup in specified places. */
|
195
|
-
slots: PropTypes.shape({
|
196
|
-
/** The given node will be inserted into the field container. */
|
197
|
-
inContainer: PropTypes.node
|
198
|
-
})
|
199
|
-
}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
|
200
138
|
TextAreaField.defaultProps = _objectSpread({
|
201
139
|
hasAutoFocus: false,
|
202
140
|
isDisabled: false,
|
@@ -80,7 +80,7 @@ test('mousemove calls resize event', function () {
|
|
80
80
|
expect(mockfunction).toHaveBeenCalledTimes(2);
|
81
81
|
});
|
82
82
|
test('label will receive gridRow attribute if it will be higher than textarea', function () {
|
83
|
-
var originalOffsetHeight = _Object$getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight');
|
83
|
+
var originalOffsetHeight = _Object$getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight') || {};
|
84
84
|
_Object$defineProperties(window.HTMLElement.prototype, {
|
85
85
|
offsetHeight: {
|
86
86
|
get: function get() {
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|