@foxford/ui 2.82.0-beta-2c266bb-20251002 → 2.84.0-beta-4d7a4d1-20251008
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/AccordionItem/AccordionItem.js +1 -1
- package/components/AccordionItem/AccordionItem.js.map +1 -1
- package/components/AccordionItem/AccordionItem.mjs +1 -1
- package/components/AccordionItem/AccordionItem.mjs.map +1 -1
- package/components/AccordionItem/useAccordionPanel.js +2 -0
- package/components/AccordionItem/useAccordionPanel.js.map +1 -0
- package/components/AccordionItem/useAccordionPanel.mjs +2 -0
- package/components/AccordionItem/useAccordionPanel.mjs.map +1 -0
- package/components/AccordionItem/useAccordionPanelProps.js +2 -0
- package/components/AccordionItem/useAccordionPanelProps.js.map +1 -0
- package/components/AccordionItem/useAccordionPanelProps.mjs +2 -0
- package/components/AccordionItem/useAccordionPanelProps.mjs.map +1 -0
- package/components/Dropdown/Dropdown.js +1 -1
- package/components/Dropdown/Dropdown.js.map +1 -1
- package/components/Dropdown/Dropdown.mjs +1 -1
- package/components/Dropdown/Dropdown.mjs.map +1 -1
- package/components/Dropdown/sizes.js +1 -1
- package/components/Dropdown/sizes.js.map +1 -1
- package/components/Dropdown/sizes.mjs +1 -1
- package/components/Dropdown/sizes.mjs.map +1 -1
- package/components/FormInput/FormInput.js +1 -1
- package/components/FormInput/FormInput.js.map +1 -1
- package/components/FormInput/FormInput.mjs +1 -1
- package/components/FormInput/FormInput.mjs.map +1 -1
- package/components/FormInput/sizes.js +2 -0
- package/components/FormInput/sizes.js.map +1 -0
- package/components/FormInput/sizes.mjs +2 -0
- package/components/FormInput/sizes.mjs.map +1 -0
- package/components/FormInput/style.js +1 -1
- package/components/FormInput/style.js.map +1 -1
- package/components/FormInput/style.mjs +1 -1
- package/components/FormInput/style.mjs.map +1 -1
- package/components/FormInputLabel/FormInputLabel.js +1 -1
- package/components/FormInputLabel/FormInputLabel.js.map +1 -1
- package/components/FormInputLabel/FormInputLabel.mjs +1 -1
- package/components/FormInputLabel/FormInputLabel.mjs.map +1 -1
- package/components/FormInputLabel/sizes.js +2 -0
- package/components/FormInputLabel/sizes.js.map +1 -0
- package/components/FormInputLabel/sizes.mjs +2 -0
- package/components/FormInputLabel/sizes.mjs.map +1 -0
- package/components/FormInputLabel/style.js +1 -1
- package/components/FormInputLabel/style.js.map +1 -1
- package/components/FormInputLabel/style.mjs +1 -1
- package/components/FormInputLabel/style.mjs.map +1 -1
- package/components/Input/Input.js +1 -1
- package/components/Input/Input.js.map +1 -1
- package/components/Input/Input.mjs +1 -1
- package/components/Input/Input.mjs.map +1 -1
- package/components/Input/sizes.js +2 -0
- package/components/Input/sizes.js.map +1 -0
- package/components/Input/sizes.mjs +2 -0
- package/components/Input/sizes.mjs.map +1 -0
- package/components/InputLabel/InputLabel.js +2 -0
- package/components/InputLabel/InputLabel.js.map +1 -0
- package/components/InputLabel/InputLabel.mjs +2 -0
- package/components/InputLabel/InputLabel.mjs.map +1 -0
- package/components/InputLabel/sizes.js +2 -0
- package/components/InputLabel/sizes.js.map +1 -0
- package/components/InputLabel/sizes.mjs +2 -0
- package/components/InputLabel/sizes.mjs.map +1 -0
- package/components/InputLabel/style.js +2 -0
- package/components/InputLabel/style.js.map +1 -0
- package/components/InputLabel/style.mjs +2 -0
- package/components/InputLabel/style.mjs.map +1 -0
- package/components/ProgressCircle/ProgressCircle.js +1 -1
- package/components/ProgressCircle/ProgressCircle.js.map +1 -1
- package/components/ProgressCircle/ProgressCircle.mjs +1 -1
- package/components/ProgressCircle/ProgressCircle.mjs.map +1 -1
- package/components/ProgressLine/style.js +1 -1
- package/components/ProgressLine/style.js.map +1 -1
- package/components/ProgressLine/style.mjs +1 -1
- package/components/ProgressLine/style.mjs.map +1 -1
- package/components/Textarea/Textarea.js +1 -1
- package/components/Textarea/Textarea.js.map +1 -1
- package/components/Textarea/Textarea.mjs +1 -1
- package/components/Textarea/Textarea.mjs.map +1 -1
- package/components/Textarea/sizes.js +2 -0
- package/components/Textarea/sizes.js.map +1 -0
- package/components/Textarea/sizes.mjs +2 -0
- package/components/Textarea/sizes.mjs.map +1 -0
- package/components/Textarea/style.js +1 -1
- package/components/Textarea/style.js.map +1 -1
- package/components/Textarea/style.mjs +1 -1
- package/components/Textarea/style.mjs.map +1 -1
- package/dts/index.d.ts +434 -285
- package/hooks/useClickOutside.js +1 -1
- package/hooks/useClickOutside.js.map +1 -1
- package/hooks/useClickOutside.mjs +1 -1
- package/hooks/useClickOutside.mjs.map +1 -1
- package/hooks/useResizeObserver.js +1 -1
- package/hooks/useResizeObserver.js.map +1 -1
- package/hooks/useResizeObserver.mjs +1 -1
- package/hooks/useResizeObserver.mjs.map +1 -1
- package/package.json +2 -2
- package/shared/utils/dom.js +1 -1
- package/shared/utils/dom.js.map +1 -1
- package/shared/utils/dom.mjs +1 -1
- package/shared/utils/dom.mjs.map +1 -1
- package/shared/utils/getDomTargets.js +2 -0
- package/shared/utils/getDomTargets.js.map +1 -0
- package/shared/utils/getDomTargets.mjs +2 -0
- package/shared/utils/getDomTargets.mjs.map +1 -0
- package/shared/utils/getProgressPercent.js +2 -0
- package/shared/utils/getProgressPercent.js.map +1 -0
- package/shared/utils/getProgressPercent.mjs +2 -0
- package/shared/utils/getProgressPercent.mjs.map +1 -0
- package/shared/utils/misc.js +1 -1
- package/shared/utils/misc.js.map +1 -1
- package/shared/utils/misc.mjs +1 -1
- package/shared/utils/misc.mjs.map +1 -1
- package/components/AccordionItem/hooks.js +0 -2
- package/components/AccordionItem/hooks.js.map +0 -1
- package/components/AccordionItem/hooks.mjs +0 -2
- package/components/AccordionItem/hooks.mjs.map +0 -1
- package/components/FormInputLabel/constants.js +0 -2
- package/components/FormInputLabel/constants.js.map +0 -1
- package/components/FormInputLabel/constants.mjs +0 -2
- package/components/FormInputLabel/constants.mjs.map +0 -1
- package/components/Input/constants.js +0 -2
- package/components/Input/constants.js.map +0 -1
- package/components/Input/constants.mjs +0 -2
- package/components/Input/constants.mjs.map +0 -1
- package/components/Textarea/constants.js +0 -2
- package/components/Textarea/constants.js.map +0 -1
- package/components/Textarea/constants.mjs +0 -2
- package/components/Textarea/constants.mjs.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{forwardRef,useRef,useImperativeHandle,useMemo,useState,useCallback,useLayoutEffect,useEffect}from'react';import{useTheme}from'styled-components';import{nanoid}from'nanoid';import{ResizeHandle}from'@foxford/icon-pack';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useResizable}from'../../hooks/useResizable.mjs';import{createThrottledCallback}from'../../shared/utils/misc.mjs';import{
|
|
1
|
+
import{forwardRef,useRef,useImperativeHandle,useMemo,useState,useCallback,useLayoutEffect,useEffect}from'react';import{useTheme}from'styled-components';import{nanoid}from'nanoid';import{ResizeHandle}from'@foxford/icon-pack';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useResizable}from'../../hooks/useResizable.mjs';import{createThrottledCallback}from'../../shared/utils/misc.mjs';import{SIZES}from'./sizes.mjs';import{Root,TextareaMimic,Textarea as Textarea$1,ResizeGlobals,ResizeIcon}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{FormInputLabel}from'../FormInputLabel/FormInputLabel.mjs';import{InputLabel}from'../InputLabel/InputLabel.mjs';import{SIZES as SIZES$1}from'../FormInput/sizes.mjs';const COMPONENT_NAME='Textarea';const Textarea=withMergedProps(forwardRef(((e,r)=>{const o=useTheme();const{size:t="m",rows:a=2,maxRows:n=30,labelPosition:i="dynamic",primary:s=!0,width:m=o.defaultInputControlsWidth,autosize:l=!0,rounded:g=!0,color:c="mineShaft",placeholderColor:d="silver",autoRows:u,resize:h,contrast:p,inline:f,secondary:S,success:X,error:b,sizeXXS:L,sizeXS:z,sizeS:w,sizeM:M,sizeL:R,sizeXL:T,sizes:C,sizeUnits:x,margin:v,marginXXS:I,marginXS:j,marginS:y,marginM:B,marginL:E,marginXL:N,marginTop:k,marginTopXXS:D,marginTopXS:F,marginTopS:H,marginTopM:P,marginTopL:Z,marginTopXL:O,marginRight:$,marginRightXXS:A,marginRightXS:G,marginRightS:U,marginRightM:_,marginRightL:K,marginRightXL:V,marginBottom:W,marginBottomXXS:q,marginBottomXS:J,marginBottomS:Q,marginBottomM:Y,marginBottomL:ee,marginBottomXL:re,marginLeft:oe,marginLeftXXS:te,marginLeftXS:ae,marginLeftS:ne,marginLeftM:ie,marginLeftL:se,marginLeftXL:me,widthXXS:le,widthXS:ge,widthS:ce,widthM:de,widthL:ue,widthXL:he,preset:pe,palette:fe,label:Se,fluid:Xe,className:be,style:Le,disabled:ze,...we}=e;const Me={size:t,sizeXXS:L,sizeXS:z,sizeS:w,sizeM:M,sizeL:R,sizeXL:T};const Re=useRef(null);const Te=useRef(null);const Ce=useRef(null);useImperativeHandle(r,(()=>Re.current),[]);const[xe,ve,Ie]=useResizable({target:Ce,direction:h});const je=useMemo((()=>nanoid()),[]);const[ye,Be]=useState((()=>{const e=we.value??we.defaultValue;return typeof e=='string'&&e.length>0}));const[Ee,Ne]=useState((()=>Math.min(a,n)));const ke=pe==='brand'&&u||pe!=='brand'&&l?Ee:Math.min(a,n);const De=h==='horizontal'?'ew-resize':h==='vertical'?'ns-resize':'nwse-resize';const Fe=useCallback((()=>{if(!Re.current)return;if(pe==='brand'){if(!Te.current)return;Te.current.value=Re.current.value;const e=Math.max(Math.round(Te.current.scrollHeight/Te.current.clientHeight),a);return void Ne(Math.min(e,n))}const e=getComputedStyle(Re.current);const r=parseFloat(e.lineHeight);const o=Math.max(Math.round((Re.current.scrollHeight-parseFloat(e.paddingTop)-parseFloat(e.paddingBottom))/(Number.isNaN(r)?parseFloat(e.fontSize)*1.2:r)),a);Ne((e=>o>e?Math.min(o,n):Re.current&&!Re.current.value?a:e))}),[pe,a,n]);return useLayoutEffect((()=>{pe==='brand'&&typeof we.value=='string'&&Re.current&&Re.current!==document.activeElement&&Be(we.value.length>0)}),[pe,we.value]),useEffect((()=>{const e=createThrottledCallback(Fe,200);return(pe==='brand'&&u||pe!=='brand'&&l)&&(Fe(),window.addEventListener('resize',e)),()=>{window.removeEventListener('resize',e)}}),[pe,u,l,Fe]),pe!=='brand'?jsx(Root,{...we,ref:Re,className:be,style:Le,onChange:e=>{l&&Fe(),we.onChange&&we.onChange(e)},rows:ke,color:c,rounded:g,placeholderColor:d,disabled:ze,error:b,fluid:Xe,width:m,widthXXS:le,widthXS:ge,widthS:ce,widthM:de,widthL:ue,widthXL:he}):jsx(FormInputLabel,{...Me,ref:Ce,sizes:C,sizeUnits:x,margin:v,marginXXS:I,marginXS:j,marginS:y,marginM:B,marginL:E,marginXL:N,marginTop:k,marginTopXXS:D,marginTopXS:F,marginTopS:H,marginTopM:P,marginTopL:Z,marginTopXL:O,marginRight:$,marginRightXXS:A,marginRightXS:G,marginRightS:U,marginRightM:_,marginRightL:K,marginRightXL:V,marginBottom:W,marginBottomXXS:q,marginBottomXS:J,marginBottomS:Q,marginBottomM:Y,marginBottomL:ee,marginBottomXL:re,marginLeft:oe,marginLeftXXS:te,marginLeftXS:ae,marginLeftS:ne,marginLeftM:ie,marginLeftL:se,marginLeftXL:me,className:be,style:Le,contrast:p,error:b,inline:f,disabled:ze,primary:s,secondary:S,success:X,palette:{color:ze?fe.colorDisabled:fe.color,backgroundColor:ze?fe.backgroundColorDisabled:fe.backgroundColor,backgroundColorHover:ze?fe.backgroundColorDisabled:fe.backgroundColorHover,borderColor:ze?fe.borderColorDisabled:fe.borderColor},onClick:()=>{Re.current&&Re.current.focus()},onFocus:()=>{Be(!0)},onPointerDown:e=>{e.target!==Re.current&&e.target instanceof Node&&e.preventDefault()},onBlur:e=>{Re.current&&!e.currentTarget.contains(e.relatedTarget)&&Be(Boolean(Re.current.value))},overflow:"hidden",input:jsxs(InputLabel,{...Me,sizes:SIZES$1,active:ye,label:Se,labelId:je,labelPosition:i,children:[u?jsx(TextareaMimic,{ref:Te,rows:1}):null,jsx(Textarea$1,{...we,ref:Re,"aria-labelledby":Se?je:void 0,disabled:ze,onChange:e=>{u&&Fe(),we.onChange&&we.onChange(e)},rows:ke,palette:{color:fe.color,colorDisabled:fe.colorDisabled,placeholderColor:fe.placeholderColor,placeholderColorDisabled:fe.placeholderColorDisabled}})]}),addon:h?jsxs(Fragment,{children:[xe?jsx(ResizeGlobals,{cursor:De}):null,jsx(ResizeIcon,{size:"l",icon:jsx(ResizeHandle,{}),color:"border-onmain-default-small",tabIndex:0,onPointerDown:ve,onKeyDown:Ie,cursor:De})]}):void 0})})),{displayName:"Textarea",sizes:SIZES});export{COMPONENT_NAME,Textarea};
|
|
2
2
|
//# sourceMappingURL=Textarea.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.mjs","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import {\n forwardRef,\n useImperativeHandle,\n useLayoutEffect,\n useEffect,\n useRef,\n useState,\n useMemo,\n useCallback,\n} from 'react'\nimport { useTheme } from 'styled-components'\nimport { nanoid } from 'nanoid'\nimport { ResizeHandle } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useResizable } from 'hooks/useResizable'\nimport { createThrottledCallback } from 'shared/utils/misc'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { SIZES, SIZES_WITH_LABEL } from './constants'\nimport * as Styled from './style'\nimport type { TextareaProps } from './types'\n\nconst COMPONENT_NAME = 'Textarea'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<textarea\\> элемента.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Можно передать \"ref\", который будет ассоциирован с \\<textarea\\>.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/Textarea/types.ts).\n */\nconst Textarea: React.ForwardRefExoticComponent<TextareaProps> = withMergedProps<TextareaProps, HTMLTextAreaElement>(\n forwardRef<HTMLTextAreaElement, MergedProps<TextareaProps>>((props, forwardedRef) => {\n const theme = useTheme()\n\n const {\n size = 'm',\n rows = 2,\n maxRows = 30,\n labelPosition = 'dynamic',\n primary = true,\n width = theme.defaultInputControlsWidth,\n autosize = true,\n rounded = true,\n color = 'mineShaft',\n placeholderColor = 'silver',\n autoRows,\n resize,\n contrast,\n inline,\n secondary,\n success,\n error,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizes,\n sizeUnits,\n margin,\n marginXXS,\n marginXS,\n marginS,\n marginM,\n marginL,\n marginXL,\n marginTop,\n marginTopXXS,\n marginTopXS,\n marginTopS,\n marginTopM,\n marginTopL,\n marginTopXL,\n marginRight,\n marginRightXXS,\n marginRightXS,\n marginRightS,\n marginRightM,\n marginRightL,\n marginRightXL,\n marginBottom,\n marginBottomXXS,\n marginBottomXS,\n marginBottomS,\n marginBottomM,\n marginBottomL,\n marginBottomXL,\n marginLeft,\n marginLeftXXS,\n marginLeftXS,\n marginLeftS,\n marginLeftM,\n marginLeftL,\n marginLeftXL,\n widthXXS,\n widthXS,\n widthS,\n widthM,\n widthL,\n widthXL,\n preset,\n palette,\n label,\n fluid,\n className,\n style,\n disabled,\n ...textareaProps\n } = props\n\n const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n const textareaMimicRef = useRef<HTMLTextAreaElement>(null)\n\n const formInputLabelRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(forwardedRef, () => textareaRef.current as HTMLTextAreaElement, [])\n\n const [resizing, handleResizeStart, handleResizeOnNudge] = useResizable<HTMLDivElement, HTMLSpanElement>({\n target: formInputLabelRef,\n direction: resize,\n })\n\n const labelId = useMemo(() => nanoid(), [])\n\n const [active, setActive] = useState(() => {\n const valueInit = textareaProps.value ?? textareaProps.defaultValue\n\n return typeof valueInit === 'string' && valueInit.length > 0\n })\n\n const [autoRowsCount, setAutoRowsCount] = useState(() => Math.min(rows, maxRows))\n\n const rowsVisible =\n (preset === 'brand' && autoRows) || (preset !== 'brand' && autosize) ? autoRowsCount : Math.min(rows, maxRows)\n\n const cursorResize = resize === 'horizontal' ? 'ew-resize' : resize === 'vertical' ? 'ns-resize' : 'nwse-resize'\n\n const updateAutoRowsCount = useCallback(() => {\n if (!textareaRef.current) return\n\n if (preset === 'brand') {\n if (!textareaMimicRef.current) return\n\n textareaMimicRef.current.value = textareaRef.current.value\n\n const nextRows = Math.max(\n Math.round(textareaMimicRef.current.scrollHeight / textareaMimicRef.current.clientHeight),\n rows\n )\n\n setAutoRowsCount(Math.min(nextRows, maxRows))\n\n return\n }\n\n const styles = getComputedStyle(textareaRef.current)\n\n const lineHeight = parseFloat(styles.lineHeight)\n\n const nextRows = Math.max(\n Math.round(\n (textareaRef.current.scrollHeight - parseFloat(styles.paddingTop) - parseFloat(styles.paddingBottom)) /\n (Number.isNaN(lineHeight) ? parseFloat(styles.fontSize) * 1.2 : lineHeight)\n ),\n rows\n )\n\n setAutoRowsCount((prevRows) => {\n if (nextRows > prevRows) return Math.min(nextRows, maxRows)\n if (textareaRef.current && !textareaRef.current.value) return rows\n\n return prevRows\n })\n }, [preset, rows, maxRows])\n\n useLayoutEffect(() => {\n if (\n preset === 'brand' &&\n typeof textareaProps.value === 'string' &&\n textareaRef.current &&\n textareaRef.current !== document.activeElement\n ) {\n setActive(textareaProps.value.length > 0)\n }\n }, [preset, textareaProps.value])\n\n useEffect(() => {\n const handleResize = createThrottledCallback<UIEvent>(updateAutoRowsCount, 200)\n\n if ((preset === 'brand' && autoRows) || (preset !== 'brand' && autosize)) {\n updateAutoRowsCount()\n window.addEventListener('resize', handleResize)\n }\n\n return () => {\n window.removeEventListener('resize', handleResize)\n }\n }, [preset, autoRows, autosize, updateAutoRowsCount])\n\n if (preset !== 'brand') {\n return (\n <Styled.Root\n {...textareaProps}\n ref={textareaRef}\n className={className}\n style={style}\n onChange={(evt) => {\n if (autosize) updateAutoRowsCount()\n if (textareaProps.onChange) textareaProps.onChange(evt)\n }}\n rows={rowsVisible}\n color={color}\n rounded={rounded}\n placeholderColor={placeholderColor}\n disabled={disabled}\n error={error}\n fluid={fluid}\n width={width}\n widthXXS={widthXXS}\n widthXS={widthXS}\n widthS={widthS}\n widthM={widthM}\n widthL={widthL}\n widthXL={widthXL}\n />\n )\n }\n\n return (\n <FormInputLabel\n ref={formInputLabelRef}\n size={size}\n sizeXXS={sizeXXS}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n sizes={sizes}\n sizeUnits={sizeUnits}\n margin={margin}\n marginXXS={marginXXS}\n marginXS={marginXS}\n marginS={marginS}\n marginM={marginM}\n marginL={marginL}\n marginXL={marginXL}\n marginTop={marginTop}\n marginTopXXS={marginTopXXS}\n marginTopXS={marginTopXS}\n marginTopS={marginTopS}\n marginTopM={marginTopM}\n marginTopL={marginTopL}\n marginTopXL={marginTopXL}\n marginRight={marginRight}\n marginRightXXS={marginRightXXS}\n marginRightXS={marginRightXS}\n marginRightS={marginRightS}\n marginRightM={marginRightM}\n marginRightL={marginRightL}\n marginRightXL={marginRightXL}\n marginBottom={marginBottom}\n marginBottomXXS={marginBottomXXS}\n marginBottomXS={marginBottomXS}\n marginBottomS={marginBottomS}\n marginBottomM={marginBottomM}\n marginBottomL={marginBottomL}\n marginBottomXL={marginBottomXL}\n marginLeft={marginLeft}\n marginLeftXXS={marginLeftXXS}\n marginLeftXS={marginLeftXS}\n marginLeftS={marginLeftS}\n marginLeftM={marginLeftM}\n marginLeftL={marginLeftL}\n marginLeftXL={marginLeftXL}\n className={className}\n style={style}\n contrast={contrast}\n error={error}\n inline={inline}\n label={label}\n labelId={labelId}\n labelPosition={labelPosition}\n disabled={disabled}\n active={active}\n primary={primary}\n secondary={secondary}\n success={success}\n palette={{\n color: disabled ? palette.colorDisabled : palette.color,\n backgroundColor: disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n backgroundColorHover: disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n borderColor: disabled ? palette.borderColorDisabled : palette.borderColor,\n }}\n onClick={() => {\n if (textareaRef.current) {\n textareaRef.current.focus()\n }\n }}\n onFocus={() => {\n setActive(true)\n }}\n onPointerDown={(evt) => {\n if (evt.target === textareaRef.current || !(evt.target instanceof Node)) {\n return\n }\n evt.preventDefault()\n }}\n onBlur={(evt) => {\n if (textareaRef.current && !evt.currentTarget.contains(evt.relatedTarget)) {\n setActive(Boolean(textareaRef.current.value))\n }\n }}\n overflow='hidden'\n inputPosition='stretch'\n input={\n <>\n {autoRows ? <Styled.TextareaMimic ref={textareaMimicRef} rows={1} /> : null}\n <Styled.Textarea\n {...textareaProps}\n ref={textareaRef}\n aria-labelledby={label ? labelId : undefined}\n disabled={disabled}\n onChange={(evt) => {\n if (autoRows) updateAutoRowsCount()\n if (textareaProps.onChange) textareaProps.onChange(evt)\n }}\n rows={rowsVisible}\n palette={{\n color: palette.color,\n colorDisabled: palette.colorDisabled,\n placeholderColor: palette.placeholderColor,\n placeholderColorDisabled: palette.placeholderColorDisabled,\n }}\n />\n </>\n }\n addon={\n resize ? (\n <>\n {resizing ? <Styled.ResizeGlobals cursor={cursorResize} /> : null}\n <Styled.ResizeIcon\n size='l'\n icon={<ResizeHandle />}\n color='border-onmain-default-small'\n tabIndex={0}\n onPointerDown={handleResizeStart}\n onKeyDown={handleResizeOnNudge}\n cursor={cursorResize}\n />\n </>\n ) : undefined\n }\n />\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => (props.label ? SIZES_WITH_LABEL : SIZES),\n }\n)\n\nexport { Textarea, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Textarea","withMergedProps","forwardRef","props","forwardedRef","theme","useTheme","size","rows","maxRows","labelPosition","primary","width","defaultInputControlsWidth","autosize","rounded","color","placeholderColor","autoRows","resize","contrast","inline","secondary","success","error","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizes","sizeUnits","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","widthXXS","widthXS","widthS","widthM","widthL","widthXL","preset","palette","label","fluid","className","style","disabled","textareaProps","textareaRef","useRef","textareaMimicRef","formInputLabelRef","useImperativeHandle","current","resizing","handleResizeStart","handleResizeOnNudge","useResizable","target","direction","labelId","useMemo","nanoid","active","setActive","useState","valueInit","value","defaultValue","length","autoRowsCount","setAutoRowsCount","Math","min","rowsVisible","cursorResize","updateAutoRowsCount","useCallback","nextRows","max","round","scrollHeight","clientHeight","styles","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","Number","isNaN","fontSize","prevRows","useLayoutEffect","document","activeElement","useEffect","handleResize","createThrottledCallback","window","addEventListener","removeEventListener","_jsx","Styled","ref","onChange","evt","FormInputLabel","colorDisabled","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","focus","onFocus","onPointerDown","Node","preventDefault","onBlur","currentTarget","contains","relatedTarget","Boolean","overflow","inputPosition","input","_jsxs","_Fragment","children","undefined","placeholderColorDisabled","addon","cursor","icon","ResizeHandle","tabIndex","onKeyDown","displayName","SIZES_WITH_LABEL","SIZES"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Textarea.mjs","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import {\n forwardRef,\n useImperativeHandle,\n useLayoutEffect,\n useEffect,\n useRef,\n useState,\n useMemo,\n useCallback,\n} from 'react'\nimport { useTheme } from 'styled-components'\nimport { nanoid } from 'nanoid'\nimport { ResizeHandle } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { InputLabel } from 'components/InputLabel'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useResizable } from 'hooks/useResizable'\nimport { createThrottledCallback } from 'shared/utils/misc'\nimport { FormInputLabel } from 'components/FormInputLabel'\nimport { SIZES as SIZES_FORM_INPUT } from 'components/FormInput'\nimport { SIZES } from './sizes'\nimport * as Styled from './style'\nimport type { TextareaProps } from './types'\n\nconst COMPONENT_NAME = 'Textarea'\n\n/**\n *\n * Компонент для приема многострочного ввода.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<textarea\\> элемента.\n */\nconst Textarea: React.ForwardRefExoticComponent<TextareaProps> = withMergedProps<TextareaProps, HTMLTextAreaElement>(\n forwardRef<HTMLTextAreaElement, MergedProps<TextareaProps>>((props, forwardedRef) => {\n const theme = useTheme()\n\n const {\n size = 'm',\n rows = 2,\n maxRows = 30,\n labelPosition = 'dynamic',\n primary = true,\n width = theme.defaultInputControlsWidth,\n autosize = true,\n rounded = true,\n color = 'mineShaft',\n placeholderColor = 'silver',\n autoRows,\n resize,\n contrast,\n inline,\n secondary,\n success,\n error,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizes,\n sizeUnits,\n margin,\n marginXXS,\n marginXS,\n marginS,\n marginM,\n marginL,\n marginXL,\n marginTop,\n marginTopXXS,\n marginTopXS,\n marginTopS,\n marginTopM,\n marginTopL,\n marginTopXL,\n marginRight,\n marginRightXXS,\n marginRightXS,\n marginRightS,\n marginRightM,\n marginRightL,\n marginRightXL,\n marginBottom,\n marginBottomXXS,\n marginBottomXS,\n marginBottomS,\n marginBottomM,\n marginBottomL,\n marginBottomXL,\n marginLeft,\n marginLeftXXS,\n marginLeftXS,\n marginLeftS,\n marginLeftM,\n marginLeftL,\n marginLeftXL,\n widthXXS,\n widthXS,\n widthS,\n widthM,\n widthL,\n widthXL,\n preset,\n palette,\n label,\n fluid,\n className,\n style,\n disabled,\n ...textareaProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n const textareaMimicRef = useRef<HTMLTextAreaElement>(null)\n\n const formInputLabelRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(forwardedRef, () => textareaRef.current as HTMLTextAreaElement, [])\n\n const [resizing, handleResizeStart, handleResizeOnNudge] = useResizable<HTMLDivElement, HTMLSpanElement>({\n target: formInputLabelRef,\n direction: resize,\n })\n\n const labelId = useMemo(() => nanoid(), [])\n\n const [active, setActive] = useState(() => {\n const valueInit = textareaProps.value ?? textareaProps.defaultValue\n\n return typeof valueInit === 'string' && valueInit.length > 0\n })\n\n const [autoRowsCount, setAutoRowsCount] = useState(() => Math.min(rows, maxRows))\n\n const rowsVisible =\n (preset === 'brand' && autoRows) || (preset !== 'brand' && autosize) ? autoRowsCount : Math.min(rows, maxRows)\n\n const cursorResize = resize === 'horizontal' ? 'ew-resize' : resize === 'vertical' ? 'ns-resize' : 'nwse-resize'\n\n const updateAutoRowsCount = useCallback(() => {\n if (!textareaRef.current) return\n\n if (preset === 'brand') {\n if (!textareaMimicRef.current) return\n\n textareaMimicRef.current.value = textareaRef.current.value\n\n const nextRows = Math.max(\n Math.round(textareaMimicRef.current.scrollHeight / textareaMimicRef.current.clientHeight),\n rows\n )\n\n setAutoRowsCount(Math.min(nextRows, maxRows))\n\n return\n }\n\n const styles = getComputedStyle(textareaRef.current)\n\n const lineHeight = parseFloat(styles.lineHeight)\n\n const nextRows = Math.max(\n Math.round(\n (textareaRef.current.scrollHeight - parseFloat(styles.paddingTop) - parseFloat(styles.paddingBottom)) /\n (Number.isNaN(lineHeight) ? parseFloat(styles.fontSize) * 1.2 : lineHeight)\n ),\n rows\n )\n\n setAutoRowsCount((prevRows) => {\n if (nextRows > prevRows) return Math.min(nextRows, maxRows)\n if (textareaRef.current && !textareaRef.current.value) return rows\n\n return prevRows\n })\n }, [preset, rows, maxRows])\n\n useLayoutEffect(() => {\n if (\n preset === 'brand' &&\n typeof textareaProps.value === 'string' &&\n textareaRef.current &&\n textareaRef.current !== document.activeElement\n ) {\n setActive(textareaProps.value.length > 0)\n }\n }, [preset, textareaProps.value])\n\n useEffect(() => {\n const handleResize = createThrottledCallback<UIEvent>(updateAutoRowsCount, 200)\n\n if ((preset === 'brand' && autoRows) || (preset !== 'brand' && autosize)) {\n updateAutoRowsCount()\n window.addEventListener('resize', handleResize)\n }\n\n return () => {\n window.removeEventListener('resize', handleResize)\n }\n }, [preset, autoRows, autosize, updateAutoRowsCount])\n\n if (preset !== 'brand') {\n return (\n <Styled.Root\n {...textareaProps}\n ref={textareaRef}\n className={className}\n style={style}\n onChange={(evt) => {\n if (autosize) updateAutoRowsCount()\n if (textareaProps.onChange) textareaProps.onChange(evt)\n }}\n rows={rowsVisible}\n color={color}\n rounded={rounded}\n placeholderColor={placeholderColor}\n disabled={disabled}\n error={error}\n fluid={fluid}\n width={width}\n widthXXS={widthXXS}\n widthXS={widthXS}\n widthS={widthS}\n widthM={widthM}\n widthL={widthL}\n widthXL={widthXL}\n />\n )\n }\n\n return (\n <FormInputLabel\n {...sizeProps}\n ref={formInputLabelRef}\n sizes={sizes}\n sizeUnits={sizeUnits}\n margin={margin}\n marginXXS={marginXXS}\n marginXS={marginXS}\n marginS={marginS}\n marginM={marginM}\n marginL={marginL}\n marginXL={marginXL}\n marginTop={marginTop}\n marginTopXXS={marginTopXXS}\n marginTopXS={marginTopXS}\n marginTopS={marginTopS}\n marginTopM={marginTopM}\n marginTopL={marginTopL}\n marginTopXL={marginTopXL}\n marginRight={marginRight}\n marginRightXXS={marginRightXXS}\n marginRightXS={marginRightXS}\n marginRightS={marginRightS}\n marginRightM={marginRightM}\n marginRightL={marginRightL}\n marginRightXL={marginRightXL}\n marginBottom={marginBottom}\n marginBottomXXS={marginBottomXXS}\n marginBottomXS={marginBottomXS}\n marginBottomS={marginBottomS}\n marginBottomM={marginBottomM}\n marginBottomL={marginBottomL}\n marginBottomXL={marginBottomXL}\n marginLeft={marginLeft}\n marginLeftXXS={marginLeftXXS}\n marginLeftXS={marginLeftXS}\n marginLeftS={marginLeftS}\n marginLeftM={marginLeftM}\n marginLeftL={marginLeftL}\n marginLeftXL={marginLeftXL}\n className={className}\n style={style}\n contrast={contrast}\n error={error}\n inline={inline}\n disabled={disabled}\n primary={primary}\n secondary={secondary}\n success={success}\n palette={{\n color: disabled ? palette.colorDisabled : palette.color,\n backgroundColor: disabled ? palette.backgroundColorDisabled : palette.backgroundColor,\n backgroundColorHover: disabled ? palette.backgroundColorDisabled : palette.backgroundColorHover,\n borderColor: disabled ? palette.borderColorDisabled : palette.borderColor,\n }}\n onClick={() => {\n if (textareaRef.current) {\n textareaRef.current.focus()\n }\n }}\n onFocus={() => {\n setActive(true)\n }}\n onPointerDown={(evt) => {\n if (evt.target === textareaRef.current || !(evt.target instanceof Node)) {\n return\n }\n evt.preventDefault()\n }}\n onBlur={(evt) => {\n if (textareaRef.current && !evt.currentTarget.contains(evt.relatedTarget)) {\n setActive(Boolean(textareaRef.current.value))\n }\n }}\n overflow='hidden'\n input={\n <InputLabel\n {...sizeProps}\n sizes={SIZES_FORM_INPUT}\n active={active}\n label={label}\n labelId={labelId}\n labelPosition={labelPosition}\n >\n {autoRows ? <Styled.TextareaMimic ref={textareaMimicRef} rows={1} /> : null}\n <Styled.Textarea\n {...textareaProps}\n ref={textareaRef}\n aria-labelledby={label ? labelId : undefined}\n disabled={disabled}\n onChange={(evt) => {\n if (autoRows) updateAutoRowsCount()\n if (textareaProps.onChange) textareaProps.onChange(evt)\n }}\n rows={rowsVisible}\n palette={{\n color: palette.color,\n colorDisabled: palette.colorDisabled,\n placeholderColor: palette.placeholderColor,\n placeholderColorDisabled: palette.placeholderColorDisabled,\n }}\n />\n </InputLabel>\n }\n addon={\n resize ? (\n <>\n {resizing ? <Styled.ResizeGlobals cursor={cursorResize} /> : null}\n <Styled.ResizeIcon\n size='l'\n icon={<ResizeHandle />}\n color='border-onmain-default-small'\n tabIndex={0}\n onPointerDown={handleResizeStart}\n onKeyDown={handleResizeOnNudge}\n cursor={cursorResize}\n />\n </>\n ) : undefined\n }\n />\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { Textarea, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Textarea","withMergedProps","forwardRef","props","forwardedRef","theme","useTheme","size","rows","maxRows","labelPosition","primary","width","defaultInputControlsWidth","autosize","rounded","color","placeholderColor","autoRows","resize","contrast","inline","secondary","success","error","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizes","sizeUnits","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","widthXXS","widthXS","widthS","widthM","widthL","widthXL","preset","palette","label","fluid","className","style","disabled","textareaProps","sizeProps","textareaRef","useRef","textareaMimicRef","formInputLabelRef","useImperativeHandle","current","resizing","handleResizeStart","handleResizeOnNudge","useResizable","target","direction","labelId","useMemo","nanoid","active","setActive","useState","valueInit","value","defaultValue","length","autoRowsCount","setAutoRowsCount","Math","min","rowsVisible","cursorResize","updateAutoRowsCount","useCallback","nextRows","max","round","scrollHeight","clientHeight","styles","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","Number","isNaN","fontSize","prevRows","useLayoutEffect","document","activeElement","useEffect","handleResize","createThrottledCallback","window","addEventListener","removeEventListener","_jsx","Styled","ref","onChange","evt","FormInputLabel","colorDisabled","backgroundColor","backgroundColorDisabled","backgroundColorHover","borderColor","borderColorDisabled","onClick","focus","onFocus","onPointerDown","Node","preventDefault","onBlur","currentTarget","contains","relatedTarget","Boolean","overflow","input","_jsxs","InputLabel","SIZES_FORM_INPUT","children","undefined","placeholderColorDisabled","addon","_Fragment","cursor","icon","ResizeHandle","tabIndex","onKeyDown","displayName","SIZES"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var sizes=require('../FormInputLabel/sizes.js');const SIZES={l:{...sizes.SIZES.l,paddingRight:sizes.SIZES.l.paddingLeft,paddingBottom:8,height:'auto'},m:{...sizes.SIZES.m,paddingRight:sizes.SIZES.m.paddingLeft,paddingBottom:7,height:'auto'},s:{...sizes.SIZES.s,paddingRight:sizes.SIZES.s.paddingLeft,paddingBottom:6,height:'auto'},xs:{...sizes.SIZES.xs,paddingRight:sizes.SIZES.xs.paddingLeft,paddingBottom:5,height:'auto'}};exports.SIZES=SIZES;
|
|
2
|
+
//# sourceMappingURL=sizes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sizes.js","sources":["../../../../src/components/Textarea/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES as SIZES_FORM_INPUT_LABEL } from 'components/FormInputLabel'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n l: {\n ...SIZES_FORM_INPUT_LABEL.l,\n paddingRight: SIZES_FORM_INPUT_LABEL.l.paddingLeft,\n paddingBottom: 8,\n height: 'auto',\n },\n m: {\n ...SIZES_FORM_INPUT_LABEL.m,\n paddingRight: SIZES_FORM_INPUT_LABEL.m.paddingLeft,\n paddingBottom: 7,\n height: 'auto',\n },\n s: {\n ...SIZES_FORM_INPUT_LABEL.s,\n paddingRight: SIZES_FORM_INPUT_LABEL.s.paddingLeft,\n paddingBottom: 6,\n height: 'auto',\n },\n xs: {\n ...SIZES_FORM_INPUT_LABEL.xs,\n paddingRight: SIZES_FORM_INPUT_LABEL.xs.paddingLeft,\n paddingBottom: 5,\n height: 'auto',\n },\n}\n"],"names":["SIZES","l","SIZES_FORM_INPUT_LABEL","paddingRight","paddingLeft","paddingBottom","height","m","s","xs"],"mappings":"6DAIO,MAAMA,MAAqC,CAChDC,EAAG,IACEC,MAAsBF,MAACC,EAC1BE,aAAcD,MAAAA,MAAuBD,EAAEG,YACvCC,cAAe,EACfC,OAAQ,QAEVC,EAAG,IACEL,MAAsBF,MAACO,EAC1BJ,aAAcD,MAAAA,MAAuBK,EAAEH,YACvCC,cAAe,EACfC,OAAQ,QAEVE,EAAG,IACEN,MAAsBF,MAACQ,EAC1BL,aAAcD,MAAAA,MAAuBM,EAAEJ,YACvCC,cAAe,EACfC,OAAQ,QAEVG,GAAI,IACCP,MAAsBF,MAACS,GAC1BN,aAAcD,MAAAA,MAAuBO,GAAGL,YACxCC,cAAe,EACfC,OAAQ"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{SIZES as SIZES$1}from'../FormInputLabel/sizes.mjs';const SIZES={l:{...SIZES$1.l,paddingRight:SIZES$1.l.paddingLeft,paddingBottom:8,height:'auto'},m:{...SIZES$1.m,paddingRight:SIZES$1.m.paddingLeft,paddingBottom:7,height:'auto'},s:{...SIZES$1.s,paddingRight:SIZES$1.s.paddingLeft,paddingBottom:6,height:'auto'},xs:{...SIZES$1.xs,paddingRight:SIZES$1.xs.paddingLeft,paddingBottom:5,height:'auto'}};export{SIZES};
|
|
2
|
+
//# sourceMappingURL=sizes.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sizes.mjs","sources":["../../../../src/components/Textarea/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES as SIZES_FORM_INPUT_LABEL } from 'components/FormInputLabel'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n l: {\n ...SIZES_FORM_INPUT_LABEL.l,\n paddingRight: SIZES_FORM_INPUT_LABEL.l.paddingLeft,\n paddingBottom: 8,\n height: 'auto',\n },\n m: {\n ...SIZES_FORM_INPUT_LABEL.m,\n paddingRight: SIZES_FORM_INPUT_LABEL.m.paddingLeft,\n paddingBottom: 7,\n height: 'auto',\n },\n s: {\n ...SIZES_FORM_INPUT_LABEL.s,\n paddingRight: SIZES_FORM_INPUT_LABEL.s.paddingLeft,\n paddingBottom: 6,\n height: 'auto',\n },\n xs: {\n ...SIZES_FORM_INPUT_LABEL.xs,\n paddingRight: SIZES_FORM_INPUT_LABEL.xs.paddingLeft,\n paddingBottom: 5,\n height: 'auto',\n },\n}\n"],"names":["SIZES","l","SIZES_FORM_INPUT_LABEL","paddingRight","paddingLeft","paddingBottom","height","m","s","xs"],"mappings":"0DAIO,MAAMA,MAAqC,CAChDC,EAAG,IACEC,QAAuBD,EAC1BE,aAAcD,QAAuBD,EAAEG,YACvCC,cAAe,EACfC,OAAQ,QAEVC,EAAG,IACEL,QAAuBK,EAC1BJ,aAAcD,QAAuBK,EAAEH,YACvCC,cAAe,EACfC,OAAQ,QAEVE,EAAG,IACEN,QAAuBM,EAC1BL,aAAcD,QAAuBM,EAAEJ,YACvCC,cAAe,EACfC,OAAQ,QAEVG,GAAI,IACCP,QAAuBO,GAC1BN,aAAcD,QAAuBO,GAAGL,YACxCC,cAAe,EACfC,OAAQ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var styled=require('styled-components');var style=require('../Input/style.js');var Icon=require('../Icon/Icon.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const Root=styled__default.default.textarea.withConfig({shouldForwardProp:e=>!['color','placeholderColor','rounded','fluid','error'].includes(e)&&!e.includes('width')}).withConfig({displayName:"Textarea__Root",componentId:"ui__sc-a4hfy5-0"})(["resize:none;line-height:23px;padding:16px 20px 11px;",""],style.baseInputStyle);const Textarea=styled__default.default.textarea.withConfig({shouldForwardProp:e=>!['palette'].includes(e)}).withConfig({displayName:"Textarea",componentId:"ui__sc-a4hfy5-1"})(["box-sizing:border-box;display:block;appearance:none;resize:none;overflow:auto;border:none;padding:0;margin:0;background-color:transparent;font
|
|
1
|
+
'use strict';var styled=require('styled-components');var style=require('../Input/style.js');var Icon=require('../Icon/Icon.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const Root=styled__default.default.textarea.withConfig({shouldForwardProp:e=>!['color','placeholderColor','rounded','fluid','error'].includes(e)&&!e.includes('width')}).withConfig({displayName:"Textarea__Root",componentId:"ui__sc-a4hfy5-0"})(["resize:none;line-height:23px;padding:16px 20px 11px;",""],style.baseInputStyle);const Textarea=styled__default.default.textarea.withConfig({shouldForwardProp:e=>!['palette'].includes(e)}).withConfig({displayName:"Textarea",componentId:"ui__sc-a4hfy5-1"})(["box-sizing:border-box;display:block;appearance:none;resize:none;overflow:auto;border:none;padding:0;margin:0;background-color:transparent;font:inherit;width:100%;cursor:pointer;&:disabled{cursor:not-allowed;}&:focus{outline:none;}&:focus:read-write{cursor:text;}",""],(e=>{return`\n color: ${(o={color:e.palette.color??e.theme.colors['content-onmain-primary'],placeholderColor:e.palette.placeholderColor??e.theme.colors['content-onmain-secondary'],colorDisabled:e.palette.colorDisabled??e.theme.colors['content-disabled'],placeholderColorDisabled:e.palette.placeholderColorDisabled??e.theme.colors['content-disabled']}).color};\n &:disabled {\n color: ${o.colorDisabled};\n }\n &::placeholder {\n color: ${o.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${o.placeholderColorDisabled};\n }\n`;var o}));const TextareaMimic=styled__default.default.textarea.withConfig({displayName:"Textarea__TextareaMimic",componentId:"ui__sc-a4hfy5-2"})(["box-sizing:border-box;display:block;visibility:hidden;position:absolute;top:0;left:0;width:100%;appearance:none;resize:none;overflow:hidden;border:none;padding:0;margin:0;font:inherit;"]);const ResizeGlobals=styled.createGlobalStyle(["",""],(e=>`\n body * {\n cursor: ${e.cursor} !important;\n user-select: none !important;\n }\n `));const ResizeIcon=styled__default.default(Icon.Icon).withConfig({shouldForwardProp:e=>e!=='cursor'}).withConfig({displayName:"Textarea__ResizeIcon",componentId:"ui__sc-a4hfy5-3"})(["",""],(e=>`\n position: absolute;\n right: 0px;\n bottom: 0px;\n padding: 4px;\n touch-action: none; \n cursor: ${e.cursor};\n &:focus-visible {\n outline: none;\n color: ${e.theme.colors['border-focus']};\n }\n &:focus-visible > svg {\n transform: scale(1.2);\n }\n `));exports.ResizeGlobals=ResizeGlobals,exports.ResizeIcon=ResizeIcon,exports.Root=Root,exports.Textarea=Textarea,exports.TextareaMimic=TextareaMimic;
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Textarea/style.ts"],"sourcesContent":["import styled, { createGlobalStyle } from 'styled-components'\nimport { Icon } from 'components/Icon'\nimport { baseInputStyle } from 'components/Input/style'\nimport type { TextareaProps, StyledTextareaProps, TextareaPalette, StyledResizeControlProps } from './types'\n\nconst template = (\n palette: Pick<TextareaPalette, 'color' | 'colorDisabled' | 'placeholderColor' | 'placeholderColorDisabled'>\n) => `\n color: ${palette.color};\n &:disabled {\n color: ${palette.colorDisabled};\n }\n &::placeholder {\n color: ${palette.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${palette.placeholderColorDisabled};\n }\n`\n\nexport const Root = styled.textarea.withConfig<TextareaProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n resize: none;\n line-height: 23px;\n padding: 16px 20px 11px;\n\n ${baseInputStyle}\n`\n\nexport const Textarea = styled.textarea.withConfig<StyledTextareaProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n display: block;\n appearance: none;\n resize: none;\n overflow: auto;\n border: none;\n padding: 0;\n margin: 0;\n background-color: transparent;\n font
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Textarea/style.ts"],"sourcesContent":["import styled, { createGlobalStyle } from 'styled-components'\nimport { Icon } from 'components/Icon'\nimport { baseInputStyle } from 'components/Input/style'\nimport type { TextareaProps, StyledTextareaProps, TextareaPalette, StyledResizeControlProps } from './types'\n\nconst template = (\n palette: Pick<TextareaPalette, 'color' | 'colorDisabled' | 'placeholderColor' | 'placeholderColorDisabled'>\n) => `\n color: ${palette.color};\n &:disabled {\n color: ${palette.colorDisabled};\n }\n &::placeholder {\n color: ${palette.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${palette.placeholderColorDisabled};\n }\n`\n\nexport const Root = styled.textarea.withConfig<TextareaProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n resize: none;\n line-height: 23px;\n padding: 16px 20px 11px;\n\n ${baseInputStyle}\n`\n\nexport const Textarea = styled.textarea.withConfig<StyledTextareaProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n display: block;\n appearance: none;\n resize: none;\n overflow: auto;\n border: none;\n padding: 0;\n margin: 0;\n background-color: transparent;\n font: inherit;\n width: 100%;\n cursor: pointer;\n &:disabled {\n cursor: not-allowed;\n }\n &:focus {\n outline: none;\n }\n &:focus:read-write {\n cursor: text;\n }\n ${(props) =>\n template({\n color: props.palette.color ?? props.theme.colors['content-onmain-primary'],\n placeholderColor: props.palette.placeholderColor ?? props.theme.colors['content-onmain-secondary'],\n colorDisabled: props.palette.colorDisabled ?? props.theme.colors['content-disabled'],\n placeholderColorDisabled: props.palette.placeholderColorDisabled ?? props.theme.colors['content-disabled'],\n })}\n`\n\nexport const TextareaMimic = styled.textarea`\n box-sizing: border-box;\n display: block;\n visibility: hidden;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n appearance: none;\n resize: none;\n overflow: hidden;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n`\n\nexport const ResizeGlobals = createGlobalStyle<StyledResizeControlProps>`\n ${(props) => `\n body * {\n cursor: ${props.cursor} !important;\n user-select: none !important;\n }\n `}\n`\n\nexport const ResizeIcon = styled(Icon).withConfig<StyledResizeControlProps>({\n shouldForwardProp: (propKey) => propKey !== 'cursor',\n})`\n ${(props) => `\n position: absolute;\n right: 0px;\n bottom: 0px;\n padding: 4px;\n touch-action: none; \n cursor: ${props.cursor};\n &:focus-visible {\n outline: none;\n color: ${props.theme.colors['border-focus']};\n }\n &:focus-visible > svg {\n transform: scale(1.2);\n }\n `}\n`\n"],"names":["Root","styled","textarea","withConfig","shouldForwardProp","prop","includes","displayName","componentId","baseInputStyle","Textarea","propKey","props","template","palette","color","theme","colors","placeholderColor","colorDisabled","placeholderColorDisabled","TextareaMimic","ResizeGlobals","createGlobalStyle","cursor","ResizeIcon","default","Icon"],"mappings":"6OAoBO,MAAMA,KAAOC,gBAAAA,QAAOC,SAASC,WAA0B,CAC5DC,kBAAoBC,IACjB,CAAC,QAAS,mBAAoB,UAAW,QAAS,SAASC,SAASD,KAAUA,EAAKC,SAAS,WAC/FH,WAAA,CAAAI,YAAA,iBAAAC,YAAA,mBAHkBP,CAGlB,CAAA,uDAAA,IAKEQ,MAAAA,gBAGG,MAAMC,SAAWT,gBAAAA,QAAOC,SAASC,WAAgC,CACtEC,kBAAoBO,IAAa,CAAC,WAAWL,SAASK,KACtDR,WAAA,CAAAI,YAAA,WAAAC,YAAA,mBAFsBP,CAwBnBW,CAAAA,yQAAAA,KAAAA,IACDC,MAjDC,eADHC,EAkDW,CACPC,MAAOH,EAAME,QAAQC,OAASH,EAAMI,MAAMC,OAAO,0BACjDC,iBAAkBN,EAAME,QAAQI,kBAAoBN,EAAMI,MAAMC,OAAO,4BACvEE,cAAeP,EAAME,QAAQK,eAAiBP,EAAMI,MAAMC,OAAO,oBACjEG,yBAA0BR,EAAME,QAAQM,0BAA4BR,EAAMI,MAAMC,OAAO,sBApD1EF,sCAEND,EAAQK,uDAGRL,EAAQI,mEAGRJ,EAAQM,mCAVnBN,KAuDI,UAGOO,cAAgBpB,gBAAAA,QAAOC,SAAQC,WAAA,CAAAI,YAAA,0BAAAC,YAAA,mBAAfP,CAe5B,CAAA,mMAEYqB,cAAgBC,OAAiBA,kBAAA,CAAA,GAAA,KACzCX,GAAU,iCAECA,EAAMY,uEAMf,MAAMC,WAAaxB,gBAAMyB,QAACC,WAAMxB,WAAqC,CAC1EC,kBAAoBO,GAAYA,IAAY,WAC5CR,WAAA,CAAAI,YAAA,uBAAAC,YAAA,mBAFwBP,CAExB,CAAA,GAAA,KACGW,GAAU,0HAMDA,EAAMY,sEAGLZ,EAAMI,MAAMC,OAAO"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import styled,{createGlobalStyle}from'styled-components';import{baseInputStyle}from'../Input/style.mjs';import{Icon}from'../Icon/Icon.mjs';const Root=styled.textarea.withConfig({shouldForwardProp:o=>!['color','placeholderColor','rounded','fluid','error'].includes(o)&&!o.includes('width')}).withConfig({displayName:"Textarea__Root",componentId:"ui__sc-a4hfy5-0"})(["resize:none;line-height:23px;padding:16px 20px 11px;",""],baseInputStyle);const Textarea=styled.textarea.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({displayName:"Textarea",componentId:"ui__sc-a4hfy5-1"})(["box-sizing:border-box;display:block;appearance:none;resize:none;overflow:auto;border:none;padding:0;margin:0;background-color:transparent;font
|
|
1
|
+
import styled,{createGlobalStyle}from'styled-components';import{baseInputStyle}from'../Input/style.mjs';import{Icon}from'../Icon/Icon.mjs';const Root=styled.textarea.withConfig({shouldForwardProp:o=>!['color','placeholderColor','rounded','fluid','error'].includes(o)&&!o.includes('width')}).withConfig({displayName:"Textarea__Root",componentId:"ui__sc-a4hfy5-0"})(["resize:none;line-height:23px;padding:16px 20px 11px;",""],baseInputStyle);const Textarea=styled.textarea.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({displayName:"Textarea",componentId:"ui__sc-a4hfy5-1"})(["box-sizing:border-box;display:block;appearance:none;resize:none;overflow:auto;border:none;padding:0;margin:0;background-color:transparent;font:inherit;width:100%;cursor:pointer;&:disabled{cursor:not-allowed;}&:focus{outline:none;}&:focus:read-write{cursor:text;}",""],(o=>{return`\n color: ${(e={color:o.palette.color??o.theme.colors['content-onmain-primary'],placeholderColor:o.palette.placeholderColor??o.theme.colors['content-onmain-secondary'],colorDisabled:o.palette.colorDisabled??o.theme.colors['content-disabled'],placeholderColorDisabled:o.palette.placeholderColorDisabled??o.theme.colors['content-disabled']}).color};\n &:disabled {\n color: ${e.colorDisabled};\n }\n &::placeholder {\n color: ${e.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${e.placeholderColorDisabled};\n }\n`;var e}));const TextareaMimic=styled.textarea.withConfig({displayName:"Textarea__TextareaMimic",componentId:"ui__sc-a4hfy5-2"})(["box-sizing:border-box;display:block;visibility:hidden;position:absolute;top:0;left:0;width:100%;appearance:none;resize:none;overflow:hidden;border:none;padding:0;margin:0;font:inherit;"]);const ResizeGlobals=createGlobalStyle(["",""],(o=>`\n body * {\n cursor: ${o.cursor} !important;\n user-select: none !important;\n }\n `));const ResizeIcon=styled(Icon).withConfig({shouldForwardProp:o=>o!=='cursor'}).withConfig({displayName:"Textarea__ResizeIcon",componentId:"ui__sc-a4hfy5-3"})(["",""],(o=>`\n position: absolute;\n right: 0px;\n bottom: 0px;\n padding: 4px;\n touch-action: none; \n cursor: ${o.cursor};\n &:focus-visible {\n outline: none;\n color: ${o.theme.colors['border-focus']};\n }\n &:focus-visible > svg {\n transform: scale(1.2);\n }\n `));export{ResizeGlobals,ResizeIcon,Root,Textarea,TextareaMimic};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Textarea/style.ts"],"sourcesContent":["import styled, { createGlobalStyle } from 'styled-components'\nimport { Icon } from 'components/Icon'\nimport { baseInputStyle } from 'components/Input/style'\nimport type { TextareaProps, StyledTextareaProps, TextareaPalette, StyledResizeControlProps } from './types'\n\nconst template = (\n palette: Pick<TextareaPalette, 'color' | 'colorDisabled' | 'placeholderColor' | 'placeholderColorDisabled'>\n) => `\n color: ${palette.color};\n &:disabled {\n color: ${palette.colorDisabled};\n }\n &::placeholder {\n color: ${palette.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${palette.placeholderColorDisabled};\n }\n`\n\nexport const Root = styled.textarea.withConfig<TextareaProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n resize: none;\n line-height: 23px;\n padding: 16px 20px 11px;\n\n ${baseInputStyle}\n`\n\nexport const Textarea = styled.textarea.withConfig<StyledTextareaProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n display: block;\n appearance: none;\n resize: none;\n overflow: auto;\n border: none;\n padding: 0;\n margin: 0;\n background-color: transparent;\n font
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Textarea/style.ts"],"sourcesContent":["import styled, { createGlobalStyle } from 'styled-components'\nimport { Icon } from 'components/Icon'\nimport { baseInputStyle } from 'components/Input/style'\nimport type { TextareaProps, StyledTextareaProps, TextareaPalette, StyledResizeControlProps } from './types'\n\nconst template = (\n palette: Pick<TextareaPalette, 'color' | 'colorDisabled' | 'placeholderColor' | 'placeholderColorDisabled'>\n) => `\n color: ${palette.color};\n &:disabled {\n color: ${palette.colorDisabled};\n }\n &::placeholder {\n color: ${palette.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${palette.placeholderColorDisabled};\n }\n`\n\nexport const Root = styled.textarea.withConfig<TextareaProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n resize: none;\n line-height: 23px;\n padding: 16px 20px 11px;\n\n ${baseInputStyle}\n`\n\nexport const Textarea = styled.textarea.withConfig<StyledTextareaProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n display: block;\n appearance: none;\n resize: none;\n overflow: auto;\n border: none;\n padding: 0;\n margin: 0;\n background-color: transparent;\n font: inherit;\n width: 100%;\n cursor: pointer;\n &:disabled {\n cursor: not-allowed;\n }\n &:focus {\n outline: none;\n }\n &:focus:read-write {\n cursor: text;\n }\n ${(props) =>\n template({\n color: props.palette.color ?? props.theme.colors['content-onmain-primary'],\n placeholderColor: props.palette.placeholderColor ?? props.theme.colors['content-onmain-secondary'],\n colorDisabled: props.palette.colorDisabled ?? props.theme.colors['content-disabled'],\n placeholderColorDisabled: props.palette.placeholderColorDisabled ?? props.theme.colors['content-disabled'],\n })}\n`\n\nexport const TextareaMimic = styled.textarea`\n box-sizing: border-box;\n display: block;\n visibility: hidden;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n appearance: none;\n resize: none;\n overflow: hidden;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n`\n\nexport const ResizeGlobals = createGlobalStyle<StyledResizeControlProps>`\n ${(props) => `\n body * {\n cursor: ${props.cursor} !important;\n user-select: none !important;\n }\n `}\n`\n\nexport const ResizeIcon = styled(Icon).withConfig<StyledResizeControlProps>({\n shouldForwardProp: (propKey) => propKey !== 'cursor',\n})`\n ${(props) => `\n position: absolute;\n right: 0px;\n bottom: 0px;\n padding: 4px;\n touch-action: none; \n cursor: ${props.cursor};\n &:focus-visible {\n outline: none;\n color: ${props.theme.colors['border-focus']};\n }\n &:focus-visible > svg {\n transform: scale(1.2);\n }\n `}\n`\n"],"names":["Root","styled","textarea","withConfig","shouldForwardProp","prop","includes","displayName","componentId","baseInputStyle","Textarea","propKey","props","template","palette","color","theme","colors","placeholderColor","colorDisabled","placeholderColorDisabled","TextareaMimic","ResizeGlobals","createGlobalStyle","cursor","ResizeIcon","Icon"],"mappings":"2IAoBO,MAAMA,KAAOC,OAAOC,SAASC,WAA0B,CAC5DC,kBAAoBC,IACjB,CAAC,QAAS,mBAAoB,UAAW,QAAS,SAASC,SAASD,KAAUA,EAAKC,SAAS,WAC/FH,WAAA,CAAAI,YAAA,iBAAAC,YAAA,mBAHkBP,CAGlB,CAAA,uDAAA,IAKEQ,gBAGG,MAAMC,SAAWT,OAAOC,SAASC,WAAgC,CACtEC,kBAAoBO,IAAa,CAAC,WAAWL,SAASK,KACtDR,WAAA,CAAAI,YAAA,WAAAC,YAAA,mBAFsBP,CAwBnBW,CAAAA,yQAAAA,KAAAA,IACDC,MAjDC,eADHC,EAkDW,CACPC,MAAOH,EAAME,QAAQC,OAASH,EAAMI,MAAMC,OAAO,0BACjDC,iBAAkBN,EAAME,QAAQI,kBAAoBN,EAAMI,MAAMC,OAAO,4BACvEE,cAAeP,EAAME,QAAQK,eAAiBP,EAAMI,MAAMC,OAAO,oBACjEG,yBAA0BR,EAAME,QAAQM,0BAA4BR,EAAMI,MAAMC,OAAO,sBApD1EF,sCAEND,EAAQK,uDAGRL,EAAQI,mEAGRJ,EAAQM,mCAVnBN,KAuDI,UAGOO,cAAgBpB,OAAOC,SAAQC,WAAA,CAAAI,YAAA,0BAAAC,YAAA,mBAAfP,CAe5B,CAAA,mMAEYqB,cAAgBC,kBAAiB,CAAA,GAAA,KACzCX,GAAU,iCAECA,EAAMY,uEAMf,MAAMC,WAAaxB,OAAOyB,MAAMvB,WAAqC,CAC1EC,kBAAoBO,GAAYA,IAAY,WAC5CR,WAAA,CAAAI,YAAA,uBAAAC,YAAA,mBAFwBP,CAExB,CAAA,GAAA,KACGW,GAAU,0HAMDA,EAAMY,sEAGLZ,EAAMI,MAAMC,OAAO"}
|