@salutejs/plasma-new-hope 0.92.0-canary.1252.9663899697.0 → 0.92.0-canary.1261.9663085538.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (54) hide show
  1. package/cjs/components/Segment/SegmentProvider/SegmentProvider.js +1 -4
  2. package/cjs/components/Segment/SegmentProvider/SegmentProvider.js.map +1 -1
  3. package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +2 -9
  4. package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js.map +1 -1
  5. package/cjs/components/TextArea/TextArea.js +6 -4
  6. package/cjs/components/TextArea/TextArea.js.map +1 -1
  7. package/cjs/components/TextArea/hooks/useAutoResize.js +10 -4
  8. package/cjs/components/TextArea/hooks/useAutoResize.js.map +1 -1
  9. package/es/components/Segment/SegmentProvider/SegmentProvider.js +1 -4
  10. package/es/components/Segment/SegmentProvider/SegmentProvider.js.map +1 -1
  11. package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +2 -9
  12. package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js.map +1 -1
  13. package/es/components/TextArea/TextArea.js +7 -5
  14. package/es/components/TextArea/TextArea.js.map +1 -1
  15. package/es/components/TextArea/hooks/useAutoResize.js +10 -4
  16. package/es/components/TextArea/hooks/useAutoResize.js.map +1 -1
  17. package/package.json +2 -2
  18. package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +1 -6
  19. package/styled-components/cjs/components/Segment/SegmentProvider/SegmentProvider.js +1 -4
  20. package/styled-components/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +2 -9
  21. package/styled-components/cjs/components/TextArea/TextArea.js +11 -4
  22. package/styled-components/cjs/components/TextArea/TextArea.template-doc.mdx +45 -6
  23. package/styled-components/cjs/components/TextArea/hooks/useAutoResize.js +10 -4
  24. package/styled-components/es/components/Segment/Segment.template-doc.mdx +1 -6
  25. package/styled-components/es/components/Segment/SegmentProvider/SegmentProvider.js +1 -4
  26. package/styled-components/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +2 -9
  27. package/styled-components/es/components/TextArea/TextArea.js +12 -4
  28. package/styled-components/es/components/TextArea/TextArea.template-doc.mdx +45 -6
  29. package/styled-components/es/components/TextArea/hooks/useAutoResize.js +10 -4
  30. package/types/components/Segment/SegmentProvider/SegmentProvider.d.ts.map +1 -1
  31. package/types/components/Segment/SegmentProvider/SegmentProvider.types.d.ts +3 -4
  32. package/types/components/Segment/SegmentProvider/SegmentProvider.types.d.ts.map +1 -1
  33. package/types/components/Segment/ui/SegmentGroup/SegmentGroup.d.ts +0 -2
  34. package/types/components/Segment/ui/SegmentGroup/SegmentGroup.d.ts.map +1 -1
  35. package/types/components/Segment/ui/SegmentGroup/SegmentGroup.types.d.ts +0 -5
  36. package/types/components/Segment/ui/SegmentGroup/SegmentGroup.types.d.ts.map +1 -1
  37. package/types/components/TextArea/TextArea.d.ts +2 -2
  38. package/types/components/TextArea/TextArea.d.ts.map +1 -1
  39. package/types/components/TextArea/TextArea.types.d.ts +49 -23
  40. package/types/components/TextArea/TextArea.types.d.ts.map +1 -1
  41. package/types/components/TextArea/hooks/useAutoResize.d.ts +1 -1
  42. package/types/components/TextArea/hooks/useAutoResize.d.ts.map +1 -1
  43. package/types/examples/plasma_b2c/components/Segment/Segment.d.ts +0 -1
  44. package/types/examples/plasma_b2c/components/Segment/Segment.d.ts.map +1 -1
  45. package/types/examples/plasma_b2c/components/TextArea/TextArea.d.ts +31 -1
  46. package/types/examples/plasma_b2c/components/TextArea/TextArea.d.ts.map +1 -1
  47. package/types/examples/plasma_web/components/Segment/Segment.d.ts +0 -1
  48. package/types/examples/plasma_web/components/Segment/Segment.d.ts.map +1 -1
  49. package/types/examples/plasma_web/components/TextArea/TextArea.d.ts +31 -1
  50. package/types/examples/plasma_web/components/TextArea/TextArea.d.ts.map +1 -1
  51. package/types/examples/sds_engineer/components/Segment/Segment.d.ts +0 -1
  52. package/types/examples/sds_engineer/components/Segment/Segment.d.ts.map +1 -1
  53. package/types/examples/sds_engineer/components/TextArea/TextArea.d.ts +31 -1
  54. package/types/examples/sds_engineer/components/TextArea/TextArea.d.ts.map +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import React, { forwardRef, useState, createRef, useCallback } from 'react';\nimport { css } from '@linaria/core';\nimport { useResizeObserver } from '@salutejs/plasma-core';\n\nimport { cx } from '../../utils';\nimport type { RootProps } from '../../engines/types';\n\nimport { applyDynamicLabel } from './mixins';\nimport { useAutoResize, ROOT_FONT_SIZE } from './hooks';\nimport {\n StyledContent,\n StyledHelpers,\n StyledLeftHelper,\n StyledRightHelper,\n StyledLabel,\n StyledPlaceholder,\n StyledTextArea,\n StyledTextAreaWrapper,\n StyledContainer,\n} from './TextArea.styles';\nimport { classes } from './TextArea.tokens';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport type { TextAreaProps } from './TextArea.types';\n\nconst {\n innerPlaceholderUp,\n focusedOuterPlaceholderColor,\n hidePlaceHolder,\n styledContainer,\n styledTextArea,\n styledTextAreaWrapper,\n styledPlaceholder,\n styledHelpers,\n} = classes;\n\nconst base = css`\n ${applyDynamicLabel};\n\n position: relative;\n box-sizing: border-box;\n`;\n\n// TODO: Удалить после отказа от старых библиотек plasma-web / plasma-b2c\nconst fallbackStatusMap = {\n '': 'primary',\n success: 'positive',\n warning: 'warning',\n error: 'negative',\n};\n\n// TODO: Перенести этот метод в файл applyDynamicLabel.ts\nexport const getDynamicLabelClasses = (props: TextAreaProps, focused: boolean) => {\n const { readOnly, label, labelPlacement, autoResize, rows, value, size } = props;\n\n // Добавить класс отвечающий за изменение цвета плейсхолдера при фокусе\n const withFocusedOuterUpPlaceholder =\n !readOnly && focused && (!label || labelPlacement === 'outer') ? focusedOuterPlaceholderColor : undefined;\n\n // Добавить класс отвечающий за поднятие и уменьшение плейсхолдера\n const withInnerPlaceholderUp =\n labelPlacement === 'inner' &&\n label &&\n !autoResize &&\n !rows &&\n size !== 'xs' &&\n ((!readOnly && (value || focused)) || (readOnly && value))\n ? innerPlaceholderUp\n : undefined;\n\n // Добавить класс отвечающий за скрытие плейсхолдера\n const withHidePlaceholder =\n (value && !label) ||\n (labelPlacement === 'inner' && ((focused && !readOnly) || value) && label && (rows || autoResize)) ||\n (labelPlacement === 'outer' && value) ||\n (labelPlacement === 'inner' && size === 'xs' && value)\n ? hidePlaceHolder\n : undefined;\n\n return [withFocusedOuterUpPlaceholder, withInnerPlaceholderUp, withHidePlaceholder];\n};\n\nexport const textAreaRoot = (Root: RootProps<HTMLTextAreaElement, TextAreaProps>) =>\n forwardRef<HTMLTextAreaElement, TextAreaProps>((props, innerRef) => {\n const {\n helperText,\n status,\n resize,\n rightHelper,\n leftHelper,\n contentRight,\n autoResize = false,\n minAuto = 0,\n maxAuto,\n label,\n labelPlacement = 'inner',\n placeholder,\n defaultValue,\n height,\n width,\n value,\n disabled,\n size,\n view,\n id,\n style,\n className,\n readOnly,\n rows,\n cols,\n onChange,\n ...rest\n } = props;\n\n const [helperWidth, setHelperWidth] = useState<string>(width ? `${width}rem` : '100%');\n const [focused, setFocused] = useState(false);\n const [uncontrolledValue, setUncontrolledValue] = useState<string | undefined>();\n\n const outerRef = innerRef && 'current' in innerRef ? innerRef : createRef<HTMLTextAreaElement>();\n const hasHelper = Boolean(leftHelper || rightHelper || helperText);\n const overriddenView = status !== undefined ? fallbackStatusMap[status] : view;\n const textareaHelperId = id ? `${id}-helper` : undefined;\n const applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;\n const placeLabel = labelPlacement === 'inner' && label && size !== 'xs' ? label : placeholder;\n\n useResizeObserver(outerRef, (currentElement) => {\n const { width: inlineWidth, height: inlineHeight } = currentElement.style;\n\n if (inlineWidth || inlineHeight || cols) {\n const { width: elementWidth } = currentElement.getBoundingClientRect();\n setHelperWidth(`${elementWidth / ROOT_FONT_SIZE}rem`);\n }\n });\n\n useAutoResize(autoResize, outerRef, value, minAuto, maxAuto);\n\n const onFocusHandler = useCallback(() => {\n setFocused(true);\n }, []);\n const onBlurHandler = useCallback(() => {\n setFocused(false);\n }, []);\n\n const onChangeHandler = useCallback(\n (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n // INFO: Для крайне редких кейсов, когда value снаружи не контролируется\n if (value === undefined) {\n setUncontrolledValue(event?.target.value);\n }\n\n onChange?.(event);\n },\n [value, onChange],\n );\n\n const dynamicLabelClasses = getDynamicLabelClasses(\n {\n size,\n readOnly,\n label,\n labelPlacement,\n autoResize,\n rows,\n value: value || uncontrolledValue || defaultValue,\n },\n focused,\n );\n\n return (\n <Root\n view={overriddenView}\n size={size}\n disabled={disabled}\n readOnly={readOnly}\n style={style}\n className={className}\n >\n {label && labelPlacement === 'outer' && <StyledLabel>{label}</StyledLabel>}\n <StyledContainer\n className={cx(styledContainer, ...dynamicLabelClasses)}\n width={helperWidth}\n onFocus={onFocusHandler}\n onBlur={onBlurHandler}\n >\n {contentRight && <StyledContent>{contentRight}</StyledContent>}\n <StyledTextAreaWrapper className={styledTextAreaWrapper} hasHelper={hasHelper}>\n <StyledTextArea\n className={styledTextArea}\n id={id}\n hasContentRight={Boolean(contentRight)}\n hasHelper={hasHelper}\n applyCustomWidth={applyCustomWidth}\n ref={outerRef}\n disabled={disabled}\n height={autoResize ? minAuto : height}\n width={width}\n placeholder={placeLabel}\n aria-describedby={textareaHelperId}\n value={value}\n readOnly={readOnly}\n rows={rows}\n cols={cols}\n resize={resize}\n defaultValue={defaultValue}\n onChange={onChangeHandler}\n {...rest}\n />\n </StyledTextAreaWrapper>\n {hasHelper && (\n <StyledHelpers className={styledHelpers} id={textareaHelperId}>\n {(leftHelper || helperText) && (\n <StyledLeftHelper>{leftHelper || helperText}</StyledLeftHelper>\n )}\n {rightHelper && <StyledRightHelper>{rightHelper}</StyledRightHelper>}\n </StyledHelpers>\n )}\n {placeLabel && (\n <StyledPlaceholder\n hasContentRight={Boolean(contentRight)}\n className={styledPlaceholder}\n htmlFor={id}\n >\n {placeLabel}\n </StyledPlaceholder>\n )}\n </StyledContainer>\n </Root>\n );\n });\n\nexport const textAreaConfig = {\n name: 'TextArea',\n tag: 'div',\n layout: textAreaRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n readOnly: {\n attrs: true,\n },\n },\n defaults: {\n size: 'm',\n view: 'primary',\n },\n};\n"],"names":["innerPlaceholderUp","classes","focusedOuterPlaceholderColor","hidePlaceHolder","styledContainer","styledTextArea","styledTextAreaWrapper","styledPlaceholder","styledHelpers","base","fallbackStatusMap","success","warning","error","getDynamicLabelClasses","props","focused","readOnly","label","labelPlacement","autoResize","rows","value","size","withFocusedOuterUpPlaceholder","undefined","withInnerPlaceholderUp","withHidePlaceholder","textAreaRoot","Root","forwardRef","innerRef","helperText","status","resize","rightHelper","leftHelper","contentRight","_props$autoResize","_props$minAuto","minAuto","maxAuto","_props$labelPlacement","placeholder","defaultValue","height","width","disabled","view","id","style","className","cols","onChange","rest","_excluded","_useState","useState","concat","_useState2","_slicedToArray","helperWidth","setHelperWidth","_useState3","_useState4","setFocused","_useState5","_useState6","uncontrolledValue","setUncontrolledValue","outerRef","createRef","hasHelper","Boolean","overriddenView","textareaHelperId","applyCustomWidth","placeLabel","useResizeObserver","currentElement","_currentElement$style","inlineWidth","inlineHeight","_currentElement$getBo","getBoundingClientRect","elementWidth","ROOT_FONT_SIZE","useAutoResize","onFocusHandler","useCallback","onBlurHandler","onChangeHandler","event","target","dynamicLabelClasses","React","createElement","StyledLabel","StyledContainer","cx","apply","_toConsumableArray","onFocus","onBlur","StyledContent","StyledTextAreaWrapper","StyledTextArea","_extends","hasContentRight","ref","StyledHelpers","StyledLeftHelper","StyledRightHelper","StyledPlaceholder","htmlFor","textAreaConfig","name","tag","layout","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","defaults"],"mappings":"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"}
