@hh.ru/magritte-ui-textarea 3.0.3 → 3.1.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/TextArea.js +29 -13
- package/TextArea.js.map +1 -1
- package/UncontrolledTextArea.js +3 -2
- package/UncontrolledTextArea.js.map +1 -1
- package/index.css +415 -402
- package/index.js +3 -2
- package/index.js.map +1 -1
- package/package.json +12 -11
- package/useHeightObserver.d.ts +14 -0
- package/{useMinHeight.js → useHeightObserver.js} +12 -5
- package/useHeightObserver.js.map +1 -0
- package/useMinHeight.d.ts +0 -6
- package/useMinHeight.js.map +0 -1
package/TextArea.js
CHANGED
|
@@ -10,19 +10,22 @@ import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
|
|
|
10
10
|
import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
|
|
11
11
|
import { GripSize24 } from '@hh.ru/magritte-ui-icon/private';
|
|
12
12
|
import { useInputAriaProps } from '@hh.ru/magritte-ui-input/useInputAriaProps';
|
|
13
|
+
import { useScrollbar, Scrollbar } from '@hh.ru/magritte-ui-scrollbar';
|
|
13
14
|
import { useFocus } from './useFocus.js';
|
|
15
|
+
import { useHeightObserver } from './useHeightObserver.js';
|
|
14
16
|
import { useLimitGrow } from './useLimitGrow.js';
|
|
15
|
-
import { useMinHeight } from './useMinHeight.js';
|
|
16
17
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
18
|
+
import './types.js';
|
|
17
19
|
import './TextAreaGrowLimiter.js';
|
|
18
20
|
import '@hh.ru/magritte-common-func-utils';
|
|
19
|
-
import './types.js';
|
|
20
21
|
|
|
21
|
-
var styles = {"textarea":"magritte-textarea___ugvor_3-0
|
|
22
|
+
var styles = {"textarea":"magritte-textarea___ugvor_3-1-0","textarea-elevated":"magritte-textarea-elevated___S0jk-_3-1-0","textareaElevated":"magritte-textarea-elevated___S0jk-_3-1-0","textarea-small":"magritte-textarea-small___Q-tsg_3-1-0","textareaSmall":"magritte-textarea-small___Q-tsg_3-1-0","textarea-medium":"magritte-textarea-medium___GNzAm_3-1-0","textareaMedium":"magritte-textarea-medium___GNzAm_3-1-0","textarea-large":"magritte-textarea-large___ugT-5_3-1-0","textareaLarge":"magritte-textarea-large___ugT-5_3-1-0","has-grip":"magritte-has-grip___ATMYQ_3-1-0","hasGrip":"magritte-has-grip___ATMYQ_3-1-0","textarea-limited":"magritte-textarea-limited___cU1Rg_3-1-0","textareaLimited":"magritte-textarea-limited___cU1Rg_3-1-0","maxed-height":"magritte-maxed-height___v1wYG_3-1-0","maxedHeight":"magritte-maxed-height___v1wYG_3-1-0","textarea-focused":"magritte-textarea-focused___eiGyC_3-1-0","textareaFocused":"magritte-textarea-focused___eiGyC_3-1-0","textarea-invalid":"magritte-textarea-invalid___iKOPh_3-1-0","textareaInvalid":"magritte-textarea-invalid___iKOPh_3-1-0","textarea-disabled":"magritte-textarea-disabled___XN0cg_3-1-0","textareaDisabled":"magritte-textarea-disabled___XN0cg_3-1-0","textarea-position-container-wrapper":"magritte-textarea-position-container-wrapper___4Dsui_3-1-0","textareaPositionContainerWrapper":"magritte-textarea-position-container-wrapper___4Dsui_3-1-0","textarea-position-container":"magritte-textarea-position-container___cEpbv_3-1-0","textareaPositionContainer":"magritte-textarea-position-container___cEpbv_3-1-0","native-element":"magritte-native-element___a0RAE_3-1-0","nativeElement":"magritte-native-element___a0RAE_3-1-0","textarea-label":"magritte-textarea-label___sgTIH_3-1-0","textareaLabel":"magritte-textarea-label___sgTIH_3-1-0","textarea-label-elevated":"magritte-textarea-label-elevated___0lxOI_3-1-0","textareaLabelElevated":"magritte-textarea-label-elevated___0lxOI_3-1-0","textarea-limit":"magritte-textarea-limit___IjPJy_3-1-0","textareaLimit":"magritte-textarea-limit___IjPJy_3-1-0","textarea-limit-error":"magritte-textarea-limit-error___vLvZU_3-1-0","textareaLimitError":"magritte-textarea-limit-error___vLvZU_3-1-0","textarea-layout-fill-both":"magritte-textarea-layout-fill-both___ERS-q_3-1-0","textareaLayoutFillBoth":"magritte-textarea-layout-fill-both___ERS-q_3-1-0","textarea-layout-fill-vertical":"magritte-textarea-layout-fill-vertical___HmNtp_3-1-0","textareaLayoutFillVertical":"magritte-textarea-layout-fill-vertical___HmNtp_3-1-0","textarea-layout-fill-horizontal":"magritte-textarea-layout-fill-horizontal___imBH2_3-1-0","textareaLayoutFillHorizontal":"magritte-textarea-layout-fill-horizontal___imBH2_3-1-0","textarea-layout-hug":"magritte-textarea-layout-hug___tdCMY_3-1-0","textareaLayoutHug":"magritte-textarea-layout-hug___tdCMY_3-1-0","textarea-wrapper":"magritte-textarea-wrapper___yD7G6_3-1-0","textareaWrapper":"magritte-textarea-wrapper___yD7G6_3-1-0","value-clone-wrapper":"magritte-value-clone-wrapper___2ZZvS_3-1-0","valueCloneWrapper":"magritte-value-clone-wrapper___2ZZvS_3-1-0","value-clone-container":"magritte-value-clone-container___PVM97_3-1-0","valueCloneContainer":"magritte-value-clone-container___PVM97_3-1-0","side-padding":"magritte-side-padding___O-HUP_3-1-0","sidePadding":"magritte-side-padding___O-HUP_3-1-0","textarea-animation-timeout":"magritte-textarea-animation-timeout___zudbr_3-1-0","textareaAnimationTimeout":"magritte-textarea-animation-timeout___zudbr_3-1-0","textarea-rigging-container":"magritte-textarea-rigging-container___-1S6i_3-1-0","textareaRiggingContainer":"magritte-textarea-rigging-container___-1S6i_3-1-0","label-no-wrap":"magritte-label-no-wrap___RxZ3A_3-1-0","labelNoWrap":"magritte-label-no-wrap___RxZ3A_3-1-0","textarea-grip":"magritte-textarea-grip___iL7lq_3-1-0","textareaGrip":"magritte-textarea-grip___iL7lq_3-1-0","textarea-grip-icon":"magritte-textarea-grip-icon___YK-9w_3-1-0","textareaGripIcon":"magritte-textarea-grip-icon___YK-9w_3-1-0","textarea-limit-enter":"magritte-textarea-limit-enter___CygGz_3-1-0","textareaLimitEnter":"magritte-textarea-limit-enter___CygGz_3-1-0","textarea-limit-exit":"magritte-textarea-limit-exit___RMp-R_3-1-0","textareaLimitExit":"magritte-textarea-limit-exit___RMp-R_3-1-0","textarea-limit-enter-active":"magritte-textarea-limit-enter-active___8vN-t_3-1-0","textareaLimitEnterActive":"magritte-textarea-limit-enter-active___8vN-t_3-1-0","textarea-limit-exit-active":"magritte-textarea-limit-exit-active___a5kBr_3-1-0","textareaLimitExitActive":"magritte-textarea-limit-exit-active___a5kBr_3-1-0"};
|
|
22
23
|
|
|
23
24
|
const ZERO_WIDTH_SPACE = '\u200B';
|
|
24
25
|
const TextAreaComponent = ({ onChange, onFocus, onBlur, onValidate, value, placeholder, disabled = false, elevatePlaceholder = false, invalid = false, invalidLimit = false, maxLength, description, errorMessage, resize = 'none', layout = 'fixed', size = 'large', minHeight: _minHeight, maxHeight, ...restProps }, ref) => {
|
|
25
26
|
const { isMobile } = useBreakpoint();
|
|
27
|
+
const forceDisabled = useDisabled();
|
|
28
|
+
const isComponentDisabled = forceDisabled || !!disabled;
|
|
26
29
|
const [internalInvalid, setInternalInvalid] = useState(false);
|
|
27
30
|
const [isFocusVisible, setFocusVisible] = useState(false);
|
|
28
31
|
const limitRef = useRef(null);
|
|
@@ -31,7 +34,10 @@ const TextAreaComponent = ({ onChange, onFocus, onBlur, onValidate, value, place
|
|
|
31
34
|
const resizableDivRef = useRef(null);
|
|
32
35
|
const resizableDivSizes = useRef(null);
|
|
33
36
|
const resizableDivWasResized = useRef(false);
|
|
34
|
-
const
|
|
37
|
+
const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({
|
|
38
|
+
axis: isComponentDisabled ? 'none' : 'vertical',
|
|
39
|
+
});
|
|
40
|
+
const textAreaRefCallback = useMultipleRefs(ref, textAreaRef, scrollbar.scrollContainerRef);
|
|
35
41
|
const descriptionId = useId();
|
|
36
42
|
const labelId = useId();
|
|
37
43
|
const [animationTimeout, setAnimationTimeout] = useState(100);
|
|
@@ -39,7 +45,13 @@ const TextAreaComponent = ({ onChange, onFocus, onBlur, onValidate, value, place
|
|
|
39
45
|
const isResizable = currentResizeValue !== 'none';
|
|
40
46
|
const contentCloneRef = useRef(null);
|
|
41
47
|
const contentCloneWrapperRef = useRef(null);
|
|
42
|
-
const { minHeight, maxedHeight } =
|
|
48
|
+
const { minHeight, maxedHeight } = useHeightObserver({
|
|
49
|
+
size,
|
|
50
|
+
minHeight: _minHeight,
|
|
51
|
+
layout,
|
|
52
|
+
contentCloneRef,
|
|
53
|
+
onHeightChange: () => scrollbar.resizeCallbackRef.current?.(),
|
|
54
|
+
});
|
|
43
55
|
const { maxHeightRef, allowScrollRef } = useLimitGrow({
|
|
44
56
|
layout,
|
|
45
57
|
contentCloneRef,
|
|
@@ -49,8 +61,6 @@ const TextAreaComponent = ({ onChange, onFocus, onBlur, onValidate, value, place
|
|
|
49
61
|
minHeight,
|
|
50
62
|
});
|
|
51
63
|
const trlOf = useTranslation('TextArea', 'of');
|
|
52
|
-
const forceDisabled = useDisabled();
|
|
53
|
-
const isComponentDisabled = forceDisabled || !!disabled;
|
|
54
64
|
useEffect(() => {
|
|
55
65
|
const animationTimeoutElement = document.createElement('div');
|
|
56
66
|
animationTimeoutElement.classList.add(styles.textareaAnimationTimeout);
|
|
@@ -97,6 +107,12 @@ const TextAreaComponent = ({ onChange, onFocus, onBlur, onValidate, value, place
|
|
|
97
107
|
setFocusVisible(isFocused && textAreaRef.current.classList.contains('focus-visible'));
|
|
98
108
|
}
|
|
99
109
|
}, [isFocused]);
|
|
110
|
+
useEffect(() => {
|
|
111
|
+
// для layout === 'hug' resizeCallback вызывается в useHeightObserver, т.к. нужно ожидать перерисовку оберток
|
|
112
|
+
if (layout !== 'hug') {
|
|
113
|
+
scrollbar.resizeCallbackRef.current?.();
|
|
114
|
+
}
|
|
115
|
+
}, [layout, scrollbar.resizeCallbackRef, value]);
|
|
100
116
|
const placeholderIsElevated = !!elevatePlaceholder && !!placeholder && size === 'large';
|
|
101
117
|
const showLabel = placeholderIsElevated || value === '';
|
|
102
118
|
const invalidState = invalid || invalidLimit;
|
|
@@ -121,19 +137,19 @@ const TextAreaComponent = ({ onChange, onFocus, onBlur, onValidate, value, place
|
|
|
121
137
|
[styles.textareaElevated]: placeholderIsElevated,
|
|
122
138
|
[styles.hasGrip]: isResizable,
|
|
123
139
|
[styles.maxedHeight]: size === 'large' && maxedHeight,
|
|
124
|
-
}), children: [jsxs("div", { className: classnames(styles.textareaPositionContainerWrapper, {
|
|
140
|
+
}), children: [jsxs("div", { className: classnames(styles.textareaPositionContainerWrapper, scrollbar.hoverContainerCssClass, {
|
|
125
141
|
'focus-visible': isFocusVisible,
|
|
126
|
-
}), children: [
|
|
142
|
+
}), children: [jsxs("div", { className: classnames(styles.textareaPositionContainer), onClick: handleClick, onMouseDown: isResizable ? handleMouseDown : undefined, onMouseUp: isResizable ? handleMouseUp : undefined, style: {
|
|
127
143
|
height: maxHeightRef.current || (maxedHeight ? 'auto' : minHeight),
|
|
128
144
|
minHeight,
|
|
129
145
|
'--magritte-textarea-max-height': maxHeight
|
|
130
146
|
? `${Math.max(maxHeight, minHeight)}px`
|
|
131
147
|
: 'auto',
|
|
132
148
|
resize: currentResizeValue,
|
|
133
|
-
}, ref: resizableDivRef, children: jsxs("div", { className: styles.textareaWrapper, "data-qa": "textarea-native-wrapper", children: [jsx("textarea", { ...restProps, ...ariaProps, disabled: isComponentDisabled, suppressHydrationWarning: true, className: classnames(styles.nativeElement, styles.sidePadding), value: value, onChange: onChange, onFocus: focusHandler, onBlur: blurHandler, style: { overflowY: layout !== 'hug' || allowScrollRef.current ? 'auto' : 'hidden' }, ref: textAreaRefCallback }), layout === 'hug' && (jsx("div", { className: classnames(styles.valueCloneWrapper, styles.sidePadding), ref: contentCloneWrapperRef, children: jsx("pre", { className: styles.valueCloneContainer, ref: contentCloneRef, children: `${value}${ZERO_WIDTH_SPACE}` }) })), showLabel && (jsx("div", { className: classnames(styles.textareaRiggingContainer, styles.sidePadding), children: jsx("label", { className: classnames(styles.textareaLabel, {
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
149
|
+
}, ref: resizableDivRef, children: [jsxs("div", { className: styles.textareaWrapper, "data-qa": "textarea-native-wrapper", children: [jsx("textarea", { ...restProps, ...ariaProps, disabled: isComponentDisabled, suppressHydrationWarning: true, className: classnames(styles.nativeElement, styles.sidePadding), value: value, onChange: onChange, onFocus: focusHandler, onBlur: blurHandler, style: { overflowY: layout !== 'hug' || allowScrollRef.current ? 'auto' : 'hidden' }, ref: textAreaRefCallback }), layout === 'hug' && (jsx("div", { className: classnames(styles.valueCloneWrapper, styles.sidePadding), ref: contentCloneWrapperRef, children: jsx("pre", { className: styles.valueCloneContainer, ref: contentCloneRef, children: `${value}${ZERO_WIDTH_SPACE}` }) })), showLabel && (jsx("div", { className: classnames(styles.textareaRiggingContainer, styles.sidePadding), children: jsx("label", { className: classnames(styles.textareaLabel, {
|
|
150
|
+
[styles.labelNoWrap]: elevatePlaceholder,
|
|
151
|
+
[styles.textareaLabelElevated]: hasElevatedPlaceholderClass,
|
|
152
|
+
}), id: ariaProps['aria-labelledby'], children: placeholder }) }))] }), hasVerticalScroll && jsx(Scrollbar, { ...verticalScrollbarProps })] }), !!maxLength && maxedHeight && (jsx(CSSTransition, { in: isFocused || value.length > maxLength, timeout: animationTimeout, classNames: {
|
|
137
153
|
enter: styles.textareaLimitEnter,
|
|
138
154
|
enterActive: styles.textareaLimitEnterActive,
|
|
139
155
|
exit: styles.textareaLimitExit,
|
package/TextArea.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sources":["../src/TextArea.tsx"],"sourcesContent":["import {\n forwardRef,\n ReactElement,\n useEffect,\n useId,\n useRef,\n useState,\n type TextareaHTMLAttributes,\n type ForwardedRef,\n type CSSProperties,\n} from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { GripSize24 } from '@hh.ru/magritte-ui-icon/private';\nimport { useInputAriaProps } from '@hh.ru/magritte-ui-input/useInputAriaProps';\nimport { type TextAreaLayout, type ControlledTextAreaProps } from '@hh.ru/magritte-ui-textarea/types';\nimport { useFocus } from '@hh.ru/magritte-ui-textarea/useFocus';\nimport { useLimitGrow } from '@hh.ru/magritte-ui-textarea/useLimitGrow';\nimport { useMinHeight } from '@hh.ru/magritte-ui-textarea/useMinHeight';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './textarea.less';\n\nconst ZERO_WIDTH_SPACE = '\\u200B';\n\nconst TextAreaComponent = <Layout extends TextAreaLayout>(\n {\n onChange,\n onFocus,\n onBlur,\n onValidate,\n value,\n placeholder,\n disabled = false,\n elevatePlaceholder = false,\n invalid = false,\n invalidLimit = false,\n maxLength,\n description,\n errorMessage,\n resize = 'none',\n layout = 'fixed' as Layout,\n size = 'large',\n minHeight: _minHeight,\n maxHeight,\n ...restProps\n }: ControlledTextAreaProps<Layout> &\n Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, keyof ControlledTextAreaProps<'fixed'>>,\n ref: ForwardedRef<HTMLTextAreaElement>\n) => {\n const { isMobile } = useBreakpoint();\n const [internalInvalid, setInternalInvalid] = useState(false);\n const [isFocusVisible, setFocusVisible] = useState(false);\n const limitRef = useRef<HTMLDivElement>(null);\n const previousInvalid = useRef(internalInvalid);\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n const resizableDivRef = useRef<HTMLDivElement>(null);\n const resizableDivSizes = useRef<{ width?: number; height?: number } | null>(null);\n const resizableDivWasResized = useRef(false);\n const textAreaRefCallback = useMultipleRefs(ref, textAreaRef);\n const descriptionId = useId();\n const labelId = useId();\n const [animationTimeout, setAnimationTimeout] = useState(100);\n const currentResizeValue = isMobile ? 'none' : resize;\n const isResizable = currentResizeValue !== 'none';\n const contentCloneRef = useRef<HTMLPreElement>(null);\n const contentCloneWrapperRef = useRef<HTMLDivElement>(null);\n const { minHeight, maxedHeight } = useMinHeight(size, _minHeight, layout, contentCloneRef);\n const { maxHeightRef, allowScrollRef } = useLimitGrow({\n layout,\n contentCloneRef,\n contentCloneWrapperRef,\n textAreaRef,\n resizableDivRef,\n minHeight,\n });\n const trlOf = useTranslation('TextArea', 'of');\n\n const forceDisabled = useDisabled();\n const isComponentDisabled = forceDisabled || !!disabled;\n\n useEffect(() => {\n const animationTimeoutElement = document.createElement('div');\n animationTimeoutElement.classList.add(styles.textareaAnimationTimeout);\n document.body.appendChild(animationTimeoutElement);\n const style = window.getComputedStyle(animationTimeoutElement);\n const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);\n if (Number.isInteger(animationTimeout)) {\n setAnimationTimeout(animationTimeout);\n }\n document.body.removeChild(animationTimeoutElement);\n }, []);\n\n const { focusHandler, blurHandler, isFocused } = useFocus<HTMLTextAreaElement>(onFocus, onBlur);\n\n const handleClick = () => {\n if (resizableDivWasResized.current) {\n resizableDivWasResized.current = false;\n return;\n }\n textAreaRef.current?.focus();\n };\n\n const handleMouseUp = () => {\n if (\n resizableDivRef.current?.offsetWidth !== resizableDivSizes.current?.width ||\n resizableDivRef.current?.offsetHeight !== resizableDivSizes.current?.height\n ) {\n resizableDivWasResized.current = true;\n }\n };\n\n const handleMouseDown = () => {\n resizableDivSizes.current = {\n width: resizableDivRef.current?.offsetWidth,\n height: resizableDivRef.current?.offsetHeight,\n };\n };\n\n useEffect(() => {\n if (maxLength) {\n const invalid = !isFocused && value.length > maxLength;\n setInternalInvalid(invalid);\n\n if (previousInvalid.current !== invalid) {\n onValidate?.({ invalidLimit: invalid });\n }\n previousInvalid.current = invalid;\n }\n }, [onValidate, value, internalInvalid, maxLength, isFocused]);\n\n useEffect(() => {\n if (textAreaRef.current) {\n setFocusVisible(isFocused && textAreaRef.current.classList.contains('focus-visible'));\n }\n }, [isFocused]);\n\n const placeholderIsElevated = !!elevatePlaceholder && !!placeholder && size === 'large';\n const showLabel = placeholderIsElevated || value === '';\n\n const invalidState = invalid || invalidLimit;\n const ariaProps = useInputAriaProps({\n invalid: invalidState || internalInvalid,\n hasDescription: !!description,\n hasPlaceholder: !!placeholder,\n descriptionId,\n labelId,\n });\n\n const hasElevatedPlaceholderClass = (isFocused || value !== '') && placeholderIsElevated;\n\n return (\n <div\n data-qa=\"textarea-wrapper\"\n data-interactive={true}\n className={classnames(styles.textarea, styles[`textarea-${size}`], {\n [styles.textareaFocused]: isFocused,\n [styles.textareaDisabled]: isComponentDisabled,\n [styles.textareaInvalid]: !!(invalidState || internalInvalid),\n [styles.textareaLimitError]:\n invalidLimit || internalInvalid || (maxLength ? value.length > maxLength : false),\n [styles.textareaLimited]: !!maxLength && maxedHeight,\n [styles.textareaLayoutFillBoth]: layout === 'fill-both',\n [styles.textareaLayoutFillVertical]: layout === 'fill-vertical',\n [styles.textareaLayoutFillHorizontal]: layout === 'fill-horizontal',\n [styles.textareaLayoutHug]: layout === 'hug',\n [styles.textareaElevated]: placeholderIsElevated,\n [styles.hasGrip]: isResizable,\n [styles.maxedHeight]: size === 'large' && maxedHeight,\n })}\n >\n <div\n className={classnames(styles.textareaPositionContainerWrapper, {\n 'focus-visible': isFocusVisible,\n })}\n >\n <div\n className={classnames(styles.textareaPositionContainer)}\n onClick={handleClick}\n onMouseDown={isResizable ? handleMouseDown : undefined}\n onMouseUp={isResizable ? handleMouseUp : undefined}\n style={\n {\n height: maxHeightRef.current || (maxedHeight ? 'auto' : minHeight),\n minHeight,\n '--magritte-textarea-max-height': maxHeight\n ? `${Math.max(maxHeight, minHeight)}px`\n : 'auto',\n resize: currentResizeValue,\n } as CSSProperties\n }\n ref={resizableDivRef}\n >\n <div className={styles.textareaWrapper} data-qa=\"textarea-native-wrapper\">\n <textarea\n {...restProps}\n {...ariaProps}\n disabled={isComponentDisabled}\n suppressHydrationWarning\n className={classnames(styles.nativeElement, styles.sidePadding)}\n value={value}\n onChange={onChange}\n onFocus={focusHandler}\n onBlur={blurHandler}\n style={{ overflowY: layout !== 'hug' || allowScrollRef.current ? 'auto' : 'hidden' }}\n ref={textAreaRefCallback}\n />\n {layout === 'hug' && (\n <div\n className={classnames(styles.valueCloneWrapper, styles.sidePadding)}\n ref={contentCloneWrapperRef}\n >\n <pre className={styles.valueCloneContainer} ref={contentCloneRef}>\n {`${value}${ZERO_WIDTH_SPACE}`}\n </pre>\n </div>\n )}\n {showLabel && (\n <div className={classnames(styles.textareaRiggingContainer, styles.sidePadding)}>\n <label\n className={classnames(styles.textareaLabel, {\n [styles.labelNoWrap]: elevatePlaceholder,\n [styles.textareaLabelElevated]: hasElevatedPlaceholderClass,\n })}\n id={ariaProps['aria-labelledby']}\n >\n {placeholder}\n </label>\n </div>\n )}\n </div>\n </div>\n {!!maxLength && maxedHeight && (\n <CSSTransition\n in={isFocused || value.length > maxLength}\n timeout={animationTimeout}\n classNames={{\n enter: styles.textareaLimitEnter,\n enterActive: styles.textareaLimitEnterActive,\n exit: styles.textareaLimitExit,\n exitActive: styles.textareaLimitExitActive,\n }}\n unmountOnExit\n nodeRef={limitRef}\n >\n <div className={styles.textareaLimit} ref={limitRef}>\n <Text typography=\"label-3-regular\">\n {value.length}\n {trlOf}\n {maxLength}\n </Text>\n </div>\n </CSSTransition>\n )}\n {isResizable && (\n <div className={styles.textareaGrip}>\n <div className={styles.textareaGripIcon}>\n <GripSize24 />\n </div>\n </div>\n )}\n </div>\n <FormHelper\n description={description}\n errorMessage={errorMessage}\n descriptionId={ariaProps['aria-describedby']}\n disabled={isComponentDisabled}\n invalid={invalidState}\n data-qa=\"textarea-hint-container\"\n />\n </div>\n );\n};\n\nconst TextArea = forwardRef(TextAreaComponent) as (<Layout extends TextAreaLayout>(\n props: ControlledTextAreaProps<Layout> &\n Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, keyof ControlledTextAreaProps<'fixed'>> & {\n ref?: React.ForwardedRef<HTMLTextAreaElement>;\n }\n) => ReactElement | null) & { displayName: string };\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TextArea.js","sources":["../src/TextArea.tsx"],"sourcesContent":["import {\n forwardRef,\n ReactElement,\n useEffect,\n useId,\n useRef,\n useState,\n type TextareaHTMLAttributes,\n type ForwardedRef,\n type CSSProperties,\n} from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { GripSize24 } from '@hh.ru/magritte-ui-icon/private';\nimport { useInputAriaProps } from '@hh.ru/magritte-ui-input/useInputAriaProps';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\nimport { type TextAreaLayout, type ControlledTextAreaProps } from '@hh.ru/magritte-ui-textarea/types';\nimport { useFocus } from '@hh.ru/magritte-ui-textarea/useFocus';\nimport { useHeightObserver } from '@hh.ru/magritte-ui-textarea/useHeightObserver';\nimport { useLimitGrow } from '@hh.ru/magritte-ui-textarea/useLimitGrow';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './textarea.less';\n\nconst ZERO_WIDTH_SPACE = '\\u200B';\n\nconst TextAreaComponent = <Layout extends TextAreaLayout>(\n {\n onChange,\n onFocus,\n onBlur,\n onValidate,\n value,\n placeholder,\n disabled = false,\n elevatePlaceholder = false,\n invalid = false,\n invalidLimit = false,\n maxLength,\n description,\n errorMessage,\n resize = 'none',\n layout = 'fixed' as Layout,\n size = 'large',\n minHeight: _minHeight,\n maxHeight,\n ...restProps\n }: ControlledTextAreaProps<Layout> &\n Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, keyof ControlledTextAreaProps<'fixed'>>,\n ref: ForwardedRef<HTMLTextAreaElement>\n) => {\n const { isMobile } = useBreakpoint();\n const forceDisabled = useDisabled();\n const isComponentDisabled = forceDisabled || !!disabled;\n const [internalInvalid, setInternalInvalid] = useState(false);\n const [isFocusVisible, setFocusVisible] = useState(false);\n const limitRef = useRef<HTMLDivElement>(null);\n const previousInvalid = useRef(internalInvalid);\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n const resizableDivRef = useRef<HTMLDivElement>(null);\n const resizableDivSizes = useRef<{ width?: number; height?: number } | null>(null);\n const resizableDivWasResized = useRef(false);\n const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({\n axis: isComponentDisabled ? 'none' : 'vertical',\n });\n const textAreaRefCallback = useMultipleRefs(ref, textAreaRef, scrollbar.scrollContainerRef);\n const descriptionId = useId();\n const labelId = useId();\n const [animationTimeout, setAnimationTimeout] = useState(100);\n const currentResizeValue = isMobile ? 'none' : resize;\n const isResizable = currentResizeValue !== 'none';\n const contentCloneRef = useRef<HTMLPreElement>(null);\n const contentCloneWrapperRef = useRef<HTMLDivElement>(null);\n const { minHeight, maxedHeight } = useHeightObserver({\n size,\n minHeight: _minHeight,\n layout,\n contentCloneRef,\n onHeightChange: () => scrollbar.resizeCallbackRef.current?.(),\n });\n const { maxHeightRef, allowScrollRef } = useLimitGrow({\n layout,\n contentCloneRef,\n contentCloneWrapperRef,\n textAreaRef,\n resizableDivRef,\n minHeight,\n });\n const trlOf = useTranslation('TextArea', 'of');\n\n useEffect(() => {\n const animationTimeoutElement = document.createElement('div');\n animationTimeoutElement.classList.add(styles.textareaAnimationTimeout);\n document.body.appendChild(animationTimeoutElement);\n const style = window.getComputedStyle(animationTimeoutElement);\n const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);\n if (Number.isInteger(animationTimeout)) {\n setAnimationTimeout(animationTimeout);\n }\n document.body.removeChild(animationTimeoutElement);\n }, []);\n\n const { focusHandler, blurHandler, isFocused } = useFocus<HTMLTextAreaElement>(onFocus, onBlur);\n\n const handleClick = () => {\n if (resizableDivWasResized.current) {\n resizableDivWasResized.current = false;\n return;\n }\n textAreaRef.current?.focus();\n };\n\n const handleMouseUp = () => {\n if (\n resizableDivRef.current?.offsetWidth !== resizableDivSizes.current?.width ||\n resizableDivRef.current?.offsetHeight !== resizableDivSizes.current?.height\n ) {\n resizableDivWasResized.current = true;\n }\n };\n\n const handleMouseDown = () => {\n resizableDivSizes.current = {\n width: resizableDivRef.current?.offsetWidth,\n height: resizableDivRef.current?.offsetHeight,\n };\n };\n\n useEffect(() => {\n if (maxLength) {\n const invalid = !isFocused && value.length > maxLength;\n setInternalInvalid(invalid);\n\n if (previousInvalid.current !== invalid) {\n onValidate?.({ invalidLimit: invalid });\n }\n previousInvalid.current = invalid;\n }\n }, [onValidate, value, internalInvalid, maxLength, isFocused]);\n\n useEffect(() => {\n if (textAreaRef.current) {\n setFocusVisible(isFocused && textAreaRef.current.classList.contains('focus-visible'));\n }\n }, [isFocused]);\n\n useEffect(() => {\n // для layout === 'hug' resizeCallback вызывается в useHeightObserver, т.к. нужно ожидать перерисовку оберток\n if (layout !== 'hug') {\n scrollbar.resizeCallbackRef.current?.();\n }\n }, [layout, scrollbar.resizeCallbackRef, value]);\n\n const placeholderIsElevated = !!elevatePlaceholder && !!placeholder && size === 'large';\n const showLabel = placeholderIsElevated || value === '';\n\n const invalidState = invalid || invalidLimit;\n const ariaProps = useInputAriaProps({\n invalid: invalidState || internalInvalid,\n hasDescription: !!description,\n hasPlaceholder: !!placeholder,\n descriptionId,\n labelId,\n });\n\n const hasElevatedPlaceholderClass = (isFocused || value !== '') && placeholderIsElevated;\n\n return (\n <div\n data-qa=\"textarea-wrapper\"\n data-interactive={true}\n className={classnames(styles.textarea, styles[`textarea-${size}`], {\n [styles.textareaFocused]: isFocused,\n [styles.textareaDisabled]: isComponentDisabled,\n [styles.textareaInvalid]: !!(invalidState || internalInvalid),\n [styles.textareaLimitError]:\n invalidLimit || internalInvalid || (maxLength ? value.length > maxLength : false),\n [styles.textareaLimited]: !!maxLength && maxedHeight,\n [styles.textareaLayoutFillBoth]: layout === 'fill-both',\n [styles.textareaLayoutFillVertical]: layout === 'fill-vertical',\n [styles.textareaLayoutFillHorizontal]: layout === 'fill-horizontal',\n [styles.textareaLayoutHug]: layout === 'hug',\n [styles.textareaElevated]: placeholderIsElevated,\n [styles.hasGrip]: isResizable,\n [styles.maxedHeight]: size === 'large' && maxedHeight,\n })}\n >\n <div\n className={classnames(styles.textareaPositionContainerWrapper, scrollbar.hoverContainerCssClass, {\n 'focus-visible': isFocusVisible,\n })}\n >\n <div\n className={classnames(styles.textareaPositionContainer)}\n onClick={handleClick}\n onMouseDown={isResizable ? handleMouseDown : undefined}\n onMouseUp={isResizable ? handleMouseUp : undefined}\n style={\n {\n height: maxHeightRef.current || (maxedHeight ? 'auto' : minHeight),\n minHeight,\n '--magritte-textarea-max-height': maxHeight\n ? `${Math.max(maxHeight, minHeight)}px`\n : 'auto',\n resize: currentResizeValue,\n } as CSSProperties\n }\n ref={resizableDivRef}\n >\n <div className={styles.textareaWrapper} data-qa=\"textarea-native-wrapper\">\n <textarea\n {...restProps}\n {...ariaProps}\n disabled={isComponentDisabled}\n suppressHydrationWarning\n className={classnames(styles.nativeElement, styles.sidePadding)}\n value={value}\n onChange={onChange}\n onFocus={focusHandler}\n onBlur={blurHandler}\n style={{ overflowY: layout !== 'hug' || allowScrollRef.current ? 'auto' : 'hidden' }}\n ref={textAreaRefCallback}\n />\n {layout === 'hug' && (\n <div\n className={classnames(styles.valueCloneWrapper, styles.sidePadding)}\n ref={contentCloneWrapperRef}\n >\n <pre className={styles.valueCloneContainer} ref={contentCloneRef}>\n {`${value}${ZERO_WIDTH_SPACE}`}\n </pre>\n </div>\n )}\n {showLabel && (\n <div className={classnames(styles.textareaRiggingContainer, styles.sidePadding)}>\n <label\n className={classnames(styles.textareaLabel, {\n [styles.labelNoWrap]: elevatePlaceholder,\n [styles.textareaLabelElevated]: hasElevatedPlaceholderClass,\n })}\n id={ariaProps['aria-labelledby']}\n >\n {placeholder}\n </label>\n </div>\n )}\n </div>\n {hasVerticalScroll && <Scrollbar {...verticalScrollbarProps} />}\n </div>\n {!!maxLength && maxedHeight && (\n <CSSTransition\n in={isFocused || value.length > maxLength}\n timeout={animationTimeout}\n classNames={{\n enter: styles.textareaLimitEnter,\n enterActive: styles.textareaLimitEnterActive,\n exit: styles.textareaLimitExit,\n exitActive: styles.textareaLimitExitActive,\n }}\n unmountOnExit\n nodeRef={limitRef}\n >\n <div className={styles.textareaLimit} ref={limitRef}>\n <Text typography=\"label-3-regular\">\n {value.length}\n {trlOf}\n {maxLength}\n </Text>\n </div>\n </CSSTransition>\n )}\n {isResizable && (\n <div className={styles.textareaGrip}>\n <div className={styles.textareaGripIcon}>\n <GripSize24 />\n </div>\n </div>\n )}\n </div>\n <FormHelper\n description={description}\n errorMessage={errorMessage}\n descriptionId={ariaProps['aria-describedby']}\n disabled={isComponentDisabled}\n invalid={invalidState}\n data-qa=\"textarea-hint-container\"\n />\n </div>\n );\n};\n\nconst TextArea = forwardRef(TextAreaComponent) as (<Layout extends TextAreaLayout>(\n props: ControlledTextAreaProps<Layout> &\n Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, keyof ControlledTextAreaProps<'fixed'>> & {\n ref?: React.ForwardedRef<HTMLTextAreaElement>;\n }\n) => ReactElement | null) & { displayName: string };\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
package/UncontrolledTextArea.js
CHANGED
|
@@ -11,12 +11,13 @@ import '@hh.ru/magritte-ui-breakpoint';
|
|
|
11
11
|
import '@hh.ru/magritte-ui-form-helper';
|
|
12
12
|
import '@hh.ru/magritte-ui-icon/private';
|
|
13
13
|
import '@hh.ru/magritte-ui-input/useInputAriaProps';
|
|
14
|
+
import '@hh.ru/magritte-ui-scrollbar';
|
|
14
15
|
import './useFocus.js';
|
|
16
|
+
import './useHeightObserver.js';
|
|
17
|
+
import './types.js';
|
|
15
18
|
import './useLimitGrow.js';
|
|
16
19
|
import './TextAreaGrowLimiter.js';
|
|
17
20
|
import '@hh.ru/magritte-common-func-utils';
|
|
18
|
-
import './useMinHeight.js';
|
|
19
|
-
import './types.js';
|
|
20
21
|
import '@hh.ru/magritte-ui-typography';
|
|
21
22
|
|
|
22
23
|
const UncontrolledTextAreaComponent = ({ value = '', onChange, ...restProps }, ref) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UncontrolledTextArea.js","sources":["../src/UncontrolledTextArea.tsx"],"sourcesContent":["import { forwardRef, type ReactElement, useCallback, useState, type ChangeEvent } from 'react';\n\nimport { TextArea } from '@hh.ru/magritte-ui-textarea/TextArea';\nimport type { TextAreaLayout, UncontrolledTextAreaProps } from '@hh.ru/magritte-ui-textarea/types';\n\nconst UncontrolledTextAreaComponent = <Layout extends TextAreaLayout>(\n { value = '', onChange, ...restProps }: UncontrolledTextAreaProps<Layout>,\n ref: React.ForwardedRef<HTMLTextAreaElement>\n) => {\n const [defaultValue, setDefaultValue] = useState(value);\n const changeHandler = useCallback(\n (event: ChangeEvent<HTMLTextAreaElement>) => {\n setDefaultValue(event.target.value);\n onChange?.(event);\n },\n [onChange]\n );\n\n return <TextArea {...restProps} value={defaultValue} onChange={changeHandler} ref={ref} />;\n};\n\nexport const UncontrolledTextArea = forwardRef(UncontrolledTextAreaComponent) as (<Layout extends TextAreaLayout>(\n props: UncontrolledTextAreaProps<Layout> &\n Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, keyof UncontrolledTextAreaProps<'fixed'>> & {\n ref?: React.ForwardedRef<HTMLTextAreaElement>;\n }\n) => ReactElement | null) & { displayName: string };\nUncontrolledTextArea.displayName = 'UncontrolledTextArea';\n"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"UncontrolledTextArea.js","sources":["../src/UncontrolledTextArea.tsx"],"sourcesContent":["import { forwardRef, type ReactElement, useCallback, useState, type ChangeEvent } from 'react';\n\nimport { TextArea } from '@hh.ru/magritte-ui-textarea/TextArea';\nimport type { TextAreaLayout, UncontrolledTextAreaProps } from '@hh.ru/magritte-ui-textarea/types';\n\nconst UncontrolledTextAreaComponent = <Layout extends TextAreaLayout>(\n { value = '', onChange, ...restProps }: UncontrolledTextAreaProps<Layout>,\n ref: React.ForwardedRef<HTMLTextAreaElement>\n) => {\n const [defaultValue, setDefaultValue] = useState(value);\n const changeHandler = useCallback(\n (event: ChangeEvent<HTMLTextAreaElement>) => {\n setDefaultValue(event.target.value);\n onChange?.(event);\n },\n [onChange]\n );\n\n return <TextArea {...restProps} value={defaultValue} onChange={changeHandler} ref={ref} />;\n};\n\nexport const UncontrolledTextArea = forwardRef(UncontrolledTextAreaComponent) as (<Layout extends TextAreaLayout>(\n props: UncontrolledTextAreaProps<Layout> &\n Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, keyof UncontrolledTextAreaProps<'fixed'>> & {\n ref?: React.ForwardedRef<HTMLTextAreaElement>;\n }\n) => ReactElement | null) & { displayName: string };\nUncontrolledTextArea.displayName = 'UncontrolledTextArea';\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,6BAA6B,GAAG,CAClC,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAqC,EACzE,GAA4C,KAC5C;IACA,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACxD,IAAA,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,KAAuC,KAAI;AACxC,QAAA,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACpC,QAAA,QAAQ,GAAG,KAAK,CAAC,CAAC;AACtB,KAAC,EACD,CAAC,QAAQ,CAAC,CACb,CAAC;AAEF,IAAA,OAAOA,IAAC,QAAQ,EAAA,EAAA,GAAK,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;AAC/F,CAAC,CAAC;MAEW,oBAAoB,GAAG,UAAU,CAAC,6BAA6B,EAKxB;AACpD,oBAAoB,CAAC,WAAW,GAAG,sBAAsB;;;;"}
|