@foxford/ui 2.4.3-beta-8adbea4-20230613 → 2.4.3-beta-7227108-20230620
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 +42 -91
- 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,{css as i}from'styled-components';import{display as t}from'../../mixins/display.js';import{color as
|
|
1
|
+
import e,{css as i}from'styled-components';import{display as t}from'../../mixins/display.js';import{color as n}from'../../mixins/color.js';import{property as o,responsiveNamedProperty as l}from'../../mixins/responsive-property.js';var s={lighter:100,normal:400,bold:600,bolder:800};var r={l:1.5,m:1.3,s:1.15,xs:1};var a=i(["a{text-decoration:underline;&:hover{text-decoration:none;}}"]);var g=e.div.withConfig({shouldForwardProp:e=>['children','className','style','title','dangerouslySetInnerHTML'].includes(e)}).withConfig({componentId:"fox-ui__sc-s2fogy-0"})(["line-height:inherit;margin:initial;"," "," "," "," "," "," a{text-decoration:none;&:hover{text-decoration:none;}}"," "," "," ",""],(e=>e.display?t(e.display):null),(e=>n(e.color?e.color:e.theme.textColor)),(e=>e.lineHeight?i(["line-height:",";"],'string'==typeof e.lineHeight&&r[e.lineHeight]?r[e.lineHeight]:e.lineHeight):null),(e=>e.fontStyle?i(["font-style:",";"],e.fontStyle):null),(e=>e.fontFamily?i(["font-family:",";"],e.fontFamily):null),(e=>e.weight?i(["font-weight:",";"],'string'==typeof e.lineHeight&&s[e.weight]?s[e.weight]:e.weight):null),(e=>e.underlineLinks?a:null),(e=>e.textAlign?i(["text-align:",";"],e.textAlign):null),(e=>e.size?o(e.size,'font-size'):null),(e=>{var{sizeXS:i,sizeS:t,sizeM:n,sizeL:o,sizeXL:s}=e;return l({sizes:{sizeXS:i,sizeS:t,sizeM:n,sizeL:o,sizeXL:s},cssProperty:'font-size'})}));export{g 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, { css } from 'styled-components'\nimport { display } from '../../mixins/display'\nimport { color, ColorValue } from '../../mixins/color'\nimport { responsiveNamedProperty, property } from '../../mixins/responsive-property'\nimport { TextProps } from './
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\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\nconst underlineLinksStyle = css`\n a {\n text-decoration: underline;\n &:hover {\n text-decoration: none;\n }\n }\n`\n\nexport const Root = styled.div.withConfig<TextProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'style', 'title', 'dangerouslySetInnerHTML'].includes(prop),\n})`\n line-height: inherit;\n margin: initial;\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.color ? color(props.color) : color(props.theme.textColor as ColorValue))}\n ${(props) =>\n props.lineHeight\n ? css`\n line-height: ${typeof props.lineHeight === 'string' && LINE_HEIGHT_MAP[props.lineHeight]\n ? LINE_HEIGHT_MAP[props.lineHeight]\n : props.lineHeight};\n `\n : null}\n ${(props) =>\n props.fontStyle\n ? css`\n font-style: ${props.fontStyle};\n `\n : null}\n ${(props) =>\n props.fontFamily\n ? css`\n font-family: ${props.fontFamily};\n `\n : null}\n ${(props) =>\n props.weight\n ? css`\n font-weight: ${typeof props.lineHeight === 'string' && WEIGHT_MAP[props.weight]\n ? WEIGHT_MAP[props.weight]\n : props.weight};\n `\n : null}\n\n a {\n text-decoration: none;\n &:hover {\n text-decoration: none;\n }\n }\n\n ${(props) => (props.underlineLinks ? underlineLinksStyle : null)}\n ${(props) =>\n props.textAlign\n ? css`\n text-align: ${props.textAlign};\n `\n : null}\n\n ${(props) => (props.size ? property(props.size, 'font-size') : null)}\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","underlineLinksStyle","css","Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","display","color","theme","textColor","lineHeight","fontStyle","fontFamily","weight","underlineLinks","textAlign","size","property","_ref","sizeXS","sizeS","sizeM","sizeL","sizeXL","responsiveNamedProperty","sizes","cssProperty"],"mappings":"uOAMA,IAAMA,EAAa,CACjBC,QAAS,IACTC,OAAQ,IACRC,KAAM,IACNC,OAAQ,KAGV,IAAMC,EAA+E,CACnFC,EAAG,IACHC,EAAG,IACHC,EAAG,KACHC,GAAI,GAGN,IAAMC,EAAsBC,EAA5B,CAAA,gEASO,IAAMC,EAAOC,EAAOC,IAAIC,WAAsB,CACnDC,kBAAoBC,GAAS,CAAC,WAAY,YAAa,QAAS,QAAS,2BAA2BC,SAASD,KAD9FF,WAAA,CAAAI,YAAA,uBAAGN,CAAH,CAAA,sCAAA,IAAA,IAAA,IAAA,IAAA,IAAA,0DAAA,IAAA,IAAA,IAAA,KAKZO,GAAWA,EAAMC,QAAUA,EAAQD,EAAMC,SAAW,OACpDD,GAAyBE,EAAdF,EAAME,MAAcF,EAAME,MAAeF,EAAMG,MAAMC,aAChEJ,GACDA,EAAMK,WACFd,uBAC6C,iBAArBS,EAAMK,YAA2BpB,EAAgBe,EAAMK,YACzEpB,EAAgBe,EAAMK,YACtBL,EAAMK,YAEZ,OACHL,GACDA,EAAMM,UACFf,EACgBS,CAAAA,cAAAA,KAAAA,EAAMM,WAEtB,OACHN,GACDA,EAAMO,WACFhB,EACiBS,CAAAA,eAAAA,KAAAA,EAAMO,YAEvB,OACHP,GACDA,EAAMQ,OACFjB,EACiB,CAAA,eAAA,KAA4B,iBAArBS,EAAMK,YAA2BzB,EAAWoB,EAAMQ,QACpE5B,EAAWoB,EAAMQ,QACjBR,EAAMQ,QAEZ,OASHR,GAAWA,EAAMS,eAAiBnB,EAAsB,OACxDU,GACDA,EAAMU,UACFnB,EACgBS,CAAAA,cAAAA,KAAAA,EAAMU,WAEtB,OAEHV,GAAWA,EAAMW,KAAOC,EAASZ,EAAMW,KAAM,aAAe,OAC7DE,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"],h=["fontFamily"];var m={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 l='Text.Heading';var n=l=>{var n;var{h:g="h1"}=l,p=i(l,a);var d=t();var b=o(null===(n=d.components)||void 0===n?void 0:n["Text.Heading"],p),{fontFamily:f=""}=b,u=i(b,h);return s(r,e(e({as:g,fontFamily:f},m[g]),u))};n.displayName="Text.Heading";export{l as COMPONENT_NAME,n 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<keyof typeof 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 * Text.Heading component\n * @visibleName Text.Heading\n */\nconst TextHeading = ({ h = 'h1', ...props }: TextHeadingProps) => {\n const theme = useFallbackTheme()\n\n const { fontFamily = '', ...configProps } = useConfigPriority<TextHeadingProps>(\n theme.components?.[COMPONENT_NAME],\n props\n )\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","_ref","_theme$components","h","props","_objectWithoutProperties","_excluded","theme","useFallbackTheme","useConfigPriority","components","fontFamily","_useConfigPriority","configProps","_excluded2","_jsx","Text","_objectSpread","as","displayName"],"mappings":"iWAKA,IAAMA,EAA4D,CAChEC,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,eAMjBC,IAAAA,EAAcC,IAA8C,IAAAC,EAAA,IAA7CC,EAAEA,EAAI,MAAuCF,EAA9BG,EAA8BC,EAAAJ,EAAAK,GAChE,IAAMC,EAAQC,IAEd,IAA4CC,EAAAA,EAC1C,QAAAF,EAAAA,EAAMG,kBAAAA,IAANR,OAAAA,EAAAA,EAVmB,gBAWnBE,IAFIO,WAAEA,EAAa,IAArBC,EAA4BC,EAA5BR,EAAAO,EAAAE,GAOA,OAAOC,EAACC,EAADC,EAAAA,EAAA,CAAMC,GAAIf,EAAGQ,WAAYA,GAFPrB,EAAOa,IAEsCU,KAGxEb,EAAYmB,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
|
|
1
|
+
import r,{css as e}from'styled-components';import{property as o,responsiveNamedProperty as t}from'../../mixins/responsive-property.js';import{chooseWidthValue as d}from'../Input/helpers.js';import{baseInputStyle as a}from'../Input/style.js';var i=e(["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;}"," "," "," ",""],(r=>{var{theme:e}=r;return e.colors['bg-onmain-secondary']}),(r=>{var{theme:e}=r;return e.colors['border-onmain-default-large']}),(r=>{var{theme:e}=r;return e.colors['content-onmain-primary']}),(r=>{var{theme:e}=r;return e.colors['content-onmain-secondary']}),(r=>{var{theme:e}=r;return e.colors['border-brand-primary']}),(r=>{var{theme:e}=r;return e.colors['border-brand-primary']}),(r=>{var{theme:e}=r;return e.colors['bg-disabled-large']}),(r=>{var{theme:e}=r;return e.colors['border-disabled']}),(r=>{var{theme:e}=r;return e.colors['content-disabled']}),(r=>r.width?o(d(r.width),r.fluid&&'auto'!==r.width?'max-width':'width'):null),(r=>t({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:d})),(r=>{var{fluid:o}=r;return o&&e(["width:100%;"])}),(r=>{var{error:o}=r;return o&&e(["background-color:",";border:1px solid ",";"],(r=>{var{theme:e}=r;return e.colors['alert-bg-error-100']}),(r=>{var{theme:e}=r;return e.colors['alert-bg-error-500']}))}));var n=e(["resize:none;line-height:23px;padding:16px 20px 11px;",""],a);var s=r.textarea.withConfig({shouldForwardProp:r=>!['color','placeholderColor','rounded','fluid','error','brandPresetUsed'].includes(r)&&!r.includes('width')}).withConfig({componentId:"fox-ui__sc-a4hfy5-0"})(["",""],(r=>{var{brandPresetUsed:e}=r;return e?i:n}));export{s 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 { 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/* TODO: combine following styles durnig Input component rebranding and remove it from here */\nconst brandTextareaStyle = css<TextareaRootProps>`\n display: block;\n box-sizing: border-box;\n appearance: none;\n width: auto;\n resize: vertical;\n\n background: ${({ theme }) => theme.colors['bg-onmain-secondary']};\n border: 1px solid ${({ theme }) => 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 }) => theme.colors['content-onmain-primary']};\n\n &::placeholder {\n color: ${({ theme }) => theme.colors['content-onmain-secondary']};\n }\n\n &:focus {\n border: 1px solid ${({ theme }) => theme.colors['border-brand-primary']};\n caret-color: ${({ theme }) => theme.colors['border-brand-primary']};\n outline: none;\n }\n\n &:disabled {\n background-color: ${({ theme }) => theme.colors['bg-disabled-large']};\n border-color: ${({ theme }) => theme.colors['border-disabled']};\n color: ${({ theme }) => theme.colors['content-disabled']};\n cursor: not-allowed;\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 }) =>\n fluid &&\n css`\n width: 100%;\n `}\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.withConfig<TextareaRootProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error', 'brandPresetUsed'].includes(prop) &&\n !prop.includes('width'),\n})`\n ${({ brandPresetUsed }) => (brandPresetUsed ? brandTextareaStyle : baseTextareaStyle)}\n`\n"],"names":["brandTextareaStyle","css","_ref","theme","colors","_ref2","_ref3","_ref4","_ref5","_ref6","_ref7","_ref8","_ref9","props","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","_ref10","_ref11","error","_ref12","_ref13","baseTextareaStyle","baseInputStyle","Root","styled","textarea","withConfig","shouldForwardProp","prop","includes","componentId","_ref14","brandPresetUsed"],"mappings":"iPAOA,IAAMA,EAAqBC,EAOX,CAAA,6FAAA,qBAAA,iHAAA,yBAAA,8BAAA,gBAAA,8CAAA,iBAAA,UAAA,wBAAA,IAAA,IAAA,IAAA,KAAAC,IAAA,IAACC,MAAEA,GAAHD,EAAA,OAAeC,EAAMC,OAAO,0BACtBC,IAAA,IAACF,MAAEA,GAAHE,EAAA,OAAeF,EAAMC,OAAO,kCAQvCE,IAAA,IAACH,MAAEA,GAAHG,EAAA,OAAeH,EAAMC,OAAO,6BAG1BG,IAAA,IAACJ,MAAEA,GAAHI,EAAA,OAAeJ,EAAMC,OAAO,+BAIjBI,IAAA,IAACL,MAAEA,GAAHK,EAAA,OAAeL,EAAMC,OAAO,2BACjCK,IAAA,IAACN,MAAEA,GAAHM,EAAA,OAAeN,EAAMC,OAAO,2BAKvBM,IAAA,IAACP,MAAEA,GAAHO,EAAA,OAAeP,EAAMC,OAAO,wBAChCO,IAAA,IAACR,MAAEA,GAAHQ,EAAA,OAAeR,EAAMC,OAAO,sBACnCQ,IAAA,IAACT,MAAEA,GAAHS,EAAA,OAAeT,EAAMC,OAAO,uBAIpCS,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,OACAV,GACAhB,EAFA,CAAA,mBAMA2B,IAAA,IAACC,MAAEA,GAAHD,EAAA,OACAC,GACA5B,EACsB,CAAA,oBAAA,qBAAA,MAAA6B,IAAA,IAAC3B,MAAEA,GAAH2B,EAAA,OAAe3B,EAAMC,OAAO,yBAC5B2B,IAAA,IAAC5B,MAAEA,GAAH4B,EAAA,OAAe5B,EAAMC,OAAO,4BAItD,IAAM4B,EAAoB/B,EAAH,CAAA,uDAAA,IAInBgC,GAGG,IAAMC,EAAOC,EAAOC,SAASC,WAA8B,CAChEC,kBAAoBC,IACjB,CAAC,QAAS,mBAAoB,UAAW,QAAS,QAAS,mBAAmBC,SAASD,KACvFA,EAAKC,SAAS,WAHFH,WAAA,CAAAI,YAAA,uBAAGN,CAKhB,CAAA,GAAA,KAAAO,IAAA,IAACC,gBAAEA,GAAHD,EAAA,OAA0BC,EAAkB3C,EAAqBgC"}
|
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';
|
|
@@ -888,16 +888,11 @@ declare enum H {
|
|
|
888
888
|
h4 = 3
|
|
889
889
|
}
|
|
890
890
|
interface TextHeadingProps extends Omit<TextProps, 'content' | 'as'> {
|
|
891
|
+
/** Default set of size, lineHeight and weight props */
|
|
891
892
|
h?: keyof typeof H;
|
|
892
|
-
/**
|
|
893
|
-
* Children react node
|
|
894
|
-
*/
|
|
893
|
+
/** Children react node */
|
|
895
894
|
children?: React.ReactNode;
|
|
896
895
|
}
|
|
897
|
-
declare function TextHeading({ h, ...props }: TextHeadingProps): JSX.Element;
|
|
898
|
-
declare namespace TextHeading {
|
|
899
|
-
var displayName: string;
|
|
900
|
-
}
|
|
901
896
|
|
|
902
897
|
interface TextEllipseProps extends Omit<TextProps, 'content'> {
|
|
903
898
|
/** Toggle text for folded state */
|
|
@@ -936,60 +931,42 @@ declare class TextEllipse extends Component<TextEllipseProps, TextEllipseState>
|
|
|
936
931
|
render(): JSX.Element;
|
|
937
932
|
}
|
|
938
933
|
|
|
939
|
-
interface TextProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {
|
|
940
|
-
/**
|
|
941
|
-
* An element type to render as (string).
|
|
942
|
-
*/
|
|
934
|
+
interface TextProps extends BaseProps$1, Color$1, ResponsiveNamedProperty$1<'size'>, Display$1 {
|
|
935
|
+
/** An element type to render as (string) */
|
|
943
936
|
as?: 'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'p';
|
|
944
|
-
/**
|
|
945
|
-
* Primary content
|
|
946
|
-
*/
|
|
937
|
+
/** Primary content */
|
|
947
938
|
content?: string;
|
|
948
|
-
/**
|
|
949
|
-
|
|
950
|
-
*/
|
|
951
|
-
/**
|
|
952
|
-
* Children react node
|
|
953
|
-
*/
|
|
939
|
+
/** Primary content */
|
|
940
|
+
/** Children react node */
|
|
954
941
|
children?: React.ReactNode;
|
|
955
|
-
/**
|
|
956
|
-
* Text font weight
|
|
957
|
-
*/
|
|
942
|
+
/** Text font weight */
|
|
958
943
|
weight?: 'lighter' | 'normal' | 'bold' | 'bolder' | number;
|
|
959
|
-
/**
|
|
960
|
-
* Text font style
|
|
961
|
-
*/
|
|
944
|
+
/** Text font style */
|
|
962
945
|
fontStyle?: 'normal' | 'italic';
|
|
963
|
-
/**
|
|
964
|
-
|
|
965
|
-
|
|
946
|
+
/** Text font family */
|
|
947
|
+
fontFamily?: string;
|
|
948
|
+
/** Add underline to inline links */
|
|
966
949
|
underlineLinks?: boolean;
|
|
967
|
-
/**
|
|
968
|
-
* Text align
|
|
969
|
-
*/
|
|
950
|
+
/** Text align */
|
|
970
951
|
textAlign?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end';
|
|
971
|
-
/**
|
|
972
|
-
* Line height
|
|
973
|
-
*/
|
|
952
|
+
/** Line height */
|
|
974
953
|
lineHeight?: 'l' | 'm' | 's' | 'xs' | number;
|
|
975
|
-
/**
|
|
976
|
-
* Element title
|
|
977
|
-
*/
|
|
954
|
+
/** Element title */
|
|
978
955
|
title?: string;
|
|
979
956
|
}
|
|
957
|
+
|
|
980
958
|
/**
|
|
981
|
-
*
|
|
982
|
-
* - [`BaseProps`](#/Миксины)
|
|
983
|
-
* - [`Color`](#/Миксины)
|
|
984
|
-
* - [`Display`](#/Миксины)
|
|
985
|
-
* - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
|
|
959
|
+
* Text component
|
|
986
960
|
*/
|
|
987
|
-
declare
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
}
|
|
961
|
+
declare const Text: {
|
|
962
|
+
(props: TextProps): JSX.Element;
|
|
963
|
+
Heading: {
|
|
964
|
+
({ h, ...props }: TextHeadingProps): JSX.Element;
|
|
965
|
+
displayName: string;
|
|
966
|
+
};
|
|
967
|
+
Ellipse: typeof TextEllipse;
|
|
968
|
+
displayName: string;
|
|
969
|
+
};
|
|
993
970
|
|
|
994
971
|
interface BadgeProps extends BaseProps, Color, Display {
|
|
995
972
|
/**
|
|
@@ -2143,56 +2120,30 @@ declare class ContextMenu extends PureComponent<ContextMenuProps, {
|
|
|
2143
2120
|
}
|
|
2144
2121
|
|
|
2145
2122
|
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
|
-
*/
|
|
2123
|
+
interface TextareaProps extends BaseProps$1, InputField$1, TextAreaHTMLAttributes {
|
|
2124
|
+
/** Specifies the visible width of a text area */
|
|
2150
2125
|
cols?: number;
|
|
2151
|
-
/**
|
|
2152
|
-
* Specifies the visible number of lines in a text area
|
|
2153
|
-
*/
|
|
2126
|
+
/** Specifies the visible number of lines in a text area */
|
|
2154
2127
|
rows?: number;
|
|
2155
|
-
/**
|
|
2156
|
-
* Specifies the visible max number of lines in a text area
|
|
2157
|
-
*/
|
|
2128
|
+
/** Specifies the visible max number of lines in a text area */
|
|
2158
2129
|
maxRows?: number;
|
|
2159
|
-
/**
|
|
2160
|
-
* Specifies the maximum number of characters allowed in the text area
|
|
2161
|
-
*/
|
|
2130
|
+
/** Specifies the maximum number of characters allowed in the text area */
|
|
2162
2131
|
maxLength?: number;
|
|
2163
|
-
/**
|
|
2164
|
-
* On change handler
|
|
2165
|
-
*/
|
|
2132
|
+
/** On change handler */
|
|
2166
2133
|
onChange?(_event: React.ChangeEvent<HTMLTextAreaElement>): void;
|
|
2167
|
-
/**
|
|
2168
|
-
* Value
|
|
2169
|
-
*/
|
|
2134
|
+
/** Value */
|
|
2170
2135
|
value?: string;
|
|
2171
|
-
/**
|
|
2172
|
-
* Autosize for textarea
|
|
2173
|
-
*/
|
|
2136
|
+
/** Autosize for textarea */
|
|
2174
2137
|
autosize?: boolean;
|
|
2175
2138
|
}
|
|
2139
|
+
|
|
2176
2140
|
/**
|
|
2177
|
-
*
|
|
2178
|
-
* - [`BaseProps`](#/Миксины)
|
|
2179
|
-
* - [`InputField`](#/Миксины)
|
|
2180
|
-
* - `React.TextareaHTMLAttributes<HTMLTextAreaElement>`
|
|
2141
|
+
* Textarea component
|
|
2181
2142
|
*/
|
|
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
|
-
}
|
|
2143
|
+
declare const Textarea: {
|
|
2144
|
+
(props: TextareaProps): JSX.Element;
|
|
2145
|
+
displayName: string;
|
|
2146
|
+
};
|
|
2196
2147
|
|
|
2197
2148
|
interface InputPhoneProps extends InputProps {
|
|
2198
2149
|
/**
|
|
@@ -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"}
|