1
+ {"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import React, { forwardRef, useState, createRef, useCallback } from 'react';\nimport { css } from '@linaria/core';\nimport { useResizeObserver } from '@salutejs/plasma-core';\n\nimport { cx } from '../../utils';\nimport type { RootProps } from '../../engines/types';\n\nimport { applyDynamicLabel } from './mixins';\nimport { useAutoResize, ROOT_FONT_SIZE } from './hooks';\nimport {\n StyledContent,\n StyledHelpers,\n StyledLeftHelper,\n StyledRightHelper,\n StyledLabel,\n StyledPlaceholder,\n StyledTextArea,\n StyledTextAreaWrapper,\n StyledContainer,\n} from './TextArea.styles';\nimport { classes } from './TextArea.tokens';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport type { TextAreaProps } from './TextArea.types';\n\nconst {\n innerPlaceholderUp,\n focusedOuterPlaceholderColor,\n hidePlaceHolder,\n styledContainer,\n styledTextArea,\n styledTextAreaWrapper,\n styledPlaceholder,\n styledHelpers,\n} = classes;\n\nconst base = css`\n ${applyDynamicLabel};\n\n position: relative;\n box-sizing: border-box;\n`;\n\n// TODO: Удалить после отказа от старых библиотек plasma-web / plasma-b2c\nconst fallbackStatusMap = {\n '': 'primary',\n success: 'positive',\n warning: 'warning',\n error: 'negative',\n};\n\n// TODO: Перенести этот метод в файл applyDynamicLabel.ts\nexport const getDynamicLabelClasses = (props: TextAreaProps, focused: boolean) => {\n const { readOnly, label, labelPlacement, autoResize, rows, value, size } = props;\n\n // Добавить класс отвечающий за изменение цвета плейсхолдера при фокусе\n const withFocusedOuterUpPlaceholder =\n !readOnly && focused && (!label || labelPlacement === 'outer') ? focusedOuterPlaceholderColor : undefined;\n\n // Добавить класс отвечающий за поднятие и уменьшение плейсхолдера\n const withInnerPlaceholderUp =\n labelPlacement === 'inner' &&\n label &&\n !autoResize &&\n !rows &&\n size !== 'xs' &&\n ((!readOnly && (value || focused)) || (readOnly && value))\n ? innerPlaceholderUp\n : undefined;\n\n // Добавить класс отвечающий за скрытие плейсхолдера\n const withHidePlaceholder =\n (value && !label) ||\n (labelPlacement === 'inner' && ((focused && !readOnly) || value) && label && (rows || autoResize)) ||\n (labelPlacement === 'outer' && value) ||\n (labelPlacement === 'inner' && size === 'xs' && value)\n ? hidePlaceHolder\n : undefined;\n\n return [withFocusedOuterUpPlaceholder, withInnerPlaceholderUp, withHidePlaceholder];\n};\n\nexport const textAreaRoot = (Root: RootProps<HTMLTextAreaElement, TextAreaProps>) =>\n forwardRef<HTMLTextAreaElement, TextAreaProps>((props, innerRef) => {\n const {\n helperText,\n status,\n resize,\n rightHelper,\n leftHelper,\n contentRight,\n autoResize = false,\n minAuto = 0,\n maxAuto,\n label,\n labelPlacement = 'inner',\n placeholder,\n defaultValue,\n height,\n width,\n value,\n disabled,\n size,\n view,\n id,\n style,\n className,\n readOnly,\n rows,\n cols,\n onChange,\n ...rest\n } = props;\n\n const [helperWidth, setHelperWidth] = useState<string>(width ? `${width}rem` : '100%');\n const [focused, setFocused] = useState(false);\n const [uncontrolledValue, setUncontrolledValue] = useState<string | undefined>();\n\n const outerRef = innerRef && 'current' in innerRef ? innerRef : createRef<HTMLTextAreaElement>();\n const hasHelper = Boolean(leftHelper || rightHelper || helperText);\n const overriddenView = status !== undefined ? fallbackStatusMap[status] : view;\n const textareaHelperId = id ? `${id}-helper` : undefined;\n const applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;\n const placeLabel = labelPlacement === 'inner' && label && size !== 'xs' ? label : placeholder;\n\n useResizeObserver(outerRef, (currentElement) => {\n const { width: inlineWidth, height: inlineHeight } = currentElement.style;\n\n if (inlineWidth || inlineHeight || cols) {\n const { width: elementWidth } = currentElement.getBoundingClientRect();\n setHelperWidth(`${elementWidth / ROOT_FONT_SIZE}rem`);\n }\n });\n\n useAutoResize(autoResize, outerRef, value, minAuto, maxAuto);\n\n const onFocusHandler = useCallback(() => {\n setFocused(true);\n }, []);\n const onBlurHandler = useCallback(() => {\n setFocused(false);\n }, []);\n\n const onChangeHandler = useCallback(\n (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n // INFO: Для крайне редких кейсов, когда value снаружи не контролируется\n if (value === undefined) {\n setUncontrolledValue(event?.target.value);\n }\n\n onChange?.(event);\n },\n [value, onChange],\n );\n\n const dynamicLabelClasses = getDynamicLabelClasses(\n {\n size,\n readOnly,\n label,\n labelPlacement,\n value: value || uncontrolledValue || defaultValue,\n ...(rows ? { rows } : { autoResize }),\n },\n focused,\n );\n\n return (\n <Root\n view={overriddenView}\n size={size}\n disabled={disabled}\n readOnly={readOnly}\n style={style}\n className={className}\n >\n {label && labelPlacement === 'outer' && <StyledLabel>{label}</StyledLabel>}\n <StyledContainer\n className={cx(styledContainer, ...dynamicLabelClasses)}\n width={helperWidth}\n onFocus={onFocusHandler}\n onBlur={onBlurHandler}\n >\n {contentRight && <StyledContent>{contentRight}</StyledContent>}\n <StyledTextAreaWrapper className={styledTextAreaWrapper} hasHelper={hasHelper}>\n <StyledTextArea\n className={styledTextArea}\n id={id}\n hasContentRight={Boolean(contentRight)}\n hasHelper={hasHelper}\n applyCustomWidth={applyCustomWidth}\n ref={outerRef}\n disabled={disabled}\n height={autoResize ? minAuto : height}\n width={width}\n placeholder={placeLabel}\n aria-describedby={textareaHelperId}\n value={value}\n readOnly={readOnly}\n rows={rows}\n cols={cols}\n resize={resize}\n defaultValue={defaultValue}\n onChange={onChangeHandler}\n {...rest}\n />\n </StyledTextAreaWrapper>\n {hasHelper && (\n <StyledHelpers className={styledHelpers} id={textareaHelperId}>\n {(leftHelper || helperText) && (\n <StyledLeftHelper>{leftHelper || helperText}</StyledLeftHelper>\n )}\n {rightHelper && <StyledRightHelper>{rightHelper}</StyledRightHelper>}\n </StyledHelpers>\n )}\n {placeLabel && (\n <StyledPlaceholder\n hasContentRight={Boolean(contentRight)}\n className={styledPlaceholder}\n htmlFor={id}\n >\n {placeLabel}\n </StyledPlaceholder>\n )}\n </StyledContainer>\n </Root>\n );\n });\n\nexport const textAreaConfig = {\n name: 'TextArea',\n tag: 'div',\n layout: textAreaRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n readOnly: {\n attrs: true,\n },\n },\n defaults: {\n size: 'm',\n view: 'primary',\n },\n};\n"],"names":["innerPlaceholderUp","classes","focusedOuterPlaceholderColor","hidePlaceHolder","styledContainer","styledTextArea","styledTextAreaWrapper","styledPlaceholder","styledHelpers","base","fallbackStatusMap","success","warning","error","getDynamicLabelClasses","props","focused","readOnly","label","labelPlacement","autoResize","rows","value","size","withFocusedOuterUpPlaceholder","undefined","withInnerPlaceholderUp","withHidePlaceholder","textAreaRoot","Root","forwardRef","innerRef","helperText","status","resize","rightHelper","leftHelper","contentRight","_props$autoResize","_props$minAuto","minAuto","maxAuto","_props$labelPlacement","placeholder","defaultValue","height","width","disabled","view","id","style","className","cols","onChange","rest","_excluded","_useState","useState","concat","_useState2","_slicedToArray","helperWidth","setHelperWidth","_useState3","_useState4","setFocused","_useState5","_useState6","uncontrolledValue","setUncontrolledValue","outerRef","createRef","hasHelper","Boolean","overriddenView","textareaHelperId","applyCustomWidth","placeLabel","useResizeObserver","currentElement","_currentElement$style","inlineWidth","inlineHeight","_currentElement$getBo","getBoundingClientRect","elementWidth","ROOT_FONT_SIZE","useAutoResize","onFocusHandler","useCallback","onBlurHandler","onChangeHandler","event","target","dynamicLabelClasses","_objectSpread","React","createElement","StyledLabel","StyledContainer","cx","apply","_toConsumableArray","onFocus","onBlur","StyledContent","StyledTextAreaWrapper","StyledTextArea","_extends","hasContentRight","ref","StyledHelpers","StyledLeftHelper","StyledRightHelper","StyledPlaceholder","htmlFor","textAreaConfig","name","tag","layout","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","defaults"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  import { useRef, useEffect } from 'react';
2
2
 
3
3
  var ROOT_FONT_SIZE = 16;
4
- var useAutoResize = function useAutoResize(active, ref, value, minHeight, maxHeight) {
4
+ var useAutoResize = function useAutoResize(active, ref, value, minAuto, maxAuto) {
5
5
  var isManualResize = useRef(false);
6
6
  var previousHeight = useRef();
7
7
  useEffect(function () {
@@ -12,9 +12,15 @@ var useAutoResize = function useAutoResize(active, ref, value, minHeight, maxHei
12
12
  isManualResize.current = true;
13
13
  return;
14
14
  }
15
- ref.current.style.height = "".concat(minHeight ? minHeight + 1 : '0', "rem");
16
- var scrollHeight = ref.current.scrollHeight / ROOT_FONT_SIZE;
17
- var newHeight = Math.min(scrollHeight, maxHeight ? maxHeight + 1 : scrollHeight);
15
+ var style = getComputedStyle(ref.current);
16
+ var lineHeight = parseInt(style.lineHeight, 10);
17
+ var lineHeightInRem = lineHeight / ROOT_FONT_SIZE;
18
+ var minAutoHeight = minAuto ? minAuto * lineHeightInRem : 0;
19
+ ref.current.style.height = "".concat(minAutoHeight, "rem");
20
+ var lines = Math.floor(ref.current.scrollHeight / lineHeight);
21
+ var newScrollHeight = lines * lineHeightInRem;
22
+ var maxAutoHeight = maxAuto ? maxAuto * lineHeightInRem : newScrollHeight;
23
+ var newHeight = Math.min(newScrollHeight, maxAutoHeight);
18
24
  ref.current.style.height = "".concat(newHeight, "rem");
19
25
  previousHeight.current = newHeight;
20
26
  }
@@ -1 +1 @@
1
- {"version":3,"file":"useAutoResize.js","sources":["../../../../src/components/TextArea/hooks/useAutoResize.ts"],"sourcesContent":["import { useEffect, useRef, MutableRefObject } from 'react';\n\nexport const ROOT_FONT_SIZE = 16;\n\nexport const useAutoResize = <T extends HTMLTextAreaElement>(\n active: boolean,\n ref: MutableRefObject<T | null>,\n value?: string | ReadonlyArray<string> | number,\n minHeight?: number,\n maxHeight?: number,\n) => {\n const isManualResize = useRef<boolean>(false);\n const previousHeight = useRef<number | undefined>();\n\n useEffect(() => {\n if (active && ref && ref.current && !isManualResize.current) {\n // проверка на пользовательский resize (вручную)\n const height = ref.current.clientHeight / ROOT_FONT_SIZE;\n if (previousHeight.current !== undefined && previousHeight.current !== height) {\n isManualResize.current = true;\n return;\n }\n\n ref.current.style.height = `${minHeight ? minHeight + 1 : '0'}rem`;\n const scrollHeight = ref.current.scrollHeight / ROOT_FONT_SIZE;\n const newHeight = Math.min(scrollHeight, maxHeight ? maxHeight + 1 : scrollHeight);\n\n ref.current.style.height = `${newHeight}rem`;\n previousHeight.current = newHeight;\n }\n }, [ref, active, value]);\n};\n"],"names":["ROOT_FONT_SIZE","useAutoResize","active","ref","value","minHeight","maxHeight","isManualResize","useRef","previousHeight","useEffect","current","height","clientHeight","undefined","style","concat","scrollHeight","newHeight","Math","min"],"mappings":";;AAEO,IAAMA,cAAc,GAAG,GAAE;AAEnBC,IAAAA,aAAa,GAAG,SAAhBA,aAAaA,CACtBC,MAAe,EACfC,GAA+B,EAC/BC,KAA+C,EAC/CC,SAAkB,EAClBC,SAAkB,EACjB;AACD,EAAA,IAAMC,cAAc,GAAGC,MAAM,CAAU,KAAK,CAAC,CAAA;AAC7C,EAAA,IAAMC,cAAc,GAAGD,MAAM,EAAsB,CAAA;AAEnDE,EAAAA,SAAS,CAAC,YAAM;AACZ,IAAA,IAAIR,MAAM,IAAIC,GAAG,IAAIA,GAAG,CAACQ,OAAO,IAAI,CAACJ,cAAc,CAACI,OAAO,EAAE;AACzD;MACA,IAAMC,MAAM,GAAGT,GAAG,CAACQ,OAAO,CAACE,YAAY,GAAGb,cAAc,CAAA;MACxD,IAAIS,cAAc,CAACE,OAAO,KAAKG,SAAS,IAAIL,cAAc,CAACE,OAAO,KAAKC,MAAM,EAAE;QAC3EL,cAAc,CAACI,OAAO,GAAG,IAAI,CAAA;AAC7B,QAAA,OAAA;AACJ,OAAA;AAEAR,MAAAA,GAAG,CAACQ,OAAO,CAACI,KAAK,CAACH,MAAM,GAAAI,EAAAA,CAAAA,MAAA,CAAMX,SAAS,GAAGA,SAAS,GAAG,CAAC,GAAG,GAAG,EAAK,KAAA,CAAA,CAAA;MAClE,IAAMY,YAAY,GAAGd,GAAG,CAACQ,OAAO,CAACM,YAAY,GAAGjB,cAAc,CAAA;AAC9D,MAAA,IAAMkB,SAAS,GAAGC,IAAI,CAACC,GAAG,CAACH,YAAY,EAAEX,SAAS,GAAGA,SAAS,GAAG,CAAC,GAAGW,YAAY,CAAC,CAAA;MAElFd,GAAG,CAACQ,OAAO,CAACI,KAAK,CAACH,MAAM,GAAAI,EAAAA,CAAAA,MAAA,CAAME,SAAS,EAAK,KAAA,CAAA,CAAA;MAC5CT,cAAc,CAACE,OAAO,GAAGO,SAAS,CAAA;AACtC,KAAA;GACH,EAAE,CAACf,GAAG,EAAED,MAAM,EAAEE,KAAK,CAAC,CAAC,CAAA;AAC5B;;;;"}
1
+ {"version":3,"file":"useAutoResize.js","sources":["../../../../src/components/TextArea/hooks/useAutoResize.ts"],"sourcesContent":["import { useEffect, useRef, MutableRefObject } from 'react';\n\nexport const ROOT_FONT_SIZE = 16;\n\nexport const useAutoResize = <T extends HTMLTextAreaElement>(\n active: boolean,\n ref: MutableRefObject<T | null>,\n value?: string | ReadonlyArray<string> | number,\n minAuto?: number,\n maxAuto?: number,\n) => {\n const isManualResize = useRef<boolean>(false);\n const previousHeight = useRef<number | undefined>();\n\n useEffect(() => {\n if (active && ref && ref.current && !isManualResize.current) {\n // проверка на пользовательский resize (вручную)\n const height = ref.current.clientHeight / ROOT_FONT_SIZE;\n if (previousHeight.current !== undefined && previousHeight.current !== height) {\n isManualResize.current = true;\n return;\n }\n\n const style = getComputedStyle(ref.current);\n const lineHeight = parseInt(style.lineHeight, 10);\n const lineHeightInRem = lineHeight / ROOT_FONT_SIZE;\n\n const minAutoHeight = minAuto ? minAuto * lineHeightInRem : 0;\n ref.current.style.height = `${minAutoHeight}rem`;\n\n const lines = Math.floor(ref.current.scrollHeight / lineHeight);\n const newScrollHeight = lines * lineHeightInRem;\n\n const maxAutoHeight = maxAuto ? maxAuto * lineHeightInRem : newScrollHeight;\n\n const newHeight = Math.min(newScrollHeight, maxAutoHeight);\n\n ref.current.style.height = `${newHeight}rem`;\n previousHeight.current = newHeight;\n }\n }, [ref, active, value]);\n};\n"],"names":["ROOT_FONT_SIZE","useAutoResize","active","ref","value","minAuto","maxAuto","isManualResize","useRef","previousHeight","useEffect","current","height","clientHeight","undefined","style","getComputedStyle","lineHeight","parseInt","lineHeightInRem","minAutoHeight","concat","lines","Math","floor","scrollHeight","newScrollHeight","maxAutoHeight","newHeight","min"],"mappings":";;AAEO,IAAMA,cAAc,GAAG,GAAE;AAEnBC,IAAAA,aAAa,GAAG,SAAhBA,aAAaA,CACtBC,MAAe,EACfC,GAA+B,EAC/BC,KAA+C,EAC/CC,OAAgB,EAChBC,OAAgB,EACf;AACD,EAAA,IAAMC,cAAc,GAAGC,MAAM,CAAU,KAAK,CAAC,CAAA;AAC7C,EAAA,IAAMC,cAAc,GAAGD,MAAM,EAAsB,CAAA;AAEnDE,EAAAA,SAAS,CAAC,YAAM;AACZ,IAAA,IAAIR,MAAM,IAAIC,GAAG,IAAIA,GAAG,CAACQ,OAAO,IAAI,CAACJ,cAAc,CAACI,OAAO,EAAE;AACzD;MACA,IAAMC,MAAM,GAAGT,GAAG,CAACQ,OAAO,CAACE,YAAY,GAAGb,cAAc,CAAA;MACxD,IAAIS,cAAc,CAACE,OAAO,KAAKG,SAAS,IAAIL,cAAc,CAACE,OAAO,KAAKC,MAAM,EAAE;QAC3EL,cAAc,CAACI,OAAO,GAAG,IAAI,CAAA;AAC7B,QAAA,OAAA;AACJ,OAAA;AAEA,MAAA,IAAMI,KAAK,GAAGC,gBAAgB,CAACb,GAAG,CAACQ,OAAO,CAAC,CAAA;MAC3C,IAAMM,UAAU,GAAGC,QAAQ,CAACH,KAAK,CAACE,UAAU,EAAE,EAAE,CAAC,CAAA;AACjD,MAAA,IAAME,eAAe,GAAGF,UAAU,GAAGjB,cAAc,CAAA;MAEnD,IAAMoB,aAAa,GAAGf,OAAO,GAAGA,OAAO,GAAGc,eAAe,GAAG,CAAC,CAAA;MAC7DhB,GAAG,CAACQ,OAAO,CAACI,KAAK,CAACH,MAAM,GAAAS,EAAAA,CAAAA,MAAA,CAAMD,aAAa,EAAK,KAAA,CAAA,CAAA;AAEhD,MAAA,IAAME,KAAK,GAAGC,IAAI,CAACC,KAAK,CAACrB,GAAG,CAACQ,OAAO,CAACc,YAAY,GAAGR,UAAU,CAAC,CAAA;AAC/D,MAAA,IAAMS,eAAe,GAAGJ,KAAK,GAAGH,eAAe,CAAA;MAE/C,IAAMQ,aAAa,GAAGrB,OAAO,GAAGA,OAAO,GAAGa,eAAe,GAAGO,eAAe,CAAA;MAE3E,IAAME,SAAS,GAAGL,IAAI,CAACM,GAAG,CAACH,eAAe,EAAEC,aAAa,CAAC,CAAA;MAE1DxB,GAAG,CAACQ,OAAO,CAACI,KAAK,CAACH,MAAM,GAAAS,EAAAA,CAAAA,MAAA,CAAMO,SAAS,EAAK,KAAA,CAAA,CAAA;MAC5CnB,cAAc,CAACE,OAAO,GAAGiB,SAAS,CAAA;AACtC,KAAA;GACH,EAAE,CAACzB,GAAG,EAAED,MAAM,EAAEE,KAAK,CAAC,CAAC,CAAA;AAC5B;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/plasma-new-hope",
3
- "version": "0.92.0-canary.1252.9663899697.0",
3
+ "version": "0.92.0-canary.1261.9663085538.0",
4
4
  "description": "Salute Design System blueprint",
5
5
  "main": "cjs/index.js",
6
6
  "module": "es/index.js",
@@ -105,5 +105,5 @@
105
105
  "react-popper": "2.3.0",
106
106
  "storeon": "3.1.5"
107
107
  },
108
- "gitHead": "9f089493138ac54e1c09864574b2564ec0f8e2dd"
108
+ "gitHead": "4275dec0ca7abf4f61501a6aedcac2197cddac85"
109
109
  }
@@ -24,11 +24,6 @@ import { PropsTable, Description } from '@site/src/components';
24
24
  Оберните в `SegmentProvider` компонент, в котором будут использованы SegmentGroup с SegmentItem.
25
25
  Внутри данного провайдера есть доступ к хуку `useSegment`.
26
26
 
27
- ### Выбранные по умолчанию SegmentItem
28
-
29
- Можно задать выбранные по умолчанию сегменты с помощью свойства `defaultSelected`.
30
- Оно передается в `SegmentGroup`, в виде массива `value` элеметов.
31
-
32
27
  ```tsx live
33
28
  import React from 'react';
34
29
  import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
@@ -42,7 +37,7 @@ export function App() {
42
37
  return (
43
38
  <>
44
39
  <div>Выбранные элементы: {selectedSegmentItems.join(', ')}</div>
45
- <SegmentGroup defaultSelected={['label_1']} view='filled' selectionMode='multiple' filledBackground pilled>
40
+ <SegmentGroup view='filled' selectionMode='multiple' filledBackground pilled>
46
41
  {items.map((_, i) => (
47
42
  <SegmentItem
48
43
  label={`Label ${i}`}
@@ -62,7 +62,6 @@ var SegmentProvider = exports.SegmentProvider = function SegmentProvider(_ref) {
62
62
  }, [selectionMode, setSelectedSegmentItems]);
63
63
  var contextValue = {
64
64
  selectedSegmentItems: selectedSegmentItems,
65
- setSelectedSegmentItems: setSelectedSegmentItems,
66
65
  handleSelect: handleSelect,
67
66
  selectionMode: selectionMode,
68
67
  setSelectionMode: setSelectionMode,
@@ -70,9 +69,7 @@ var SegmentProvider = exports.SegmentProvider = function SegmentProvider(_ref) {
70
69
  setDisabledGroup: setDisabledGroup
71
70
  };
72
71
  (0, _react.useEffect)(function () {
73
- if (selectionMode === 'single' && (selectedSegmentItems === null || selectedSegmentItems === void 0 ? void 0 : selectedSegmentItems.length) > 0) {
74
- setSelectedSegmentItems([selectedSegmentItems[0]]);
75
- }
72
+ setSelectedSegmentItems([]);
76
73
  }, [selectionMode]);
77
74
  return /*#__PURE__*/_react["default"].createElement(SegmentContext.Provider, {
78
75
  value: contextValue
@@ -18,7 +18,7 @@ var _base4 = /*#__PURE__*/require("./variations/_pilled/base");
18
18
  var _base5 = /*#__PURE__*/require("./variations/_filledBackgound/base");
19
19
  var _base6 = /*#__PURE__*/require("./variations/_stretch/base");
20
20
  var _SegmentGroup = /*#__PURE__*/require("./SegmentGroup.styles");
21
- var _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children", "defaultSelected"];
21
+ var _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children"];
22
22
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
23
23
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
24
24
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -43,12 +43,10 @@ var segmentGroupRoot = exports.segmentGroupRoot = function segmentGroupRoot(Root
43
43
  size = props.size,
44
44
  view = props.view,
45
45
  children = props.children,
46
- defaultSelected = props.defaultSelected,
47
46
  rest = _objectWithoutProperties(props, _excluded);
48
47
  var _useSegmentInner = (0, _SegmentProvider.useSegmentInner)(),
49
48
  setSelectionMode = _useSegmentInner.setSelectionMode,
50
- setDisabledGroup = _useSegmentInner.setDisabledGroup,
51
- setSelectedSegmentItems = _useSegmentInner.setSelectedSegmentItems;
49
+ setDisabledGroup = _useSegmentInner.setDisabledGroup;
52
50
  var _useState = (0, _react.useState)(0),
53
51
  _useState2 = _slicedToArray(_useState, 2),
54
52
  index = _useState2[0],
@@ -132,11 +130,6 @@ var segmentGroupRoot = exports.segmentGroupRoot = function segmentGroupRoot(Root
132
130
  selectionMode && setSelectionMode(selectionMode);
133
131
  setDisabledGroup(disabled);
134
132
  }, [selectionMode, disabled]);
135
- (0, _react.useEffect)(function () {
136
- if (defaultSelected !== null && defaultSelected !== void 0 && defaultSelected.length) {
137
- setSelectedSegmentItems(defaultSelected);
138
- }
139
- }, [defaultSelected]);
140
133
  (0, _react.useEffect)(function () {
141
134
  var _trackRef$current;
142
135
  // Intersection observer для первого сегмента
@@ -24,6 +24,11 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableTo
24
24
  function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
25
25
  function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
26
26
  function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
27
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
28
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
29
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
30
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
31
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
27
32
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
28
33
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
29
34
  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -144,15 +149,17 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
144
149
  }
145
150
  onChange === null || onChange === void 0 || onChange(event);
146
151
  }, [value, onChange]);
147
- var dynamicLabelClasses = getDynamicLabelClasses({
152
+ var dynamicLabelClasses = getDynamicLabelClasses(_objectSpread({
148
153
  size: size,
149
154
  readOnly: readOnly,
150
155
  label: label,
151
156
  labelPlacement: labelPlacement,
152
- autoResize: autoResize,
153
- rows: rows,
154
157
  value: value || uncontrolledValue || defaultValue
155
- }, focused);
158
+ }, rows ? {
159
+ rows: rows
160
+ } : {
161
+ autoResize: autoResize
162
+ }), focused);
156
163
  return /*#__PURE__*/_react["default"].createElement(Root, {
157
164
  view: overriddenView,
158
165
  size: size,
@@ -11,7 +11,7 @@ import { PropsTable, Description } from '@site/src/components';
11
11
 
12
12
  ## Использование
13
13
  Компонент `TextArea` может содержать иконку (или кнопку) справа.
14
- Для этого используйте свойство и `contentRight`:
14
+ Для этого используйте свойство `contentRight`:
15
15
 
16
16
  ```tsx live
17
17
  import React from 'react';
@@ -31,16 +31,55 @@ export function App() {
31
31
  }
32
32
  ```
33
33
 
34
- Также можно регулировать высоту и ширину, используя свойства `height` и `width`,
34
+ ### Размеры компонента
35
+ Высоту и ширину можно регулировать с помощью свойств `height` и `width`,
35
36
  указав значения в `rem` или соответствующие свойствам css значения.
37
+ `height` и `width` отвечают за **всю** высоту и ширину компонента.
36
38
 
37
- ## Autoresize
39
+ ```tsx live
40
+ import React from 'react';
41
+ import { TextArea } from '@salutejs/{{ package }}';
42
+
43
+ export function App() {
44
+ return (
45
+ <div>
46
+ <TextArea
47
+ placeholder="Введите значение"
48
+ defaultValue="Значение"
49
+ height={10}
50
+ width={20}
51
+ />
52
+ </div>
53
+ );
54
+ }
55
+ ```
56
+
57
+ Свойства `rows` и `cols` указываются в абсолютных единицах, отвечают за фиксированное количество строк и столбцов.
58
+
59
+ ```tsx live
60
+ import React from 'react';
61
+ import { TextArea } from '@salutejs/{{ package }}';
62
+
63
+ export function App() {
64
+ return (
65
+ <div>
66
+ <TextArea
67
+ placeholder="Введите значение"
68
+ defaultValue="Значение"
69
+ rows={5}
70
+ cols={20}
71
+ />
72
+ </div>
73
+ );
74
+ }
75
+ ```
76
+
77
+ ### Autoresize
38
78
  Также можно включить автоматическое регулирование высоты поля ввода по длине контента внутри (параметра `value`).
39
79
  Для этого необходимо использовать свойство `autoResize`.
40
80
  При этом, если пользователь вручную регулирует высоту(`resize`), то она так и остается пользовательской.
41
81
 
42
- В этом режиме можно указать крайние значения высоты поля ввода, используя свойства `autoMin`, `autoMax`,
43
- указав их в `rem`.
82
+ Свойства `minAuto`, `maxAuto` указываются в абсолютных единицах и отвечают за минимальное и максимальное количество строк.
44
83
 
45
84
  ```tsx live
46
85
  import React from 'react';
@@ -85,4 +124,4 @@ export function App() {
85
124
  </div>
86
125
  );
87
126
  }
88
- ```
127
+ ```
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.useAutoResize = exports.ROOT_FONT_SIZE = void 0;
7
7
  var _react = /*#__PURE__*/require("react");
8
8
  var ROOT_FONT_SIZE = exports.ROOT_FONT_SIZE = 16;
9
- var useAutoResize = exports.useAutoResize = function useAutoResize(active, ref, value, minHeight, maxHeight) {
9
+ var useAutoResize = exports.useAutoResize = function useAutoResize(active, ref, value, minAuto, maxAuto) {
10
10
  var isManualResize = (0, _react.useRef)(false);
11
11
  var previousHeight = (0, _react.useRef)();
12
12
  (0, _react.useEffect)(function () {
@@ -17,9 +17,15 @@ var useAutoResize = exports.useAutoResize = function useAutoResize(active, ref,
17
17
  isManualResize.current = true;
18
18
  return;
19
19
  }
20
- ref.current.style.height = "".concat(minHeight ? minHeight + 1 : '0', "rem");
21
- var scrollHeight = ref.current.scrollHeight / ROOT_FONT_SIZE;
22
- var newHeight = Math.min(scrollHeight, maxHeight ? maxHeight + 1 : scrollHeight);
20
+ var style = getComputedStyle(ref.current);
21
+ var lineHeight = parseInt(style.lineHeight, 10);
22
+ var lineHeightInRem = lineHeight / ROOT_FONT_SIZE;
23
+ var minAutoHeight = minAuto ? minAuto * lineHeightInRem : 0;
24
+ ref.current.style.height = "".concat(minAutoHeight, "rem");
25
+ var lines = Math.floor(ref.current.scrollHeight / lineHeight);
26
+ var newScrollHeight = lines * lineHeightInRem;
27
+ var maxAutoHeight = maxAuto ? maxAuto * lineHeightInRem : newScrollHeight;
28
+ var newHeight = Math.min(newScrollHeight, maxAutoHeight);
23
29
  ref.current.style.height = "".concat(newHeight, "rem");
24
30
  previousHeight.current = newHeight;
25
31
  }
@@ -24,11 +24,6 @@ import { PropsTable, Description } from '@site/src/components';
24
24
  Оберните в `SegmentProvider` компонент, в котором будут использованы SegmentGroup с SegmentItem.
25
25
  Внутри данного провайдера есть доступ к хуку `useSegment`.
26
26
 
27
- ### Выбранные по умолчанию SegmentItem
28
-
29
- Можно задать выбранные по умолчанию сегменты с помощью свойства `defaultSelected`.
30
- Оно передается в `SegmentGroup`, в виде массива `value` элеметов.
31
-
32
27
  ```tsx live
33
28
  import React from 'react';
34
29
  import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
@@ -42,7 +37,7 @@ export function App() {
42
37
  return (
43
38
  <>
44
39
  <div>Выбранные элементы: {selectedSegmentItems.join(', ')}</div>
45
- <SegmentGroup defaultSelected={['label_1']} view='filled' selectionMode='multiple' filledBackground pilled>
40
+ <SegmentGroup view='filled' selectionMode='multiple' filledBackground pilled>
46
41
  {items.map((_, i) => (
47
42
  <SegmentItem
48
43
  label={`Label ${i}`}
@@ -53,7 +53,6 @@ export var SegmentProvider = function SegmentProvider(_ref) {
53
53
  }, [selectionMode, setSelectedSegmentItems]);
54
54
  var contextValue = {
55
55
  selectedSegmentItems: selectedSegmentItems,
56
- setSelectedSegmentItems: setSelectedSegmentItems,
57
56
  handleSelect: handleSelect,
58
57
  selectionMode: selectionMode,
59
58
  setSelectionMode: setSelectionMode,
@@ -61,9 +60,7 @@ export var SegmentProvider = function SegmentProvider(_ref) {
61
60
  setDisabledGroup: setDisabledGroup
62
61
  };
63
62
  useEffect(function () {
64
- if (selectionMode === 'single' && (selectedSegmentItems === null || selectedSegmentItems === void 0 ? void 0 : selectedSegmentItems.length) > 0) {
65
- setSelectedSegmentItems([selectedSegmentItems[0]]);
66
- }
63
+ setSelectedSegmentItems([]);
67
64
  }, [selectionMode]);
68
65
  return /*#__PURE__*/React.createElement(SegmentContext.Provider, {
69
66
  value: contextValue
@@ -1,4 +1,4 @@
1
- var _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children", "defaultSelected"];
1
+ var _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children"];
2
2
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
3
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
4
4
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -34,12 +34,10 @@ export var segmentGroupRoot = function segmentGroupRoot(Root) {
34
34
  size = props.size,
35
35
  view = props.view,
36
36
  children = props.children,
37
- defaultSelected = props.defaultSelected,
38
37
  rest = _objectWithoutProperties(props, _excluded);
39
38
  var _useSegmentInner = useSegmentInner(),
40
39
  setSelectionMode = _useSegmentInner.setSelectionMode,
41
- setDisabledGroup = _useSegmentInner.setDisabledGroup,
42
- setSelectedSegmentItems = _useSegmentInner.setSelectedSegmentItems;
40
+ setDisabledGroup = _useSegmentInner.setDisabledGroup;
43
41
  var _useState = useState(0),
44
42
  _useState2 = _slicedToArray(_useState, 2),
45
43
  index = _useState2[0],
@@ -123,11 +121,6 @@ export var segmentGroupRoot = function segmentGroupRoot(Root) {
123
121
  selectionMode && setSelectionMode(selectionMode);
124
122
  setDisabledGroup(disabled);
125
123
  }, [selectionMode, disabled]);
126
- useEffect(function () {
127
- if (defaultSelected !== null && defaultSelected !== void 0 && defaultSelected.length) {
128
- setSelectedSegmentItems(defaultSelected);
129
- }
130
- }, [defaultSelected]);
131
124
  useEffect(function () {
132
125
  var _trackRef$current;
133
126
  // Intersection observer для первого сегмента
@@ -1,9 +1,15 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
1
2
  var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
2
3
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
4
  function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
4
5
  function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
5
6
  function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
6
7
  function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
8
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
9
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
10
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
11
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
12
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
7
13
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
8
14
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
9
15
  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -135,15 +141,17 @@ export var textAreaRoot = function textAreaRoot(Root) {
135
141
  }
136
142
  onChange === null || onChange === void 0 || onChange(event);
137
143
  }, [value, onChange]);
138
- var dynamicLabelClasses = getDynamicLabelClasses({
144
+ var dynamicLabelClasses = getDynamicLabelClasses(_objectSpread({
139
145
  size: size,
140
146
  readOnly: readOnly,
141
147
  label: label,
142
148
  labelPlacement: labelPlacement,
143
- autoResize: autoResize,
144
- rows: rows,
145
149
  value: value || uncontrolledValue || defaultValue
146
- }, focused);
150
+ }, rows ? {
151
+ rows: rows
152
+ } : {
153
+ autoResize: autoResize
154
+ }), focused);
147
155
  return /*#__PURE__*/React.createElement(Root, {
148
156
  view: overriddenView,
149
157
  size: size,
@@ -11,7 +11,7 @@ import { PropsTable, Description } from '@site/src/components';
11
11
 
12
12
  ## Использование
13
13
  Компонент `TextArea` может содержать иконку (или кнопку) справа.
14
- Для этого используйте свойство и `contentRight`:
14
+ Для этого используйте свойство `contentRight`:
15
15
 
16
16
  ```tsx live
17
17
  import React from 'react';
@@ -31,16 +31,55 @@ export function App() {
31
31
  }
32
32
  ```
33
33
 
34
- Также можно регулировать высоту и ширину, используя свойства `height` и `width`,
34
+ ### Размеры компонента
35
+ Высоту и ширину можно регулировать с помощью свойств `height` и `width`,
35
36
  указав значения в `rem` или соответствующие свойствам css значения.
37
+ `height` и `width` отвечают за **всю** высоту и ширину компонента.
36
38
 
37
- ## Autoresize
39
+ ```tsx live
40
+ import React from 'react';
41
+ import { TextArea } from '@salutejs/{{ package }}';
42
+
43
+ export function App() {
44
+ return (
45
+ <div>
46
+ <TextArea
47
+ placeholder="Введите значение"
48
+ defaultValue="Значение"
49
+ height={10}
50
+ width={20}
51
+ />
52
+ </div>
53
+ );
54
+ }
55
+ ```
56
+
57
+ Свойства `rows` и `cols` указываются в абсолютных единицах, отвечают за фиксированное количество строк и столбцов.
58
+
59
+ ```tsx live
60
+ import React from 'react';
61
+ import { TextArea } from '@salutejs/{{ package }}';
62
+
63
+ export function App() {
64
+ return (
65
+ <div>
66
+ <TextArea
67
+ placeholder="Введите значение"
68
+ defaultValue="Значение"
69
+ rows={5}
70
+ cols={20}
71
+ />
72
+ </div>
73
+ );
74
+ }
75
+ ```
76
+
77
+ ### Autoresize
38
78
  Также можно включить автоматическое регулирование высоты поля ввода по длине контента внутри (параметра `value`).
39
79
  Для этого необходимо использовать свойство `autoResize`.
40
80
  При этом, если пользователь вручную регулирует высоту(`resize`), то она так и остается пользовательской.
41
81
 
42
- В этом режиме можно указать крайние значения высоты поля ввода, используя свойства `autoMin`, `autoMax`,
43
- указав их в `rem`.
82
+ Свойства `minAuto`, `maxAuto` указываются в абсолютных единицах и отвечают за минимальное и максимальное количество строк.
44
83
 
45
84
  ```tsx live
46
85
  import React from 'react';
@@ -85,4 +124,4 @@ export function App() {
85
124
  </div>
86
125
  );
87
126
  }
88
- ```
127
+ ```
@@ -1,6 +1,6 @@
1
1
  import { useEffect, useRef } from 'react';
2
2
  export var ROOT_FONT_SIZE = 16;
3
- export var useAutoResize = function useAutoResize(active, ref, value, minHeight, maxHeight) {
3
+ export var useAutoResize = function useAutoResize(active, ref, value, minAuto, maxAuto) {
4
4
  var isManualResize = useRef(false);
5
5
  var previousHeight = useRef();
6
6
  useEffect(function () {
@@ -11,9 +11,15 @@ export var useAutoResize = function useAutoResize(active, ref, value, minHeight,
11
11
  isManualResize.current = true;
12
12
  return;
13
13
  }
14
- ref.current.style.height = "".concat(minHeight ? minHeight + 1 : '0', "rem");
15
- var scrollHeight = ref.current.scrollHeight / ROOT_FONT_SIZE;
16
- var newHeight = Math.min(scrollHeight, maxHeight ? maxHeight + 1 : scrollHeight);
14
+ var style = getComputedStyle(ref.current);
15
+ var lineHeight = parseInt(style.lineHeight, 10);
16
+ var lineHeightInRem = lineHeight / ROOT_FONT_SIZE;
17
+ var minAutoHeight = minAuto ? minAuto * lineHeightInRem : 0;
18
+ ref.current.style.height = "".concat(minAutoHeight, "rem");
19
+ var lines = Math.floor(ref.current.scrollHeight / lineHeight);
20
+ var newScrollHeight = lines * lineHeightInRem;
21
+ var maxAutoHeight = maxAuto ? maxAuto * lineHeightInRem : newScrollHeight;
22
+ var newHeight = Math.min(newScrollHeight, maxAutoHeight);
17
23
  ref.current.style.height = "".concat(newHeight, "rem");
18
24
  previousHeight.current = newHeight;
19
25
  }
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Segment/SegmentProvider/SegmentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAC3F,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAwB,MAAM,yBAAyB,CAAC;AAEnF,eAAO,MAAM,cAAc,+CAA2D,CAAC;AAEvF,eAAO,MAAM,eAAe,0BAM3B,CAAC;AAEF,eAAO,MAAM,UAAU;;CAGtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,iBAAiB,CAoCjD,CAAC"}
1
+ {"version":3,"file":"SegmentProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Segment/SegmentProvider/SegmentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAC3F,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAwB,MAAM,yBAAyB,CAAC;AAEnF,eAAO,MAAM,cAAc,+CAA2D,CAAC;AAEvF,eAAO,MAAM,eAAe,0BAM3B,CAAC;AAEF,eAAO,MAAM,UAAU;;CAGtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,iBAAiB,CAiCjD,CAAC"}