@hh.ru/magritte-ui-textarea 3.0.4 → 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.
Files changed (13) hide show
  1. package/TextArea.js +29 -13
  2. package/TextArea.js.map +1 -1
  3. package/UncontrolledTextArea.js +3 -2
  4. package/UncontrolledTextArea.js.map +1 -1
  5. package/index.css +121 -108
  6. package/index.js +3 -2
  7. package/index.js.map +1 -1
  8. package/package.json +3 -2
  9. package/useHeightObserver.d.ts +14 -0
  10. package/{useMinHeight.js → useHeightObserver.js} +12 -5
  11. package/useHeightObserver.js.map +1 -0
  12. package/useMinHeight.d.ts +0 -6
  13. 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-4","textarea-elevated":"magritte-textarea-elevated___S0jk-_3-0-4","textareaElevated":"magritte-textarea-elevated___S0jk-_3-0-4","textarea-small":"magritte-textarea-small___Q-tsg_3-0-4","textareaSmall":"magritte-textarea-small___Q-tsg_3-0-4","textarea-medium":"magritte-textarea-medium___GNzAm_3-0-4","textareaMedium":"magritte-textarea-medium___GNzAm_3-0-4","textarea-large":"magritte-textarea-large___ugT-5_3-0-4","textareaLarge":"magritte-textarea-large___ugT-5_3-0-4","has-grip":"magritte-has-grip___ATMYQ_3-0-4","hasGrip":"magritte-has-grip___ATMYQ_3-0-4","textarea-limited":"magritte-textarea-limited___cU1Rg_3-0-4","textareaLimited":"magritte-textarea-limited___cU1Rg_3-0-4","maxed-height":"magritte-maxed-height___v1wYG_3-0-4","maxedHeight":"magritte-maxed-height___v1wYG_3-0-4","textarea-focused":"magritte-textarea-focused___eiGyC_3-0-4","textareaFocused":"magritte-textarea-focused___eiGyC_3-0-4","textarea-invalid":"magritte-textarea-invalid___iKOPh_3-0-4","textareaInvalid":"magritte-textarea-invalid___iKOPh_3-0-4","textarea-disabled":"magritte-textarea-disabled___XN0cg_3-0-4","textareaDisabled":"magritte-textarea-disabled___XN0cg_3-0-4","textarea-position-container-wrapper":"magritte-textarea-position-container-wrapper___4Dsui_3-0-4","textareaPositionContainerWrapper":"magritte-textarea-position-container-wrapper___4Dsui_3-0-4","textarea-position-container":"magritte-textarea-position-container___cEpbv_3-0-4","textareaPositionContainer":"magritte-textarea-position-container___cEpbv_3-0-4","native-element":"magritte-native-element___a0RAE_3-0-4","nativeElement":"magritte-native-element___a0RAE_3-0-4","textarea-label":"magritte-textarea-label___sgTIH_3-0-4","textareaLabel":"magritte-textarea-label___sgTIH_3-0-4","textarea-label-elevated":"magritte-textarea-label-elevated___0lxOI_3-0-4","textareaLabelElevated":"magritte-textarea-label-elevated___0lxOI_3-0-4","textarea-limit":"magritte-textarea-limit___IjPJy_3-0-4","textareaLimit":"magritte-textarea-limit___IjPJy_3-0-4","textarea-limit-error":"magritte-textarea-limit-error___vLvZU_3-0-4","textareaLimitError":"magritte-textarea-limit-error___vLvZU_3-0-4","textarea-layout-fill-both":"magritte-textarea-layout-fill-both___ERS-q_3-0-4","textareaLayoutFillBoth":"magritte-textarea-layout-fill-both___ERS-q_3-0-4","textarea-layout-fill-vertical":"magritte-textarea-layout-fill-vertical___HmNtp_3-0-4","textareaLayoutFillVertical":"magritte-textarea-layout-fill-vertical___HmNtp_3-0-4","textarea-layout-fill-horizontal":"magritte-textarea-layout-fill-horizontal___imBH2_3-0-4","textareaLayoutFillHorizontal":"magritte-textarea-layout-fill-horizontal___imBH2_3-0-4","textarea-layout-hug":"magritte-textarea-layout-hug___tdCMY_3-0-4","textareaLayoutHug":"magritte-textarea-layout-hug___tdCMY_3-0-4","textarea-wrapper":"magritte-textarea-wrapper___yD7G6_3-0-4","textareaWrapper":"magritte-textarea-wrapper___yD7G6_3-0-4","value-clone-wrapper":"magritte-value-clone-wrapper___2ZZvS_3-0-4","valueCloneWrapper":"magritte-value-clone-wrapper___2ZZvS_3-0-4","value-clone-container":"magritte-value-clone-container___PVM97_3-0-4","valueCloneContainer":"magritte-value-clone-container___PVM97_3-0-4","side-padding":"magritte-side-padding___O-HUP_3-0-4","sidePadding":"magritte-side-padding___O-HUP_3-0-4","textarea-animation-timeout":"magritte-textarea-animation-timeout___zudbr_3-0-4","textareaAnimationTimeout":"magritte-textarea-animation-timeout___zudbr_3-0-4","textarea-rigging-container":"magritte-textarea-rigging-container___-1S6i_3-0-4","textareaRiggingContainer":"magritte-textarea-rigging-container___-1S6i_3-0-4","label-no-wrap":"magritte-label-no-wrap___RxZ3A_3-0-4","labelNoWrap":"magritte-label-no-wrap___RxZ3A_3-0-4","textarea-grip":"magritte-textarea-grip___iL7lq_3-0-4","textareaGrip":"magritte-textarea-grip___iL7lq_3-0-4","textarea-grip-icon":"magritte-textarea-grip-icon___YK-9w_3-0-4","textareaGripIcon":"magritte-textarea-grip-icon___YK-9w_3-0-4","textarea-limit-enter":"magritte-textarea-limit-enter___CygGz_3-0-4","textareaLimitEnter":"magritte-textarea-limit-enter___CygGz_3-0-4","textarea-limit-exit":"magritte-textarea-limit-exit___RMp-R_3-0-4","textareaLimitExit":"magritte-textarea-limit-exit___RMp-R_3-0-4","textarea-limit-enter-active":"magritte-textarea-limit-enter-active___8vN-t_3-0-4","textareaLimitEnterActive":"magritte-textarea-limit-enter-active___8vN-t_3-0-4","textarea-limit-exit-active":"magritte-textarea-limit-exit-active___a5kBr_3-0-4","textareaLimitExitActive":"magritte-textarea-limit-exit-active___a5kBr_3-0-4"};
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 textAreaRefCallback = useMultipleRefs(ref, textAreaRef);
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 } = useMinHeight(size, _minHeight, layout, contentCloneRef);
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: [jsx("div", { className: classnames(styles.textareaPositionContainer), onClick: handleClick, onMouseDown: isResizable ? handleMouseDown : undefined, onMouseUp: isResizable ? handleMouseUp : undefined, style: {
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
- [styles.labelNoWrap]: elevatePlaceholder,
135
- [styles.textareaLabelElevated]: hasElevatedPlaceholderClass,
136
- }), id: ariaProps['aria-labelledby'], children: placeholder }) }))] }) }), !!maxLength && maxedHeight && (jsx(CSSTransition, { in: isFocused || value.length > maxLength, timeout: animationTimeout, classNames: {
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) => {
package/UncontrolledTextArea.js.map CHANGED
@@ -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":";;;;;;;;;;;;;;;;;;;;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;;;;"}
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;;;;"}
package/index.css CHANGED
@@ -151,7 +151,7 @@
151
151
  --magritte-color-component-input-text-state-description-invalid-v23-2-1:#ff4d3a;
152
152
  --magritte-color-component-input-icon-grip-v23-2-1:#AABBCA;
153
153
  }
154
- .magritte-textarea___ugvor_3-0-4{
154
+ .magritte-textarea___ugvor_3-1-0{
155
155
  display:inline-flex;
156
156
  flex-flow:column;
157
157
  --magritte-ui-textarea-vertical-offset:0px;
@@ -159,243 +159,244 @@
159
159
  --animation-100-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v23-2-1);
160
160
  --animation-300-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v23-2-1);
161
161
  }
162
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-elevated___S0jk-_3-0-4{
162
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-elevated___S0jk-_3-1-0{
163
163
  --magritte-ui-textarea-vertical-offset:calc(var(--magritte-typography-label-4-regular-line-height-v23-2-1) * 0.5);
164
164
  }
165
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-small___Q-tsg_3-0-4{
165
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-small___Q-tsg_3-1-0{
166
166
  --magritte-ui-textarea-vertical-padding:10px;
167
167
  }
168
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-medium___GNzAm_3-0-4{
168
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-medium___GNzAm_3-1-0{
169
169
  --magritte-ui-textarea-vertical-padding:12px;
170
170
  }
171
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-large___ugT-5_3-0-4{
171
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-large___ugT-5_3-1-0{
172
172
  --magritte-ui-textarea-vertical-padding:16px;
173
173
  }
174
- .magritte-textarea___ugvor_3-0-4.magritte-has-grip___ATMYQ_3-0-4{
174
+ .magritte-textarea___ugvor_3-1-0.magritte-has-grip___ATMYQ_3-1-0{
175
175
  --magritte-ui-textarea-additional-bottom-padding:18px;
176
176
  }
177
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-limited___cU1Rg_3-0-4{
177
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-limited___cU1Rg_3-1-0{
178
178
  --magritte-ui-textarea-additional-bottom-padding:20px + 8px;
179
179
  }
180
- .magritte-textarea___ugvor_3-0-4.magritte-maxed-height___v1wYG_3-0-4.magritte-textarea-elevated___S0jk-_3-0-4{
180
+ .magritte-textarea___ugvor_3-1-0.magritte-maxed-height___v1wYG_3-1-0.magritte-textarea-elevated___S0jk-_3-1-0{
181
181
  --magritte-ui-textarea-bottom-padding:calc(12px + var(--magritte-ui-textarea-vertical-offset));
182
182
  }
183
183
  @media (min-width: 1020px){
184
- body.magritte-old-layout .magritte-textarea___ugvor_3-0-4:not(.magritte-textarea-focused___eiGyC_3-0-4):not(.magritte-textarea-invalid___iKOPh_3-0-4):not(.magritte-textarea-disabled___XN0cg_3-0-4):hover{
184
+ body.magritte-old-layout .magritte-textarea___ugvor_3-1-0:not(.magritte-textarea-focused___eiGyC_3-1-0):not(.magritte-textarea-invalid___iKOPh_3-1-0):not(.magritte-textarea-disabled___XN0cg_3-1-0):hover{
185
185
  --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-hovered-v23-2-1);
186
186
  }
187
- body.magritte-old-layout .magritte-textarea___ugvor_3-0-4:not(.magritte-textarea-focused___eiGyC_3-0-4):not(.magritte-textarea-invalid___iKOPh_3-0-4):not(.magritte-textarea-disabled___XN0cg_3-0-4):hover .magritte-textarea-position-container-wrapper___4Dsui_3-0-4::after{
187
+ body.magritte-old-layout .magritte-textarea___ugvor_3-1-0:not(.magritte-textarea-focused___eiGyC_3-1-0):not(.magritte-textarea-invalid___iKOPh_3-1-0):not(.magritte-textarea-disabled___XN0cg_3-1-0):hover .magritte-textarea-position-container-wrapper___4Dsui_3-1-0::after{
188
188
  border-bottom-color:var(--magritte-color-component-input-stroke-state-field-hovered-v23-2-1);
189
189
  border-right-color:var(--magritte-color-component-input-stroke-state-field-hovered-v23-2-1);
190
190
  border-width:1px;
191
191
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-2-1);
192
192
  }
193
- body.magritte-old-layout .magritte-textarea___ugvor_3-0-4:not(.magritte-textarea-focused___eiGyC_3-0-4):not(.magritte-textarea-invalid___iKOPh_3-0-4):not(.magritte-textarea-disabled___XN0cg_3-0-4):hover .magritte-textarea-position-container___cEpbv_3-0-4{
193
+ body.magritte-old-layout .magritte-textarea___ugvor_3-1-0:not(.magritte-textarea-focused___eiGyC_3-1-0):not(.magritte-textarea-invalid___iKOPh_3-1-0):not(.magritte-textarea-disabled___XN0cg_3-1-0):hover .magritte-textarea-position-container___cEpbv_3-1-0{
194
194
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v23-2-1);
195
195
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-2-1);
196
196
  }
197
- body.magritte-old-layout .magritte-textarea___ugvor_3-0-4:not(.magritte-textarea-focused___eiGyC_3-0-4):not(.magritte-textarea-invalid___iKOPh_3-0-4):not(.magritte-textarea-disabled___XN0cg_3-0-4):hover .magritte-native-element___a0RAE_3-0-4{
197
+ body.magritte-old-layout .magritte-textarea___ugvor_3-1-0:not(.magritte-textarea-focused___eiGyC_3-1-0):not(.magritte-textarea-invalid___iKOPh_3-1-0):not(.magritte-textarea-disabled___XN0cg_3-1-0):hover .magritte-native-element___a0RAE_3-1-0{
198
198
  color:var(--magritte-color-component-input-text-state-content-hovered-v23-2-1);
199
199
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-hovered-v23-2-1);
200
200
  opacity:1;
201
201
  }
202
- body.magritte-old-layout .magritte-textarea___ugvor_3-0-4:not(.magritte-textarea-focused___eiGyC_3-0-4):not(.magritte-textarea-invalid___iKOPh_3-0-4):not(.magritte-textarea-disabled___XN0cg_3-0-4):hover .magritte-textarea-label___sgTIH_3-0-4{
202
+ body.magritte-old-layout .magritte-textarea___ugvor_3-1-0:not(.magritte-textarea-focused___eiGyC_3-1-0):not(.magritte-textarea-invalid___iKOPh_3-1-0):not(.magritte-textarea-disabled___XN0cg_3-1-0):hover .magritte-textarea-label___sgTIH_3-1-0{
203
203
  color:var(--magritte-color-component-input-text-state-placeholder-hovered-v23-2-1);
204
204
  }
205
- body.magritte-old-layout .magritte-textarea___ugvor_3-0-4:not(.magritte-textarea-focused___eiGyC_3-0-4):not(.magritte-textarea-invalid___iKOPh_3-0-4):not(.magritte-textarea-disabled___XN0cg_3-0-4):hover .magritte-textarea-label-elevated___0lxOI_3-0-4{
205
+ body.magritte-old-layout .magritte-textarea___ugvor_3-1-0:not(.magritte-textarea-focused___eiGyC_3-1-0):not(.magritte-textarea-invalid___iKOPh_3-1-0):not(.magritte-textarea-disabled___XN0cg_3-1-0):hover .magritte-textarea-label-elevated___0lxOI_3-1-0{
206
206
  color:var(--magritte-color-component-input-text-state-label-hovered-v23-2-1);
207
207
  }
208
- body.magritte-old-layout .magritte-textarea___ugvor_3-0-4:not(.magritte-textarea-focused___eiGyC_3-0-4):not(.magritte-textarea-invalid___iKOPh_3-0-4):not(.magritte-textarea-disabled___XN0cg_3-0-4):hover .magritte-textarea-limit___IjPJy_3-0-4{
208
+ body.magritte-old-layout .magritte-textarea___ugvor_3-1-0:not(.magritte-textarea-focused___eiGyC_3-1-0):not(.magritte-textarea-invalid___iKOPh_3-1-0):not(.magritte-textarea-disabled___XN0cg_3-1-0):hover .magritte-textarea-limit___IjPJy_3-1-0{
209
209
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-2-1);
210
210
  }
211
- body.magritte-old-layout .magritte-textarea___ugvor_3-0-4:not(.magritte-textarea-focused___eiGyC_3-0-4):not(.magritte-textarea-invalid___iKOPh_3-0-4):not(.magritte-textarea-disabled___XN0cg_3-0-4):hover .magritte-textarea-limit___IjPJy_3-0-4{
211
+ body.magritte-old-layout .magritte-textarea___ugvor_3-1-0:not(.magritte-textarea-focused___eiGyC_3-1-0):not(.magritte-textarea-invalid___iKOPh_3-1-0):not(.magritte-textarea-disabled___XN0cg_3-1-0):hover .magritte-textarea-limit___IjPJy_3-1-0{
212
212
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-hovered-v23-2-1);
213
213
  }
214
214
  }
215
215
  @media (min-width: 1024px){
216
- body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-0-4:not(.magritte-textarea-focused___eiGyC_3-0-4):not(.magritte-textarea-invalid___iKOPh_3-0-4):not(.magritte-textarea-disabled___XN0cg_3-0-4):hover{
216
+ body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-1-0:not(.magritte-textarea-focused___eiGyC_3-1-0):not(.magritte-textarea-invalid___iKOPh_3-1-0):not(.magritte-textarea-disabled___XN0cg_3-1-0):hover{
217
217
  --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-hovered-v23-2-1);
218
218
  }
219
- body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-0-4:not(.magritte-textarea-focused___eiGyC_3-0-4):not(.magritte-textarea-invalid___iKOPh_3-0-4):not(.magritte-textarea-disabled___XN0cg_3-0-4):hover .magritte-textarea-position-container-wrapper___4Dsui_3-0-4::after{
219
+ body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-1-0:not(.magritte-textarea-focused___eiGyC_3-1-0):not(.magritte-textarea-invalid___iKOPh_3-1-0):not(.magritte-textarea-disabled___XN0cg_3-1-0):hover .magritte-textarea-position-container-wrapper___4Dsui_3-1-0::after{
220
220
  border-bottom-color:var(--magritte-color-component-input-stroke-state-field-hovered-v23-2-1);
221
221
  border-right-color:var(--magritte-color-component-input-stroke-state-field-hovered-v23-2-1);
222
222
  border-width:1px;
223
223
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-2-1);
224
224
  }
225
- body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-0-4:not(.magritte-textarea-focused___eiGyC_3-0-4):not(.magritte-textarea-invalid___iKOPh_3-0-4):not(.magritte-textarea-disabled___XN0cg_3-0-4):hover .magritte-textarea-position-container___cEpbv_3-0-4{
225
+ body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-1-0:not(.magritte-textarea-focused___eiGyC_3-1-0):not(.magritte-textarea-invalid___iKOPh_3-1-0):not(.magritte-textarea-disabled___XN0cg_3-1-0):hover .magritte-textarea-position-container___cEpbv_3-1-0{
226
226
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v23-2-1);
227
227
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-2-1);
228
228
  }
229
- body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-0-4:not(.magritte-textarea-focused___eiGyC_3-0-4):not(.magritte-textarea-invalid___iKOPh_3-0-4):not(.magritte-textarea-disabled___XN0cg_3-0-4):hover .magritte-native-element___a0RAE_3-0-4{
229
+ body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-1-0:not(.magritte-textarea-focused___eiGyC_3-1-0):not(.magritte-textarea-invalid___iKOPh_3-1-0):not(.magritte-textarea-disabled___XN0cg_3-1-0):hover .magritte-native-element___a0RAE_3-1-0{
230
230
  color:var(--magritte-color-component-input-text-state-content-hovered-v23-2-1);
231
231
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-hovered-v23-2-1);
232
232
  opacity:1;
233
233
  }
234
- body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-0-4:not(.magritte-textarea-focused___eiGyC_3-0-4):not(.magritte-textarea-invalid___iKOPh_3-0-4):not(.magritte-textarea-disabled___XN0cg_3-0-4):hover .magritte-textarea-label___sgTIH_3-0-4{
234
+ body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-1-0:not(.magritte-textarea-focused___eiGyC_3-1-0):not(.magritte-textarea-invalid___iKOPh_3-1-0):not(.magritte-textarea-disabled___XN0cg_3-1-0):hover .magritte-textarea-label___sgTIH_3-1-0{
235
235
  color:var(--magritte-color-component-input-text-state-placeholder-hovered-v23-2-1);
236
236
  }
237
- body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-0-4:not(.magritte-textarea-focused___eiGyC_3-0-4):not(.magritte-textarea-invalid___iKOPh_3-0-4):not(.magritte-textarea-disabled___XN0cg_3-0-4):hover .magritte-textarea-label-elevated___0lxOI_3-0-4{
237
+ body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-1-0:not(.magritte-textarea-focused___eiGyC_3-1-0):not(.magritte-textarea-invalid___iKOPh_3-1-0):not(.magritte-textarea-disabled___XN0cg_3-1-0):hover .magritte-textarea-label-elevated___0lxOI_3-1-0{
238
238
  color:var(--magritte-color-component-input-text-state-label-hovered-v23-2-1);
239
239
  }
240
- body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-0-4:not(.magritte-textarea-focused___eiGyC_3-0-4):not(.magritte-textarea-invalid___iKOPh_3-0-4):not(.magritte-textarea-disabled___XN0cg_3-0-4):hover .magritte-textarea-limit___IjPJy_3-0-4{
240
+ body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-1-0:not(.magritte-textarea-focused___eiGyC_3-1-0):not(.magritte-textarea-invalid___iKOPh_3-1-0):not(.magritte-textarea-disabled___XN0cg_3-1-0):hover .magritte-textarea-limit___IjPJy_3-1-0{
241
241
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-2-1);
242
242
  }
243
- body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-0-4:not(.magritte-textarea-focused___eiGyC_3-0-4):not(.magritte-textarea-invalid___iKOPh_3-0-4):not(.magritte-textarea-disabled___XN0cg_3-0-4):hover .magritte-textarea-limit___IjPJy_3-0-4{
243
+ body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-1-0:not(.magritte-textarea-focused___eiGyC_3-1-0):not(.magritte-textarea-invalid___iKOPh_3-1-0):not(.magritte-textarea-disabled___XN0cg_3-1-0):hover .magritte-textarea-limit___IjPJy_3-1-0{
244
244
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-hovered-v23-2-1);
245
245
  }
246
246
  }
247
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4{
247
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0{
248
248
  --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-focused-v23-2-1);
249
249
  }
250
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4 .magritte-textarea-position-container-wrapper___4Dsui_3-0-4::after{
250
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0 .magritte-textarea-position-container-wrapper___4Dsui_3-1-0::after{
251
251
  border-bottom-color:var(--magritte-color-component-input-stroke-state-field-focused-v23-2-1);
252
252
  border-right-color:var(--magritte-color-component-input-stroke-state-field-focused-v23-2-1);
253
253
  border-width:2px;
254
254
  background-color:var(--magritte-color-component-input-background-state-field-focused-v23-2-1);
255
255
  }
256
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4 .magritte-textarea-position-container___cEpbv_3-0-4{
256
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0 .magritte-textarea-position-container___cEpbv_3-1-0{
257
257
  box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v23-2-1);
258
258
  background-color:var(--magritte-color-component-input-background-state-field-focused-v23-2-1);
259
259
  }
260
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4 .magritte-native-element___a0RAE_3-0-4{
260
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0 .magritte-native-element___a0RAE_3-1-0{
261
261
  color:var(--magritte-color-component-input-text-state-content-focused-v23-2-1);
262
262
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-focused-v23-2-1);
263
263
  opacity:1;
264
264
  }
265
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4 .magritte-textarea-label___sgTIH_3-0-4{
265
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0 .magritte-textarea-label___sgTIH_3-1-0{
266
266
  color:var(--magritte-color-component-input-text-state-placeholder-focused-v23-2-1);
267
267
  }
268
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4 .magritte-textarea-label-elevated___0lxOI_3-0-4{
268
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0 .magritte-textarea-label-elevated___0lxOI_3-1-0{
269
269
  color:var(--magritte-color-component-input-text-state-label-focused-v23-2-1);
270
270
  }
271
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4 .magritte-textarea-limit___IjPJy_3-0-4{
271
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0 .magritte-textarea-limit___IjPJy_3-1-0{
272
272
  background-color:var(--magritte-color-component-input-background-state-field-focused-v23-2-1);
273
273
  }
274
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4 .magritte-textarea-limit___IjPJy_3-0-4{
274
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0 .magritte-textarea-limit___IjPJy_3-1-0{
275
275
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-focused-v23-2-1);
276
276
  }
277
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4.magritte-textarea-limit-error___vLvZU_3-0-4,
278
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4.magritte-textarea-invalid___iKOPh_3-0-4{
277
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0.magritte-textarea-limit-error___vLvZU_3-1-0,
278
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0.magritte-textarea-invalid___iKOPh_3-1-0{
279
279
  --magritte-ui-form-helper-error-color-override:var(--magritte-color-component-input-text-state-description-invalid-v23-2-1);
280
280
  }
281
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4.magritte-textarea-limit-error___vLvZU_3-0-4 .magritte-textarea-position-container-wrapper___4Dsui_3-0-4::after,
282
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4.magritte-textarea-invalid___iKOPh_3-0-4 .magritte-textarea-position-container-wrapper___4Dsui_3-0-4::after{
281
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0.magritte-textarea-limit-error___vLvZU_3-1-0 .magritte-textarea-position-container-wrapper___4Dsui_3-1-0::after,
282
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0.magritte-textarea-invalid___iKOPh_3-1-0 .magritte-textarea-position-container-wrapper___4Dsui_3-1-0::after{
283
283
  border-bottom-color:var(--magritte-color-component-input-stroke-state-field-invalid-v23-2-1);
284
284
  border-right-color:var(--magritte-color-component-input-stroke-state-field-invalid-v23-2-1);
285
285
  border-width:2px;
286
286
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v23-2-1);
287
287
  }
288
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4.magritte-textarea-limit-error___vLvZU_3-0-4 .magritte-textarea-position-container___cEpbv_3-0-4,
289
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4.magritte-textarea-invalid___iKOPh_3-0-4 .magritte-textarea-position-container___cEpbv_3-0-4{
288
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0.magritte-textarea-limit-error___vLvZU_3-1-0 .magritte-textarea-position-container___cEpbv_3-1-0,
289
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0.magritte-textarea-invalid___iKOPh_3-1-0 .magritte-textarea-position-container___cEpbv_3-1-0{
290
290
  box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-invalid-v23-2-1);
291
291
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v23-2-1);
292
292
  }
293
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4.magritte-textarea-limit-error___vLvZU_3-0-4 .magritte-native-element___a0RAE_3-0-4,
294
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4.magritte-textarea-invalid___iKOPh_3-0-4 .magritte-native-element___a0RAE_3-0-4{
293
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0.magritte-textarea-limit-error___vLvZU_3-1-0 .magritte-native-element___a0RAE_3-1-0,
294
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0.magritte-textarea-invalid___iKOPh_3-1-0 .magritte-native-element___a0RAE_3-1-0{
295
295
  color:var(--magritte-color-component-input-text-state-content-invalid-v23-2-1);
296
296
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-invalid-v23-2-1);
297
297
  opacity:1;
298
298
  }
299
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4.magritte-textarea-limit-error___vLvZU_3-0-4 .magritte-textarea-label___sgTIH_3-0-4,
300
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4.magritte-textarea-invalid___iKOPh_3-0-4 .magritte-textarea-label___sgTIH_3-0-4{
299
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0.magritte-textarea-limit-error___vLvZU_3-1-0 .magritte-textarea-label___sgTIH_3-1-0,
300
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0.magritte-textarea-invalid___iKOPh_3-1-0 .magritte-textarea-label___sgTIH_3-1-0{
301
301
  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v23-2-1);
302
302
  }
303
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4.magritte-textarea-limit-error___vLvZU_3-0-4 .magritte-textarea-label-elevated___0lxOI_3-0-4,
304
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4.magritte-textarea-invalid___iKOPh_3-0-4 .magritte-textarea-label-elevated___0lxOI_3-0-4{
303
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0.magritte-textarea-limit-error___vLvZU_3-1-0 .magritte-textarea-label-elevated___0lxOI_3-1-0,
304
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0.magritte-textarea-invalid___iKOPh_3-1-0 .magritte-textarea-label-elevated___0lxOI_3-1-0{
305
305
  color:var(--magritte-color-component-input-text-state-label-invalid-v23-2-1);
306
306
  }
307
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4.magritte-textarea-limit-error___vLvZU_3-0-4 .magritte-textarea-limit___IjPJy_3-0-4,
308
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4.magritte-textarea-invalid___iKOPh_3-0-4 .magritte-textarea-limit___IjPJy_3-0-4{
307
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0.magritte-textarea-limit-error___vLvZU_3-1-0 .magritte-textarea-limit___IjPJy_3-1-0,
308
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0.magritte-textarea-invalid___iKOPh_3-1-0 .magritte-textarea-limit___IjPJy_3-1-0{
309
309
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v23-2-1);
310
310
  }
311
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-focused___eiGyC_3-0-4.magritte-textarea-limit-error___vLvZU_3-0-4 .magritte-textarea-limit___IjPJy_3-0-4{
311
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-focused___eiGyC_3-1-0.magritte-textarea-limit-error___vLvZU_3-1-0 .magritte-textarea-limit___IjPJy_3-1-0{
312
312
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-invalid-v23-2-1);
313
313
  }
314
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-invalid___iKOPh_3-0-4{
314
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-invalid___iKOPh_3-1-0{
315
315
  --magritte-ui-form-helper-error-color-override:var(--magritte-color-component-input-text-state-description-invalid-v23-2-1);
316
316
  }
317
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-invalid___iKOPh_3-0-4 .magritte-textarea-position-container-wrapper___4Dsui_3-0-4::after{
317
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-invalid___iKOPh_3-1-0 .magritte-textarea-position-container-wrapper___4Dsui_3-1-0::after{
318
318
  border-bottom-color:var(--magritte-color-component-input-stroke-state-field-invalid-v23-2-1);
319
319
  border-right-color:var(--magritte-color-component-input-stroke-state-field-invalid-v23-2-1);
320
320
  border-width:1px;
321
321
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v23-2-1);
322
322
  }
323
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-invalid___iKOPh_3-0-4 .magritte-textarea-position-container___cEpbv_3-0-4{
323
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-invalid___iKOPh_3-1-0 .magritte-textarea-position-container___cEpbv_3-1-0{
324
324
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v23-2-1);
325
325
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v23-2-1);
326
326
  }
327
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-invalid___iKOPh_3-0-4 .magritte-native-element___a0RAE_3-0-4{
327
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-invalid___iKOPh_3-1-0 .magritte-native-element___a0RAE_3-1-0{
328
328
  color:var(--magritte-color-component-input-text-state-content-invalid-v23-2-1);
329
329
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-invalid-v23-2-1);
330
330
  opacity:1;
331
331
  }
332
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-invalid___iKOPh_3-0-4 .magritte-textarea-label___sgTIH_3-0-4{
332
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-invalid___iKOPh_3-1-0 .magritte-textarea-label___sgTIH_3-1-0{
333
333
  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v23-2-1);
334
334
  }
335
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-invalid___iKOPh_3-0-4 .magritte-textarea-label-elevated___0lxOI_3-0-4{
335
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-invalid___iKOPh_3-1-0 .magritte-textarea-label-elevated___0lxOI_3-1-0{
336
336
  color:var(--magritte-color-component-input-text-state-label-invalid-v23-2-1);
337
337
  }
338
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-invalid___iKOPh_3-0-4 .magritte-textarea-limit___IjPJy_3-0-4{
338
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-invalid___iKOPh_3-1-0 .magritte-textarea-limit___IjPJy_3-1-0{
339
339
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v23-2-1);
340
340
  }
341
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-limit-error___vLvZU_3-0-4 .magritte-textarea-limit___IjPJy_3-0-4{
341
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-limit-error___vLvZU_3-1-0 .magritte-textarea-limit___IjPJy_3-1-0{
342
342
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-invalid-v23-2-1);
343
343
  }
344
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-disabled___XN0cg_3-0-4{
344
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-disabled___XN0cg_3-1-0{
345
345
  --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-disabled-v23-2-1);
346
346
  }
347
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-disabled___XN0cg_3-0-4 .magritte-textarea-position-container-wrapper___4Dsui_3-0-4::after{
347
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-disabled___XN0cg_3-1-0 .magritte-textarea-position-container-wrapper___4Dsui_3-1-0::after{
348
348
  border-bottom-color:var(--magritte-color-component-input-stroke-state-field-disabled-v23-2-1);
349
349
  border-right-color:var(--magritte-color-component-input-stroke-state-field-disabled-v23-2-1);
350
350
  border-width:1px;
351
351
  background-color:var(--magritte-color-component-input-background-state-field-disabled-v23-2-1);
352
352
  }
353
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-disabled___XN0cg_3-0-4 .magritte-textarea-position-container___cEpbv_3-0-4{
353
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-disabled___XN0cg_3-1-0 .magritte-textarea-position-container___cEpbv_3-1-0{
354
354
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v23-2-1);
355
355
  background-color:var(--magritte-color-component-input-background-state-field-disabled-v23-2-1);
356
356
  }
357
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-disabled___XN0cg_3-0-4 .magritte-native-element___a0RAE_3-0-4{
357
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-disabled___XN0cg_3-1-0 .magritte-native-element___a0RAE_3-1-0{
358
358
  color:var(--magritte-color-component-input-text-state-content-disabled-v23-2-1);
359
359
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-disabled-v23-2-1);
360
360
  opacity:1;
361
361
  }
362
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-disabled___XN0cg_3-0-4 .magritte-textarea-label___sgTIH_3-0-4{
362
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-disabled___XN0cg_3-1-0 .magritte-textarea-label___sgTIH_3-1-0{
363
363
  color:var(--magritte-color-component-input-text-state-placeholder-disabled-v23-2-1);
364
364
  }
365
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-disabled___XN0cg_3-0-4 .magritte-textarea-label-elevated___0lxOI_3-0-4{
365
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-disabled___XN0cg_3-1-0 .magritte-textarea-label-elevated___0lxOI_3-1-0{
366
366
  color:var(--magritte-color-component-input-text-state-label-disabled-v23-2-1);
367
367
  }
368
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-disabled___XN0cg_3-0-4 .magritte-textarea-limit___IjPJy_3-0-4{
368
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-disabled___XN0cg_3-1-0 .magritte-textarea-limit___IjPJy_3-1-0{
369
369
  background-color:var(--magritte-color-component-input-background-state-field-disabled-v23-2-1);
370
370
  }
371
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-disabled___XN0cg_3-0-4 .magritte-textarea-limit___IjPJy_3-0-4{
371
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-disabled___XN0cg_3-1-0 .magritte-textarea-limit___IjPJy_3-1-0{
372
372
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-disabled-v23-2-1);
373
373
  }
374
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-disabled___XN0cg_3-0-4 .magritte-textarea-position-container___cEpbv_3-0-4,
375
- .magritte-textarea___ugvor_3-0-4.magritte-textarea-disabled___XN0cg_3-0-4 .magritte-native-element___a0RAE_3-0-4{
374
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-disabled___XN0cg_3-1-0 .magritte-textarea-position-container___cEpbv_3-1-0,
375
+ .magritte-textarea___ugvor_3-1-0.magritte-textarea-disabled___XN0cg_3-1-0 .magritte-native-element___a0RAE_3-1-0{
376
376
  cursor:not-allowed;
377
377
  }
378
378
  @media (prefers-reduced-motion){
379
- .magritte-textarea___ugvor_3-0-4{
379
+ .magritte-textarea___ugvor_3-1-0{
380
380
  --animation-100-duration:1ms;
381
381
  --animation-300-duration:1ms;
382
382
  }
383
383
  }
384
- .magritte-textarea-position-container-wrapper___4Dsui_3-0-4{
384
+ .magritte-textarea-position-container-wrapper___4Dsui_3-1-0{
385
385
  display:inline-flex;
386
386
  position:relative;
387
387
  overflow:hidden;
388
388
  width:100%;
389
389
  border-radius:12px;
390
+ --magritte-ui-scrollbar-border-radius:12px;
390
391
  }
391
- .magritte-textarea-position-container-wrapper___4Dsui_3-0-4.focus-visible{
392
+ .magritte-textarea-position-container-wrapper___4Dsui_3-1-0.focus-visible{
392
393
  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-1) solid 4px;
393
394
  }
394
- .magritte-textarea-invalid___iKOPh_3-0-4 .magritte-textarea-position-container-wrapper___4Dsui_3-0-4.focus-visible,
395
- .magritte-textarea-limit-error___vLvZU_3-0-4 .magritte-textarea-position-container-wrapper___4Dsui_3-0-4.focus-visible{
395
+ .magritte-textarea-invalid___iKOPh_3-1-0 .magritte-textarea-position-container-wrapper___4Dsui_3-1-0.focus-visible,
396
+ .magritte-textarea-limit-error___vLvZU_3-1-0 .magritte-textarea-position-container-wrapper___4Dsui_3-1-0.focus-visible{
396
397
  outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-1);
397
398
  }
398
- .magritte-textarea-position-container-wrapper___4Dsui_3-0-4::after{
399
+ .magritte-textarea-position-container-wrapper___4Dsui_3-1-0::after{
399
400
  display:none;
400
401
  pointer-events:none;
401
402
  user-select:none;
@@ -410,10 +411,10 @@
410
411
  border-bottom:1px solid var(--magritte-color-component-input-stroke-field-v23-2-1);
411
412
  border-right:1px solid var(--magritte-color-component-input-stroke-field-v23-2-1);
412
413
  }
413
- .magritte-has-grip___ATMYQ_3-0-4 .magritte-textarea-position-container-wrapper___4Dsui_3-0-4::after{
414
+ .magritte-has-grip___ATMYQ_3-1-0 .magritte-textarea-position-container-wrapper___4Dsui_3-1-0::after{
414
415
  display:block;
415
416
  }
416
- .magritte-native-element___a0RAE_3-0-4{
417
+ .magritte-native-element___a0RAE_3-1-0{
417
418
  box-sizing:border-box;
418
419
  border:0;
419
420
  width:100%;
@@ -422,6 +423,9 @@
422
423
  caret-color:var(--magritte-ui-textarea-caret-color-override, var(--magritte-color-text-primary-v23-2-1));
423
424
  transform:translateY(var(--magritte-ui-textarea-vertical-offset));
424
425
  border-bottom:calc(var(--magritte-ui-textarea-additional-bottom-padding) - var(--magritte-ui-textarea-bottom-padding, var(--magritte-ui-textarea-vertical-padding)) + var(--magritte-ui-textarea-vertical-offset)) solid transparent;
426
+ overflow:auto;
427
+ overscroll-behavior:none;
428
+ scrollbar-width:none;
425
429
  font-family:var(--magritte-typography-label-3-regular-font-family-v23-2-1);
426
430
  font-weight:var(--magritte-typography-label-3-regular-font-weight-v23-2-1);
427
431
  line-height:var(--magritte-typography-label-3-regular-line-height-v23-2-1);
@@ -439,8 +443,11 @@
439
443
  background:none;
440
444
  appearance:none;
441
445
  }
442
- .magritte-textarea-medium___GNzAm_3-0-4 .magritte-native-element___a0RAE_3-0-4,
443
- .magritte-textarea-large___ugT-5_3-0-4 .magritte-native-element___a0RAE_3-0-4{
446
+ .magritte-native-element___a0RAE_3-1-0::-webkit-scrollbar{
447
+ display:none;
448
+ }
449
+ .magritte-textarea-medium___GNzAm_3-1-0 .magritte-native-element___a0RAE_3-1-0,
450
+ .magritte-textarea-large___ugT-5_3-1-0 .magritte-native-element___a0RAE_3-1-0{
444
451
  font-family:var(--magritte-typography-label-2-regular-font-family-v23-2-1);
445
452
  font-weight:var(--magritte-typography-label-2-regular-font-weight-v23-2-1);
446
453
  line-height:var(--magritte-typography-label-2-regular-line-height-v23-2-1);
@@ -450,45 +457,45 @@
450
457
  text-transform:var(--magritte-typography-label-2-regular-text-transform-v23-2-1);
451
458
  text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v23-2-1);
452
459
  }
453
- .magritte-native-element___a0RAE_3-0-4:focus{
460
+ .magritte-native-element___a0RAE_3-1-0:focus{
454
461
  outline:none;
455
462
  }
456
- .magritte-textarea-layout-fill-both___ERS-q_3-0-4 .magritte-textarea-position-container-wrapper___4Dsui_3-0-4,
457
- .magritte-textarea-layout-fill-vertical___HmNtp_3-0-4 .magritte-textarea-position-container-wrapper___4Dsui_3-0-4,
458
- .magritte-textarea-layout-fill-horizontal___imBH2_3-0-4 .magritte-textarea-position-container-wrapper___4Dsui_3-0-4{
463
+ .magritte-textarea-layout-fill-both___ERS-q_3-1-0 .magritte-textarea-position-container-wrapper___4Dsui_3-1-0,
464
+ .magritte-textarea-layout-fill-vertical___HmNtp_3-1-0 .magritte-textarea-position-container-wrapper___4Dsui_3-1-0,
465
+ .magritte-textarea-layout-fill-horizontal___imBH2_3-1-0 .magritte-textarea-position-container-wrapper___4Dsui_3-1-0{
459
466
  flex:1;
460
467
  }
461
- .magritte-textarea-layout-fill-both___ERS-q_3-0-4{
468
+ .magritte-textarea-layout-fill-both___ERS-q_3-1-0{
462
469
  width:100%;
463
470
  height:100%;
464
471
  }
465
- .magritte-textarea-layout-fill-vertical___HmNtp_3-0-4{
472
+ .magritte-textarea-layout-fill-vertical___HmNtp_3-1-0{
466
473
  height:100%;
467
474
  }
468
- .magritte-textarea-layout-fill-horizontal___imBH2_3-0-4,
469
- .magritte-textarea-layout-hug___tdCMY_3-0-4{
475
+ .magritte-textarea-layout-fill-horizontal___imBH2_3-1-0,
476
+ .magritte-textarea-layout-hug___tdCMY_3-1-0{
470
477
  width:100%;
471
478
  }
472
479
  @media (min-width: 1020px){
473
- body.magritte-old-layout .magritte-textarea-layout-hug___tdCMY_3-0-4 .magritte-textarea-position-container___cEpbv_3-0-4{
480
+ body.magritte-old-layout .magritte-textarea-layout-hug___tdCMY_3-1-0 .magritte-textarea-position-container___cEpbv_3-1-0{
474
481
  max-height:var(--magritte-textarea-max-height, auto);
475
482
  }
476
483
  }
477
484
  @media (min-width: 1024px){
478
- body:not(.magritte-old-layout) .magritte-textarea-layout-hug___tdCMY_3-0-4 .magritte-textarea-position-container___cEpbv_3-0-4{
485
+ body:not(.magritte-old-layout) .magritte-textarea-layout-hug___tdCMY_3-1-0 .magritte-textarea-position-container___cEpbv_3-1-0{
479
486
  max-height:var(--magritte-textarea-max-height, auto);
480
487
  }
481
488
  }
482
- .magritte-textarea-wrapper___yD7G6_3-0-4{
489
+ .magritte-textarea-wrapper___yD7G6_3-1-0{
483
490
  display:grid;
484
491
  width:100%;
485
492
  }
486
- .magritte-value-clone-wrapper___2ZZvS_3-0-4{
493
+ .magritte-value-clone-wrapper___2ZZvS_3-1-0{
487
494
  grid-area:1 / 1 / 2 / 2;
488
495
  min-height:0;
489
496
  overflow:hidden;
490
497
  }
491
- .magritte-value-clone-container___PVM97_3-0-4{
498
+ .magritte-value-clone-container___PVM97_3-1-0{
492
499
  margin:0;
493
500
  box-sizing:border-box;
494
501
  border:0;
@@ -498,6 +505,9 @@
498
505
  caret-color:var(--magritte-ui-textarea-caret-color-override, var(--magritte-color-text-primary-v23-2-1));
499
506
  transform:translateY(var(--magritte-ui-textarea-vertical-offset));
500
507
  border-bottom:calc(var(--magritte-ui-textarea-additional-bottom-padding) - var(--magritte-ui-textarea-bottom-padding, var(--magritte-ui-textarea-vertical-padding)) + var(--magritte-ui-textarea-vertical-offset)) solid transparent;
508
+ overflow:auto;
509
+ overscroll-behavior:none;
510
+ scrollbar-width:none;
501
511
  font-family:var(--magritte-typography-label-3-regular-font-family-v23-2-1);
502
512
  font-weight:var(--magritte-typography-label-3-regular-font-weight-v23-2-1);
503
513
  line-height:var(--magritte-typography-label-3-regular-line-height-v23-2-1);
@@ -514,8 +524,11 @@
514
524
  visibility:hidden;
515
525
  pointer-events:none;
516
526
  }
517
- .magritte-textarea-medium___GNzAm_3-0-4 .magritte-value-clone-container___PVM97_3-0-4,
518
- .magritte-textarea-large___ugT-5_3-0-4 .magritte-value-clone-container___PVM97_3-0-4{
527
+ .magritte-value-clone-container___PVM97_3-1-0::-webkit-scrollbar{
528
+ display:none;
529
+ }
530
+ .magritte-textarea-medium___GNzAm_3-1-0 .magritte-value-clone-container___PVM97_3-1-0,
531
+ .magritte-textarea-large___ugT-5_3-1-0 .magritte-value-clone-container___PVM97_3-1-0{
519
532
  font-family:var(--magritte-typography-label-2-regular-font-family-v23-2-1);
520
533
  font-weight:var(--magritte-typography-label-2-regular-font-weight-v23-2-1);
521
534
  line-height:var(--magritte-typography-label-2-regular-line-height-v23-2-1);
@@ -525,16 +538,16 @@
525
538
  text-transform:var(--magritte-typography-label-2-regular-text-transform-v23-2-1);
526
539
  text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v23-2-1);
527
540
  }
528
- .magritte-textarea-small___Q-tsg_3-0-4 .magritte-side-padding___O-HUP_3-0-4{
541
+ .magritte-textarea-small___Q-tsg_3-1-0 .magritte-side-padding___O-HUP_3-1-0{
529
542
  padding:0 calc(12px - 2px);
530
543
  }
531
- .magritte-textarea-medium___GNzAm_3-0-4 .magritte-side-padding___O-HUP_3-0-4{
544
+ .magritte-textarea-medium___GNzAm_3-1-0 .magritte-side-padding___O-HUP_3-1-0{
532
545
  padding:0 calc(16px - 2px);
533
546
  }
534
- .magritte-textarea-large___ugT-5_3-0-4 .magritte-side-padding___O-HUP_3-0-4{
547
+ .magritte-textarea-large___ugT-5_3-1-0 .magritte-side-padding___O-HUP_3-1-0{
535
548
  padding:0 calc(16px - 2px);
536
549
  }
537
- .magritte-textarea-position-container___cEpbv_3-0-4{
550
+ .magritte-textarea-position-container___cEpbv_3-1-0{
538
551
  display:inline-flex;
539
552
  overflow:hidden;
540
553
  position:relative;
@@ -546,19 +559,19 @@
546
559
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v23-2-1);
547
560
  padding:var(--magritte-ui-textarea-vertical-padding) 2px var(--magritte-ui-textarea-bottom-padding, var(--magritte-ui-textarea-vertical-padding));
548
561
  }
549
- .magritte-textarea-animation-timeout___zudbr_3-0-4,
550
- .magritte-textarea-position-container___cEpbv_3-0-4{
562
+ .magritte-textarea-animation-timeout___zudbr_3-1-0,
563
+ .magritte-textarea-position-container___cEpbv_3-1-0{
551
564
  transition-property:transform, color, font-size, letter-spacing;
552
565
  transition-duration:var(--animation-100-duration);
553
566
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v23-2-1);
554
567
  --animation-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v23-2-1);
555
568
  }
556
- .magritte-textarea-rigging-container___-1S6i_3-0-4{
569
+ .magritte-textarea-rigging-container___-1S6i_3-1-0{
557
570
  position:relative;
558
571
  pointer-events:none;
559
572
  grid-area:1 / 1 / 2 / 2;
560
573
  }
561
- .magritte-textarea-label___sgTIH_3-0-4{
574
+ .magritte-textarea-label___sgTIH_3-1-0{
562
575
  font-family:var(--magritte-typography-label-2-regular-font-family-v23-2-1);
563
576
  font-weight:var(--magritte-typography-label-2-regular-font-weight-v23-2-1);
564
577
  line-height:var(--magritte-typography-label-2-regular-line-height-v23-2-1);
@@ -576,10 +589,10 @@
576
589
  transition-duration:var(--animation-100-duration);
577
590
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v23-2-1);
578
591
  }
579
- .magritte-label-no-wrap___RxZ3A_3-0-4{
592
+ .magritte-label-no-wrap___RxZ3A_3-1-0{
580
593
  white-space:nowrap;
581
594
  }
582
- .magritte-textarea-label-elevated___0lxOI_3-0-4{
595
+ .magritte-textarea-label-elevated___0lxOI_3-1-0{
583
596
  font-family:var(--magritte-typography-label-4-regular-font-family-v23-2-1);
584
597
  font-weight:var(--magritte-typography-label-4-regular-font-weight-v23-2-1);
585
598
  line-height:var(--magritte-typography-label-4-regular-line-height-v23-2-1);
@@ -591,7 +604,7 @@
591
604
  color:var(--magritte-color-component-input-text-label-v23-2-1);
592
605
  transform:translateY(calc(var(--magritte-typography-label-4-regular-line-height-v23-2-1) * -0.5));
593
606
  }
594
- .magritte-textarea-limit___IjPJy_3-0-4{
607
+ .magritte-textarea-limit___IjPJy_3-1-0{
595
608
  position:absolute;
596
609
  bottom:8px;
597
610
  right:12px;
@@ -602,7 +615,7 @@
602
615
  z-index:1;
603
616
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-limit-v23-2-1);
604
617
  }
605
- .magritte-textarea-grip___iL7lq_3-0-4{
618
+ .magritte-textarea-grip___iL7lq_3-1-0{
606
619
  position:absolute;
607
620
  pointer-events:none;
608
621
  display:inline-flex;
@@ -611,25 +624,25 @@
611
624
  border-bottom-right-radius:12px;
612
625
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-grip-v23-2-1);
613
626
  }
614
- .magritte-textarea-grip-icon___YK-9w_3-0-4{
627
+ .magritte-textarea-grip-icon___YK-9w_3-1-0{
615
628
  display:inline-flex;
616
629
  z-index:1;
617
630
  }
618
631
  @media (prefers-reduced-motion: no-preference){
619
- .magritte-textarea-limit-enter___CygGz_3-0-4{
632
+ .magritte-textarea-limit-enter___CygGz_3-1-0{
620
633
  opacity:0;
621
634
  }
622
- .magritte-textarea-limit-exit___RMp-R_3-0-4,
623
- .magritte-textarea-limit-enter-active___8vN-t_3-0-4{
635
+ .magritte-textarea-limit-exit___RMp-R_3-1-0,
636
+ .magritte-textarea-limit-enter-active___8vN-t_3-1-0{
624
637
  opacity:1;
625
638
  }
626
- .magritte-textarea-limit-enter-active___8vN-t_3-0-4{
639
+ .magritte-textarea-limit-enter-active___8vN-t_3-1-0{
627
640
  transition-property:opacity;
628
641
  transition-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v23-2-1);
629
642
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v23-2-1);
630
643
  --animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v23-2-1);
631
644
  }
632
- .magritte-textarea-limit-exit-active___a5kBr_3-0-4{
645
+ .magritte-textarea-limit-exit-active___a5kBr_3-1-0{
633
646
  opacity:0;
634
647
  transition-property:opacity;
635
648
  transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v23-2-1);
package/index.js CHANGED
@@ -13,10 +13,11 @@ import '@hh.ru/magritte-ui-breakpoint';
13
13
  import '@hh.ru/magritte-ui-form-helper';
14
14
  import '@hh.ru/magritte-ui-icon/private';
15
15
  import '@hh.ru/magritte-ui-input/useInputAriaProps';
16
+ import '@hh.ru/magritte-ui-scrollbar';
16
17
  import './useFocus.js';
17
- import './useLimitGrow.js';
18
- import './useMinHeight.js';
18
+ import './useHeightObserver.js';
19
19
  import './types.js';
20
+ import './useLimitGrow.js';
20
21
  import '@hh.ru/magritte-ui-typography';
21
22
  import '@hh.ru/magritte-common-func-utils';
22
23
  //# sourceMappingURL=index.js.map
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-textarea",
3
- "version": "3.0.4",
3
+ "version": "3.1.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -28,6 +28,7 @@
28
28
  "@hh.ru/magritte-ui-form-helper": "2.0.6",
29
29
  "@hh.ru/magritte-ui-icon": "12.3.2",
30
30
  "@hh.ru/magritte-ui-input": "9.0.10",
31
+ "@hh.ru/magritte-ui-scrollbar": "1.0.1",
31
32
  "@hh.ru/magritte-ui-typography": "4.2.2"
32
33
  },
33
34
  "peerDependencies": {
@@ -38,5 +39,5 @@
38
39
  "publishConfig": {
39
40
  "access": "public"
40
41
  },
41
- "gitHead": "18a4c9f53b8572077ce0fba28266865c1b619cee"
42
+ "gitHead": "8c9ac514d963c54434c7f9ed84d3ae347fc5f396"
42
43
  }
package/useHeightObserver.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { type RefObject } from 'react';
2
+ import { type TextAreaLayout, type TextAreaSize } from '@hh.ru/magritte-ui-textarea/types';
3
+ type UseHeightObserverArgs = {
4
+ size: TextAreaSize;
5
+ minHeight: number | undefined;
6
+ layout: TextAreaLayout;
7
+ contentCloneRef: RefObject<HTMLElement>;
8
+ onHeightChange?: VoidFunction;
9
+ };
10
+ export declare const useHeightObserver: ({ size, minHeight, layout, contentCloneRef, onHeightChange, }: UseHeightObserverArgs) => {
11
+ minHeight: number;
12
+ maxedHeight: boolean;
13
+ };
14
+ export {};
package/{useMinHeight.js → useHeightObserver.js} RENAMED
@@ -2,15 +2,18 @@ import './index.css';
2
2
  import { useState, useRef, useEffect } from 'react';
3
3
  import { MIN_HEIGHT_BY_SIZE } from './types.js';
4
4
 
5
- const useMinHeight = (size, minHeight, layout, contentCloneRef) => {
5
+ const useHeightObserver = ({ size, minHeight, layout, contentCloneRef, onHeightChange, }) => {
6
6
  const _minHeight = minHeight ?? MIN_HEIGHT_BY_SIZE[size][1];
7
7
  const isMaxSizeHeight = _minHeight === MIN_HEIGHT_BY_SIZE[size][1];
8
8
  const [actualMinHeight, setActualMinHeight] = useState(_minHeight);
9
9
  const lastProcessedSizeRef = useRef(size);
10
10
  const isSizeChanged = lastProcessedSizeRef.current !== size;
11
11
  lastProcessedSizeRef.current = size;
12
+ const onHeightChangeRef = useRef(onHeightChange);
13
+ onHeightChangeRef.current = onHeightChange;
14
+ const rectsLengthRef = useRef(null);
12
15
  useEffect(() => {
13
- if (!contentCloneRef.current || isMaxSizeHeight) {
16
+ if (!contentCloneRef.current) {
14
17
  return void 0;
15
18
  }
16
19
  const range = document.createRange();
@@ -20,11 +23,15 @@ const useMinHeight = (size, minHeight, layout, contentCloneRef) => {
20
23
  }
21
24
  range.selectNodeContents(contentCloneRef.current);
22
25
  const rects = range.getClientRects();
26
+ if (rectsLengthRef.current !== rects.length && rectsLengthRef.current !== null) {
27
+ onHeightChangeRef.current?.();
28
+ }
29
+ rectsLengthRef.current = rects.length;
23
30
  setActualMinHeight(MIN_HEIGHT_BY_SIZE[size][rects.length > 1 ? 1 : 0]);
24
31
  });
25
32
  observer.observe(contentCloneRef.current);
26
33
  return () => observer.disconnect();
27
- }, [layout, size, contentCloneRef, isMaxSizeHeight]);
34
+ }, [layout, size, contentCloneRef]);
28
35
  let resultMinHeight = isSizeChanged || isMaxSizeHeight ? _minHeight : actualMinHeight;
29
36
  if (layout !== 'hug') {
30
37
  resultMinHeight = MIN_HEIGHT_BY_SIZE[size][1];
@@ -32,5 +39,5 @@ const useMinHeight = (size, minHeight, layout, contentCloneRef) => {
32
39
  return { minHeight: resultMinHeight, maxedHeight: resultMinHeight === MIN_HEIGHT_BY_SIZE[size][1] };
33
40
  };
34
41
 
35
- export { useMinHeight };
36
- //# sourceMappingURL=useMinHeight.js.map
42
+ export { useHeightObserver };
43
+ //# sourceMappingURL=useHeightObserver.js.map
package/useHeightObserver.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useHeightObserver.js","sources":["../src/useHeightObserver.ts"],"sourcesContent":["import { type RefObject, useState, useEffect, useRef } from 'react';\n\nimport { type TextAreaLayout, type TextAreaSize, MIN_HEIGHT_BY_SIZE } from '@hh.ru/magritte-ui-textarea/types';\n\ntype UseHeightObserverArgs = {\n size: TextAreaSize;\n minHeight: number | undefined;\n layout: TextAreaLayout;\n contentCloneRef: RefObject<HTMLElement>;\n onHeightChange?: VoidFunction;\n};\n\nexport const useHeightObserver = ({\n size,\n minHeight,\n layout,\n contentCloneRef,\n onHeightChange,\n}: UseHeightObserverArgs): { minHeight: number; maxedHeight: boolean } => {\n const _minHeight = minHeight ?? MIN_HEIGHT_BY_SIZE[size][1];\n const isMaxSizeHeight = _minHeight === MIN_HEIGHT_BY_SIZE[size][1];\n const [actualMinHeight, setActualMinHeight] = useState(_minHeight);\n const lastProcessedSizeRef = useRef<TextAreaSize>(size);\n const isSizeChanged = lastProcessedSizeRef.current !== size;\n lastProcessedSizeRef.current = size;\n const onHeightChangeRef = useRef(onHeightChange);\n onHeightChangeRef.current = onHeightChange;\n const rectsLengthRef = useRef<number | null>(null);\n\n useEffect(() => {\n if (!contentCloneRef.current) {\n return void 0;\n }\n\n const range = document.createRange();\n const observer = new ResizeObserver(() => {\n if (!contentCloneRef.current) {\n return;\n }\n\n range.selectNodeContents(contentCloneRef.current);\n const rects = range.getClientRects();\n if (rectsLengthRef.current !== rects.length && rectsLengthRef.current !== null) {\n onHeightChangeRef.current?.();\n }\n rectsLengthRef.current = rects.length;\n setActualMinHeight(MIN_HEIGHT_BY_SIZE[size][rects.length > 1 ? 1 : 0]);\n });\n observer.observe(contentCloneRef.current);\n return () => observer.disconnect();\n }, [layout, size, contentCloneRef]);\n\n let resultMinHeight = isSizeChanged || isMaxSizeHeight ? _minHeight : actualMinHeight;\n if (layout !== 'hug') {\n resultMinHeight = MIN_HEIGHT_BY_SIZE[size][1];\n }\n\n return { minHeight: resultMinHeight, maxedHeight: resultMinHeight === MIN_HEIGHT_BY_SIZE[size][1] };\n};\n"],"names":[],"mappings":";;;AAYa,MAAA,iBAAiB,GAAG,CAAC,EAC9B,IAAI,EACJ,SAAS,EACT,MAAM,EACN,eAAe,EACf,cAAc,GACM,KAAiD;IACrE,MAAM,UAAU,GAAG,SAAS,IAAI,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,UAAU,KAAK,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AACnE,IAAA,MAAM,oBAAoB,GAAG,MAAM,CAAe,IAAI,CAAC,CAAC;AACxD,IAAA,MAAM,aAAa,GAAG,oBAAoB,CAAC,OAAO,KAAK,IAAI,CAAC;AAC5D,IAAA,oBAAoB,CAAC,OAAO,GAAG,IAAI,CAAC;AACpC,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AACjD,IAAA,iBAAiB,CAAC,OAAO,GAAG,cAAc,CAAC;AAC3C,IAAA,MAAM,cAAc,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAEnD,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE;YAC1B,OAAO,KAAK,CAAC,CAAC;SACjB;AAED,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;AACrC,QAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAK;AACrC,YAAA,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE;gBAC1B,OAAO;aACV;AAED,YAAA,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;AAClD,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC;AACrC,YAAA,IAAI,cAAc,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,IAAI,cAAc,CAAC,OAAO,KAAK,IAAI,EAAE;AAC5E,gBAAA,iBAAiB,CAAC,OAAO,IAAI,CAAC;aACjC;AACD,YAAA,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;YACtC,kBAAkB,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC3E,SAAC,CAAC,CAAC;AACH,QAAA,QAAQ,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;AAC1C,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;KACtC,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC;AAEpC,IAAA,IAAI,eAAe,GAAG,aAAa,IAAI,eAAe,GAAG,UAAU,GAAG,eAAe,CAAC;AACtF,IAAA,IAAI,MAAM,KAAK,KAAK,EAAE;QAClB,eAAe,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;KACjD;AAED,IAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,eAAe,KAAK,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AACxG;;;;"}
package/useMinHeight.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import { type RefObject } from 'react';
2
- import { type TextAreaLayout, type TextAreaSize } from '@hh.ru/magritte-ui-textarea/types';
3
- export declare const useMinHeight: (size: TextAreaSize, minHeight: number | undefined, layout: TextAreaLayout, contentCloneRef: RefObject<HTMLElement>) => {
4
- minHeight: number;
5
- maxedHeight: boolean;
6
- };
package/useMinHeight.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"useMinHeight.js","sources":["../src/useMinHeight.ts"],"sourcesContent":["import { type RefObject, useState, useEffect, useRef } from 'react';\n\nimport { type TextAreaLayout, type TextAreaSize, MIN_HEIGHT_BY_SIZE } from '@hh.ru/magritte-ui-textarea/types';\n\nexport const useMinHeight = (\n size: TextAreaSize,\n minHeight: number | undefined,\n layout: TextAreaLayout,\n contentCloneRef: RefObject<HTMLElement>\n): { minHeight: number; maxedHeight: boolean } => {\n const _minHeight = minHeight ?? MIN_HEIGHT_BY_SIZE[size][1];\n const isMaxSizeHeight = _minHeight === MIN_HEIGHT_BY_SIZE[size][1];\n const [actualMinHeight, setActualMinHeight] = useState(_minHeight);\n const lastProcessedSizeRef = useRef<TextAreaSize>(size);\n const isSizeChanged = lastProcessedSizeRef.current !== size;\n lastProcessedSizeRef.current = size;\n\n useEffect(() => {\n if (!contentCloneRef.current || isMaxSizeHeight) {\n return void 0;\n }\n const range = document.createRange();\n\n const observer = new ResizeObserver(() => {\n if (!contentCloneRef.current) {\n return;\n }\n\n range.selectNodeContents(contentCloneRef.current);\n const rects = range.getClientRects();\n setActualMinHeight(MIN_HEIGHT_BY_SIZE[size][rects.length > 1 ? 1 : 0]);\n });\n observer.observe(contentCloneRef.current);\n return () => observer.disconnect();\n }, [layout, size, contentCloneRef, isMaxSizeHeight]);\n\n let resultMinHeight = isSizeChanged || isMaxSizeHeight ? _minHeight : actualMinHeight;\n if (layout !== 'hug') {\n resultMinHeight = MIN_HEIGHT_BY_SIZE[size][1];\n }\n\n return { minHeight: resultMinHeight, maxedHeight: resultMinHeight === MIN_HEIGHT_BY_SIZE[size][1] };\n};\n"],"names":[],"mappings":";;;AAIO,MAAM,YAAY,GAAG,CACxB,IAAkB,EAClB,SAA6B,EAC7B,MAAsB,EACtB,eAAuC,KACM;IAC7C,MAAM,UAAU,GAAG,SAAS,IAAI,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,UAAU,KAAK,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AACnE,IAAA,MAAM,oBAAoB,GAAG,MAAM,CAAe,IAAI,CAAC,CAAC;AACxD,IAAA,MAAM,aAAa,GAAG,oBAAoB,CAAC,OAAO,KAAK,IAAI,CAAC;AAC5D,IAAA,oBAAoB,CAAC,OAAO,GAAG,IAAI,CAAC;IAEpC,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,eAAe,CAAC,OAAO,IAAI,eAAe,EAAE;YAC7C,OAAO,KAAK,CAAC,CAAC;SACjB;AACD,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;AAErC,QAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAK;AACrC,YAAA,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE;gBAC1B,OAAO;aACV;AAED,YAAA,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;AAClD,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC;YACrC,kBAAkB,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC3E,SAAC,CAAC,CAAC;AACH,QAAA,QAAQ,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;AAC1C,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;KACtC,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;AAErD,IAAA,IAAI,eAAe,GAAG,aAAa,IAAI,eAAe,GAAG,UAAU,GAAG,eAAe,CAAC;AACtF,IAAA,IAAI,MAAM,KAAK,KAAK,EAAE;QAClB,eAAe,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;KACjD;AAED,IAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,eAAe,KAAK,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AACxG;;;;"}