@foxford/ui 2.77.0 → 2.77.1-beta-0c09a09-20250813
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/ActionBtn/ActionBtn.js.map +1 -1
- package/components/ActionBtn/ActionBtn.mjs.map +1 -1
- package/components/Amount/Amount.js.map +1 -1
- package/components/Amount/Amount.mjs.map +1 -1
- package/components/Anchor/Anchor.js.map +1 -1
- package/components/Anchor/Anchor.mjs.map +1 -1
- package/components/Arrow/Arrow.js.map +1 -1
- package/components/Arrow/Arrow.mjs.map +1 -1
- package/components/ArrowBadge/ArrowBadge.js.map +1 -1
- package/components/ArrowBadge/ArrowBadge.mjs.map +1 -1
- package/components/Avatar/Avatar.js.map +1 -1
- package/components/Avatar/Avatar.mjs.map +1 -1
- package/components/Badge/Badge.js.map +1 -1
- package/components/Badge/Badge.mjs.map +1 -1
- package/components/Button/Button.js.map +1 -1
- package/components/Button/Button.mjs.map +1 -1
- package/components/Chip/Chip.js.map +1 -1
- package/components/Chip/Chip.mjs.map +1 -1
- package/components/Container/Container.js.map +1 -1
- package/components/Container/Container.mjs.map +1 -1
- package/components/ContextMenu/ContextMenu.js.map +1 -1
- package/components/ContextMenu/ContextMenu.mjs.map +1 -1
- package/components/ContextMenu/Item.js.map +1 -1
- package/components/ContextMenu/Item.mjs.map +1 -1
- package/components/ContextMenu.Multilevel/ContextMenu.Multilevel.js.map +1 -1
- package/components/ContextMenu.Multilevel/ContextMenu.Multilevel.mjs.map +1 -1
- package/components/Dropdown/Dropdown.js.map +1 -1
- package/components/Dropdown/Dropdown.mjs.map +1 -1
- package/components/FormLabel/FormLabel.js.map +1 -1
- package/components/FormLabel/FormLabel.mjs.map +1 -1
- package/components/Icon/Icon.js.map +1 -1
- package/components/Icon/Icon.mjs.map +1 -1
- package/components/IconButton/IconButton.js.map +1 -1
- package/components/IconButton/IconButton.mjs.map +1 -1
- package/components/Indicator/Indicator.js.map +1 -1
- package/components/Indicator/Indicator.mjs.map +1 -1
- package/components/Input/Input.js.map +1 -1
- package/components/Input/Input.mjs.map +1 -1
- package/components/Input.Phone/Input.Phone.js.map +1 -1
- package/components/Input.Phone/Input.Phone.mjs.map +1 -1
- package/components/InputCheckbox/InputCheckbox.js.map +1 -1
- package/components/InputCheckbox/InputCheckbox.mjs.map +1 -1
- package/components/InputRadio/InputRadio.js.map +1 -1
- package/components/InputRadio/InputRadio.mjs.map +1 -1
- package/components/ListItem/ListItem.js.map +1 -1
- package/components/ListItem/ListItem.mjs.map +1 -1
- package/components/Menu/Menu.js.map +1 -1
- package/components/Menu/Menu.mjs.map +1 -1
- package/components/MenuComponent/MenuComponent.js.map +1 -1
- package/components/MenuComponent/MenuComponent.mjs.map +1 -1
- package/components/MenuContainer/MenuContainer.js.map +1 -1
- package/components/MenuContainer/MenuContainer.mjs.map +1 -1
- package/components/MenuDivider/MenuDivider.js.map +1 -1
- package/components/MenuDivider/MenuDivider.mjs.map +1 -1
- package/components/MenuList/MenuList.js.map +1 -1
- package/components/MenuList/MenuList.mjs.map +1 -1
- package/components/Modal/Modal.js.map +1 -1
- package/components/Modal/Modal.mjs.map +1 -1
- package/components/Notification/Notification.js.map +1 -1
- package/components/Notification/Notification.mjs.map +1 -1
- package/components/Paper/Paper.js.map +1 -1
- package/components/Paper/Paper.mjs.map +1 -1
- package/components/Progress/Progress.js.map +1 -1
- package/components/Progress/Progress.mjs.map +1 -1
- package/components/Progress.Circle/Progress.Circle.js.map +1 -1
- package/components/Progress.Circle/Progress.Circle.mjs.map +1 -1
- package/components/Progress.Segmented/Progress.Segmented.js.map +1 -1
- package/components/Progress.Segmented/Progress.Segmented.mjs.map +1 -1
- package/components/ProgressCircle/ProgressCircle.js.map +1 -1
- package/components/ProgressCircle/ProgressCircle.mjs.map +1 -1
- package/components/ProgressLine/ProgressLine.js.map +1 -1
- package/components/ProgressLine/ProgressLine.mjs.map +1 -1
- package/components/Radio/Radio.js.map +1 -1
- package/components/Radio/Radio.mjs.map +1 -1
- package/components/Section/Section.js.map +1 -1
- package/components/Section/Section.mjs.map +1 -1
- package/components/Separator/Separator.js.map +1 -1
- package/components/Separator/Separator.mjs.map +1 -1
- package/components/Skeleton/Skeleton.js.map +1 -1
- package/components/Skeleton/Skeleton.mjs.map +1 -1
- package/components/Spacer/Spacer.js.map +1 -1
- package/components/Spacer/Spacer.mjs.map +1 -1
- package/components/Spinner/Spinner.js.map +1 -1
- package/components/Spinner/Spinner.mjs.map +1 -1
- package/components/Switch/Switch.js.map +1 -1
- package/components/Switch/Switch.mjs.map +1 -1
- package/components/Tab/Tab.js.map +1 -1
- package/components/Tab/Tab.mjs.map +1 -1
- package/components/Tabs/Tabs.js.map +1 -1
- package/components/Tabs/Tabs.mjs.map +1 -1
- package/components/Tag/Tag.js.map +1 -1
- package/components/Tag/Tag.mjs.map +1 -1
- package/components/Text/Text.js.map +1 -1
- package/components/Text/Text.mjs.map +1 -1
- package/components/Text.Ellipse/Text.Ellipse.js.map +1 -1
- package/components/Text.Ellipse/Text.Ellipse.mjs.map +1 -1
- package/components/Textarea/Textarea.js.map +1 -1
- package/components/Textarea/Textarea.mjs.map +1 -1
- package/components/Tooltip/Tooltip.js.map +1 -1
- package/components/Tooltip/Tooltip.mjs.map +1 -1
- package/components/TooltipComponent/TooltipComponent.js.map +1 -1
- package/components/TooltipComponent/TooltipComponent.mjs.map +1 -1
- package/dts/index.d.ts +29 -165
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.Ellipse.js","sources":["../../../../src/components/Text.Ellipse/Text.Ellipse.tsx"],"sourcesContent":["import { Component } from 'react'\nimport type { TextProps } from 'components/Text'\nimport { Spacer } from '../Spacer/Spacer'\nimport { Anchor } from '../Anchor/Anchor'\nimport { Text } from '../Text'\nimport * as Styled from './style'\n\nexport interface TextEllipseProps extends Omit<TextProps, 'content'> {\n /** Toggle text for folded state */\n moreText?: string\n /** Toggle text for unfolded state */\n lessText?: string\n /** Classname */\n className?: string\n /** Text content */\n content: string | string[]\n /** Characters quantity for ellipsed text */\n chars?: number\n /** Wrap text in quotes */\n quoted?: boolean\n /** Flag to show toggler */\n showToggler?: boolean\n}\n\ninterface TextEllipseState {\n isUnFolded: boolean\n isEllipsed: boolean\n}\n\
|
|
1
|
+
{"version":3,"file":"Text.Ellipse.js","sources":["../../../../src/components/Text.Ellipse/Text.Ellipse.tsx"],"sourcesContent":["import { Component } from 'react'\nimport type { TextProps } from 'components/Text'\nimport { Spacer } from '../Spacer/Spacer'\nimport { Anchor } from '../Anchor/Anchor'\nimport { Text } from '../Text'\nimport * as Styled from './style'\n\nexport interface TextEllipseProps extends Omit<TextProps, 'content'> {\n /** Toggle text for folded state */\n moreText?: string\n /** Toggle text for unfolded state */\n lessText?: string\n /** Classname */\n className?: string\n /** Text content */\n content: string | string[]\n /** Characters quantity for ellipsed text */\n chars?: number\n /** Wrap text in quotes */\n quoted?: boolean\n /** Flag to show toggler */\n showToggler?: boolean\n}\n\ninterface TextEllipseState {\n isUnFolded: boolean\n isEllipsed: boolean\n}\n\nexport class TextEllipse extends Component<TextEllipseProps, TextEllipseState> {\n static displayName = 'Text.Ellipse'\n\n constructor(props: TextEllipseProps) {\n super(props)\n\n this.state = {\n isUnFolded: false,\n isEllipsed: false,\n }\n }\n\n componentDidUpdate({ content }: TextEllipseProps) {\n if (content !== this.props.content && this.state.isUnFolded) {\n this.toggle()\n }\n }\n\n getContent = (props: Omit<TextEllipseProps, 'className' | 'moreText' | 'lessText' | 'showToggler' | 'content'>) => {\n const { content, chars = 0 } = this.props\n\n if (!content) return ''\n\n let { isEllipsed } = this.state\n let text: string | string[] = typeof content === 'string' ? '' : []\n\n if (!this.state.isUnFolded) {\n if (typeof text === 'string') {\n isEllipsed = chars !== 0 && content.length > chars\n\n text = isEllipsed && chars !== 0 ? `${content.slice(0, chars)}...` : content\n } else {\n let leftChars = chars\n\n for (let index = 0; index < content.length; index++) {\n if (leftChars - content[index].length > 0) {\n leftChars -= content[index].length\n\n text[index] = content[index]\n } else {\n isEllipsed = true\n text[index] = `${content[index].slice(0, leftChars)}...`\n\n break\n }\n }\n }\n } else {\n text = content\n }\n\n if (this.state.isEllipsed !== isEllipsed) setTimeout(() => this.setState({ isEllipsed }))\n\n return typeof text === 'string' ? (\n <Text {...props}>{this.getQuted(text)}</Text>\n ) : (\n <Styled.Ul>\n {text.map((item, index) => (\n <Styled.Li key={index}>\n <Text {...props} display='inline'>\n {item}\n </Text>\n </Styled.Li>\n ))}\n </Styled.Ul>\n )\n }\n\n getQuted = (content: string) => (this.props.quoted ? `«${content}»` : content)\n\n toggle = () => {\n this.setState({ isUnFolded: !this.state.isUnFolded })\n }\n\n render() {\n const {\n className = '',\n style,\n moreText = 'Читать полностью',\n lessText = 'Свернуть',\n showToggler = true,\n ...restProps\n } = this.props\n const { isUnFolded, isEllipsed } = this.state\n\n return (\n <div className={className} style={style}>\n {this.getContent(restProps)}\n {showToggler && isEllipsed ? (\n <Spacer marginTop={16} marginBottom={1}>\n {/* eslint-disable-next-line react/jsx-handler-names */}\n <Anchor pseudo onClick={this.toggle}>\n {isUnFolded ? lessText : moreText}\n </Anchor>\n </Spacer>\n ) : null}\n </div>\n )\n }\n}\n"],"names":["TextEllipse","Component","static","constructor","props","super","this","state","isUnFolded","isEllipsed","componentDidUpdate","content","toggle","getContent","chars","text","length","slice","leftChars","index","setTimeout","setState","_jsx","Text","children","getQuted","jsx","Styled","map","item","display","quoted","render","className","style","moreText","lessText","showToggler","restProps","_jsxs","Spacer","marginTop","marginBottom","Anchor","pseudo","onClick"],"mappings":"gQA6BO,MAAMA,oBAAoBC,MAAAA,UAC/BC,mBAAqB,eAErBC,WAAAA,CAAYC,GACVC,MAAMD,GAENE,KAAKC,MAAQ,CACXC,YAAY,EACZC,YAAY,EAEhB,CAEAC,kBAAAA,EAAmBC,QAAEA,IACfA,IAAYL,KAAKF,MAAMO,SAAWL,KAAKC,MAAMC,YAC/CF,KAAKM,QAET,CAEAC,WAAcT,IACZ,MAAMO,QAAEA,EAAOG,MAAEA,EAAQ,GAAMR,KAAKF,MAEpC,IAAKO,EAAS,MAAO,GAErB,IAAIF,WAAEA,GAAeH,KAAKC,MAC1B,IAAIQ,SAAiCJ,GAAY,SAAW,GAAK,GAEjE,GAAKL,KAAKC,MAAMC,WAsBdO,EAAOJ,OArBP,UAAWI,GAAS,SAClBN,EAAaK,IAAU,GAAKH,EAAQK,OAASF,EAE7CC,EAAON,GAAcK,IAAU,EAAI,GAAGH,EAAQM,MAAM,EAAGH,QAAcH,MAChE,CACL,IAAIO,EAAYJ,EAEhB,IAAK,IAAIK,EAAQ,EAAGA,EAAQR,EAAQK,OAAQG,IAAS,CACnD,KAAID,EAAYP,EAAQQ,GAAOH,OAAS,GAIjC,CACLP,GAAa,EACbM,EAAKI,GAAS,GAAGR,EAAQQ,GAAOF,MAAM,EAAGC,QAEzC,KACF,CAREA,GAAaP,EAAQQ,GAAOH,OAE5BD,EAAKI,GAASR,EAAQQ,EAO1B,CACF,CAOF,OAFIb,KAAKC,MAAME,aAAeA,GAAYW,YAAW,IAAMd,KAAKe,SAAS,CAAEZ,wBAE7DM,GAAS,SACrBO,WAAAA,IAACC,KAAAA,KAAI,IAAKnB,EAAKoB,SAAGlB,KAAKmB,SAASV,KAEhCO,WAAAI,IAACC,SAAS,CAAAH,SACPT,EAAKa,KAAI,CAACC,EAAMV,IACfG,WAAAI,IAACC,SAAS,CAAAH,SACRF,WAAAI,IAACH,UAAI,IAAKnB,EAAO0B,QAAQ,SAAQN,SAC9BK,KAFWV,MAOrB,EAGHM,SAAYd,GAAqBL,KAAKF,MAAM2B,OAAS,IAAIpB,KAAaA,EAEtEC,OAASA,KACPN,KAAKe,SAAS,CAAEb,YAAaF,KAAKC,MAAMC,YAAa,EAGvDwB,MAAAA,GACE,MAAMC,UACJA,EAAY,GAAEC,MACdA,EAAKC,SACLA,EAAW,mBAAkBC,SAC7BA,EAAW,WAAUC,YACrBA,GAAc,KACXC,GACDhC,KAAKF,MACT,MAAMI,WAAEA,EAAUC,WAAEA,GAAeH,KAAKC,MAExC,OACEgC,WAAAA,KAAA,MAAA,CAAKN,UAAWA,EAAWC,MAAOA,EAAMV,SACrC,CAAAlB,KAAKO,WAAWyB,GAChBD,GAAe5B,EACda,WAAAI,IAACc,cAAM,CAACC,UAAW,GAAIC,aAAc,EAAElB,SAErCF,WAAAI,IAACiB,cAAM,CAACC,QAAM,EAACC,QAASvC,KAAKM,OAAOY,SACjChB,EAAa4B,EAAWD,MAG3B,OAGV"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.Ellipse.mjs","sources":["../../../../src/components/Text.Ellipse/Text.Ellipse.tsx"],"sourcesContent":["import { Component } from 'react'\nimport type { TextProps } from 'components/Text'\nimport { Spacer } from '../Spacer/Spacer'\nimport { Anchor } from '../Anchor/Anchor'\nimport { Text } from '../Text'\nimport * as Styled from './style'\n\nexport interface TextEllipseProps extends Omit<TextProps, 'content'> {\n /** Toggle text for folded state */\n moreText?: string\n /** Toggle text for unfolded state */\n lessText?: string\n /** Classname */\n className?: string\n /** Text content */\n content: string | string[]\n /** Characters quantity for ellipsed text */\n chars?: number\n /** Wrap text in quotes */\n quoted?: boolean\n /** Flag to show toggler */\n showToggler?: boolean\n}\n\ninterface TextEllipseState {\n isUnFolded: boolean\n isEllipsed: boolean\n}\n\
|
|
1
|
+
{"version":3,"file":"Text.Ellipse.mjs","sources":["../../../../src/components/Text.Ellipse/Text.Ellipse.tsx"],"sourcesContent":["import { Component } from 'react'\nimport type { TextProps } from 'components/Text'\nimport { Spacer } from '../Spacer/Spacer'\nimport { Anchor } from '../Anchor/Anchor'\nimport { Text } from '../Text'\nimport * as Styled from './style'\n\nexport interface TextEllipseProps extends Omit<TextProps, 'content'> {\n /** Toggle text for folded state */\n moreText?: string\n /** Toggle text for unfolded state */\n lessText?: string\n /** Classname */\n className?: string\n /** Text content */\n content: string | string[]\n /** Characters quantity for ellipsed text */\n chars?: number\n /** Wrap text in quotes */\n quoted?: boolean\n /** Flag to show toggler */\n showToggler?: boolean\n}\n\ninterface TextEllipseState {\n isUnFolded: boolean\n isEllipsed: boolean\n}\n\nexport class TextEllipse extends Component<TextEllipseProps, TextEllipseState> {\n static displayName = 'Text.Ellipse'\n\n constructor(props: TextEllipseProps) {\n super(props)\n\n this.state = {\n isUnFolded: false,\n isEllipsed: false,\n }\n }\n\n componentDidUpdate({ content }: TextEllipseProps) {\n if (content !== this.props.content && this.state.isUnFolded) {\n this.toggle()\n }\n }\n\n getContent = (props: Omit<TextEllipseProps, 'className' | 'moreText' | 'lessText' | 'showToggler' | 'content'>) => {\n const { content, chars = 0 } = this.props\n\n if (!content) return ''\n\n let { isEllipsed } = this.state\n let text: string | string[] = typeof content === 'string' ? '' : []\n\n if (!this.state.isUnFolded) {\n if (typeof text === 'string') {\n isEllipsed = chars !== 0 && content.length > chars\n\n text = isEllipsed && chars !== 0 ? `${content.slice(0, chars)}...` : content\n } else {\n let leftChars = chars\n\n for (let index = 0; index < content.length; index++) {\n if (leftChars - content[index].length > 0) {\n leftChars -= content[index].length\n\n text[index] = content[index]\n } else {\n isEllipsed = true\n text[index] = `${content[index].slice(0, leftChars)}...`\n\n break\n }\n }\n }\n } else {\n text = content\n }\n\n if (this.state.isEllipsed !== isEllipsed) setTimeout(() => this.setState({ isEllipsed }))\n\n return typeof text === 'string' ? (\n <Text {...props}>{this.getQuted(text)}</Text>\n ) : (\n <Styled.Ul>\n {text.map((item, index) => (\n <Styled.Li key={index}>\n <Text {...props} display='inline'>\n {item}\n </Text>\n </Styled.Li>\n ))}\n </Styled.Ul>\n )\n }\n\n getQuted = (content: string) => (this.props.quoted ? `«${content}»` : content)\n\n toggle = () => {\n this.setState({ isUnFolded: !this.state.isUnFolded })\n }\n\n render() {\n const {\n className = '',\n style,\n moreText = 'Читать полностью',\n lessText = 'Свернуть',\n showToggler = true,\n ...restProps\n } = this.props\n const { isUnFolded, isEllipsed } = this.state\n\n return (\n <div className={className} style={style}>\n {this.getContent(restProps)}\n {showToggler && isEllipsed ? (\n <Spacer marginTop={16} marginBottom={1}>\n {/* eslint-disable-next-line react/jsx-handler-names */}\n <Anchor pseudo onClick={this.toggle}>\n {isUnFolded ? lessText : moreText}\n </Anchor>\n </Spacer>\n ) : null}\n </div>\n )\n }\n}\n"],"names":["TextEllipse","Component","static","constructor","props","super","this","state","isUnFolded","isEllipsed","componentDidUpdate","content","toggle","getContent","chars","text","length","slice","leftChars","index","setTimeout","setState","_jsx","Text","children","getQuted","Styled","map","item","display","quoted","render","className","style","moreText","lessText","showToggler","restProps","_jsxs","Spacer","marginTop","marginBottom","Anchor","pseudo","onClick"],"mappings":"yNA6BO,MAAMA,oBAAoBC,UAC/BC,mBAAqB,eAErBC,WAAAA,CAAYC,GACVC,MAAMD,GAENE,KAAKC,MAAQ,CACXC,YAAY,EACZC,YAAY,EAEhB,CAEAC,kBAAAA,EAAmBC,QAAEA,IACfA,IAAYL,KAAKF,MAAMO,SAAWL,KAAKC,MAAMC,YAC/CF,KAAKM,QAET,CAEAC,WAAcT,IACZ,MAAMO,QAAEA,EAAOG,MAAEA,EAAQ,GAAMR,KAAKF,MAEpC,IAAKO,EAAS,MAAO,GAErB,IAAIF,WAAEA,GAAeH,KAAKC,MAC1B,IAAIQ,SAAiCJ,GAAY,SAAW,GAAK,GAEjE,GAAKL,KAAKC,MAAMC,WAsBdO,EAAOJ,OArBP,UAAWI,GAAS,SAClBN,EAAaK,IAAU,GAAKH,EAAQK,OAASF,EAE7CC,EAAON,GAAcK,IAAU,EAAI,GAAGH,EAAQM,MAAM,EAAGH,QAAcH,MAChE,CACL,IAAIO,EAAYJ,EAEhB,IAAK,IAAIK,EAAQ,EAAGA,EAAQR,EAAQK,OAAQG,IAAS,CACnD,KAAID,EAAYP,EAAQQ,GAAOH,OAAS,GAIjC,CACLP,GAAa,EACbM,EAAKI,GAAS,GAAGR,EAAQQ,GAAOF,MAAM,EAAGC,QAEzC,KACF,CAREA,GAAaP,EAAQQ,GAAOH,OAE5BD,EAAKI,GAASR,EAAQQ,EAO1B,CACF,CAOF,OAFIb,KAAKC,MAAME,aAAeA,GAAYW,YAAW,IAAMd,KAAKe,SAAS,CAAEZ,wBAE7DM,GAAS,SACrBO,IAACC,KAAI,IAAKnB,EAAKoB,SAAGlB,KAAKmB,SAASV,KAEhCO,IAACI,GAAS,CAAAF,SACPT,EAAKY,KAAI,CAACC,EAAMT,IACfG,IAACI,GAAS,CAAAF,SACRF,IAACC,KAAI,IAAKnB,EAAOyB,QAAQ,SAAQL,SAC9BI,KAFWT,MAOrB,EAGHM,SAAYd,GAAqBL,KAAKF,MAAM0B,OAAS,IAAInB,KAAaA,EAEtEC,OAASA,KACPN,KAAKe,SAAS,CAAEb,YAAaF,KAAKC,MAAMC,YAAa,EAGvDuB,MAAAA,GACE,MAAMC,UACJA,EAAY,GAAEC,MACdA,EAAKC,SACLA,EAAW,mBAAkBC,SAC7BA,EAAW,WAAUC,YACrBA,GAAc,KACXC,GACD/B,KAAKF,MACT,MAAMI,WAAEA,EAAUC,WAAEA,GAAeH,KAAKC,MAExC,OACE+B,KAAA,MAAA,CAAKN,UAAWA,EAAWC,MAAOA,EAAMT,SACrC,CAAAlB,KAAKO,WAAWwB,GAChBD,GAAe3B,EACda,IAACiB,OAAM,CAACC,UAAW,GAAIC,aAAc,EAAEjB,SAErCF,IAACoB,OAAM,CAACC,QAAM,EAACC,QAAStC,KAAKM,OAAOY,SACjChB,EAAa2B,EAAWD,MAG3B,OAGV"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","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/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":["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","jsxs","_Fragment","children","jsx","undefined","placeholderColorDisabled","addon","cursor","icon","ResizeHandle","tabIndex","onKeyDown","displayName","SIZES_WITH_LABEL","SIZES"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Textarea.js","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":["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","jsxs","_Fragment","children","jsx","undefined","placeholderColorDisabled","addon","cursor","icon","ResizeHandle","tabIndex","onKeyDown","displayName","SIZES_WITH_LABEL","SIZES"],"mappings":"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"}
|
|
@@ -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/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":"spBAsBMA,MAAAA,eAAiB,WAYjBC,MAAAA,SAA2DC,gBAC/DC,YAA4D,CAACC,EAAOC,KAClE,MAAMC,EAAQC,WAEd,MAAMC,KACJA,EAAO,IAAGC,KACVA,EAAO,EAACC,QACRA,EAAU,GAAEC,cACZA,EAAgB,UAASC,QACzBA,GAAU,EAAIC,MACdA,EAAQP,EAAMQ,0BAAyBC,SACvCA,GAAW,EAAIC,QACfA,GAAU,EAAIC,MACdA,EAAQ,YAAWC,iBACnBA,EAAmB,SAAQC,SAC3BA,EAAQC,OACRA,EAAMC,SACNA,EAAQC,OACRA,EAAMC,UACNA,EAASC,QACTA,EAAOC,MACPA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,UACLA,EAASC,OACTA,EAAMC,UACNA,EAASC,SACTA,EAAQC,QACRA,EAAOC,QACPA,EAAOC,QACPA,EAAOC,SACPA,EAAQC,UACRA,EAASC,aACTA,EAAYC,YACZA,EAAWC,WACXA,EAAUC,WACVA,EAAUC,WACVA,EAAUC,YACVA,EAAWC,YACXA,EAAWC,eACXA,EAAcC,cACdA,EAAaC,aACbA,EAAYC,aACZA,EAAYC,aACZA,EAAYC,cACZA,EAAaC,aACbA,EAAYC,gBACZA,EAAeC,eACfA,EAAcC,cACdA,EAAaC,cACbA,EAAaC,cACbA,GAAaC,eACbA,GAAcC,WACdA,GAAUC,cACVA,GAAaC,aACbA,GAAYC,YACZA,GAAWC,YACXA,GAAWC,YACXA,GAAWC,aACXA,GAAYC,SACZA,GAAQC,QACRA,GAAOC,OACPA,GAAMC,OACNA,GAAMC,OACNA,GAAMC,QACNA,GAAOC,OACPA,GAAMC,QACNA,GAAOC,MACPA,GAAKC,MACLA,GAAKC,UACLA,GAASC,MACTA,GAAKC,SACLA,MACGC,IACD9E,EAEJ,MAAM+E,GAAcC,OAA4B,MAEhD,MAAMC,GAAmBD,OAA4B,MAErD,MAAME,GAAoBF,OAAuB,MAEjDG,oBAAoBlF,GAAc,IAAM8E,GAAYK,SAAgC,IAEpF,MAAOC,GAAUC,GAAmBC,IAAuBC,aAA8C,CACvGC,OAAQP,GACRQ,UAAW1E,IAGb,MAAM2E,GAAUC,SAAQ,IAAMC,UAAU,IAExC,MAAOC,GAAQC,IAAaC,UAAS,KACnC,MAAMC,EAAYnB,GAAcoB,OAASpB,GAAcqB,aAEvD,cAAcF,GAAc,UAAYA,EAAUG,OAAS,CAAC,IAG9D,MAAOC,GAAeC,IAAoBN,UAAS,IAAMO,KAAKC,IAAInG,EAAMC,KAExE,MAAMmG,GACHlC,KAAW,SAAWxD,GAAcwD,KAAW,SAAW5D,EAAY0F,GAAgBE,KAAKC,IAAInG,EAAMC,GAExG,MAAMoG,GAAe1F,IAAW,aAAe,YAAcA,IAAW,WAAa,YAAc,cAEnG,MAAM2F,GAAsBC,aAAY,KACtC,IAAK7B,GAAYK,QAAS,OAE1B,GAAIb,KAAW,QAAS,CACtB,IAAKU,GAAiBG,QAAS,OAE/BH,GAAiBG,QAAQc,MAAQnB,GAAYK,QAAQc,MAErD,MAAMW,EAAWN,KAAKO,IACpBP,KAAKQ,MAAM9B,GAAiBG,QAAQ4B,aAAe/B,GAAiBG,QAAQ6B,cAC5E5G,GAKF,YAFAiG,GAAiBC,KAAKC,IAAIK,EAAUvG,GAGtC,CAEA,MAAM4G,EAASC,iBAAiBpC,GAAYK,SAE5C,MAAMgC,EAAaC,WAAWH,EAAOE,YAErC,MAAMP,EAAWN,KAAKO,IACpBP,KAAKQ,OACFhC,GAAYK,QAAQ4B,aAAeK,WAAWH,EAAOI,YAAcD,WAAWH,EAAOK,iBACnFC,OAAOC,MAAML,GAAcC,WAAWH,EAAOQ,UAAY,IAAMN,IAEpE/G,GAGFiG,IAAkBqB,GACZd,EAAWc,EAAiBpB,KAAKC,IAAIK,EAAUvG,GAC/CyE,GAAYK,UAAYL,GAAYK,QAAQc,MAAc7F,EAEvDsH,GACP,GACD,CAACpD,GAAQlE,EAAMC,IA0BlB,OAxBAsH,iBAAgB,KAEZrD,KAAW,gBACJO,GAAcoB,OAAU,UAC/BnB,GAAYK,SACZL,GAAYK,UAAYyC,SAASC,eAEjC/B,GAAUjB,GAAcoB,MAAME,OAAS,EACzC,GACC,CAAC7B,GAAQO,GAAcoB,QAE1B6B,WAAU,KACR,MAAMC,EAAeC,wBAAiCtB,GAAqB,KAO3E,OALKpC,KAAW,SAAWxD,GAAcwD,KAAW,SAAW5D,KAC7DgG,KACAuB,OAAOC,iBAAiB,SAAUH,IAG7B,KACLE,OAAOE,oBAAoB,SAAUJ,EAAa,CACnD,GACA,CAACzD,GAAQxD,EAAUJ,EAAUgG,KAE5BpC,KAAW,QAEX8D,IAACC,KAAW,IACNxD,GACJyD,IAAKxD,GACLJ,UAAWA,GACXC,MAAOA,GACP4D,SAAWC,IACL9H,GAAUgG,KACV7B,GAAc0D,UAAU1D,GAAc0D,SAASC,EAAI,EAEzDpI,KAAMoG,GACN5F,MAAOA,EACPD,QAASA,EACTE,iBAAkBA,EAClB+D,SAAUA,GACVxD,MAAOA,EACPqD,MAAOA,GACPjE,MAAOA,EACPwD,SAAUA,GACVC,QAASA,GACTC,OAAQA,GACRC,OAAQA,GACRC,OAAQA,GACRC,QAASA,KAMb+D,IAACK,eAAc,CACbH,IAAKrD,GACL9E,KAAMA,EACNkB,QAASA,EACTC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRC,MAAOA,EACPC,UAAWA,EACXC,OAAQA,EACRC,UAAWA,EACXC,SAAUA,EACVC,QAASA,EACTC,QAASA,EACTC,QAASA,EACTC,SAAUA,EACVC,UAAWA,EACXC,aAAcA,EACdC,YAAaA,EACbC,WAAYA,EACZC,WAAYA,EACZC,WAAYA,EACZC,YAAaA,EACbC,YAAaA,EACbC,eAAgBA,EAChBC,cAAeA,EACfC,aAAcA,EACdC,aAAcA,EACdC,aAAcA,EACdC,cAAeA,EACfC,aAAcA,EACdC,gBAAiBA,EACjBC,eAAgBA,EAChBC,cAAeA,EACfC,cAAeA,EACfC,cAAeA,GACfC,eAAgBA,GAChBC,WAAYA,GACZC,cAAeA,GACfC,aAAcA,GACdC,YAAaA,GACbC,YAAaA,GACbC,YAAaA,GACbC,aAAcA,GACdW,UAAWA,GACXC,MAAOA,GACP3D,SAAUA,EACVI,MAAOA,EACPH,OAAQA,EACRuD,MAAOA,GACPkB,QAASA,GACTpF,cAAeA,EACfsE,SAAUA,GACViB,OAAQA,GACRtF,QAASA,EACTW,UAAWA,EACXC,QAASA,EACToD,QAAS,CACP3D,MAAOgE,GAAWL,GAAQmE,cAAgBnE,GAAQ3D,MAClD+H,gBAAiB/D,GAAWL,GAAQqE,wBAA0BrE,GAAQoE,gBACtEE,qBAAsBjE,GAAWL,GAAQqE,wBAA0BrE,GAAQsE,qBAC3EC,YAAalE,GAAWL,GAAQwE,oBAAsBxE,GAAQuE,aAEhEE,QAASA,KACHlE,GAAYK,SACdL,GAAYK,QAAQ8D,OACtB,EAEFC,QAASA,KACPpD,IAAU,EAAK,EAEjBqD,cAAgBX,IACVA,EAAIhD,SAAWV,GAAYK,SAAaqD,EAAIhD,kBAAkB4D,MAGlEZ,EAAIa,gBAAgB,EAEtBC,OAASd,IACH1D,GAAYK,UAAYqD,EAAIe,cAAcC,SAAShB,EAAIiB,gBACzD3D,GAAU4D,QAAQ5E,GAAYK,QAAQc,OACxC,EAEF0D,SAAS,SACTC,cAAc,UACdC,MACEC,KAAAC,SAAA,CAAAC,UACGlJ,EAAWsH,IAACC,cAAoB,CAACC,IAAKtD,GAAkB5E,KAAM,IAAQ,KACvEgI,IAACC,WAAe,IACVxD,GACJyD,IAAKxD,GACL,kBAAiBN,GAAQkB,QAAUuE,EACnCrF,SAAUA,GACV2D,SAAWC,IACL1H,GAAU4F,KACV7B,GAAc0D,UAAU1D,GAAc0D,SAASC,EAAI,EAEzDpI,KAAMoG,GACNjC,QAAS,CACP3D,MAAO2D,GAAQ3D,MACf8H,cAAenE,GAAQmE,cACvB7H,iBAAkB0D,GAAQ1D,iBAC1BqJ,yBAA0B3F,GAAQ2F,+BAK1CC,MACEpJ,EACE+I,KAAAC,SAAA,CAAAC,UACG5E,GAAWgD,IAACC,cAAoB,CAAC+B,OAAQ3D,KAAmB,KAC7D2B,IAACC,WAAiB,CAChBlI,KAAK,IACLkK,KAAMjC,IAACkC,iBACP1J,MAAM,8BACN2J,SAAU,EACVpB,cAAe9D,GACfmF,UAAWlF,GACX8E,OAAQ3D,aAGVwD,GAEN,IAGN,CACEQ,YArVmB,WAsVnB9I,MAAQ5B,GAAWA,EAAMyE,MAAQkG,iBAAmBC"}
|
|
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":"spBAsBMA,MAAAA,eAAiB,WAYjBC,MAAAA,SAA2DC,gBAC/DC,YAA4D,CAACC,EAAOC,KAClE,MAAMC,EAAQC,WAEd,MAAMC,KACJA,EAAO,IAAGC,KACVA,EAAO,EAACC,QACRA,EAAU,GAAEC,cACZA,EAAgB,UAASC,QACzBA,GAAU,EAAIC,MACdA,EAAQP,EAAMQ,0BAAyBC,SACvCA,GAAW,EAAIC,QACfA,GAAU,EAAIC,MACdA,EAAQ,YAAWC,iBACnBA,EAAmB,SAAQC,SAC3BA,EAAQC,OACRA,EAAMC,SACNA,EAAQC,OACRA,EAAMC,UACNA,EAASC,QACTA,EAAOC,MACPA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,UACLA,EAASC,OACTA,EAAMC,UACNA,EAASC,SACTA,EAAQC,QACRA,EAAOC,QACPA,EAAOC,QACPA,EAAOC,SACPA,EAAQC,UACRA,EAASC,aACTA,EAAYC,YACZA,EAAWC,WACXA,EAAUC,WACVA,EAAUC,WACVA,EAAUC,YACVA,EAAWC,YACXA,EAAWC,eACXA,EAAcC,cACdA,EAAaC,aACbA,EAAYC,aACZA,EAAYC,aACZA,EAAYC,cACZA,EAAaC,aACbA,EAAYC,gBACZA,EAAeC,eACfA,EAAcC,cACdA,EAAaC,cACbA,EAAaC,cACbA,GAAaC,eACbA,GAAcC,WACdA,GAAUC,cACVA,GAAaC,aACbA,GAAYC,YACZA,GAAWC,YACXA,GAAWC,YACXA,GAAWC,aACXA,GAAYC,SACZA,GAAQC,QACRA,GAAOC,OACPA,GAAMC,OACNA,GAAMC,OACNA,GAAMC,QACNA,GAAOC,OACPA,GAAMC,QACNA,GAAOC,MACPA,GAAKC,MACLA,GAAKC,UACLA,GAASC,MACTA,GAAKC,SACLA,MACGC,IACD9E,EAEJ,MAAM+E,GAAcC,OAA4B,MAEhD,MAAMC,GAAmBD,OAA4B,MAErD,MAAME,GAAoBF,OAAuB,MAEjDG,oBAAoBlF,GAAc,IAAM8E,GAAYK,SAAgC,IAEpF,MAAOC,GAAUC,GAAmBC,IAAuBC,aAA8C,CACvGC,OAAQP,GACRQ,UAAW1E,IAGb,MAAM2E,GAAUC,SAAQ,IAAMC,UAAU,IAExC,MAAOC,GAAQC,IAAaC,UAAS,KACnC,MAAMC,EAAYnB,GAAcoB,OAASpB,GAAcqB,aAEvD,cAAcF,GAAc,UAAYA,EAAUG,OAAS,CAAC,IAG9D,MAAOC,GAAeC,IAAoBN,UAAS,IAAMO,KAAKC,IAAInG,EAAMC,KAExE,MAAMmG,GACHlC,KAAW,SAAWxD,GAAcwD,KAAW,SAAW5D,EAAY0F,GAAgBE,KAAKC,IAAInG,EAAMC,GAExG,MAAMoG,GAAe1F,IAAW,aAAe,YAAcA,IAAW,WAAa,YAAc,cAEnG,MAAM2F,GAAsBC,aAAY,KACtC,IAAK7B,GAAYK,QAAS,OAE1B,GAAIb,KAAW,QAAS,CACtB,IAAKU,GAAiBG,QAAS,OAE/BH,GAAiBG,QAAQc,MAAQnB,GAAYK,QAAQc,MAErD,MAAMW,EAAWN,KAAKO,IACpBP,KAAKQ,MAAM9B,GAAiBG,QAAQ4B,aAAe/B,GAAiBG,QAAQ6B,cAC5E5G,GAKF,YAFAiG,GAAiBC,KAAKC,IAAIK,EAAUvG,GAGtC,CAEA,MAAM4G,EAASC,iBAAiBpC,GAAYK,SAE5C,MAAMgC,EAAaC,WAAWH,EAAOE,YAErC,MAAMP,EAAWN,KAAKO,IACpBP,KAAKQ,OACFhC,GAAYK,QAAQ4B,aAAeK,WAAWH,EAAOI,YAAcD,WAAWH,EAAOK,iBACnFC,OAAOC,MAAML,GAAcC,WAAWH,EAAOQ,UAAY,IAAMN,IAEpE/G,GAGFiG,IAAkBqB,GACZd,EAAWc,EAAiBpB,KAAKC,IAAIK,EAAUvG,GAC/CyE,GAAYK,UAAYL,GAAYK,QAAQc,MAAc7F,EAEvDsH,GACP,GACD,CAACpD,GAAQlE,EAAMC,IA0BlB,OAxBAsH,iBAAgB,KAEZrD,KAAW,gBACJO,GAAcoB,OAAU,UAC/BnB,GAAYK,SACZL,GAAYK,UAAYyC,SAASC,eAEjC/B,GAAUjB,GAAcoB,MAAME,OAAS,EACzC,GACC,CAAC7B,GAAQO,GAAcoB,QAE1B6B,WAAU,KACR,MAAMC,EAAeC,wBAAiCtB,GAAqB,KAO3E,OALKpC,KAAW,SAAWxD,GAAcwD,KAAW,SAAW5D,KAC7DgG,KACAuB,OAAOC,iBAAiB,SAAUH,IAG7B,KACLE,OAAOE,oBAAoB,SAAUJ,EAAa,CACnD,GACA,CAACzD,GAAQxD,EAAUJ,EAAUgG,KAE5BpC,KAAW,QAEX8D,IAACC,KAAW,IACNxD,GACJyD,IAAKxD,GACLJ,UAAWA,GACXC,MAAOA,GACP4D,SAAWC,IACL9H,GAAUgG,KACV7B,GAAc0D,UAAU1D,GAAc0D,SAASC,EAAI,EAEzDpI,KAAMoG,GACN5F,MAAOA,EACPD,QAASA,EACTE,iBAAkBA,EAClB+D,SAAUA,GACVxD,MAAOA,EACPqD,MAAOA,GACPjE,MAAOA,EACPwD,SAAUA,GACVC,QAASA,GACTC,OAAQA,GACRC,OAAQA,GACRC,OAAQA,GACRC,QAASA,KAMb+D,IAACK,eAAc,CACbH,IAAKrD,GACL9E,KAAMA,EACNkB,QAASA,EACTC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRC,MAAOA,EACPC,UAAWA,EACXC,OAAQA,EACRC,UAAWA,EACXC,SAAUA,EACVC,QAASA,EACTC,QAASA,EACTC,QAASA,EACTC,SAAUA,EACVC,UAAWA,EACXC,aAAcA,EACdC,YAAaA,EACbC,WAAYA,EACZC,WAAYA,EACZC,WAAYA,EACZC,YAAaA,EACbC,YAAaA,EACbC,eAAgBA,EAChBC,cAAeA,EACfC,aAAcA,EACdC,aAAcA,EACdC,aAAcA,EACdC,cAAeA,EACfC,aAAcA,EACdC,gBAAiBA,EACjBC,eAAgBA,EAChBC,cAAeA,EACfC,cAAeA,EACfC,cAAeA,GACfC,eAAgBA,GAChBC,WAAYA,GACZC,cAAeA,GACfC,aAAcA,GACdC,YAAaA,GACbC,YAAaA,GACbC,YAAaA,GACbC,aAAcA,GACdW,UAAWA,GACXC,MAAOA,GACP3D,SAAUA,EACVI,MAAOA,EACPH,OAAQA,EACRuD,MAAOA,GACPkB,QAASA,GACTpF,cAAeA,EACfsE,SAAUA,GACViB,OAAQA,GACRtF,QAASA,EACTW,UAAWA,EACXC,QAASA,EACToD,QAAS,CACP3D,MAAOgE,GAAWL,GAAQmE,cAAgBnE,GAAQ3D,MAClD+H,gBAAiB/D,GAAWL,GAAQqE,wBAA0BrE,GAAQoE,gBACtEE,qBAAsBjE,GAAWL,GAAQqE,wBAA0BrE,GAAQsE,qBAC3EC,YAAalE,GAAWL,GAAQwE,oBAAsBxE,GAAQuE,aAEhEE,QAASA,KACHlE,GAAYK,SACdL,GAAYK,QAAQ8D,OACtB,EAEFC,QAASA,KACPpD,IAAU,EAAK,EAEjBqD,cAAgBX,IACVA,EAAIhD,SAAWV,GAAYK,SAAaqD,EAAIhD,kBAAkB4D,MAGlEZ,EAAIa,gBAAgB,EAEtBC,OAASd,IACH1D,GAAYK,UAAYqD,EAAIe,cAAcC,SAAShB,EAAIiB,gBACzD3D,GAAU4D,QAAQ5E,GAAYK,QAAQc,OACxC,EAEF0D,SAAS,SACTC,cAAc,UACdC,MACEC,KAAAC,SAAA,CAAAC,UACGlJ,EAAWsH,IAACC,cAAoB,CAACC,IAAKtD,GAAkB5E,KAAM,IAAQ,KACvEgI,IAACC,WAAe,IACVxD,GACJyD,IAAKxD,GACL,kBAAiBN,GAAQkB,QAAUuE,EACnCrF,SAAUA,GACV2D,SAAWC,IACL1H,GAAU4F,KACV7B,GAAc0D,UAAU1D,GAAc0D,SAASC,EAAI,EAEzDpI,KAAMoG,GACNjC,QAAS,CACP3D,MAAO2D,GAAQ3D,MACf8H,cAAenE,GAAQmE,cACvB7H,iBAAkB0D,GAAQ1D,iBAC1BqJ,yBAA0B3F,GAAQ2F,+BAK1CC,MACEpJ,EACE+I,KAAAC,SAAA,CAAAC,UACG5E,GAAWgD,IAACC,cAAoB,CAAC+B,OAAQ3D,KAAmB,KAC7D2B,IAACC,WAAiB,CAChBlI,KAAK,IACLkK,KAAMjC,IAACkC,iBACP1J,MAAM,8BACN2J,SAAU,EACVpB,cAAe9D,GACfmF,UAAWlF,GACX8E,OAAQ3D,aAGVwD,GAEN,IAGN,CACEQ,YArVmB,WAsVnB9I,MAAQ5B,GAAWA,EAAMyE,MAAQkG,iBAAmBC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, useState, useLayoutEffect } from 'react'\nimport { useTheme } from 'styled-components'\nimport Floater from 'react-floater'\nimport type { Props as FloaterProps, PopperInstance, Styles } from 'react-floater'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useResizeObserver } from 'hooks/useResizeObserver'\nimport { SIZES, TooltipComponent } from 'components/TooltipComponent'\nimport { deepmerge } from 'shared/utils/misc'\nimport { TooltipWrapper } from './TooltipWrapper'\nimport { TOOLTIP_STYLES_DEFAULT } from './default-constants'\nimport type { TooltipProps } from './types'\n\nconst COMPONENT_NAME = 'Tooltip'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Компонент основан на [\"react-floater\"](https://www.npmjs.com/package/react-floater).\n *\n * Получить доступ к компоненту, не подключенному к библиотеке, можно через `Tooltip.Component`.\n *\n * Полный интерфейс `Tooltip` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Tooltip/types.ts), интерфейс `Tooltip.Component` [тут](https://github.com/foxford/ui/blob/master/src/components/TooltipComponent/types.ts).\n *\n */\nconst Tooltip: React.ForwardRefExoticComponent<TooltipProps> & { Component: typeof TooltipComponent } = Object.assign(\n withMergedProps<TooltipProps, HTMLDivElement>(\n forwardRef<HTMLDivElement, MergedProps<TooltipProps>>((props, ref) => {\n const {\n preset,\n size = 's',\n styles = {},\n closeOnClickOutside = false,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n palette,\n black,\n contrast,\n titleProps,\n contentProps,\n closeButtonProps,\n closeOnScroll,\n portalElement,\n zIndex,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n const [portal, setPortal] = useState<HTMLElement | null>(null)\n const [popper, setPopper] = useState<PopperInstance | null>(null)\n\n const floaterStyles: Partial<Styles> =\n typeof zIndex === 'number' ? deepmerge(styles, { options: { zIndex } }) : styles\n\n useLayoutEffect(() => {\n if (portalElement) {\n setPortal(null)\n } else if (document.body) {\n let popperPortal = document.querySelector<HTMLElement>('[data-popper-portal]')\n\n if (!popperPortal) {\n popperPortal = document.createElement('div')\n popperPortal.dataset.popperPortal = 'true'\n popperPortal.style.position = 'relative'\n\n document.body.appendChild(popperPortal)\n }\n\n setPortal(popperPortal)\n }\n }, [portalElement])\n\n useResizeObserver({\n target: document.body,\n onResize: () => {\n if (popper && popper.state.options.strategy === 'absolute') {\n popper.update()\n }\n },\n })\n\n if (!portalElement && !portal) {\n return null\n }\n\n if (preset !== 'brand') {\n const tooltipProps = {\n ...restProps,\n portalElement: portalElement ?? portal,\n styles: deepmerge(TOOLTIP_STYLES_DEFAULT, floaterStyles),\n } as FloaterProps\n\n return (\n <Floater {...tooltipProps}>\n <span>{tooltipProps.children}</span>\n </Floater>\n )\n }\n\n let color = theme.colors['bg-onmain-primary']\n\n if (black) color = theme.colors['bg-onmain-inverse']\n if (contrast) color = theme.colors['bg-brand-primary-basic']\n if (palette?.backgroundColor) {\n color = theme.colors[palette.backgroundColor as keyof typeof theme.colors] ?? palette.backgroundColor\n }\n\n const tooltipProps = {\n ...restProps,\n portalElement: portalElement ?? portal,\n getPopper: (popperInstance, origin) => {\n setPopper(popperInstance)\n if (restProps.getPopper) {\n restProps.getPopper(popperInstance, origin)\n }\n },\n offset: restProps.offset ?? 8,\n styles: deepmerge(\n {\n arrow: {\n color,\n spread: 16,\n length: 8,\n },\n floater: {\n filter: `drop-shadow(0 6px 10px ${theme.colors['bg-oncolor-hover']})`,\n },\n },\n floaterStyles\n ),\n component: (\n <TooltipWrapper\n ref={ref}\n size={size}\n sizeXXS={sizeXXS}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n sizeUnits={sizeUnits}\n sizes={sizes}\n palette={palette}\n black={black}\n contrast={contrast}\n title={restProps.title}\n titleProps={titleProps}\n content={restProps.content}\n contentProps={contentProps}\n footer={restProps.footer}\n showCloseButton={restProps.showCloseButton}\n closeButtonProps={closeButtonProps}\n closeOnClickOutside={closeOnClickOutside}\n closeOnScroll={closeOnScroll}\n component={restProps.component}\n />\n ),\n } as FloaterProps\n\n return (\n <Floater\n {...tooltipProps}\n modifiers={{\n flip: {\n enabled: !tooltipProps.disableFlip,\n },\n }}\n />\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n ),\n {\n Component: TooltipComponent,\n }\n)\n\nexport { Tooltip }\n\nexport { COMPONENT_NAME }\n"],"names":["Tooltip","Object","assign","withMergedProps","forwardRef","props","ref","preset","size","styles","closeOnClickOutside","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","palette","black","contrast","titleProps","contentProps","closeButtonProps","closeOnScroll","portalElement","zIndex","restProps","theme","useTheme","portal","setPortal","useState","popper","setPopper","floaterStyles","deepmerge","options","useLayoutEffect","document","body","popperPortal","querySelector","createElement","dataset","style","position","appendChild","useResizeObserver","target","onResize","state","strategy","update","tooltipProps","TOOLTIP_STYLES_DEFAULT","_jsx","Floater","children","jsx","color","colors","backgroundColor","getPopper","popperInstance","origin","offset","arrow","spread","length","floater","filter","component","TooltipWrapper","title","content","footer","showCloseButton","modifiers","flip","enabled","disableFlip","displayName","SIZES","Component","TooltipComponent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, useState, useLayoutEffect } from 'react'\nimport { useTheme } from 'styled-components'\nimport Floater from 'react-floater'\nimport type { Props as FloaterProps, PopperInstance, Styles } from 'react-floater'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useResizeObserver } from 'hooks/useResizeObserver'\nimport { SIZES, TooltipComponent } from 'components/TooltipComponent'\nimport { deepmerge } from 'shared/utils/misc'\nimport { TooltipWrapper } from './TooltipWrapper'\nimport { TOOLTIP_STYLES_DEFAULT } from './default-constants'\nimport type { TooltipProps } from './types'\n\nconst COMPONENT_NAME = 'Tooltip'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Компонент основан на [\"react-floater\"](https://www.npmjs.com/package/react-floater).\n *\n * Получить доступ к компоненту, не подключенному к библиотеке, можно через `Tooltip.Component`.\n *\n * Полный интерфейс `Tooltip` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/Tooltip/types.ts), интерфейс `Tooltip.Component` [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/TooltipComponent/types.ts).\n *\n */\nconst Tooltip: React.ForwardRefExoticComponent<TooltipProps> & { Component: typeof TooltipComponent } = Object.assign(\n withMergedProps<TooltipProps, HTMLDivElement>(\n forwardRef<HTMLDivElement, MergedProps<TooltipProps>>((props, ref) => {\n const {\n preset,\n size = 's',\n styles = {},\n closeOnClickOutside = false,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n palette,\n black,\n contrast,\n titleProps,\n contentProps,\n closeButtonProps,\n closeOnScroll,\n portalElement,\n zIndex,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n const [portal, setPortal] = useState<HTMLElement | null>(null)\n const [popper, setPopper] = useState<PopperInstance | null>(null)\n\n const floaterStyles: Partial<Styles> =\n typeof zIndex === 'number' ? deepmerge(styles, { options: { zIndex } }) : styles\n\n useLayoutEffect(() => {\n if (portalElement) {\n setPortal(null)\n } else if (document.body) {\n let popperPortal = document.querySelector<HTMLElement>('[data-popper-portal]')\n\n if (!popperPortal) {\n popperPortal = document.createElement('div')\n popperPortal.dataset.popperPortal = 'true'\n popperPortal.style.position = 'relative'\n\n document.body.appendChild(popperPortal)\n }\n\n setPortal(popperPortal)\n }\n }, [portalElement])\n\n useResizeObserver({\n target: document.body,\n onResize: () => {\n if (popper && popper.state.options.strategy === 'absolute') {\n popper.update()\n }\n },\n })\n\n if (!portalElement && !portal) {\n return null\n }\n\n if (preset !== 'brand') {\n const tooltipProps = {\n ...restProps,\n portalElement: portalElement ?? portal,\n styles: deepmerge(TOOLTIP_STYLES_DEFAULT, floaterStyles),\n } as FloaterProps\n\n return (\n <Floater {...tooltipProps}>\n <span>{tooltipProps.children}</span>\n </Floater>\n )\n }\n\n let color = theme.colors['bg-onmain-primary']\n\n if (black) color = theme.colors['bg-onmain-inverse']\n if (contrast) color = theme.colors['bg-brand-primary-basic']\n if (palette?.backgroundColor) {\n color = theme.colors[palette.backgroundColor as keyof typeof theme.colors] ?? palette.backgroundColor\n }\n\n const tooltipProps = {\n ...restProps,\n portalElement: portalElement ?? portal,\n getPopper: (popperInstance, origin) => {\n setPopper(popperInstance)\n if (restProps.getPopper) {\n restProps.getPopper(popperInstance, origin)\n }\n },\n offset: restProps.offset ?? 8,\n styles: deepmerge(\n {\n arrow: {\n color,\n spread: 16,\n length: 8,\n },\n floater: {\n filter: `drop-shadow(0 6px 10px ${theme.colors['bg-oncolor-hover']})`,\n },\n },\n floaterStyles\n ),\n component: (\n <TooltipWrapper\n ref={ref}\n size={size}\n sizeXXS={sizeXXS}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n sizeUnits={sizeUnits}\n sizes={sizes}\n palette={palette}\n black={black}\n contrast={contrast}\n title={restProps.title}\n titleProps={titleProps}\n content={restProps.content}\n contentProps={contentProps}\n footer={restProps.footer}\n showCloseButton={restProps.showCloseButton}\n closeButtonProps={closeButtonProps}\n closeOnClickOutside={closeOnClickOutside}\n closeOnScroll={closeOnScroll}\n component={restProps.component}\n />\n ),\n } as FloaterProps\n\n return (\n <Floater\n {...tooltipProps}\n modifiers={{\n flip: {\n enabled: !tooltipProps.disableFlip,\n },\n }}\n />\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n ),\n {\n Component: TooltipComponent,\n }\n)\n\nexport { Tooltip }\n\nexport { COMPONENT_NAME }\n"],"names":["Tooltip","Object","assign","withMergedProps","forwardRef","props","ref","preset","size","styles","closeOnClickOutside","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","palette","black","contrast","titleProps","contentProps","closeButtonProps","closeOnScroll","portalElement","zIndex","restProps","theme","useTheme","portal","setPortal","useState","popper","setPopper","floaterStyles","deepmerge","options","useLayoutEffect","document","body","popperPortal","querySelector","createElement","dataset","style","position","appendChild","useResizeObserver","target","onResize","state","strategy","update","tooltipProps","TOOLTIP_STYLES_DEFAULT","_jsx","Floater","children","jsx","color","colors","backgroundColor","getPopper","popperInstance","origin","offset","arrow","spread","length","floater","filter","component","TooltipWrapper","title","content","footer","showCloseButton","modifiers","flip","enabled","disableFlip","displayName","SIZES","Component","TooltipComponent"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.mjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, useState, useLayoutEffect } from 'react'\nimport { useTheme } from 'styled-components'\nimport Floater from 'react-floater'\nimport type { Props as FloaterProps, PopperInstance, Styles } from 'react-floater'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useResizeObserver } from 'hooks/useResizeObserver'\nimport { SIZES, TooltipComponent } from 'components/TooltipComponent'\nimport { deepmerge } from 'shared/utils/misc'\nimport { TooltipWrapper } from './TooltipWrapper'\nimport { TOOLTIP_STYLES_DEFAULT } from './default-constants'\nimport type { TooltipProps } from './types'\n\nconst COMPONENT_NAME = 'Tooltip'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Компонент основан на [\"react-floater\"](https://www.npmjs.com/package/react-floater).\n *\n * Получить доступ к компоненту, не подключенному к библиотеке, можно через `Tooltip.Component`.\n *\n * Полный интерфейс `Tooltip` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Tooltip/types.ts), интерфейс `Tooltip.Component` [тут](https://github.com/foxford/ui/blob/master/src/components/TooltipComponent/types.ts).\n *\n */\nconst Tooltip: React.ForwardRefExoticComponent<TooltipProps> & { Component: typeof TooltipComponent } = Object.assign(\n withMergedProps<TooltipProps, HTMLDivElement>(\n forwardRef<HTMLDivElement, MergedProps<TooltipProps>>((props, ref) => {\n const {\n preset,\n size = 's',\n styles = {},\n closeOnClickOutside = false,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n palette,\n black,\n contrast,\n titleProps,\n contentProps,\n closeButtonProps,\n closeOnScroll,\n portalElement,\n zIndex,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n const [portal, setPortal] = useState<HTMLElement | null>(null)\n const [popper, setPopper] = useState<PopperInstance | null>(null)\n\n const floaterStyles: Partial<Styles> =\n typeof zIndex === 'number' ? deepmerge(styles, { options: { zIndex } }) : styles\n\n useLayoutEffect(() => {\n if (portalElement) {\n setPortal(null)\n } else if (document.body) {\n let popperPortal = document.querySelector<HTMLElement>('[data-popper-portal]')\n\n if (!popperPortal) {\n popperPortal = document.createElement('div')\n popperPortal.dataset.popperPortal = 'true'\n popperPortal.style.position = 'relative'\n\n document.body.appendChild(popperPortal)\n }\n\n setPortal(popperPortal)\n }\n }, [portalElement])\n\n useResizeObserver({\n target: document.body,\n onResize: () => {\n if (popper && popper.state.options.strategy === 'absolute') {\n popper.update()\n }\n },\n })\n\n if (!portalElement && !portal) {\n return null\n }\n\n if (preset !== 'brand') {\n const tooltipProps = {\n ...restProps,\n portalElement: portalElement ?? portal,\n styles: deepmerge(TOOLTIP_STYLES_DEFAULT, floaterStyles),\n } as FloaterProps\n\n return (\n <Floater {...tooltipProps}>\n <span>{tooltipProps.children}</span>\n </Floater>\n )\n }\n\n let color = theme.colors['bg-onmain-primary']\n\n if (black) color = theme.colors['bg-onmain-inverse']\n if (contrast) color = theme.colors['bg-brand-primary-basic']\n if (palette?.backgroundColor) {\n color = theme.colors[palette.backgroundColor as keyof typeof theme.colors] ?? palette.backgroundColor\n }\n\n const tooltipProps = {\n ...restProps,\n portalElement: portalElement ?? portal,\n getPopper: (popperInstance, origin) => {\n setPopper(popperInstance)\n if (restProps.getPopper) {\n restProps.getPopper(popperInstance, origin)\n }\n },\n offset: restProps.offset ?? 8,\n styles: deepmerge(\n {\n arrow: {\n color,\n spread: 16,\n length: 8,\n },\n floater: {\n filter: `drop-shadow(0 6px 10px ${theme.colors['bg-oncolor-hover']})`,\n },\n },\n floaterStyles\n ),\n component: (\n <TooltipWrapper\n ref={ref}\n size={size}\n sizeXXS={sizeXXS}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n sizeUnits={sizeUnits}\n sizes={sizes}\n palette={palette}\n black={black}\n contrast={contrast}\n title={restProps.title}\n titleProps={titleProps}\n content={restProps.content}\n contentProps={contentProps}\n footer={restProps.footer}\n showCloseButton={restProps.showCloseButton}\n closeButtonProps={closeButtonProps}\n closeOnClickOutside={closeOnClickOutside}\n closeOnScroll={closeOnScroll}\n component={restProps.component}\n />\n ),\n } as FloaterProps\n\n return (\n <Floater\n {...tooltipProps}\n modifiers={{\n flip: {\n enabled: !tooltipProps.disableFlip,\n },\n }}\n />\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n ),\n {\n Component: TooltipComponent,\n }\n)\n\nexport { Tooltip }\n\nexport { COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Tooltip","Object","assign","withMergedProps","forwardRef","props","ref","preset","size","styles","closeOnClickOutside","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","palette","black","contrast","titleProps","contentProps","closeButtonProps","closeOnScroll","portalElement","zIndex","restProps","theme","useTheme","portal","setPortal","useState","popper","setPopper","floaterStyles","deepmerge","options","useLayoutEffect","document","body","popperPortal","querySelector","createElement","dataset","style","position","appendChild","useResizeObserver","target","onResize","state","strategy","update","tooltipProps","TOOLTIP_STYLES_DEFAULT","_jsx","Floater","children","color","colors","backgroundColor","getPopper","popperInstance","origin","offset","arrow","spread","length","floater","filter","component","TooltipWrapper","title","content","footer","showCloseButton","modifiers","flip","enabled","disableFlip","displayName","SIZES","Component","TooltipComponent"],"mappings":"8jBAaMA,MAAAA,eAAiB,UAiBvB,MAAMC,QAAkGC,OAAOC,OAC7GC,gBACEC,YAAsD,CAACC,EAAOC,KAC5D,MAAMC,OACJA,EAAMC,KACNA,EAAO,IAAGC,OACVA,EAAS,CAAE,EAAAC,oBACXA,GAAsB,EAAKC,QAC3BA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,MACTA,EAAKC,QACLA,EAAOC,MACPA,EAAKC,SACLA,EAAQC,WACRA,EAAUC,aACVA,EAAYC,iBACZA,EAAgBC,cAChBA,EAAaC,cACbA,EAAaC,OACbA,KACGC,GACDvB,EAEJ,MAAMwB,EAAQC,WAEd,MAAOC,EAAQC,GAAaC,SAA6B,MACzD,MAAOC,EAAQC,GAAaF,SAAgC,MAE5D,MAAMG,SACGT,GAAW,SAAWU,UAAU5B,EAAQ,CAAE6B,QAAS,CAAEX,YAAclB,EA6B5E,GA3BA8B,iBAAgB,KACd,GAAIb,EACFM,EAAU,WACL,GAAIQ,SAASC,KAAM,CACxB,IAAIC,EAAeF,SAASG,cAA2B,wBAElDD,IACHA,EAAeF,SAASI,cAAc,OACtCF,EAAaG,QAAQH,aAAe,OACpCA,EAAaI,MAAMC,SAAW,WAE9BP,SAASC,KAAKO,YAAYN,IAG5BV,EAAUU,EACZ,IACC,CAAChB,IAEJuB,kBAAkB,CAChBC,OAAQV,SAASC,KACjBU,SAAUA,KACJjB,GAAUA,EAAOkB,MAAMd,QAAQe,WAAa,YAC9CnB,EAAOoB,QACT,KAIC5B,IAAkBK,EACrB,OAAO,KAGT,GAAIxB,IAAW,QAAS,CACtB,MAAMgD,EAAe,IAChB3B,EACHF,cAAeA,GAAiBK,EAChCtB,OAAQ4B,UAAUmB,uBAAwBpB,IAG5C,OACEqB,IAACC,QAAO,IAAKH,EAAYI,SACvBF,IAAA,OAAA,CAAAE,SAAOJ,EAAaI,YAG1B,CAEA,IAAIC,EAAQ/B,EAAMgC,OAAO,qBAErBzC,IAAOwC,EAAQ/B,EAAMgC,OAAO,sBAC5BxC,IAAUuC,EAAQ/B,EAAMgC,OAAO,2BAC/B1C,GAAS2C,kBACXF,EAAQ/B,EAAMgC,OAAO1C,EAAQ2C,kBAAiD3C,EAAQ2C,iBAGxF,MAAMP,EAAe,IAChB3B,EACHF,cAAeA,GAAiBK,EAChCgC,UAAWA,CAACC,EAAgBC,KAC1B9B,EAAU6B,GACNpC,EAAUmC,WACZnC,EAAUmC,UAAUC,EAAgBC,EACtC,EAEFC,OAAQtC,EAAUsC,QAAU,EAC5BzD,OAAQ4B,UACN,CACE8B,MAAO,CACLP,QACAQ,OAAQ,GACRC,OAAQ,GAEVC,QAAS,CACPC,OAAQ,0BAA0B1C,EAAMgC,OAAO,yBAGnDzB,GAEFoC,UACEf,IAACgB,eAAc,CACbnE,IAAKA,EACLE,KAAMA,EACNG,QAASA,EACTC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRC,UAAWA,EACXC,MAAOA,EACPC,QAASA,EACTC,MAAOA,EACPC,SAAUA,EACVqD,MAAO9C,EAAU8C,MACjBpD,WAAYA,EACZqD,QAAS/C,EAAU+C,QACnBpD,aAAcA,EACdqD,OAAQhD,EAAUgD,OAClBC,gBAAiBjD,EAAUiD,gBAC3BrD,iBAAkBA,EAClBd,oBAAqBA,EACrBe,cAAeA,EACf+C,UAAW5C,EAAU4C,aAK3B,OACEf,IAACC,QAAO,IACFH,EACJuB,UAAW,CACTC,KAAM,CACJC,SAAUzB,EAAa0B,eAG3B,IAGN,CACEC,YA1KiB,UA2KjBhE,MAAOiE,QAGX,CACEC,UAAWC"}
|
|
1
|
+
{"version":3,"file":"Tooltip.mjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, useState, useLayoutEffect } from 'react'\nimport { useTheme } from 'styled-components'\nimport Floater from 'react-floater'\nimport type { Props as FloaterProps, PopperInstance, Styles } from 'react-floater'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useResizeObserver } from 'hooks/useResizeObserver'\nimport { SIZES, TooltipComponent } from 'components/TooltipComponent'\nimport { deepmerge } from 'shared/utils/misc'\nimport { TooltipWrapper } from './TooltipWrapper'\nimport { TOOLTIP_STYLES_DEFAULT } from './default-constants'\nimport type { TooltipProps } from './types'\n\nconst COMPONENT_NAME = 'Tooltip'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Компонент основан на [\"react-floater\"](https://www.npmjs.com/package/react-floater).\n *\n * Получить доступ к компоненту, не подключенному к библиотеке, можно через `Tooltip.Component`.\n *\n * Полный интерфейс `Tooltip` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/Tooltip/types.ts), интерфейс `Tooltip.Component` [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/TooltipComponent/types.ts).\n *\n */\nconst Tooltip: React.ForwardRefExoticComponent<TooltipProps> & { Component: typeof TooltipComponent } = Object.assign(\n withMergedProps<TooltipProps, HTMLDivElement>(\n forwardRef<HTMLDivElement, MergedProps<TooltipProps>>((props, ref) => {\n const {\n preset,\n size = 's',\n styles = {},\n closeOnClickOutside = false,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n palette,\n black,\n contrast,\n titleProps,\n contentProps,\n closeButtonProps,\n closeOnScroll,\n portalElement,\n zIndex,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n const [portal, setPortal] = useState<HTMLElement | null>(null)\n const [popper, setPopper] = useState<PopperInstance | null>(null)\n\n const floaterStyles: Partial<Styles> =\n typeof zIndex === 'number' ? deepmerge(styles, { options: { zIndex } }) : styles\n\n useLayoutEffect(() => {\n if (portalElement) {\n setPortal(null)\n } else if (document.body) {\n let popperPortal = document.querySelector<HTMLElement>('[data-popper-portal]')\n\n if (!popperPortal) {\n popperPortal = document.createElement('div')\n popperPortal.dataset.popperPortal = 'true'\n popperPortal.style.position = 'relative'\n\n document.body.appendChild(popperPortal)\n }\n\n setPortal(popperPortal)\n }\n }, [portalElement])\n\n useResizeObserver({\n target: document.body,\n onResize: () => {\n if (popper && popper.state.options.strategy === 'absolute') {\n popper.update()\n }\n },\n })\n\n if (!portalElement && !portal) {\n return null\n }\n\n if (preset !== 'brand') {\n const tooltipProps = {\n ...restProps,\n portalElement: portalElement ?? portal,\n styles: deepmerge(TOOLTIP_STYLES_DEFAULT, floaterStyles),\n } as FloaterProps\n\n return (\n <Floater {...tooltipProps}>\n <span>{tooltipProps.children}</span>\n </Floater>\n )\n }\n\n let color = theme.colors['bg-onmain-primary']\n\n if (black) color = theme.colors['bg-onmain-inverse']\n if (contrast) color = theme.colors['bg-brand-primary-basic']\n if (palette?.backgroundColor) {\n color = theme.colors[palette.backgroundColor as keyof typeof theme.colors] ?? palette.backgroundColor\n }\n\n const tooltipProps = {\n ...restProps,\n portalElement: portalElement ?? portal,\n getPopper: (popperInstance, origin) => {\n setPopper(popperInstance)\n if (restProps.getPopper) {\n restProps.getPopper(popperInstance, origin)\n }\n },\n offset: restProps.offset ?? 8,\n styles: deepmerge(\n {\n arrow: {\n color,\n spread: 16,\n length: 8,\n },\n floater: {\n filter: `drop-shadow(0 6px 10px ${theme.colors['bg-oncolor-hover']})`,\n },\n },\n floaterStyles\n ),\n component: (\n <TooltipWrapper\n ref={ref}\n size={size}\n sizeXXS={sizeXXS}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n sizeUnits={sizeUnits}\n sizes={sizes}\n palette={palette}\n black={black}\n contrast={contrast}\n title={restProps.title}\n titleProps={titleProps}\n content={restProps.content}\n contentProps={contentProps}\n footer={restProps.footer}\n showCloseButton={restProps.showCloseButton}\n closeButtonProps={closeButtonProps}\n closeOnClickOutside={closeOnClickOutside}\n closeOnScroll={closeOnScroll}\n component={restProps.component}\n />\n ),\n } as FloaterProps\n\n return (\n <Floater\n {...tooltipProps}\n modifiers={{\n flip: {\n enabled: !tooltipProps.disableFlip,\n },\n }}\n />\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n ),\n {\n Component: TooltipComponent,\n }\n)\n\nexport { Tooltip }\n\nexport { COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Tooltip","Object","assign","withMergedProps","forwardRef","props","ref","preset","size","styles","closeOnClickOutside","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","palette","black","contrast","titleProps","contentProps","closeButtonProps","closeOnScroll","portalElement","zIndex","restProps","theme","useTheme","portal","setPortal","useState","popper","setPopper","floaterStyles","deepmerge","options","useLayoutEffect","document","body","popperPortal","querySelector","createElement","dataset","style","position","appendChild","useResizeObserver","target","onResize","state","strategy","update","tooltipProps","TOOLTIP_STYLES_DEFAULT","_jsx","Floater","children","color","colors","backgroundColor","getPopper","popperInstance","origin","offset","arrow","spread","length","floater","filter","component","TooltipWrapper","title","content","footer","showCloseButton","modifiers","flip","enabled","disableFlip","displayName","SIZES","Component","TooltipComponent"],"mappings":"8jBAaMA,MAAAA,eAAiB,UAiBvB,MAAMC,QAAkGC,OAAOC,OAC7GC,gBACEC,YAAsD,CAACC,EAAOC,KAC5D,MAAMC,OACJA,EAAMC,KACNA,EAAO,IAAGC,OACVA,EAAS,CAAE,EAAAC,oBACXA,GAAsB,EAAKC,QAC3BA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,MACTA,EAAKC,QACLA,EAAOC,MACPA,EAAKC,SACLA,EAAQC,WACRA,EAAUC,aACVA,EAAYC,iBACZA,EAAgBC,cAChBA,EAAaC,cACbA,EAAaC,OACbA,KACGC,GACDvB,EAEJ,MAAMwB,EAAQC,WAEd,MAAOC,EAAQC,GAAaC,SAA6B,MACzD,MAAOC,EAAQC,GAAaF,SAAgC,MAE5D,MAAMG,SACGT,GAAW,SAAWU,UAAU5B,EAAQ,CAAE6B,QAAS,CAAEX,YAAclB,EA6B5E,GA3BA8B,iBAAgB,KACd,GAAIb,EACFM,EAAU,WACL,GAAIQ,SAASC,KAAM,CACxB,IAAIC,EAAeF,SAASG,cAA2B,wBAElDD,IACHA,EAAeF,SAASI,cAAc,OACtCF,EAAaG,QAAQH,aAAe,OACpCA,EAAaI,MAAMC,SAAW,WAE9BP,SAASC,KAAKO,YAAYN,IAG5BV,EAAUU,EACZ,IACC,CAAChB,IAEJuB,kBAAkB,CAChBC,OAAQV,SAASC,KACjBU,SAAUA,KACJjB,GAAUA,EAAOkB,MAAMd,QAAQe,WAAa,YAC9CnB,EAAOoB,QACT,KAIC5B,IAAkBK,EACrB,OAAO,KAGT,GAAIxB,IAAW,QAAS,CACtB,MAAMgD,EAAe,IAChB3B,EACHF,cAAeA,GAAiBK,EAChCtB,OAAQ4B,UAAUmB,uBAAwBpB,IAG5C,OACEqB,IAACC,QAAO,IAAKH,EAAYI,SACvBF,IAAA,OAAA,CAAAE,SAAOJ,EAAaI,YAG1B,CAEA,IAAIC,EAAQ/B,EAAMgC,OAAO,qBAErBzC,IAAOwC,EAAQ/B,EAAMgC,OAAO,sBAC5BxC,IAAUuC,EAAQ/B,EAAMgC,OAAO,2BAC/B1C,GAAS2C,kBACXF,EAAQ/B,EAAMgC,OAAO1C,EAAQ2C,kBAAiD3C,EAAQ2C,iBAGxF,MAAMP,EAAe,IAChB3B,EACHF,cAAeA,GAAiBK,EAChCgC,UAAWA,CAACC,EAAgBC,KAC1B9B,EAAU6B,GACNpC,EAAUmC,WACZnC,EAAUmC,UAAUC,EAAgBC,EACtC,EAEFC,OAAQtC,EAAUsC,QAAU,EAC5BzD,OAAQ4B,UACN,CACE8B,MAAO,CACLP,QACAQ,OAAQ,GACRC,OAAQ,GAEVC,QAAS,CACPC,OAAQ,0BAA0B1C,EAAMgC,OAAO,yBAGnDzB,GAEFoC,UACEf,IAACgB,eAAc,CACbnE,IAAKA,EACLE,KAAMA,EACNG,QAASA,EACTC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRC,UAAWA,EACXC,MAAOA,EACPC,QAASA,EACTC,MAAOA,EACPC,SAAUA,EACVqD,MAAO9C,EAAU8C,MACjBpD,WAAYA,EACZqD,QAAS/C,EAAU+C,QACnBpD,aAAcA,EACdqD,OAAQhD,EAAUgD,OAClBC,gBAAiBjD,EAAUiD,gBAC3BrD,iBAAkBA,EAClBd,oBAAqBA,EACrBe,cAAeA,EACf+C,UAAW5C,EAAU4C,aAK3B,OACEf,IAACC,QAAO,IACFH,EACJuB,UAAW,CACTC,KAAM,CACJC,SAAUzB,EAAa0B,eAG3B,IAGN,CACEC,YA1KiB,UA2KjBhE,MAAOiE,QAGX,CACEC,UAAWC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipComponent.js","sources":["../../../../src/components/TooltipComponent/TooltipComponent.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { SIZES, SIZES_TEXT } from './constants'\nimport type { TooltipComponentProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TooltipComponent'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс `TooltipComponent` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/TooltipComponent/types.ts).\n */\nconst TooltipComponent: React.ForwardRefExoticComponent<TooltipComponentProps> = withMergedProps<\n TooltipComponentProps,\n HTMLDivElement\n>(\n forwardRef<HTMLDivElement, MergedProps<TooltipComponentProps>>((props, ref) => {\n const {\n size = 's',\n titleProps = {},\n contentProps = {},\n closeButtonProps = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n title,\n content,\n footer,\n closeFn,\n showCloseButton,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n return (\n <Styled.Root {...restProps} {...sizeProps} ref={ref}>\n {showCloseButton ? (\n <Styled.CloseButton\n size='s'\n icon='close'\n secondary={restProps.black}\n contrast={restProps.black || restProps.contrast}\n {...closeButtonProps}\n onClick={(evt) => {\n if (typeof closeFn === 'function') closeFn()\n if (closeButtonProps.onClick) closeButtonProps.onClick(evt)\n }}\n />\n ) : null}\n {title ? (\n <Text\n appearance='body'\n color='inherit'\n weight={700}\n marginRight={showCloseButton ? 16 : undefined}\n marginBottom={content || footer ? '0.3em' : undefined}\n sizes={SIZES_TEXT}\n {...sizeProps}\n {...titleProps}\n >\n {title}\n </Text>\n ) : null}\n {content ? (\n <Text\n appearance='body'\n color='inherit'\n marginRight={!title && showCloseButton ? 16 : undefined}\n marginBottom={footer ? '0.2em' : undefined}\n sizes={SIZES_TEXT}\n {...sizeProps}\n {...contentProps}\n >\n {content}\n </Text>\n ) : null}\n {typeof footer === 'function' ? footer(sizeProps) : footer}\n </Styled.Root>\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { TooltipComponent }\n\nexport { COMPONENT_NAME, SIZES }\n"],"names":["TooltipComponent","withMergedProps","forwardRef","props","ref","size","titleProps","contentProps","closeButtonProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","title","content","footer","closeFn","showCloseButton","restProps","sizeProps","_jsxs","Styled","children","_jsx","jsx","icon","secondary","black","contrast","onClick","evt","Text","appearance","color","weight","marginRight","undefined","marginBottom","sizes","SIZES_TEXT","SIZES","displayName"],"mappings":"6PAoBMA,MAAAA,iBAA2EC,gBAAAA,gBAI/EC,MAAAA,YAA+D,CAACC,EAAOC,KACrE,MAAMC,KACJA,EAAO,IAAGC,WACVA,EAAa,CAAE,EAAAC,aACfA,EAAe,CAAE,EAAAC,iBACjBA,EAAmB,CAAE,EAAAC,QACrBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,QACNA,EAAOC,gBACPA,KACGC,GACDjB,EAEJ,MAAMkB,EAAY,CAChBhB,OACAI,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,OACEQ,WAAAA,KAACC,MAAAA,KAAW,IAAKH,KAAeC,EAAWjB,IAAKA,EAAIoB,UACjDL,EACCM,WAAAC,IAACH,kBAAkB,CACjBlB,KAAK,IACLsB,KAAK,QACLC,UAAWR,EAAUS,MACrBC,SAAUV,EAAUS,OAAST,EAAUU,YACnCtB,EACJuB,QAAUC,WACGd,GAAY,YAAYA,IAC/BV,EAAiBuB,SAASvB,EAAiBuB,QAAQC,EAAI,IAG7D,KACHjB,EACCU,WAAAA,IAACQ,KAAAA,KAAI,CACHC,WAAW,OACXC,MAAM,UACNC,OAAQ,IACRC,YAAalB,EAAkB,QAAKmB,EACpCC,aAAcvB,GAAWC,EAAS,aAAUqB,EAC5CE,MAAOC,UAAWA,cACdpB,KACAf,EAAUkB,SAEbT,IAED,KACHC,EACCS,WAAAA,IAACQ,KAAAA,KAAI,CACHC,WAAW,OACXC,MAAM,UACNE,aAActB,GAASI,EAAkB,QAAKmB,EAC9CC,aAActB,EAAS,aAAUqB,EACjCE,MAAOC,UAAWA,cACdpB,KACAd,EAAYiB,SAEfR,IAED,YACIC,GAAW,WAAaA,EAAOI,GAAaJ,IACxC,IAGlB,CACEuB,MAAOE,UAAKA,MACZC,YA9FmB,0EAAA"}
|
|
1
|
+
{"version":3,"file":"TooltipComponent.js","sources":["../../../../src/components/TooltipComponent/TooltipComponent.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { SIZES, SIZES_TEXT } from './constants'\nimport type { TooltipComponentProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TooltipComponent'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс `TooltipComponent` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/TooltipComponent/types.ts).\n */\nconst TooltipComponent: React.ForwardRefExoticComponent<TooltipComponentProps> = withMergedProps<\n TooltipComponentProps,\n HTMLDivElement\n>(\n forwardRef<HTMLDivElement, MergedProps<TooltipComponentProps>>((props, ref) => {\n const {\n size = 's',\n titleProps = {},\n contentProps = {},\n closeButtonProps = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n title,\n content,\n footer,\n closeFn,\n showCloseButton,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n return (\n <Styled.Root {...restProps} {...sizeProps} ref={ref}>\n {showCloseButton ? (\n <Styled.CloseButton\n size='s'\n icon='close'\n secondary={restProps.black}\n contrast={restProps.black || restProps.contrast}\n {...closeButtonProps}\n onClick={(evt) => {\n if (typeof closeFn === 'function') closeFn()\n if (closeButtonProps.onClick) closeButtonProps.onClick(evt)\n }}\n />\n ) : null}\n {title ? (\n <Text\n appearance='body'\n color='inherit'\n weight={700}\n marginRight={showCloseButton ? 16 : undefined}\n marginBottom={content || footer ? '0.3em' : undefined}\n sizes={SIZES_TEXT}\n {...sizeProps}\n {...titleProps}\n >\n {title}\n </Text>\n ) : null}\n {content ? (\n <Text\n appearance='body'\n color='inherit'\n marginRight={!title && showCloseButton ? 16 : undefined}\n marginBottom={footer ? '0.2em' : undefined}\n sizes={SIZES_TEXT}\n {...sizeProps}\n {...contentProps}\n >\n {content}\n </Text>\n ) : null}\n {typeof footer === 'function' ? footer(sizeProps) : footer}\n </Styled.Root>\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { TooltipComponent }\n\nexport { COMPONENT_NAME, SIZES }\n"],"names":["TooltipComponent","withMergedProps","forwardRef","props","ref","size","titleProps","contentProps","closeButtonProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","title","content","footer","closeFn","showCloseButton","restProps","sizeProps","_jsxs","Styled","children","_jsx","jsx","icon","secondary","black","contrast","onClick","evt","Text","appearance","color","weight","marginRight","undefined","marginBottom","sizes","SIZES_TEXT","SIZES","displayName"],"mappings":"6PAoBMA,MAAAA,iBAA2EC,gBAAAA,gBAI/EC,MAAAA,YAA+D,CAACC,EAAOC,KACrE,MAAMC,KACJA,EAAO,IAAGC,WACVA,EAAa,CAAE,EAAAC,aACfA,EAAe,CAAE,EAAAC,iBACjBA,EAAmB,CAAE,EAAAC,QACrBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,QACNA,EAAOC,gBACPA,KACGC,GACDjB,EAEJ,MAAMkB,EAAY,CAChBhB,OACAI,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,OACEQ,WAAAA,KAACC,MAAAA,KAAW,IAAKH,KAAeC,EAAWjB,IAAKA,EAAIoB,UACjDL,EACCM,WAAAC,IAACH,kBAAkB,CACjBlB,KAAK,IACLsB,KAAK,QACLC,UAAWR,EAAUS,MACrBC,SAAUV,EAAUS,OAAST,EAAUU,YACnCtB,EACJuB,QAAUC,WACGd,GAAY,YAAYA,IAC/BV,EAAiBuB,SAASvB,EAAiBuB,QAAQC,EAAI,IAG7D,KACHjB,EACCU,WAAAA,IAACQ,KAAAA,KAAI,CACHC,WAAW,OACXC,MAAM,UACNC,OAAQ,IACRC,YAAalB,EAAkB,QAAKmB,EACpCC,aAAcvB,GAAWC,EAAS,aAAUqB,EAC5CE,MAAOC,UAAWA,cACdpB,KACAf,EAAUkB,SAEbT,IAED,KACHC,EACCS,WAAAA,IAACQ,KAAAA,KAAI,CACHC,WAAW,OACXC,MAAM,UACNE,aAActB,GAASI,EAAkB,QAAKmB,EAC9CC,aAActB,EAAS,aAAUqB,EACjCE,MAAOC,UAAWA,cACdpB,KACAd,EAAYiB,SAEfR,IAED,YACIC,GAAW,WAAaA,EAAOI,GAAaJ,IACxC,IAGlB,CACEuB,MAAOE,UAAKA,MACZC,YA9FmB,0EAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipComponent.mjs","sources":["../../../../src/components/TooltipComponent/TooltipComponent.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { SIZES, SIZES_TEXT } from './constants'\nimport type { TooltipComponentProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TooltipComponent'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс `TooltipComponent` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/TooltipComponent/types.ts).\n */\nconst TooltipComponent: React.ForwardRefExoticComponent<TooltipComponentProps> = withMergedProps<\n TooltipComponentProps,\n HTMLDivElement\n>(\n forwardRef<HTMLDivElement, MergedProps<TooltipComponentProps>>((props, ref) => {\n const {\n size = 's',\n titleProps = {},\n contentProps = {},\n closeButtonProps = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n title,\n content,\n footer,\n closeFn,\n showCloseButton,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n return (\n <Styled.Root {...restProps} {...sizeProps} ref={ref}>\n {showCloseButton ? (\n <Styled.CloseButton\n size='s'\n icon='close'\n secondary={restProps.black}\n contrast={restProps.black || restProps.contrast}\n {...closeButtonProps}\n onClick={(evt) => {\n if (typeof closeFn === 'function') closeFn()\n if (closeButtonProps.onClick) closeButtonProps.onClick(evt)\n }}\n />\n ) : null}\n {title ? (\n <Text\n appearance='body'\n color='inherit'\n weight={700}\n marginRight={showCloseButton ? 16 : undefined}\n marginBottom={content || footer ? '0.3em' : undefined}\n sizes={SIZES_TEXT}\n {...sizeProps}\n {...titleProps}\n >\n {title}\n </Text>\n ) : null}\n {content ? (\n <Text\n appearance='body'\n color='inherit'\n marginRight={!title && showCloseButton ? 16 : undefined}\n marginBottom={footer ? '0.2em' : undefined}\n sizes={SIZES_TEXT}\n {...sizeProps}\n {...contentProps}\n >\n {content}\n </Text>\n ) : null}\n {typeof footer === 'function' ? footer(sizeProps) : footer}\n </Styled.Root>\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { TooltipComponent }\n\nexport { COMPONENT_NAME, SIZES }\n"],"names":["COMPONENT_NAME","TooltipComponent","withMergedProps","forwardRef","props","ref","size","titleProps","contentProps","closeButtonProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","title","content","footer","closeFn","showCloseButton","restProps","sizeProps","_jsxs","Styled","children","_jsx","icon","secondary","black","contrast","onClick","evt","Text","appearance","color","weight","marginRight","undefined","marginBottom","sizes","SIZES_TEXT","SIZES","displayName"],"mappings":"6PAQMA,MAAAA,eAAiB,mBAYjBC,MAAAA,iBAA2EC,gBAI/EC,YAA+D,CAACC,EAAOC,KACrE,MAAMC,KACJA,EAAO,IAAGC,WACVA,EAAa,CAAE,EAAAC,aACfA,EAAe,CAAE,EAAAC,iBACjBA,EAAmB,CAAE,EAAAC,QACrBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,QACNA,EAAOC,gBACPA,KACGC,GACDjB,EAEJ,MAAMkB,EAAY,CAChBhB,OACAI,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,OACEQ,KAACC,KAAW,IAAKH,KAAeC,EAAWjB,IAAKA,EAAIoB,UACjDL,EACCM,IAACF,YAAkB,CACjBlB,KAAK,IACLqB,KAAK,QACLC,UAAWP,EAAUQ,MACrBC,SAAUT,EAAUQ,OAASR,EAAUS,YACnCrB,EACJsB,QAAUC,WACGb,GAAY,YAAYA,IAC/BV,EAAiBsB,SAAStB,EAAiBsB,QAAQC,EAAI,IAG7D,KACHhB,EACCU,IAACO,KAAI,CACHC,WAAW,OACXC,MAAM,UACNC,OAAQ,IACRC,YAAajB,EAAkB,QAAKkB,EACpCC,aAActB,GAAWC,EAAS,aAAUoB,EAC5CE,MAAOC,cACHnB,KACAf,EAAUkB,SAEbT,IAED,KACHC,EACCS,IAACO,KAAI,CACHC,WAAW,OACXC,MAAM,UACNE,aAAcrB,GAASI,EAAkB,QAAKkB,EAC9CC,aAAcrB,EAAS,aAAUoB,EACjCE,MAAOC,cACHnB,KACAd,EAAYiB,SAEfR,IAED,YACIC,GAAW,WAAaA,EAAOI,GAAaJ,IACxC,IAGlB,CACEsB,MAAOE,MACPC,YA9FmB"}
|
|
1
|
+
{"version":3,"file":"TooltipComponent.mjs","sources":["../../../../src/components/TooltipComponent/TooltipComponent.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { SIZES, SIZES_TEXT } from './constants'\nimport type { TooltipComponentProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TooltipComponent'\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс `TooltipComponent` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/TooltipComponent/types.ts).\n */\nconst TooltipComponent: React.ForwardRefExoticComponent<TooltipComponentProps> = withMergedProps<\n TooltipComponentProps,\n HTMLDivElement\n>(\n forwardRef<HTMLDivElement, MergedProps<TooltipComponentProps>>((props, ref) => {\n const {\n size = 's',\n titleProps = {},\n contentProps = {},\n closeButtonProps = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n title,\n content,\n footer,\n closeFn,\n showCloseButton,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n return (\n <Styled.Root {...restProps} {...sizeProps} ref={ref}>\n {showCloseButton ? (\n <Styled.CloseButton\n size='s'\n icon='close'\n secondary={restProps.black}\n contrast={restProps.black || restProps.contrast}\n {...closeButtonProps}\n onClick={(evt) => {\n if (typeof closeFn === 'function') closeFn()\n if (closeButtonProps.onClick) closeButtonProps.onClick(evt)\n }}\n />\n ) : null}\n {title ? (\n <Text\n appearance='body'\n color='inherit'\n weight={700}\n marginRight={showCloseButton ? 16 : undefined}\n marginBottom={content || footer ? '0.3em' : undefined}\n sizes={SIZES_TEXT}\n {...sizeProps}\n {...titleProps}\n >\n {title}\n </Text>\n ) : null}\n {content ? (\n <Text\n appearance='body'\n color='inherit'\n marginRight={!title && showCloseButton ? 16 : undefined}\n marginBottom={footer ? '0.2em' : undefined}\n sizes={SIZES_TEXT}\n {...sizeProps}\n {...contentProps}\n >\n {content}\n </Text>\n ) : null}\n {typeof footer === 'function' ? footer(sizeProps) : footer}\n </Styled.Root>\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { TooltipComponent }\n\nexport { COMPONENT_NAME, SIZES }\n"],"names":["COMPONENT_NAME","TooltipComponent","withMergedProps","forwardRef","props","ref","size","titleProps","contentProps","closeButtonProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","title","content","footer","closeFn","showCloseButton","restProps","sizeProps","_jsxs","Styled","children","_jsx","icon","secondary","black","contrast","onClick","evt","Text","appearance","color","weight","marginRight","undefined","marginBottom","sizes","SIZES_TEXT","SIZES","displayName"],"mappings":"6PAQMA,MAAAA,eAAiB,mBAYjBC,MAAAA,iBAA2EC,gBAI/EC,YAA+D,CAACC,EAAOC,KACrE,MAAMC,KACJA,EAAO,IAAGC,WACVA,EAAa,CAAE,EAAAC,aACfA,EAAe,CAAE,EAAAC,iBACjBA,EAAmB,CAAE,EAAAC,QACrBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,QACNA,EAAOC,gBACPA,KACGC,GACDjB,EAEJ,MAAMkB,EAAY,CAChBhB,OACAI,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,OACEQ,KAACC,KAAW,IAAKH,KAAeC,EAAWjB,IAAKA,EAAIoB,UACjDL,EACCM,IAACF,YAAkB,CACjBlB,KAAK,IACLqB,KAAK,QACLC,UAAWP,EAAUQ,MACrBC,SAAUT,EAAUQ,OAASR,EAAUS,YACnCrB,EACJsB,QAAUC,WACGb,GAAY,YAAYA,IAC/BV,EAAiBsB,SAAStB,EAAiBsB,QAAQC,EAAI,IAG7D,KACHhB,EACCU,IAACO,KAAI,CACHC,WAAW,OACXC,MAAM,UACNC,OAAQ,IACRC,YAAajB,EAAkB,QAAKkB,EACpCC,aAActB,GAAWC,EAAS,aAAUoB,EAC5CE,MAAOC,cACHnB,KACAf,EAAUkB,SAEbT,IAED,KACHC,EACCS,IAACO,KAAI,CACHC,WAAW,OACXC,MAAM,UACNE,aAAcrB,GAASI,EAAkB,QAAKkB,EAC9CC,aAAcrB,EAAS,aAAUoB,EACjCE,MAAOC,cACHnB,KACAd,EAAYiB,SAEfR,IAED,YACIC,GAAW,WAAaA,EAAOI,GAAaJ,IACxC,IAGlB,CACEsB,MAAOE,MACPC,YA9FmB"}
|