@foxford/ui 2.4.3-beta-a9f06de-20230613 → 2.4.3-beta-f7c0390-20230703
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/Amount/Amount.js.map +1 -1
- package/components/Badge/Badge.js.map +1 -1
- package/components/Tag/Tag.js.map +1 -1
- package/components/Tag/style.js.map +1 -1
- package/components/Text/Text.js +1 -1
- package/components/Text/Text.js.map +1 -1
- package/components/Text/style.js +1 -1
- package/components/Text/style.js.map +1 -1
- package/components/Text.Heading/Text.Heading.js +1 -1
- package/components/Text.Heading/Text.Heading.js.map +1 -1
- package/components/Textarea/Textarea.js +1 -1
- package/components/Textarea/Textarea.js.map +1 -1
- package/components/Textarea/style.js +1 -1
- package/components/Textarea/style.js.map +1 -1
- package/dts/index.d.ts +45 -99
- package/hooks/use-config-priority.js +1 -1
- package/hooks/use-config-priority.js.map +1 -1
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +1 -1
- package/theme/colors.js +1 -1
- package/theme/colors.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Amount.js","sources":["../../../../src/components/Amount/Amount.tsx"],"sourcesContent":["import { PureComponent } from 'react'\nimport cx from 'clsx'\nimport { Color } from '../../mixins/color'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Text } from '../Text
|
|
1
|
+
{"version":3,"file":"Amount.js","sources":["../../../../src/components/Amount/Amount.tsx"],"sourcesContent":["import { PureComponent } from 'react'\nimport cx from 'clsx'\nimport { Color } from '../../mixins/color'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Text } from '../Text'\nimport { Display } from '../../mixins/display'\nimport { CurrencyCodes, CURRENCY_MAP } from './data'\nimport * as Styled from './style'\n\nexport interface AmountProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {\n /**\n * Value for amount\n */\n value?: number\n /**\n * Digits after point\n */\n digitsAfterPoint?: number\n /**\n * Show zero minor part\n */\n showZeroMinorPart?: boolean\n /**\n * Separator of major and minor part of amount\n */\n separator?: string\n /**\n * International code of currency.\n */\n currency?: keyof typeof CurrencyCodes | string\n /**\n * Use Header component for display amount\n */\n isHeader?: boolean\n /**\n * Amount is not valid and will be crossed out with ```text-decoration: line-through```\n */\n crossedOut?: boolean\n /**\n * If need only currency symbol\n */\n onlyCurrency?: boolean\n}\n\nconst AMOUNT_MAJOR_PART_SIZE = 3\nconst ZERO_MINOR_PART_REGEXP = /^0+$/\nconst MINUS_SIGN_HTML_CODE = '\\u2212'\n\nfunction createSplitter(partSize: number): (_s: string) => string[] {\n const parts = (str: string): string[] => {\n const { length } = str\n\n if (length <= partSize) {\n return [str]\n }\n\n const from = length - partSize\n const to = length\n\n return [str.slice(from, to)].concat(parts(str.slice(0, from)))\n }\n\n return parts\n}\n\nfunction formatAmount(\n value: AmountProps['value'] = 0,\n digitsAfterPoint: AmountProps['digitsAfterPoint'],\n currencyCode: AmountProps['currency']\n) {\n const isNegative = value < 0\n\n const valueAbs = Math.abs(value)\n const valueAbsStr = valueAbs.toFixed(digitsAfterPoint)\n\n const numberParts = valueAbsStr.split('.')\n const majorPart = numberParts[0]\n const minorPart = numberParts[1]\n\n const amountSplitter = createSplitter(AMOUNT_MAJOR_PART_SIZE)\n\n const majorPartFormatted = amountSplitter(majorPart).reverse().join(' ')\n\n const formattedValueStr = majorPartFormatted + (minorPart ? `,${minorPart}` : '')\n\n return {\n majorPart: majorPartFormatted,\n minorPart,\n value: formattedValueStr,\n isNegative,\n currencySymbol: currencyCode ? Amount.getCurrencySymbol(currencyCode) : '',\n }\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n */\nexport class Amount extends PureComponent<AmountProps> {\n static displayName = 'Amount'\n static defaultProps = {\n isHeader: false,\n showZeroMinorPart: false,\n crossedOut: false,\n digitsAfterPoint: 2,\n separator: ',',\n onlyCurrency: false,\n }\n\n static getCurrencySymbol(currencyCode: keyof typeof CurrencyCodes | string) {\n return CURRENCY_MAP[currencyCode] || currencyCode\n }\n\n renderMinorPart(minorPart: string) {\n const { showZeroMinorPart, separator } = this.props\n\n let needMinorPart = false\n\n if (minorPart) {\n needMinorPart = true\n\n if (!showZeroMinorPart && ZERO_MINOR_PART_REGEXP.test(minorPart)) {\n needMinorPart = false\n }\n }\n\n if (needMinorPart) {\n return (\n <span className='minor-container'>\n <span className='separator'>{separator}</span>\n <span className='minor'>{minorPart}</span>\n </span>\n )\n }\n\n return null\n }\n\n renderCurrencySymbol = (currencySymbol: string) => (\n <span style={{ position: 'relative' }}>\n {this.props.currency === 'RUR' ? (\n <span\n style={{\n position: 'absolute',\n width: 0,\n opacity: 0,\n visibility: 'hidden',\n }}\n >\n руб.\n </span>\n ) : null}\n <span>{` ${currencySymbol}`}</span>\n </span>\n )\n\n render() {\n const { value, digitsAfterPoint, currency, isHeader, className, style, crossedOut, onlyCurrency, ...rest } =\n this.props\n\n const { majorPart, minorPart, isNegative, currencySymbol } = formatAmount(value, digitsAfterPoint, currency)\n\n const classNames = cx('amount', className)\n\n const amountInner = (\n <Styled.Root className={classNames} style={style} crossedOut={crossedOut}>\n {!onlyCurrency ? (\n <>\n <span className='major'>\n {isNegative && MINUS_SIGN_HTML_CODE}\n {majorPart}\n </span>\n {this.renderMinorPart(minorPart)}\n </>\n ) : null}\n {currency && this.renderCurrencySymbol(currencySymbol)}\n </Styled.Root>\n )\n\n const Element = isHeader ? Text.Heading : Text\n\n return (\n <Element {...rest} as='span'>\n {amountInner}\n </Element>\n )\n }\n}\n"],"names":["ZERO_MINOR_PART_REGEXP","createSplitter","partSize","parts","str","length","from","slice","concat","Amount","PureComponent","constructor","super","arguments","this","renderCurrencySymbol","currencySymbol","_jsxs","style","position","children","props","currency","_jsx","width","opacity","visibility","static","currencyCode","CURRENCY_MAP","renderMinorPart","minorPart","showZeroMinorPart","separator","needMinorPart","test","className","render","_this$props","value","digitsAfterPoint","isHeader","crossedOut","onlyCurrency","rest","_objectWithoutProperties","_excluded","majorPart","isNegative","r","e","t","undefined","numberParts","Math","abs","toFixed","split","majorPartFormatted","reverse","join","formattedValueStr","getCurrencySymbol","classNames","cx","amountInner","Styled.Root","_Fragment","Text","Heading","_objectSpread","as","displayName","defaultProps"],"mappings":"6cA8CA,IAAMA,EAAyB,OAG/B,SAASC,EAAeC,GACtB,IAAMC,EAASC,IACb,IAAMC,OAAEA,GAAWD,EAEnB,GAAIC,GAAUH,EACZ,MAAO,CAACE,GAGV,IAAME,EAAOD,EAASH,EAGtB,MAAO,CAACE,EAAIG,MAAMD,EAFPD,IAEkBG,OAAOL,EAAMC,EAAIG,MAAM,EAAGD,MAGzD,OAAOH,EAsCF,MAAMM,UAAeC,EAA2BC,cAAAC,SAAAC,WAAAC,KAwCrDC,qBAAwBC,GACtBC,EAAA,OAAA,CAAMC,MAAO,CAAEC,SAAU,YAAzBC,SAAA,CAC2B,QAAxBN,KAAKO,MAAMC,SACVC,EAAA,OAAA,CACEL,MAAO,CACLC,SAAU,WACVK,MAAO,EACPC,QAAS,EACTC,WAAY,UALhBN,SAAA,SAUE,KACJG,EAAA,OAAA,CAAAH,SAAA,IAAAZ,OAAWQ,QA3CSW,yBAACC,GACvB,OAAOC,EAAaD,IAAiBA,EAGvCE,gBAAgBC,GACd,IAAMC,kBAAEA,EAAFC,UAAqBA,GAAcnB,KAAKO,MAE9C,IAAIa,GAAAA,EAUJ,OARIH,IACFG,MAEKF,GAAqBhC,EAAuBmC,KAAKJ,KACpDG,GAAgB,IAIhBA,EAEAjB,EAAA,OAAA,CAAMmB,UAAU,kBAAhBhB,SACE,CAAAG,EAAA,OAAA,CAAMa,UAAU,YAAhBhB,SAA6Ba,IAC7BV,EAAA,OAAA,CAAMa,UAAU,QAAhBhB,SAAyBW,OAKxB,KAqBTM,SACE,IAAAC,EACExB,KAAKO,OADDkB,MAAEA,EAAFC,iBAASA,EAATlB,SAA2BA,EAA3BmB,SAAqCA,EAArCL,UAA+CA,EAA/ClB,MAA0DA,EAA1DwB,WAAiEA,EAAjEC,aAA6EA,GAAnFL,EAAoGM,EAApGC,EAAAP,EAAAQ,GAGA,IAAMC,UAAEA,EAAFhB,UAAaA,EAAbiB,WAAwBA,EAAxBhC,eAAoCA,GAjG9C,SAAAiC,EAAAC,EAAAC,GAIE,IAHAZ,+BADFU,EAAAA,EACgC,EAG9B,IAFAT,EAEA3B,UAAAR,OAAA,EAJF6C,SAIE,IADAtB,EACAf,UAAAR,OAAA,EAJF8C,OAIEC,EACA,IAAMJ,EAAaT,EAAQ,EAK3B,IAAMc,EAHWC,KAAKC,IAAIhB,GACGiB,QAAQhB,GAELiB,MAAM,KACtC,IAAMV,EAAYM,EAAY,GAC9B,IAAMtB,EAAYsB,EAAY,GAI9B,IAAMK,EAFiBzD,EAnCM,EAmCNA,CAEmB8C,GAAWY,UAAUC,KAAK,KAEpE,IAAMC,EAAoBH,GAAsB3B,EAAgBA,IAAAA,OAAAA,GAAc,IAE9E,MAAO,CACLgB,UAAWW,EACX3B,UAAAA,EACAQ,MAAOsB,EACPb,WAAAA,EACAhC,eAAgBY,EAAenB,EAAOqD,kBAAkBlC,GAAgB,IAzB5E,CAiG8EW,EAAOC,EAAkBlB,GAEnG,IAAMyC,EAAaC,EAAG,SAAU5B,GAEhC,IAAM6B,EACJhD,EAACiD,EAAD,CAAa9B,UAAW2B,EAAY7C,MAAOA,EAAOwB,WAAYA,EAA9DtB,SACG,CAACuB,EAQE,KAPF1B,EAAAkD,EAAA,CAAA/C,SACE,CAAAH,EAAA,OAAA,CAAMmB,UAAU,QAAhBhB,SAAA,CACG4B,GA7Hc,IA8HdD,KAEFjC,KAAKgB,gBAAgBC,MAGzBT,GAAYR,KAAKC,qBAAqBC,MAM3C,OACEO,EAHckB,EAAW2B,EAAKC,QAAUD,EAGxCE,EAAAA,EAAA,GAAa1B,GAAb,GAAA,CAAmB2B,GAAG,OAAtBnD,SACG6C,MArFIxD,EACJ+D,YAAc,SADV/D,EAEJgE,aAAe,CACpBhC,UAAAA,EACAT,mBAAmB,EACnBU,cACAF,iBAAkB,EAClBP,UAAW,IACXU"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Text, TextProps } from '
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Text, TextProps } from '../Text'\nimport * as Styled from './style'\n\nexport interface BadgeProps extends BaseProps, Color, Display {\n /**\n * Children react node\n */\n children?: React.ReactNode\n content?: string | React.ReactNode\n textProps?: TextProps\n /** Make badge round */\n round?: string\n}\n\nBadge.displayName = 'Badge'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Display`](#/Миксины)\n */\nexport function Badge({\n children,\n content,\n className,\n textProps,\n round,\n display = 'inline-block',\n ...restProps\n}: BadgeProps) {\n const _className = useClassname(Badge.displayName, className)\n return (\n <Styled.Root round={round} display={display} className={_className} {...restProps}>\n <Text\n className='text'\n size={round ? 10 : 12}\n weight={round ? 'bolder' : 'normal'}\n lineHeight='s'\n content={typeof content === 'string' ? content : undefined}\n {...textProps}\n >\n {children || content}\n </Text>\n </Styled.Root>\n )\n}\n"],"names":["Badge","_ref","children","content","className","textProps","round","display","restProps","_objectWithoutProperties","_excluded","_className","useClassname","displayName","_jsx","Styled.Root","_objectSpread","Text","size","weight","lineHeight","undefined"],"mappings":"qWA0BO,SAASA,EAQDC,GAAA,IAROC,SACpBA,EADoBC,QAEpBA,EAFoBC,UAGpBA,EAHoBC,UAIpBA,EAJoBC,MAKpBA,EALoBC,QAMpBA,EAAU,gBAEGN,EADVO,EACUC,EAAAR,EAAAS,GACb,IAAMC,EAAaC,EAAaZ,EAAMa,YAAaT,GACnD,OACEU,EAACC,EAADC,EAAAA,EAAA,CAAaV,MAAOA,EAAOC,QAASA,EAASH,UAAWO,GAAgBH,GAAxE,GAAA,CAAAN,SACEY,EAACG,EAADD,EAAAA,EAAA,CACEZ,UAAU,OACVc,KAAMZ,EAAQ,GAAK,GACnBa,OAAQb,EAAQ,SAAW,SAC3Bc,WAAW,IACXjB,QAA4B,iBAAZA,EAAuBA,OAAUkB,GAC7ChB,GANN,GAAA,CAAAH,SAQGA,GAAYC,QA5BrBH,EAAMa,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport { TextProps } from '../Text
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport { TextProps } from '../Text'\nimport * as Styled from './style'\n\nexport interface TagProps\n extends BaseProps,\n Display,\n Color,\n ResponsiveNamedProperty<'height'>,\n ResponsiveNamedProperty<'width'> {\n as?: 'button' | 'div' | 'input' | 'label'\n /**\n * Field id\n */\n id?: string\n /**\n * Field name\n */\n name?: string\n /**\n * Input type\n */\n inputType?: 'checkbox' | 'radio'\n /**\n * On change handler\n */\n onChange?(_e: React.ChangeEvent<HTMLInputElement>): void\n /**\n * On click handler\n */\n onClick?(_e: React.MouseEvent<HTMLInputElement>): void\n /**\n * Whether or not Radio is checked\n */\n defaultChecked?: boolean\n /**\n * Value\n */\n value?: string | number\n /** Children are placed before Text */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /** Inner Text content */\n content?: React.ReactNode\n /** Inner Text component props */\n textProps?: TextProps\n /** Checked state */\n checked?: boolean\n /** Disabled state */\n disabled?: boolean\n /** Error state */\n error?: boolean\n /** If as = 'label' could provide for */\n htmlFor?: string\n /**\n * inverse\n */\n inverse?: boolean\n /**\n * Size\n */\n size?: 'l' | 'm' | 's' | 'xs'\n}\n\nTag.defaultProps = {\n display: 'inline-block',\n as: 'button',\n height: 40,\n}\n\nTagInput.defaultProps = {\n display: 'inline-block',\n height: 40,\n}\n\n// Prevent brakechanges\nTag.Input = TagInput\n\nTag.displayName = 'Tag'\n\nfunction TagInput(props: typeof TagInput.defaultProps & TagProps) {\n return <Tag as='input' {...props} />\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveNamedProperty<'width'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'height'>`](#/Миксины)\n */\nexport function Tag(props: typeof Tag.defaultProps & TagProps) {\n const {\n as,\n textProps,\n content,\n children,\n htmlFor,\n id,\n name,\n inputType,\n value,\n disabled,\n onChange,\n onClick,\n inverse,\n checked,\n ...restProps\n } = props\n\n const buttonProps = as === 'button' ? { type: 'button' } : {}\n const labelProps = as === 'label' ? { htmlFor } : {}\n const inputProps = as === 'input' ? { htmlFor: id || name } : {}\n\n return (\n <Styled.Root\n as={as === 'input' ? 'label' : as}\n inverse={inverse}\n checked={checked}\n disabled={disabled}\n onClick={as !== 'input' ? onClick : undefined}\n {...labelProps}\n {...buttonProps}\n {...inputProps}\n {...restProps}\n >\n {as === 'input' ? (\n <input\n id={id || name}\n name={name}\n type={inputType || 'checkbox'}\n tabIndex={0}\n onChange={(e) => {\n e.persist()\n\n return onChange && onChange(e)\n }}\n onClick={(e) => {\n e.persist()\n\n return onClick && onClick(e)\n }}\n defaultChecked={props.defaultChecked}\n checked={checked}\n value={value}\n disabled={disabled}\n hidden\n />\n ) : null}\n {children}\n <Styled.Text size={14} forwardedAs='span' color={checked && !inverse ? 'white' : 'mineShaft'} {...textProps}>\n {content}\n </Styled.Text>\n </Styled.Root>\n )\n}\n"],"names":["TagInput","props","_jsx","Tag","_objectSpread","as","textProps","content","children","htmlFor","id","name","inputType","value","disabled","onChange","onClick","inverse","checked","restProps","_excluded","buttonProps","type","inputProps","_jsxs","Styled.Root","tabIndex","_onChange","_x","apply","this","arguments","toString","e","persist","_onClick","_x2","defaultChecked","hidden","Styled.Text","size","forwardedAs","color","defaultProps","display","height","Input","displayName"],"mappings":"4VAqFA,SAASA,EAASC,GAChB,OAAOC,EAACC,EAADC,EAAA,CAAKC,GAAG,SAAYJ,IAWtB,SAASE,EAAIF,GAClB,IAAMI,GACJA,EADIC,UAEJA,EAFIC,QAGJA,EAHIC,SAIJA,EAJIC,QAKJA,EALIC,GAMJA,EANIC,KAOJA,EAPIC,UAQJA,EARIC,MASJA,EATIC,SAUJA,EAVIC,SAWJA,EAXIC,QAYJA,EAZIC,QAaJA,EAbIC,QAcJA,GAEEjB,EADCkB,IACDlB,EAhBJmB,GAkBA,IAAMC,EAAqB,WAAPhB,EAAkB,CAAEiB,KAAM,UAAa,GAE3D,IAAMC,EAAoB,UAAPlB,EAAiB,CAAEI,QAASC,GAAMC,GAAS,GAE9D,OACEa,EAACC,EAADrB,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CACEC,GAAW,UAAPA,EAAiB,QAAUA,EAC/BY,QAASA,EACTC,QAASA,EACTJ,SAAUA,EACVE,QAAgB,UAAPX,EAAiBW,OAAAA,GATJ,UAAPX,EAAiB,CAAEI,QAAAA,GAAY,IAW1CY,GACAE,GACAJ,GATN,GAAA,CAAAX,SAWGH,CAAO,UAAPA,EACCH,EAAA,QAAA,CACEQ,GAAIA,GAAMC,EACVA,KAAMA,EACNW,KAAMV,GAAa,WACnBc,SAAU,EACVX,SAAQ,SAAAY,GAAA,SAAAZ,EAAAa,GAAA,OAAAD,EAAAE,MAAAC,KAAAC,WAAA,OAAAhB,EAAAiB,SAAA,IAAAL,EAAAK,WAAAjB,EAAA,EAAGkB,IACTA,EAAEC,UAEKnB,GAAYA,EAASkB,MAE9BjB,QAAO,SAAAmB,GAAA,SAAAnB,EAAAoB,GAAA,OAAAD,EAAAN,MAAAC,KAAAC,WAAA,OAAAf,EAAAgB,SAAA,IAAAG,EAAAH,WAAAhB,EAAA,EAAGiB,IACRA,EAAEC,UAEKlB,GAAWA,EAAQiB,MAE5BI,eAAgBpC,EAAMoC,eACtBnB,QAASA,EACTL,MAAOA,EACPC,SAAUA,EACVwB,QAAM,IAEN,KACH9B,EACDN,EAACqC,EAADnC,EAAAA,EAAA,CAAaoC,KAAM,GAAIC,YAAY,OAAOC,MAAOxB,IAAYD,EAAU,QAAU,aAAiBX,GAAlG,GAAA,CAAAE,SACGD,SAxFTJ,EAAIwC,aAAe,CACjBC,QAAS,eACTvC,GAAI,SACJwC,OAAQ,IAGV7C,EAAS2C,aAAe,CACtBC,QAAS,eACTC,OAAQ,IAIV1C,EAAI2C,MAAQ9C,EAEZG,EAAI4C,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Tag/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { property, PossibleValues, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { Text as UiText, TextProps } from '../Text
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Tag/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { property, PossibleValues, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { Text as UiText, TextProps } from '../Text'\nimport { TagProps } from './Tag'\n\nconst WIDTHS: Record<Partial<Exclude<TagProps['size'], 'auto' | undefined>>, number> = {\n l: 220,\n m: 182,\n s: 100,\n xs: 60,\n}\n\nconst chooseWidthValue = (props: TagProps): PossibleValues => {\n if (props.width === 'auto') return 'auto'\n if (typeof props.width === 'number') return props.width\n\n if (props.size && WIDTHS[props.size]) return WIDTHS[props.size]\n\n return 'auto'\n}\n\nconst active = css`\n border-color: transparent;\n background-color: currentColor;\n`\n\nexport const Text = styled(UiText)<TextProps>`\n display: inline-block;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 100%;\n overflow: hidden;\n vertical-align: middle;\n transition: color 0.25s ease;\n`\n\nconst disabled = css`\n cursor: not-allowed;\n background-color: rgba(0, 0, 0, 0.04);\n ${Text} {\n color: rgba(0, 0, 0, 0.16);\n }\n`\n\nexport const Root = styled.button.withConfig<TagProps>({\n shouldForwardProp: (prop) => ['children', 'htmlFor', 'className', 'style', 'onClick'].includes(prop),\n})`\n padding: 0px 16px;\n margin-bottom: 10px;\n border-radius: 3px;\n background-color: ${(props) => props.theme.colors.white};\n border: 1px solid ${(props) => props.theme.colors.whiteGray};\n box-sizing: border-box;\n vertical-align: middle;\n transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;\n cursor: pointer;\n text-align: center;\n touch-action: manipulation;\n min-width: 60px;\n\n ${(props) => (props.size ? property(chooseWidthValue(props), 'width') : null)}\n ${(props) => (props.height ? property(props.height, 'line-height') : null)}\n ${(props) => (props.height ? property(props.height, 'height') : null)}\n ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n responsiveNamedProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n ${(props) => (props.width ? property(props.width, 'width') : null)}\n ${({ widthXS, widthS, widthM, widthL, widthXL }) =>\n responsiveNamedProperty({ sizes: { widthXS, widthS, widthM, widthL, widthXL }, cssProperty: 'width' })}\n\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.color ? color(props.color) : null)}\n\n &:not(:last-child) {\n margin-right: 20px;\n }\n\n ${(props) =>\n !props.disabled\n ? css`\n &:hover:not(:disabled) {\n border-color: currentColor;\n }\n &:active:not(:disabled) {\n ${active}\n ${Text} {\n color: ${(props) => props.theme.colors.white};\n }\n }\n `\n : null}\n\n ${(props) => (props.inverse || props.checked ? active : null)}\n\n &:disabled {\n ${disabled}\n }\n ${(props) => (props.disabled ? disabled : null)}\n`\n"],"names":["WIDTHS","l","m","s","xs","active","css","Text","styled","UiText","withConfig","componentId","disabled","Root","button","shouldForwardProp","prop","includes","props","theme","colors","white","whiteGray","size","property","width","height","_ref","heightXS","heightS","heightM","heightL","heightXL","responsiveNamedProperty","sizes","cssProperty","_ref2","widthXS","widthS","widthM","widthL","widthXL","display","color","inverse","checked"],"mappings":"8QAOA,IAAMA,EAAiF,CACrFC,EAAG,IACHC,EAAG,IACHC,EAAG,IACHC,GAAI,IAYN,IAAMC,EAASC,EAAf,CAAA,gEAKaC,EAAOC,EAAOC,GAAVC,WAAA,CAAAC,YAAA,uBAAGH,CAAb,CAAA,2KAWP,IAAMI,EAAWN,EAAH,CAAA,wDAAA,6BAGVC,GAKG,IAAMM,EAAOL,EAAOM,OAAOJ,WAAqB,CACrDK,kBAAoBC,GAAS,CAAC,WAAY,UAAW,YAAa,QAAS,WAAWC,SAASD,KADhFN,WAAA,CAAAC,YAAA,uBAAGH,CAAH,CAAA,0EAAA,qBAAA,oMAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,0CAAA,IAAA,eAAA,IAAA,KAMMU,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOE,YAS/CJ,GAAWA,EAAMK,KAAOC,EAjDHN,CAAAA,GACJ,SAAhBA,EAAMO,MAAyB,OACR,iBAAhBP,EAAMO,MAA2BP,EAAMO,MAE9CP,EAAMK,MAAQvB,EAAOkB,EAAMK,MAAcvB,EAAOkB,EAAMK,MAEnD,OANiBL,CAiD6BA,GAAQ,SAAW,OACrEA,GAAWA,EAAMQ,OAASF,EAASN,EAAMQ,OAAQ,eAAiB,OAClER,GAAWA,EAAMQ,OAASF,EAASN,EAAMQ,OAAQ,UAAY,OAC9DC,IAAA,IAACC,SAAEA,EAAFC,QAAYA,EAAZC,QAAqBA,EAArBC,QAA8BA,EAA9BC,SAAuCA,GAAxCL,EAAA,OACAM,EAAwB,CAAEC,MAAO,CAAEN,SAAAA,EAAUC,QAAAA,EAASC,QAAAA,EAASC,QAAAA,EAASC,SAAAA,GAAYG,YAAa,cAEhGjB,GAAWA,EAAMO,MAAQD,EAASN,EAAMO,MAAO,SAAW,OACzDW,IAAA,IAACC,QAAEA,EAAFC,OAAWA,EAAXC,OAAmBA,EAAnBC,OAA2BA,EAA3BC,QAAmCA,GAApCL,EAAA,OACFH,EAAwB,CAAEC,MAAO,CAAEG,QAAAA,EAASC,OAAAA,EAAQC,OAAAA,EAAQC,OAAAA,EAAQC,QAAAA,GAAWN,YAAa,aAE3FjB,GAAWA,EAAMwB,QAAUA,EAAQxB,EAAMwB,SAAW,OACpDxB,GAAWA,EAAMyB,MAAQA,EAAMzB,EAAMyB,OAAS,OAM9CzB,GACAA,EAAMN,SAYH,KAXAN,EADJ,CAAA,6EAAA,IAAA,UAAA,OAMUD,EACAE,GACUW,GAAUA,EAAMC,MAAMC,OAAOC,UAMhDH,GAAWA,EAAM0B,SAAW1B,EAAM2B,QAAUxC,EAAS,MAGpDO,GAEDM,GAAWA,EAAMN,SAAWA,EAAW"}
|
package/components/Text/Text.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useClassname as
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import i from'@babel/runtime/helpers/objectWithoutProperties';import{useClassname as s}from'../../hooks/useClassname.js';import{useFallbackTheme as t}from'../../hooks/use-theme.js';import{useConfigPriority as l}from'../../hooks/use-config-priority.js';import{TextHeading as o}from'../Text.Heading/Text.Heading.js';import{TextEllipse as a}from'../Text.Ellipse/Text.Ellipse.js';import{Root as r}from'./style.js';import{jsx as n}from'react/jsx-runtime';var m=["as","children","weight","content","textAlign","underlineLinks","className","style","lineHeight","fontStyle","fontFamily","title","color","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","display"];var p='Text';var z=o=>{var a;var p=t();var d=l(null===(a=p.components)||void 0===a?void 0:a.Text,o),{as:y="div",children:h,weight:c="normal",content:f,textAlign:g,underlineLinks:u,className:x,style:S,lineHeight:L="m",fontStyle:T="normal",fontFamily:j,title:v,color:H,size:N="m",sizeXS:k,sizeS:X,sizeM:b,sizeL:M,sizeXL:E,display:A}=d,F=i(d,m);var w=s(z.displayName,x);return n(r,e(e({},F),{},h?{as:y,color:H,className:w,title:v,weight:c,lineHeight:L,textAlign:g,fontStyle:T,fontFamily:j,underlineLinks:u,size:N,sizeXS:k,sizeS:X,sizeM:b,sizeL:M,sizeXL:E,display:A,style:S,children:h}:{as:y,color:H,className:w,title:v,weight:c,lineHeight:L,textAlign:g,fontStyle:T,fontFamily:j,underlineLinks:u,size:N,sizeXS:k,sizeS:X,sizeM:b,sizeL:M,sizeXL:E,display:A,style:S,dangerouslySetInnerHTML:{__html:f||''}}))};z.Heading=o,z.Ellipse=a,z.displayName="Text";export{p as COMPONENT_NAME,z as Text};
|
|
2
2
|
//# sourceMappingURL=Text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport {
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport { useFallbackTheme } from 'hooks/use-theme'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport { TextHeading } from '../../components/Text.Heading'\nimport { TextEllipse } from '../../components/Text.Ellipse'\nimport type { TextProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Text'\n\n/**\n * Text component\n */\nconst Text = (props: TextProps) => {\n const theme = useFallbackTheme()\n\n const {\n as = 'div',\n children,\n weight = 'normal',\n content,\n textAlign,\n underlineLinks,\n className: origClassName,\n style,\n lineHeight = 'm',\n fontStyle = 'normal',\n fontFamily,\n title,\n color,\n size = 'm',\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n display,\n ...configProps\n } = useConfigPriority<TextProps>(theme.components?.[COMPONENT_NAME], props)\n\n const className = useClassname(Text.displayName, origClassName)\n\n if (children) {\n return (\n <Styled.Root\n {...configProps}\n as={as}\n color={color}\n className={className}\n title={title}\n weight={weight}\n lineHeight={lineHeight}\n textAlign={textAlign}\n fontStyle={fontStyle}\n fontFamily={fontFamily}\n underlineLinks={underlineLinks}\n size={size}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n display={display}\n style={style}\n >\n {children}\n </Styled.Root>\n )\n }\n\n return (\n <Styled.Root\n {...configProps}\n as={as}\n color={color}\n className={className}\n title={title}\n weight={weight}\n lineHeight={lineHeight}\n textAlign={textAlign}\n fontStyle={fontStyle}\n fontFamily={fontFamily}\n underlineLinks={underlineLinks}\n size={size}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n display={display}\n style={style}\n dangerouslySetInnerHTML={{ __html: content || '' }}\n />\n )\n}\n\nText.Heading = TextHeading\nText.Ellipse = TextEllipse\nText.displayName = COMPONENT_NAME\n\nexport { Text, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Text","props","_theme$components","theme","useFallbackTheme","useConfigPriority","components","as","children","weight","content","textAlign","underlineLinks","className","origClassName","style","lineHeight","fontStyle","fontFamily","title","color","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","display","_useConfigPriority","configProps","_objectWithoutProperties","_excluded","useClassname","displayName","_jsx","Styled.Root","dangerouslySetInnerHTML","__html","Heading","TextHeading","Ellipse","TextEllipse"],"mappings":"msBAQMA,IAAAA,EAAiB,OAKjBC,IAAAA,EAAQC,IAAqB,IAAAC,EACjC,IAAMC,EAAQC,IAEd,IAsBIC,EAAAA,EAA6B,QAAAF,EAAAA,EAAMG,kBAAAA,IAANJ,OAAAA,EAAAA,EAAAF,KAAoCC,IAtB/DM,GACJA,EAAK,MADDC,SAEJA,EAFIC,OAGJA,EAAS,SAHLC,QAIJA,EAJIC,UAKJA,EALIC,eAMJA,EACAC,UAAWC,EAPPC,MAQJA,EARIC,WASJA,EAAa,IATTC,UAUJA,EAAY,SAVRC,WAWJA,EAXIC,MAYJA,EAZIC,MAaJA,EAbIC,KAcJA,EAAO,IAdHC,OAeJA,EAfIC,MAgBJA,EAhBIC,MAiBJA,EAjBIC,MAkBJA,EAlBIC,OAmBJA,EAnBIC,QAoBJA,GApBFC,EAqBKC,EArBLC,EAAAF,EAAAG,GAwBA,IAAMlB,EAAYmB,EAAahC,EAAKiC,YAAanB,GAEjD,OAEIoB,EAACC,SACKN,GADN,GAFArB,EAEA,CAEED,GAAIA,EACJa,MAAOA,EACPP,UAAWA,EACXM,MAAOA,EACPV,OAAQA,EACRO,WAAYA,EACZL,UAAWA,EACXM,UAAWA,EACXC,WAAYA,EACZN,eAAgBA,EAChBS,KAAMA,EACNC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRC,QAASA,EACTZ,MAAOA,EAnBTP,SAqBGA,GAML,CAEED,GAAIA,EACJa,MAAOA,EACPP,UAAWA,EACXM,MAAOA,EACPV,OAAQA,EACRO,WAAYA,EACZL,UAAWA,EACXM,UAAWA,EACXC,WAAYA,EACZN,eAAgBA,EAChBS,KAAMA,EACNC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRC,QAASA,EACTZ,MAAOA,EACPqB,wBAAyB,CAAEC,OAAQ3B,GAAW,QAKpDV,EAAKsC,QAAUC,EACfvC,EAAKwC,QAAUC,EACfzC,EAAKiC,YA1FkB"}
|
package/components/Text/style.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e
|
|
1
|
+
import e from'styled-components';import{injectDefaultTheme as i}from'../../shared/utils/inject-theme.js';import{display as t}from'../../mixins/display.js';import{color as o}from'../../mixins/color.js';import{property as n,responsiveNamedProperty as s}from'../../mixins/responsive-property.js';var r={lighter:100,normal:400,bold:600,bolder:800};var l={l:1.5,m:1.3,s:1.15,xs:1};var a=e.div.withConfig({shouldForwardProp:e=>['children','className','style','title','dangerouslySetInnerHTML'].includes(e)}).attrs(i).withConfig({componentId:"fox-ui__sc-s2fogy-0"})(["line-height:inherit;margin:initial;"," "," "," "," "," "," a{text-decoration:",";&:hover{text-decoration:none;}}"," "," ",""],(e=>e.display&&t(e.display)),(e=>o(e.color?e.color:e.theme.textColor)),(e=>e.fontStyle&&"font-style: ".concat(e.fontStyle,";")),(e=>e.fontFamily&&"font-family: ".concat(e.fontFamily,";")),(e=>e.lineHeight&&"line-height: ".concat('string'==typeof e.lineHeight&&l[e.lineHeight]?l[e.lineHeight]:e.lineHeight,";")),(e=>e.weight&&"font-weight: ".concat('string'==typeof e.lineHeight&&r[e.weight]?r[e.weight]:e.weight,";")),(e=>{var{underlineLinks:i}=e;return i?'underline':'none'}),(e=>e.textAlign&&" text-align: ".concat(e.textAlign,";")),(e=>e.size&&n(e.size,'font-size')),(e=>{var{sizeXS:i,sizeS:t,sizeM:o,sizeL:n,sizeXL:r}=e;return s({sizes:{sizeXS:i,sizeS:t,sizeM:o,sizeL:n,sizeXL:r},cssProperty:'font-size'})}));export{a as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { display } from '../../mixins/display'\nimport { color, ColorValue } from '../../mixins/color'\nimport { responsiveNamedProperty, property } from '../../mixins/responsive-property'\nimport { TextProps } from './types'\n\nconst WEIGHT_MAP = {\n lighter: 100,\n normal: 400,\n bold: 600,\n bolder: 800,\n}\n\nconst LINE_HEIGHT_MAP: Record<Exclude<TextProps['lineHeight'], undefined>, number> = {\n l: 1.5,\n m: 1.3,\n s: 1.15,\n xs: 1,\n}\n\nexport const Root = styled.div\n .withConfig({\n shouldForwardProp: (prop) => ['children', 'className', 'style', 'title', 'dangerouslySetInnerHTML'].includes(prop),\n })\n .attrs(injectDefaultTheme)<TextProps>`\n line-height: inherit;\n margin: initial;\n ${(props) => props.display && display(props.display)}\n ${(props) => (props.color ? color(props.color) : color(props.theme.textColor as ColorValue))}\n ${(props) => props.fontStyle && `font-style: ${props.fontStyle};`}\n ${(props) => props.fontFamily && `font-family: ${props.fontFamily};`}\n ${(props) =>\n props.lineHeight &&\n `line-height: ${\n typeof props.lineHeight === 'string' && LINE_HEIGHT_MAP[props.lineHeight]\n ? LINE_HEIGHT_MAP[props.lineHeight]\n : props.lineHeight\n };`}\n ${(props) =>\n props.weight &&\n `font-weight: ${\n typeof props.lineHeight === 'string' && WEIGHT_MAP[props.weight] ? WEIGHT_MAP[props.weight] : props.weight\n };`}\n\n a {\n text-decoration: ${({ underlineLinks }) => (underlineLinks ? 'underline' : 'none')};\n &:hover {\n text-decoration: none;\n }\n }\n\n ${(props) => props.textAlign && ` text-align: ${props.textAlign};`}\n ${(props) => props.size && property(props.size, 'font-size')}\n ${({ sizeXS, sizeS, sizeM, sizeL, sizeXL }) =>\n responsiveNamedProperty({ sizes: { sizeXS, sizeS, sizeM, sizeL, sizeXL }, cssProperty: 'font-size' })}\n`\n"],"names":["WEIGHT_MAP","lighter","normal","bold","bolder","LINE_HEIGHT_MAP","l","m","s","xs","Root","styled","div","withConfig","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","componentId","props","display","color","theme","textColor","fontStyle","fontFamily","concat","lineHeight","weight","_ref","underlineLinks","textAlign","size","property","_ref2","sizeXS","sizeS","sizeM","sizeL","sizeXL","responsiveNamedProperty","sizes","cssProperty"],"mappings":"qSAOA,IAAMA,EAAa,CACjBC,QAAS,IACTC,OAAQ,IACRC,KAAM,IACNC,OAAQ,KAGV,IAAMC,EAA+E,CACnFC,EAAG,IACHC,EAAG,IACHC,EAAG,KACHC,GAAI,GAGC,IAAMC,EAAOC,EAAOC,IACxBC,WAAW,CACVC,kBAAoBC,GAAS,CAAC,WAAY,YAAa,QAAS,QAAS,2BAA2BC,SAASD,KAE9GE,MAAMC,GAJQL,WAAA,CAAAM,YAAA,uBAAGR,CAOfS,CAAAA,sCAAAA,IAAAA,IAAAA,IAAAA,IAAAA,IAAAA,sBAAAA,mCAAAA,IAAAA,IAAAA,KAAAA,GAAUA,EAAMC,SAAWA,EAAQD,EAAMC,WACzCD,GAAyBE,EAAdF,EAAME,MAAcF,EAAME,MAAeF,EAAMG,MAAMC,aAChEJ,GAAUA,EAAMK,WAA4BL,eAAAA,OAAAA,EAAMK,UATtC,OAUZL,GAAUA,EAAMM,YAAN,gBAAAC,OAAoCP,EAAMM,WAA1C,OACVN,GACDA,EAAMQ,YAAN,gBAAAD,OAE8B,iBAArBP,EAAMQ,YAA2BvB,EAAgBe,EAAMQ,YAC1DvB,EAAgBe,EAAMQ,YACtBR,EAAMQ,WAhBC,OAkBZR,GACDA,EAAMS,QAEJ,gBAAAF,OAA4B,iBAArBP,EAAMQ,YAA2B5B,EAAWoB,EAAMS,QAAU7B,EAAWoB,EAAMS,QAAUT,EAAMS,OAFtG,OAMmBC,IAAA,IAACC,eAAEA,GAAHD,EAAA,OAAyBC,EAAiB,YAAc,UAM1EX,GAAUA,EAAMY,WAAN,gBAAAL,OAAmCP,EAAMY,UAAzC,OACVZ,GAAUA,EAAMa,MAAQC,EAASd,EAAMa,KAAM,eAC9CE,IAAA,IAACC,OAAEA,EAAFC,MAAUA,EAAVC,MAAiBA,EAAjBC,MAAwBA,EAAxBC,OAA+BA,GAAhCL,EAAA,OACAM,EAAwB,CAAEC,MAAO,CAAEN,OAAAA,EAAQC,MAAAA,EAAOC,MAAAA,EAAOC,MAAAA,EAAOC,OAAAA,GAAUG,YAAa"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import i from'@babel/runtime/helpers/objectWithoutProperties';import{
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import i from'@babel/runtime/helpers/objectWithoutProperties';import{useFallbackTheme as t}from'../../hooks/use-theme.js';import{useConfigPriority as o}from'../../hooks/use-config-priority.js';import{Text as r}from'../Text/Text.js';import{jsx as s}from'react/jsx-runtime';var a=["h","fontFamily"];var h={h1:{size:44,sizeM:32,lineHeight:'s',weight:'bold'},h2:{size:32,sizeM:28,lineHeight:'s',weight:'bold'},h3:{size:28,lineHeight:'s',weight:'bold'},h4:{size:24,lineHeight:'s',weight:'bold'}};var m='Text.Heading';var l=m=>{var l;var n=t();var g=o(null===(l=n.components)||void 0===l?void 0:l["Text.Heading"],m),{h:p="h1",fontFamily:d=""}=g,b=i(g,a);return s(r,e(e({as:p,fontFamily:d},h[p]),b))};l.displayName="Text.Heading";export{m as COMPONENT_NAME,l as TextHeading};
|
|
2
2
|
//# sourceMappingURL=Text.Heading.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.Heading.js","sources":["../../../../src/components/Text.Heading/Text.Heading.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Text.Heading.js","sources":["../../../../src/components/Text.Heading/Text.Heading.tsx"],"sourcesContent":["import { useFallbackTheme } from 'hooks/use-theme'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport { Text } from '../Text'\nimport { TextHeadingProps, H } from './types'\n\nconst PARAMS: Record<H, Partial<TextHeadingProps>> = {\n h1: {\n size: 44,\n sizeM: 32,\n lineHeight: 's',\n weight: 'bold',\n },\n h2: {\n size: 32,\n sizeM: 28,\n lineHeight: 's',\n weight: 'bold',\n },\n h3: {\n size: 28,\n lineHeight: 's',\n weight: 'bold',\n },\n h4: {\n size: 24,\n lineHeight: 's',\n weight: 'bold',\n },\n}\n\nconst COMPONENT_NAME = 'Text.Heading'\n\n/**\n * @visibleName Text.Heading\n */\nconst TextHeading = (props: TextHeadingProps) => {\n const theme = useFallbackTheme()\n\n const {\n h = 'h1',\n fontFamily = '',\n ...configProps\n } = useConfigPriority<TextHeadingProps>(theme.components?.[COMPONENT_NAME], props)\n\n const predefinedParams = PARAMS[h]\n\n return <Text as={h} fontFamily={fontFamily} {...predefinedParams} {...configProps} />\n}\n\nTextHeading.displayName = COMPONENT_NAME\n\nexport { TextHeading, COMPONENT_NAME }\n"],"names":["PARAMS","h1","size","sizeM","lineHeight","weight","h2","h3","h4","COMPONENT_NAME","TextHeading","props","_theme$components","theme","useFallbackTheme","useConfigPriority","components","h","fontFamily","_useConfigPriority","configProps","_objectWithoutProperties","_excluded","_jsx","Text","_objectSpread","as","displayName"],"mappings":"6VAKA,IAAMA,EAA+C,CACnDC,GAAI,CACFC,KAAM,GACNC,MAAO,GACPC,WAAY,IACZC,OAAQ,QAEVC,GAAI,CACFJ,KAAM,GACNC,MAAO,GACPC,WAAY,IACZC,OAAQ,QAEVE,GAAI,CACFL,KAAM,GACNE,WAAY,IACZC,OAAQ,QAEVG,GAAI,CACFN,KAAM,GACNE,WAAY,IACZC,OAAQ,SAINI,IAAAA,EAAiB,eAKjBC,IAAAA,EAAeC,IAA4B,IAAAC,EAC/C,IAAMC,EAAQC,IAEd,IAIIC,EAAAA,EAAoC,QAAAF,EAAAA,EAAMG,kBAAAA,IAANJ,OAAA,EAAAA,EAZnB,gBAYuDD,IAJtEM,EACJA,EAAI,KADAC,WAEJA,EAAa,IAFfC,EAGKC,EAHLC,EAAAF,EAAAG,GAQA,OAAOC,EAACC,EAADC,EAAAA,EAAA,CAAMC,GAAIT,EAAGC,WAAYA,GAFPlB,EAAOiB,IAEsCG,KAGxEV,EAAYiB,YAnBW"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{useRef as a,useState as o,useCallback as t,useEffect as l}from'react';import{useFallbackTheme as s}from'../../hooks/use-theme.js';import{useConfigPriority as i}from'../../hooks/use-config-priority.js';import{Root as n}from'./style.js';import{jsx as d}from'react/jsx-runtime';var u=["preset","disabled","error","fluid","name","onChange","maxLength","placeholder","required","tabIndex","value","className","style","children","autosize","rounded","cols","rows","maxRows","color","placeholderColor","width"];var c='Textarea';var h=c=>{var h;var m=s();var p=i(null===(h=m.components)||void 0===h?void 0:h.Textarea,c),{preset:f,disabled:v,error:g,fluid:b,name:x,onChange:C,maxLength:y,placeholder:w,required:T,tabIndex:j,value:N,className:R,style:H,children:I,autosize:k=!0,rounded:E=!0,cols:L=20,rows:M=2,maxRows:P=30,color:S="mineShaft",placeholderColor:q="silver",width:z=m.defaultInputControlsWidth}=p,A=r(p,u);var B=a();var[O,W]=o(M);var F=t((e=>{var{target:r}=e;if(r instanceof HTMLTextAreaElement&&k){var a=r.getBoundingClientRect();r.scrollHeight>a.height&&O<P?W(O+1):r.value&&''!==r.value||W(M)}'function'==typeof C&&C(e)}),[C,O,P,k]);l((()=>{if(B&&B.current){var e=B.current;var r=e.getBoundingClientRect();if(e.scrollHeight>r.height){var a=parseInt(getComputedStyle(e).lineHeight,10);var o=Math.floor(e.scrollHeight/a);o<=P&&o>M&&W(o)}}}),[]);var U='brand'===m.preset;return'string'==typeof f&&(U='brand'===f),d(n,e(e({},A),{},{ref:B,className:R,style:H,onChange:F,cols:L,disabled:v,maxLength:y,name:x,placeholder:w,required:T,rows:O,tabIndex:j,value:N,color:S,rounded:E,placeholderColor:q,fluid:b,error:g,width:z,brandPresetUsed:U,children:I}))};h.displayName="Textarea";export{c as COMPONENT_NAME,h as Textarea};
|
|
2
2
|
//# sourceMappingURL=Textarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport {
|
|
1
|
+
{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport { useFallbackTheme } from 'hooks/use-theme'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport * as Styled from './style'\nimport type { TextareaProps } from './types'\n\nconst COMPONENT_NAME = 'Textarea'\n\n/**\n * Textarea component\n */\nconst Textarea = (props: TextareaProps) => {\n const theme = useFallbackTheme()\n\n const {\n preset,\n disabled,\n error,\n fluid,\n name,\n onChange,\n maxLength,\n placeholder,\n required,\n tabIndex,\n value,\n className,\n style,\n children,\n autosize = true,\n rounded = true,\n cols = 20,\n rows = 2,\n maxRows = 30,\n color = 'mineShaft',\n placeholderColor = 'silver',\n width = theme.defaultInputControlsWidth,\n ...configProps\n } = useConfigPriority<TextareaProps>(theme.components?.[COMPONENT_NAME], props)\n\n const textarea = useRef() as React.MutableRefObject<HTMLTextAreaElement>\n\n const [tRows, setRows] = useState(rows)\n\n const onChangeHandler: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback(\n (event) => {\n const { target } = event\n\n if (target instanceof HTMLTextAreaElement && autosize) {\n const rect = target.getBoundingClientRect()\n\n if (target.scrollHeight > rect.height && tRows < maxRows) {\n setRows(tRows + 1)\n } else if (!target.value || target.value === '') {\n setRows(rows)\n }\n }\n\n if (typeof onChange === 'function') {\n onChange(event)\n }\n },\n [onChange, tRows, maxRows, autosize]\n )\n\n useEffect(() => {\n if (!textarea || !textarea.current) return\n\n const el = textarea.current\n const rect = el.getBoundingClientRect()\n if (el.scrollHeight > rect.height) {\n const lh = parseInt(getComputedStyle(el).lineHeight, 10)\n const numberOfLines = Math.floor(el.scrollHeight / lh)\n if (numberOfLines <= maxRows && numberOfLines > rows) {\n setRows(numberOfLines)\n }\n }\n }, [])\n\n let brandPresetUsed = theme.preset === 'brand'\n if (typeof preset === 'string') brandPresetUsed = preset === 'brand'\n\n return (\n <Styled.Root\n {...configProps}\n ref={textarea}\n className={className}\n style={style}\n onChange={onChangeHandler}\n cols={cols}\n disabled={disabled}\n maxLength={maxLength}\n name={name}\n placeholder={placeholder}\n required={required}\n rows={tRows}\n tabIndex={tabIndex}\n value={value}\n color={color}\n rounded={rounded}\n placeholderColor={placeholderColor}\n fluid={fluid}\n error={error}\n width={width}\n brandPresetUsed={brandPresetUsed}\n >\n {children}\n </Styled.Root>\n )\n}\n\nTextarea.displayName = COMPONENT_NAME\n\nexport { Textarea, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Textarea","props","_theme$components","theme","useFallbackTheme","useConfigPriority","components","preset","disabled","error","fluid","name","onChange","maxLength","placeholder","required","tabIndex","value","className","style","children","autosize","rounded","cols","rows","maxRows","color","placeholderColor","width","defaultInputControlsWidth","_useConfigPriority","configProps","_objectWithoutProperties","_excluded","textarea","useRef","tRows","setRows","useState","onChangeHandler","useCallback","event","target","HTMLTextAreaElement","rect","getBoundingClientRect","scrollHeight","height","useEffect","current","el","lh","parseInt","getComputedStyle","lineHeight","numberOfLines","Math","floor","brandPresetUsed","_jsx","Styled.Root","ref","displayName"],"mappings":"inBAMMA,IAAAA,EAAiB,WAKjBC,IAAAA,EAAYC,IAAyB,IAAAC,EACzC,IAAMC,EAAQC,IAEd,IAwBIC,EAAAA,EAAiC,QAAAF,EAAAA,EAAMG,kBAAAA,IAANJ,OAAAA,EAAAA,EAAAF,SAAoCC,IAxBnEM,OACJA,EADIC,SAEJA,EAFIC,MAGJA,EAHIC,MAIJA,EAJIC,KAKJA,EALIC,SAMJA,EANIC,UAOJA,EAPIC,YAQJA,EARIC,SASJA,EATIC,SAUJA,EAVIC,MAWJA,EAXIC,UAYJA,EAZIC,MAaJA,EAbIC,SAcJA,EAdIC,SAeJA,GAAW,EAfPC,QAgBJA,GAAAA,EAhBIC,KAiBJA,EAAO,GAjBHC,KAkBJA,EAAO,EAlBHC,QAmBJA,EAAU,GAnBNC,MAoBJA,EAAQ,YApBJC,iBAqBJA,EAAmB,SArBfC,MAsBJA,EAAQzB,EAAM0B,2BAtBhBC,EAuBKC,EAvBLC,EAAAF,EAAAG,GA0BA,IAAMC,EAAWC,IAEjB,IAAOC,EAAOC,GAAWC,EAASd,GAElC,IAAMe,EAAiEC,GACpEC,IACC,IAAMC,OAAEA,GAAWD,EAEnB,GAAIC,aAAkBC,qBAAuBtB,EAAU,CACrD,IAAMuB,EAAOF,EAAOG,wBAEhBH,EAAOI,aAAeF,EAAKG,QAAUX,EAAQX,EAC/CY,EAAQD,EAAQ,GACNM,EAAOzB,OAA0B,KAAjByB,EAAOzB,OACjCoB,EAAQb,GAIY,mBAAbZ,GACTA,EAAS6B,KAGb,CAAC7B,EAAUwB,EAAOX,EAASJ,IAG7B2B,GAAAA,KACE,GAAKd,GAAaA,EAASe,QAA3B,CAEA,IAAMC,EAAKhB,EAASe,QACpB,IAAML,EAAOM,EAAGL,wBAChB,GAAIK,EAAGJ,aAAeF,EAAKG,OAAQ,CACjC,IAAMI,EAAKC,SAASC,iBAAiBH,GAAII,WAAY,IACrD,IAAMC,EAAgBC,KAAKC,MAAMP,EAAGJ,aAAeK,GAC/CI,GAAiB9B,GAAW8B,EAAgB/B,GAC9Ca,EAAQkB,OAGX,IAEH,IAAIG,EAAmC,UAAjBvD,EAAMI,OAG5B,MAFsB,iBAAXA,IAAqBmD,EAA6B,UAAXnD,GAGhDoD,EAACC,SACK7B,GADN,GAAA,CAEE8B,IAAK3B,EACLhB,UAAWA,EACXC,MAAOA,EACPP,SAAU2B,EACVhB,KAAMA,EACNf,SAAUA,EACVK,UAAWA,EACXF,KAAMA,EACNG,YAAaA,EACbC,SAAUA,EACVS,KAAMY,EACNpB,SAAUA,EACVC,MAAOA,EACPS,MAAOA,EACPJ,QAASA,EACTK,iBAAkBA,EAClBjB,MAAOA,EACPD,MAAOA,EACPmB,MAAOA,EACP8B,gBAAiBA,EArBnBtC,SAuBGA,MAKPpB,EAAS8D,YAzGc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o
|
|
1
|
+
import r,{css as o}from'styled-components';import{injectDefaultTheme as e}from'../../shared/utils/inject-theme.js';import{property as t,responsiveNamedProperty as d}from'../../mixins/responsive-property.js';import{chooseWidthValue as i}from'../Input/helpers.js';import{baseInputStyle as a}from'../Input/style.js';var s=o(["",";"," "," "," ",""],(r=>{var{theme:e}=r;return o(["display:block;box-sizing:border-box;appearance:none;width:auto;resize:vertical;background:",";border:1px solid ",";border-radius:12px;padding:12px 16px;font-style:normal;font-weight:400;font-size:18px;line-height:24px;color:",";&::placeholder{color:",";}&:focus{border:1px solid ",";caret-color:",";outline:none;}&:disabled{background-color:",";border-color:",";color:",";cursor:not-allowed;}"],e.colors['bg-onmain-secondary'],e.colors['border-onmain-default-large'],e.colors['content-onmain-primary'],e.colors['content-onmain-secondary'],e.colors['border-brand-primary'],e.colors['border-brand-primary'],e.colors['bg-disabled-large'],e.colors['border-disabled'],e.colors['content-disabled'])}),(r=>r.width?t(i(r.width),r.fluid&&'auto'!==r.width?'max-width':'width'):null),(r=>d({sizes:{widthXS:r.widthXS,widthS:r.widthS,widthM:r.widthM,widthL:r.widthL,widthXL:r.widthXL},cssProperty:r.fluid&&'auto'!==r.width?'max-width':'width',customSizeHandler:i})),(r=>{var{fluid:o}=r;return o&&'width: 100%;'}),(r=>{var{error:e}=r;return e&&o(["background-color:",";border:1px solid ",";"],(r=>{var{theme:o}=r;return o.colors['alert-bg-error-100']}),(r=>{var{theme:o}=r;return o.colors['alert-bg-error-500']}))}));var n=o(["resize:none;line-height:23px;padding:16px 20px 11px;",""],a);var l=r.textarea.withConfig({shouldForwardProp:r=>!['color','placeholderColor','rounded','fluid','error','brandPresetUsed'].includes(r)&&!r.includes('width')}).attrs(e).withConfig({componentId:"fox-ui__sc-a4hfy5-0"})(["",""],(r=>{var{brandPresetUsed:o}=r;return o?s:n}));export{l as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Textarea/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { baseInputStyle } from '../../components/Input/style'\nimport {
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Textarea/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from '../../components/Input/helpers'\nimport { baseInputStyle } from '../../components/Input/style'\nimport type { TextareaRootProps } from './types'\n\n/**\n * TODO: combine following styles durnig Input component rebranding and remove it from here\n * https://jira.netology-group.ru/browse/STOEGE-20514\n */\nconst brandTextareaStyle = css<TextareaRootProps>`\n ${({ theme }) => css`\n display: block;\n box-sizing: border-box;\n appearance: none;\n width: auto;\n resize: vertical;\n\n background: ${theme.colors['bg-onmain-secondary']};\n border: 1px solid ${theme.colors['border-onmain-default-large']};\n border-radius: 12px;\n padding: 12px 16px;\n\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 24px;\n color: ${theme.colors['content-onmain-primary']};\n\n &::placeholder {\n color: ${theme.colors['content-onmain-secondary']};\n }\n\n &:focus {\n border: 1px solid ${theme.colors['border-brand-primary']};\n caret-color: ${theme.colors['border-brand-primary']};\n outline: none;\n }\n\n &:disabled {\n background-color: ${theme.colors['bg-disabled-large']};\n border-color: ${theme.colors['border-disabled']};\n color: ${theme.colors['content-disabled']};\n cursor: not-allowed;\n }\n `};\n\n ${(props) =>\n props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n\n ${(props) =>\n responsiveNamedProperty({\n sizes: {\n widthXS: props.widthXS,\n widthS: props.widthS,\n widthM: props.widthM,\n widthL: props.widthL,\n widthXL: props.widthXL,\n },\n cssProperty: props.fluid && props.width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: chooseWidthValue,\n })}\n\n ${({ fluid }) => fluid && 'width: 100%;'}\n\n ${({ error }) =>\n error &&\n css`\n background-color: ${({ theme }) => theme.colors['alert-bg-error-100']};\n border: 1px solid ${({ theme }) => theme.colors['alert-bg-error-500']};\n `}\n`\n\nconst baseTextareaStyle = css`\n resize: none;\n line-height: 23px;\n padding: 16px 20px 11px;\n ${baseInputStyle}\n`\n\nexport const Root = styled.textarea\n .withConfig({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error', 'brandPresetUsed'].includes(prop) &&\n !prop.includes('width'),\n })\n .attrs(injectDefaultTheme)<TextareaRootProps>`\n ${({ brandPresetUsed }) => (brandPresetUsed ? brandTextareaStyle : baseTextareaStyle)}\n`\n"],"names":["brandTextareaStyle","css","_ref","theme","colors","props","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","_ref2","_ref3","error","_ref4","_ref5","baseTextareaStyle","baseInputStyle","Root","styled","textarea","withConfig","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","componentId","_ref6","brandPresetUsed"],"mappings":"yTAWA,IAAMA,EAAqBC,EACvB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,KAAAC,IAAA,IAACC,MAAEA,GAAHD,EAAA,OAAeD,EAAf,CAAA,6FAAA,qBAAA,iHAAA,yBAAA,8BAAA,gBAAA,8CAAA,iBAAA,UAAA,yBAOcE,EAAMC,OAAO,uBACPD,EAAMC,OAAO,+BAQxBD,EAAMC,OAAO,0BAGXD,EAAMC,OAAO,4BAIFD,EAAMC,OAAO,wBAClBD,EAAMC,OAAO,wBAKRD,EAAMC,OAAO,qBACjBD,EAAMC,OAAO,mBACpBD,EAAMC,OAAO,wBAKvBC,GACDA,EAAMC,MACFC,EAASC,EAAiBH,EAAMC,OAAQD,EAAMI,OAAyB,SAAhBJ,EAAMC,MAAmB,YAAc,SAC9F,OAEHD,GACDK,EAAwB,CACtBC,MAAO,CACLC,QAASP,EAAMO,QACfC,OAAQR,EAAMQ,OACdC,OAAQT,EAAMS,OACdC,OAAQV,EAAMU,OACdC,QAASX,EAAMW,SAEjBC,YAAaZ,EAAMI,OAAyB,SAAhBJ,EAAMC,MAAmB,YAAc,QACnEY,kBAAmBV,MAGrBW,IAAA,IAACV,MAAEA,GAAHU,EAAA,OAAeV,GAAS,kBAExBW,IAAA,IAACC,MAAEA,GAAHD,EAAA,OACAC,GACApB,EACsB,CAAA,oBAAA,qBAAA,MAAAqB,IAAA,IAACnB,MAAEA,GAAHmB,EAAA,OAAenB,EAAMC,OAAO,yBAC5BmB,IAAA,IAACpB,MAAEA,GAAHoB,EAAA,OAAepB,EAAMC,OAAO,4BAItD,IAAMoB,EAAoBvB,EAAH,CAAA,uDAAA,IAInBwB,GAGG,IAAMC,EAAOC,EAAOC,SACxBC,WAAW,CACVC,kBAAoBC,IACjB,CAAC,QAAS,mBAAoB,UAAW,QAAS,QAAS,mBAAmBC,SAASD,KACvFA,EAAKC,SAAS,WAElBC,MAAMC,GANQL,WAAA,CAAAM,YAAA,uBAAGR,CAOhB,CAAA,GAAA,KAAAS,IAAA,IAACC,gBAAEA,GAAHD,EAAA,OAA0BC,EAAkBrC,EAAqBwB"}
|
package/dts/index.d.ts
CHANGED
|
@@ -5,9 +5,9 @@ import * as react from 'react';
|
|
|
5
5
|
import { PureComponent, Component } from 'react';
|
|
6
6
|
import { Link, NavLink } from 'react-router-dom';
|
|
7
7
|
import { ResponsiveProperty as ResponsiveProperty$1, ResponsiveNamedProperty as ResponsiveNamedProperty$1 } from 'mixins/responsive-property';
|
|
8
|
-
import { BaseProps as BaseProps$1, Nullable as Nullable$1, FontWeight as FontWeight$1 } from 'shared/interfaces';
|
|
9
|
-
import { Display as Display$1 } from 'mixins/display';
|
|
8
|
+
import { BaseProps as BaseProps$1, Nullable as Nullable$1, FontWeight as FontWeight$1, InputField as InputField$1 } from 'shared/interfaces';
|
|
10
9
|
import { Color as Color$1 } from 'mixins/color';
|
|
10
|
+
import { Display as Display$1 } from 'mixins/display';
|
|
11
11
|
import { Anchor as Anchor$1 } from 'components/Anchor';
|
|
12
12
|
import { Classes } from 'react-modal';
|
|
13
13
|
import * as rc_scrollbars_lib_Scrollbars_types from 'rc-scrollbars/lib/Scrollbars/types';
|
|
@@ -332,7 +332,7 @@ interface InputField extends Color, Color<'placeholderColor'>, ResponsiveNamedPr
|
|
|
332
332
|
*/
|
|
333
333
|
children?: React.ReactNode;
|
|
334
334
|
/**
|
|
335
|
-
* Rounded style
|
|
335
|
+
* @preset {Default} Rounded style
|
|
336
336
|
*/
|
|
337
337
|
rounded?: boolean;
|
|
338
338
|
/**
|
|
@@ -881,23 +881,13 @@ declare class Avatar extends PureComponent<AvatarProps> {
|
|
|
881
881
|
render(): JSX.Element;
|
|
882
882
|
}
|
|
883
883
|
|
|
884
|
-
declare
|
|
885
|
-
h1 = 0,
|
|
886
|
-
h2 = 1,
|
|
887
|
-
h3 = 2,
|
|
888
|
-
h4 = 3
|
|
889
|
-
}
|
|
884
|
+
declare type H = 'h1' | 'h2' | 'h3' | 'h4';
|
|
890
885
|
interface TextHeadingProps extends Omit<TextProps, 'content' | 'as'> {
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
*/
|
|
886
|
+
/** Default set of size, lineHeight and weight props */
|
|
887
|
+
h?: H;
|
|
888
|
+
/** Children react node */
|
|
895
889
|
children?: React.ReactNode;
|
|
896
890
|
}
|
|
897
|
-
declare function TextHeading({ h, ...props }: TextHeadingProps): JSX.Element;
|
|
898
|
-
declare namespace TextHeading {
|
|
899
|
-
var displayName: string;
|
|
900
|
-
}
|
|
901
891
|
|
|
902
892
|
interface TextEllipseProps extends Omit<TextProps, 'content'> {
|
|
903
893
|
/** Toggle text for folded state */
|
|
@@ -936,60 +926,42 @@ declare class TextEllipse extends Component<TextEllipseProps, TextEllipseState>
|
|
|
936
926
|
render(): JSX.Element;
|
|
937
927
|
}
|
|
938
928
|
|
|
939
|
-
interface TextProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {
|
|
940
|
-
/**
|
|
941
|
-
* An element type to render as (string).
|
|
942
|
-
*/
|
|
929
|
+
interface TextProps extends BaseProps$1, Color$1, ResponsiveNamedProperty$1<'size'>, Display$1 {
|
|
930
|
+
/** An element type to render as (string) */
|
|
943
931
|
as?: 'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'p';
|
|
944
|
-
/**
|
|
945
|
-
* Primary content
|
|
946
|
-
*/
|
|
932
|
+
/** Primary content */
|
|
947
933
|
content?: string;
|
|
948
|
-
/**
|
|
949
|
-
|
|
950
|
-
*/
|
|
951
|
-
/**
|
|
952
|
-
* Children react node
|
|
953
|
-
*/
|
|
934
|
+
/** Primary content */
|
|
935
|
+
/** Children react node */
|
|
954
936
|
children?: React.ReactNode;
|
|
955
|
-
/**
|
|
956
|
-
* Text font weight
|
|
957
|
-
*/
|
|
937
|
+
/** Text font weight */
|
|
958
938
|
weight?: 'lighter' | 'normal' | 'bold' | 'bolder' | number;
|
|
959
|
-
/**
|
|
960
|
-
* Text font style
|
|
961
|
-
*/
|
|
939
|
+
/** Text font style */
|
|
962
940
|
fontStyle?: 'normal' | 'italic';
|
|
963
|
-
/**
|
|
964
|
-
|
|
965
|
-
|
|
941
|
+
/** Text font family */
|
|
942
|
+
fontFamily?: string;
|
|
943
|
+
/** Add underline to inline links */
|
|
966
944
|
underlineLinks?: boolean;
|
|
967
|
-
/**
|
|
968
|
-
* Text align
|
|
969
|
-
*/
|
|
945
|
+
/** Text align */
|
|
970
946
|
textAlign?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end';
|
|
971
|
-
/**
|
|
972
|
-
* Line height
|
|
973
|
-
*/
|
|
947
|
+
/** Line height */
|
|
974
948
|
lineHeight?: 'l' | 'm' | 's' | 'xs' | number;
|
|
975
|
-
/**
|
|
976
|
-
* Element title
|
|
977
|
-
*/
|
|
949
|
+
/** Element title */
|
|
978
950
|
title?: string;
|
|
979
951
|
}
|
|
952
|
+
|
|
980
953
|
/**
|
|
981
|
-
*
|
|
982
|
-
* - [`BaseProps`](#/Миксины)
|
|
983
|
-
* - [`Color`](#/Миксины)
|
|
984
|
-
* - [`Display`](#/Миксины)
|
|
985
|
-
* - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
|
|
954
|
+
* Text component
|
|
986
955
|
*/
|
|
987
|
-
declare
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
}
|
|
956
|
+
declare const Text: {
|
|
957
|
+
(props: TextProps): JSX.Element;
|
|
958
|
+
Heading: {
|
|
959
|
+
(props: TextHeadingProps): JSX.Element;
|
|
960
|
+
displayName: string;
|
|
961
|
+
};
|
|
962
|
+
Ellipse: typeof TextEllipse;
|
|
963
|
+
displayName: string;
|
|
964
|
+
};
|
|
993
965
|
|
|
994
966
|
interface BadgeProps extends BaseProps, Color, Display {
|
|
995
967
|
/**
|
|
@@ -2143,56 +2115,30 @@ declare class ContextMenu extends PureComponent<ContextMenuProps, {
|
|
|
2143
2115
|
}
|
|
2144
2116
|
|
|
2145
2117
|
declare type TextAreaHTMLAttributes = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'cols' | 'rows' | 'color'>;
|
|
2146
|
-
interface TextareaProps extends BaseProps, InputField, TextAreaHTMLAttributes {
|
|
2147
|
-
/**
|
|
2148
|
-
* Specifies the visible width of a text area
|
|
2149
|
-
*/
|
|
2118
|
+
interface TextareaProps extends BaseProps$1, InputField$1, TextAreaHTMLAttributes {
|
|
2119
|
+
/** Specifies the visible width of a text area */
|
|
2150
2120
|
cols?: number;
|
|
2151
|
-
/**
|
|
2152
|
-
* Specifies the visible number of lines in a text area
|
|
2153
|
-
*/
|
|
2121
|
+
/** Specifies the visible number of lines in a text area */
|
|
2154
2122
|
rows?: number;
|
|
2155
|
-
/**
|
|
2156
|
-
* Specifies the visible max number of lines in a text area
|
|
2157
|
-
*/
|
|
2123
|
+
/** Specifies the visible max number of lines in a text area */
|
|
2158
2124
|
maxRows?: number;
|
|
2159
|
-
/**
|
|
2160
|
-
* Specifies the maximum number of characters allowed in the text area
|
|
2161
|
-
*/
|
|
2125
|
+
/** Specifies the maximum number of characters allowed in the text area */
|
|
2162
2126
|
maxLength?: number;
|
|
2163
|
-
/**
|
|
2164
|
-
* On change handler
|
|
2165
|
-
*/
|
|
2127
|
+
/** On change handler */
|
|
2166
2128
|
onChange?(_event: React.ChangeEvent<HTMLTextAreaElement>): void;
|
|
2167
|
-
/**
|
|
2168
|
-
* Value
|
|
2169
|
-
*/
|
|
2129
|
+
/** Value */
|
|
2170
2130
|
value?: string;
|
|
2171
|
-
/**
|
|
2172
|
-
* Autosize for textarea
|
|
2173
|
-
*/
|
|
2131
|
+
/** Autosize for textarea */
|
|
2174
2132
|
autosize?: boolean;
|
|
2175
2133
|
}
|
|
2134
|
+
|
|
2176
2135
|
/**
|
|
2177
|
-
*
|
|
2178
|
-
* - [`BaseProps`](#/Миксины)
|
|
2179
|
-
* - [`InputField`](#/Миксины)
|
|
2180
|
-
* - `React.TextareaHTMLAttributes<HTMLTextAreaElement>`
|
|
2136
|
+
* Textarea component
|
|
2181
2137
|
*/
|
|
2182
|
-
declare
|
|
2183
|
-
|
|
2184
|
-
|
|
2185
|
-
|
|
2186
|
-
rounded: boolean;
|
|
2187
|
-
color: string;
|
|
2188
|
-
placeholderColor: string;
|
|
2189
|
-
cols: number;
|
|
2190
|
-
maxRows: number;
|
|
2191
|
-
rows: number;
|
|
2192
|
-
autosize: boolean;
|
|
2193
|
-
};
|
|
2194
|
-
var displayName: string;
|
|
2195
|
-
}
|
|
2138
|
+
declare const Textarea: {
|
|
2139
|
+
(props: TextareaProps): JSX.Element;
|
|
2140
|
+
displayName: string;
|
|
2141
|
+
};
|
|
2196
2142
|
|
|
2197
2143
|
interface InputPhoneProps extends InputProps {
|
|
2198
2144
|
/**
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import{useMemo as r}from'react';function t(t,n){return r((()=>{var r=null!=t?t:{};var u=null!=n?n:{};return[...new Set([...Object.keys(r),...Object.keys(u)])].reduce(((t,n)=>{var a;return o(r[n])&&(a=r[n]),o(u[n])&&(a=u[n]),o(a)?e(e({},t),{},{[n]:a}):t}),{})}),[t,n])}function o(e){return Boolean(e)||'boolean'==typeof e||'number'==typeof e}export{t as useConfigPriority};
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import{useMemo as r}from'react';function t(t,n){return r((()=>{var r=null!=t?t:{};var u=null!=n?n:{};return[...new Set([...Object.keys(r),...Object.keys(u)])].reduce(((t,n)=>{var a;return o(r[n])&&(a=r[n]),o(u[n])&&(a=u[n]),o(a)?e(e({},t),{},{[n]:a}):t}),{})}),[t,n])}function o(e){return Boolean(e)||'boolean'==typeof e||'number'==typeof e||'string'==typeof e}export{t as useConfigPriority};
|
|
2
2
|
//# sourceMappingURL=use-config-priority.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-config-priority.js","sources":["../../../src/hooks/use-config-priority.ts"],"sourcesContent":["import { useMemo } from 'react'\n\nexport function useConfigPriority<T extends object>(minor?: Partial<T>, major?: Partial<T>): Partial<T> {\n return useMemo(() => {\n const minorConfig = minor ?? {}\n const majorConfig = major ?? {}\n const uniqueKeys = [...new Set([...Object.keys(minorConfig), ...Object.keys(majorConfig)])]\n\n return uniqueKeys.reduce((prioritized, key) => {\n let finalVal\n\n if (valid(minorConfig[key])) finalVal = minorConfig[key]\n if (valid(majorConfig[key])) finalVal = majorConfig[key]\n\n return valid(finalVal) ? { ...prioritized, [key]: finalVal } : prioritized\n }, {} as Partial<T>)\n }, [minor, major])\n}\n\nfunction valid(value: unknown): boolean {\n return Boolean(value) || typeof value === 'boolean' || typeof value === 'number'\n}\n"],"names":["useConfigPriority","minor","major","useMemo","minorConfig","majorConfig","Set","Object","keys","reduce","prioritized","key","finalVal","valid","value","Boolean"],"mappings":"oFAEO,SAASA,EAAoCC,EAAoBC,GACtE,OAAOC,GAAQ,KACb,IAAMC,EAAcH,MAAAA,EAAAA,EAAS,GAC7B,IAAMI,EAAcH,MAAAA,EAAAA,EAAS,GAG7B,MAFmB,IAAI,IAAII,IAAI,IAAIC,OAAOC,KAAKJ,MAAiBG,OAAOC,KAAKH,MAE1DI,
|
|
1
|
+
{"version":3,"file":"use-config-priority.js","sources":["../../../src/hooks/use-config-priority.ts"],"sourcesContent":["import { useMemo } from 'react'\n\nexport function useConfigPriority<T extends object>(minor?: Partial<T>, major?: Partial<T>): Partial<T> {\n return useMemo(() => {\n const minorConfig = minor ?? {}\n const majorConfig = major ?? {}\n const uniqueKeys = [...new Set([...Object.keys(minorConfig), ...Object.keys(majorConfig)])]\n\n return uniqueKeys.reduce((prioritized, key) => {\n let finalVal\n\n if (valid(minorConfig[key])) finalVal = minorConfig[key]\n if (valid(majorConfig[key])) finalVal = majorConfig[key]\n\n return valid(finalVal) ? { ...prioritized, [key]: finalVal } : prioritized\n }, {} as Partial<T>)\n }, [minor, major])\n}\n\nfunction valid(value: unknown): boolean {\n return Boolean(value) || typeof value === 'boolean' || typeof value === 'number' || typeof value === 'string'\n}\n"],"names":["useConfigPriority","minor","major","useMemo","minorConfig","majorConfig","Set","Object","keys","reduce","prioritized","key","finalVal","valid","value","Boolean"],"mappings":"oFAEO,SAASA,EAAoCC,EAAoBC,GACtE,OAAOC,GAAQ,KACb,IAAMC,EAAcH,MAAAA,EAAAA,EAAS,GAC7B,IAAMI,EAAcH,MAAAA,EAAAA,EAAS,GAG7B,MAFmB,IAAI,IAAII,IAAI,IAAIC,OAAOC,KAAKJ,MAAiBG,OAAOC,KAAKH,MAE1DI,SAAQC,EAAaC,KACrC,IAAIC,EAKJ,OAHIC,EAAMT,EAAYO,MAAOC,EAAWR,EAAYO,IAChDE,EAAMR,EAAYM,MAAOC,EAAWP,EAAYM,IAE7CE,EAAMD,UAAiBF,GAAvB,GAAA,CAAoCC,CAACA,GAAMC,IAAaF,IAC9D,MACF,CAACT,EAAOC,IAGb,SAASW,EAAMC,GACb,OAAOC,QAAQD,IAA2B,kBAAVA,GAAwC,iBAAVA,GAAuC,iBAAVA"}
|