@foxford/ui 2.57.0 → 2.57.1-beta-a74b35e-20241220
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/Anchor/Anchor.js +1 -1
- package/components/Anchor/Anchor.js.map +1 -1
- package/components/Anchor/Anchor.mjs +1 -1
- package/components/Anchor/Anchor.mjs.map +1 -1
- package/components/Anchor/style.js +1 -1
- package/components/Anchor/style.js.map +1 -1
- package/components/Anchor/style.mjs +1 -1
- package/components/Anchor/style.mjs.map +1 -1
- package/components/Text/Ellipsis.js +1 -1
- package/components/Text/Ellipsis.js.map +1 -1
- package/components/Text/Ellipsis.mjs +1 -1
- package/components/Text/Ellipsis.mjs.map +1 -1
- package/components/Text/Text.js +1 -1
- package/components/Text/Text.js.map +1 -1
- package/components/Text/Text.mjs +1 -1
- package/components/Text/Text.mjs.map +1 -1
- package/components/Text/style.js +1 -1
- package/components/Text/style.js.map +1 -1
- package/components/Text/style.mjs +1 -1
- package/components/Text/style.mjs.map +1 -1
- package/dts/index.d.ts +2 -0
- package/package.json +6 -4
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');var reactRouterDom=require('react-router-dom');var styled=require('styled-components');var withMergedProps=require('../../hocs/withMergedProps.js');var useClassname=require('../../hooks/useClassname.js');var constants=require('./constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');const Anchor=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:s="inherit",autoRel:
|
|
1
|
+
'use strict';var React=require('react');var reactRouterDom=require('react-router-dom');var styled=require('styled-components');var withMergedProps=require('../../hocs/withMergedProps.js');var useClassname=require('../../hooks/useClassname.js');var constants=require('./constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var Text=require('../Text/Text.js');const Anchor=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:s="inherit",autoRel:t=!0,textProps:o={},iconProps:n={},icon:i,children:a,content:c,...u}=e;const d=styled.useTheme();const l=useClassname.useClassname("Anchor",u.className);const p=d.utils?.relBuilder;const h=u.href??u.to;const m=u.rel??(t&&p&&typeof h=='string'?p(h,u.target):void 0);const[q,v]=Array.isArray(i)?i:[i];const $={as:'span',size:'inherit',color:'inherit',underline:u.underline,marginLeft:q?'0.20em':void 0,marginRight:v?'0.20em':void 0};const x={as:'span',color:'inherit'};let g;return u.to&&(g=reactRouterDom.Link),u.pseudo&&(g='div'),u.disabled&&(g='span'),u.as&&(g=u.as),require$$0.jsx(style.Root,{...u,ref:r,as:g,className:l,size:s,rel:m,"data-disabled":u.disabled,children:typeof a=='function'?a({baseTextProps:$,textProps:o,iconBaseProps:x,iconProps:n,icon:i}):e.preset==='brand'?require$$0.jsxs(require$$0.Fragment,{children:[q&&require$$0.jsx(Icon.Icon,{name:typeof q=='string'?q:void 0,icon:typeof q!='string'?q:void 0,...x,...n}),require$$0.jsx(Text.Text,{...$,...o,children:a||c}),v&&require$$0.jsx(Icon.Icon,{name:typeof v=='string'?v:void 0,icon:typeof v!='string'?v:void 0,...x,...n})]}):require$$0.jsx(require$$0.Fragment,{children:a||c})})})),{displayName:"Anchor",sizes:constants.SIZES});exports.Anchor=Anchor,exports.COMPONENT_NAME="Anchor";
|
|
2
2
|
//# sourceMappingURL=Anchor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Anchor.js","sources":["../../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Link } from 'react-router-dom'\nimport { useTheme } from 'styled-components'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useClassname } from 'hooks/useClassname'\nimport { Icon } from 'components/Icon'\nimport type { TextProps } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { AnchorProps } from './types'\n\nconst COMPONENT_NAME = 'Anchor'\n\n/**\n *\n * Component accepts all \\<a\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [AnchorProps](https://github.com/foxford/ui/blob/master/src/components/Anchor/types.ts)\n */\nconst Anchor: React.ForwardRefExoticComponent<AnchorProps> = withMergedProps<AnchorProps, HTMLAnchorElement>(\n forwardRef((props, ref) => {\n const {\n size = 'inherit',\n autoRel = true,\n textProps = {},\n iconProps = {},\n icon,\n children,\n content,\n
|
|
1
|
+
{"version":3,"file":"Anchor.js","sources":["../../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Link } from 'react-router-dom'\nimport { useTheme } from 'styled-components'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useClassname } from 'hooks/useClassname'\nimport { Icon } from 'components/Icon'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { AnchorProps } from './types'\n\nconst COMPONENT_NAME = 'Anchor'\n\n/**\n *\n * Component accepts all \\<a\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [AnchorProps](https://github.com/foxford/ui/blob/master/src/components/Anchor/types.ts)\n */\nconst Anchor: React.ForwardRefExoticComponent<AnchorProps> = withMergedProps<AnchorProps, HTMLAnchorElement>(\n forwardRef((props, ref) => {\n const {\n size = 'inherit',\n autoRel = true,\n textProps = {},\n iconProps = {},\n icon,\n children,\n content,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n const className = useClassname(COMPONENT_NAME, restProps.className)\n const relBuilder = theme.utils?.relBuilder\n const href = restProps.href ?? restProps.to\n\n const rel =\n restProps.rel ??\n (autoRel && relBuilder && typeof href === 'string' ? relBuilder(href, restProps.target) : undefined)\n\n const [before, after] = Array.isArray(icon) ? icon : [icon]\n\n const baseTextProps: TextProps = {\n as: 'span',\n size: 'inherit',\n color: 'inherit',\n underline: restProps.underline,\n marginLeft: before ? '0.20em' : undefined,\n marginRight: after ? '0.20em' : undefined,\n }\n\n const iconBaseProps: IconProps = { as: 'span', color: 'inherit' }\n\n let rootNode\n if (restProps.to) rootNode = Link\n if (restProps.pseudo) rootNode = 'div'\n if (restProps.disabled) rootNode = 'span'\n if (restProps.as) rootNode = restProps.as\n\n return (\n <Styled.Root\n {...restProps}\n ref={ref}\n as={rootNode}\n className={className}\n size={size}\n rel={rel}\n data-disabled={restProps.disabled}\n >\n {typeof children === 'function' ? (\n children({ baseTextProps, textProps, iconBaseProps, iconProps, icon })\n ) : props.preset === 'brand' ? (\n <>\n {before && (\n <Icon\n name={typeof before === 'string' ? before : undefined}\n icon={typeof before !== 'string' ? before : undefined}\n {...iconBaseProps}\n {...iconProps}\n />\n )}\n <Text {...baseTextProps} {...textProps}>\n {children || content}\n </Text>\n {after && (\n <Icon\n name={typeof after === 'string' ? after : undefined}\n icon={typeof after !== 'string' ? after : undefined}\n {...iconBaseProps}\n {...iconProps}\n />\n )}\n </>\n ) : (\n <>{children || content}</>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { Anchor, COMPONENT_NAME }\n"],"names":["Anchor","withMergedProps","forwardRef","props","ref","size","autoRel","textProps","iconProps","icon","children","content","restProps","theme","useTheme","className","useClassname","relBuilder","utils","href","to","rel","target","undefined","before","after","Array","isArray","baseTextProps","as","color","underline","marginLeft","marginRight","iconBaseProps","rootNode","Link","pseudo","disabled","_jsx","Styled","preset","_jsxs","_Fragment","jsx","Icon","name","Text","displayName","sizes","SIZES"],"mappings":"gbAyBMA,MAAAA,OAAuDC,gBAAAA,gBAC3DC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,UAASC,QAChBA,GAAU,EAAIC,UACdA,EAAY,CAAE,EAAAC,UACdA,EAAY,CAAE,EAAAC,KACdA,EAAIC,SACJA,EAAQC,QACRA,KACGC,GACDT,EAEJ,MAAMU,EAAQC,OAAAA,WAEd,MAAMC,EAAYC,aAAYA,aA3BX,SA2B4BJ,EAAUG,WACzD,MAAME,EAAaJ,EAAMK,OAAOD,WAChC,MAAME,EAAOP,EAAUO,MAAQP,EAAUQ,GAEzC,MAAMC,EACJT,EAAUS,MACTf,GAAWW,UAAqBE,GAAS,SAAWF,EAAWE,EAAMP,EAAUU,aAAUC,GAE5F,MAAOC,EAAQC,GAASC,MAAMC,QAAQlB,GAAQA,EAAO,CAACA,GAEtD,MAAMmB,EAA2B,CAC/BC,GAAI,OACJxB,KAAM,UACNyB,MAAO,UACPC,UAAWnB,EAAUmB,UACrBC,WAAYR,EAAS,cAAWD,EAChCU,YAAaR,EAAQ,cAAWF,GAGlC,MAAMW,EAA2B,CAAEL,GAAI,OAAQC,MAAO,WAEtD,IAAIK,EAMJ,OALIvB,EAAUQ,KAAIe,EAAWC,qBACzBxB,EAAUyB,SAAQF,EAAW,OAC7BvB,EAAU0B,WAAUH,EAAW,QAC/BvB,EAAUiB,KAAIM,EAAWvB,EAAUiB,IAGrCU,WAAAA,IAACC,MAAAA,KAAW,IACN5B,EACJR,IAAKA,EACLyB,GAAIM,EACJpB,UAAWA,EACXV,KAAMA,EACNgB,IAAKA,EACL,gBAAeT,EAAU0B,SAAS5B,gBAE1BA,GAAa,WACnBA,EAAS,CAAEkB,gBAAerB,YAAW2B,gBAAe1B,YAAWC,SAC7DN,EAAMsC,SAAW,QACnBC,WAAAA,KAAAC,WAAAA,SAAA,CAAAjC,SACGc,CAAAA,GACCe,WAAAK,IAACC,UAAI,CACHC,YAAatB,GAAW,SAAWA,OAASD,EAC5Cd,YAAae,GAAW,SAAWA,OAASD,KACxCW,KACA1B,IAGR+B,WAAAK,IAACG,UAAI,IAAKnB,KAAmBrB,EAASG,SACnCA,GAAYC,IAEdc,GACCc,WAAAK,IAACC,UAAI,CACHC,YAAarB,GAAU,SAAWA,OAAQF,EAC1Cd,YAAagB,GAAU,SAAWA,OAAQF,KACtCW,KACA1B,OAKV+B,WAAAK,IAAAD,oBAAA,CAAAjC,SAAGA,GAAYC,KAEL,IAGlB,CACEqC,YA/FmB,SAgGnBC,MAAOC,UAAAA,qDAhGY"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{forwardRef}from'react';import{Link}from'react-router-dom';import{useTheme}from'styled-components';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useClassname}from'../../hooks/useClassname.mjs';import{SIZES}from'./constants.mjs';import{Root
|
|
1
|
+
import{forwardRef}from'react';import{Link}from'react-router-dom';import{useTheme}from'styled-components';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useClassname}from'../../hooks/useClassname.mjs';import{SIZES}from'./constants.mjs';import{Root}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';import{Text}from'../Text/Text.mjs';const COMPONENT_NAME='Anchor';const Anchor=withMergedProps(forwardRef(((o,e)=>{const{size:s="inherit",autoRel:r=!0,textProps:t={},iconProps:n={},icon:i,children:m,content:a,...c}=o;const d=useTheme();const p=useClassname("Anchor",c.className);const l=d.utils?.relBuilder;const f=c.href??c.to;const h=c.rel??(r&&l&&typeof f=='string'?l(f,c.target):void 0);const[x,g]=Array.isArray(i)?i:[i];const j={as:'span',size:'inherit',color:'inherit',underline:c.underline,marginLeft:x?'0.20em':void 0,marginRight:g?'0.20em':void 0};const u={as:'span',color:'inherit'};let y;return c.to&&(y=Link),c.pseudo&&(y='div'),c.disabled&&(y='span'),c.as&&(y=c.as),jsx(Root,{...c,ref:e,as:y,className:p,size:s,rel:h,"data-disabled":c.disabled,children:typeof m=='function'?m({baseTextProps:j,textProps:t,iconBaseProps:u,iconProps:n,icon:i}):o.preset==='brand'?jsxs(Fragment,{children:[x&&jsx(Icon,{name:typeof x=='string'?x:void 0,icon:typeof x!='string'?x:void 0,...u,...n}),jsx(Text,{...j,...t,children:m||a}),g&&jsx(Icon,{name:typeof g=='string'?g:void 0,icon:typeof g!='string'?g:void 0,...u,...n})]}):jsx(Fragment,{children:m||a})})})),{displayName:"Anchor",sizes:SIZES});export{Anchor,COMPONENT_NAME};
|
|
2
2
|
//# sourceMappingURL=Anchor.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Anchor.mjs","sources":["../../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Link } from 'react-router-dom'\nimport { useTheme } from 'styled-components'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useClassname } from 'hooks/useClassname'\nimport { Icon } from 'components/Icon'\nimport type { TextProps } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { AnchorProps } from './types'\n\nconst COMPONENT_NAME = 'Anchor'\n\n/**\n *\n * Component accepts all \\<a\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [AnchorProps](https://github.com/foxford/ui/blob/master/src/components/Anchor/types.ts)\n */\nconst Anchor: React.ForwardRefExoticComponent<AnchorProps> = withMergedProps<AnchorProps, HTMLAnchorElement>(\n forwardRef((props, ref) => {\n const {\n size = 'inherit',\n autoRel = true,\n textProps = {},\n iconProps = {},\n icon,\n children,\n content,\n
|
|
1
|
+
{"version":3,"file":"Anchor.mjs","sources":["../../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Link } from 'react-router-dom'\nimport { useTheme } from 'styled-components'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useClassname } from 'hooks/useClassname'\nimport { Icon } from 'components/Icon'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { AnchorProps } from './types'\n\nconst COMPONENT_NAME = 'Anchor'\n\n/**\n *\n * Component accepts all \\<a\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [AnchorProps](https://github.com/foxford/ui/blob/master/src/components/Anchor/types.ts)\n */\nconst Anchor: React.ForwardRefExoticComponent<AnchorProps> = withMergedProps<AnchorProps, HTMLAnchorElement>(\n forwardRef((props, ref) => {\n const {\n size = 'inherit',\n autoRel = true,\n textProps = {},\n iconProps = {},\n icon,\n children,\n content,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n const className = useClassname(COMPONENT_NAME, restProps.className)\n const relBuilder = theme.utils?.relBuilder\n const href = restProps.href ?? restProps.to\n\n const rel =\n restProps.rel ??\n (autoRel && relBuilder && typeof href === 'string' ? relBuilder(href, restProps.target) : undefined)\n\n const [before, after] = Array.isArray(icon) ? icon : [icon]\n\n const baseTextProps: TextProps = {\n as: 'span',\n size: 'inherit',\n color: 'inherit',\n underline: restProps.underline,\n marginLeft: before ? '0.20em' : undefined,\n marginRight: after ? '0.20em' : undefined,\n }\n\n const iconBaseProps: IconProps = { as: 'span', color: 'inherit' }\n\n let rootNode\n if (restProps.to) rootNode = Link\n if (restProps.pseudo) rootNode = 'div'\n if (restProps.disabled) rootNode = 'span'\n if (restProps.as) rootNode = restProps.as\n\n return (\n <Styled.Root\n {...restProps}\n ref={ref}\n as={rootNode}\n className={className}\n size={size}\n rel={rel}\n data-disabled={restProps.disabled}\n >\n {typeof children === 'function' ? (\n children({ baseTextProps, textProps, iconBaseProps, iconProps, icon })\n ) : props.preset === 'brand' ? (\n <>\n {before && (\n <Icon\n name={typeof before === 'string' ? before : undefined}\n icon={typeof before !== 'string' ? before : undefined}\n {...iconBaseProps}\n {...iconProps}\n />\n )}\n <Text {...baseTextProps} {...textProps}>\n {children || content}\n </Text>\n {after && (\n <Icon\n name={typeof after === 'string' ? after : undefined}\n icon={typeof after !== 'string' ? after : undefined}\n {...iconBaseProps}\n {...iconProps}\n />\n )}\n </>\n ) : (\n <>{children || content}</>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { Anchor, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Anchor","withMergedProps","forwardRef","props","ref","size","autoRel","textProps","iconProps","icon","children","content","restProps","theme","useTheme","className","useClassname","relBuilder","utils","href","to","rel","target","undefined","before","after","Array","isArray","baseTextProps","as","color","underline","marginLeft","marginRight","iconBaseProps","rootNode","Link","pseudo","disabled","_jsx","Styled","preset","_jsxs","_Fragment","Icon","name","Text","displayName","sizes","SIZES"],"mappings":"oZAaMA,MAAAA,eAAiB,SAYjBC,MAAAA,OAAuDC,gBAC3DC,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,UAASC,QAChBA,GAAU,EAAIC,UACdA,EAAY,CAAE,EAAAC,UACdA,EAAY,CAAE,EAAAC,KACdA,EAAIC,SACJA,EAAQC,QACRA,KACGC,GACDT,EAEJ,MAAMU,EAAQC,WAEd,MAAMC,EAAYC,aA3BC,SA2B4BJ,EAAUG,WACzD,MAAME,EAAaJ,EAAMK,OAAOD,WAChC,MAAME,EAAOP,EAAUO,MAAQP,EAAUQ,GAEzC,MAAMC,EACJT,EAAUS,MACTf,GAAWW,UAAqBE,GAAS,SAAWF,EAAWE,EAAMP,EAAUU,aAAUC,GAE5F,MAAOC,EAAQC,GAASC,MAAMC,QAAQlB,GAAQA,EAAO,CAACA,GAEtD,MAAMmB,EAA2B,CAC/BC,GAAI,OACJxB,KAAM,UACNyB,MAAO,UACPC,UAAWnB,EAAUmB,UACrBC,WAAYR,EAAS,cAAWD,EAChCU,YAAaR,EAAQ,cAAWF,GAGlC,MAAMW,EAA2B,CAAEL,GAAI,OAAQC,MAAO,WAEtD,IAAIK,EAMJ,OALIvB,EAAUQ,KAAIe,EAAWC,MACzBxB,EAAUyB,SAAQF,EAAW,OAC7BvB,EAAU0B,WAAUH,EAAW,QAC/BvB,EAAUiB,KAAIM,EAAWvB,EAAUiB,IAGrCU,IAACC,KAAW,IACN5B,EACJR,IAAKA,EACLyB,GAAIM,EACJpB,UAAWA,EACXV,KAAMA,EACNgB,IAAKA,EACL,gBAAeT,EAAU0B,SAAS5B,gBAE1BA,GAAa,WACnBA,EAAS,CAAEkB,gBAAerB,YAAW2B,gBAAe1B,YAAWC,SAC7DN,EAAMsC,SAAW,QACnBC,KAAAC,SAAA,CAAAjC,SACGc,CAAAA,GACCe,IAACK,KAAI,CACHC,YAAarB,GAAW,SAAWA,OAASD,EAC5Cd,YAAae,GAAW,SAAWA,OAASD,KACxCW,KACA1B,IAGR+B,IAACO,KAAI,IAAKlB,KAAmBrB,EAASG,SACnCA,GAAYC,IAEdc,GACCc,IAACK,KAAI,CACHC,YAAapB,GAAU,SAAWA,OAAQF,EAC1Cd,YAAagB,GAAU,SAAWA,OAAQF,KACtCW,KACA1B,OAKV+B,IAAAI,SAAA,CAAAjC,SAAGA,GAAYC,KAEL,IAGlB,CACEoC,YA/FmB,SAgGnBC,MAAOC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var styled=require('styled-components');var tinycolor=require('../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.js');var style=require('../../shared/utils/style.js');var color=require('../../mixins/color.js');var focus=require('../../mixins/focus.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var display=require('../../mixins/display.js');
|
|
1
|
+
'use strict';var styled=require('styled-components');var tinycolor=require('../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.js');var style=require('../../shared/utils/style.js');var color=require('../../mixins/color.js');var focus=require('../../mixins/focus.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var display=require('../../mixins/display.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardAnchorProp=style.createShouldForwardProp((o=>!['display','underline','onColored','verticalAlign','pseudo','wrapper'].includes(o)));const template=o=>`\n color: ${o.color};\n &:hover {\n color: ${o.colorHover};\n }\n &:active {\n color: ${o.color};\n }\n &[data-disabled="true"] {\n color: ${o.colorDisabled};\n }\n`;const COLOR_SCHEMA={default:styled.css(["",""],(o=>template({color:o.wrapper?'inherit':o.theme.colors.accent,colorHover:o.wrapper?'inherit':o.theme.colors.primary,colorDisabled:o.theme.colors['content-disabled'],...o.palette}))),primary:styled.css(["",""],(o=>template({color:o.theme.colors['content-link'],colorHover:tinycolor.default(o.theme.colors['content-link']).lighten(10).toString(),colorDisabled:o.theme.colors['content-disabled'],...o.palette}))),onColored:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],colorHover:tinycolor.default(o.theme.colors['content-oncolor-primary']).darken(10).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],...o.palette})))};const Root=styled__default.default.a.withConfig({shouldForwardProp:shouldForwardAnchorProp}).withConfig({displayName:"Anchor__Root",componentId:"ui__sc-1n89po4-0"})([""," "," "," "," "," "," ",""],(o=>`\n box-sizing: border-box;\n isolation: isolate;\n transition-property: color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n cursor: ${o.disabled?'not-allowed':'pointer'};\n vertical-align: ${o.verticalAlign?`${typeof o.verticalAlign=='string'?o.verticalAlign:'text-bottom'}`:'baseline'};\n ${o.preset==='brand'?"\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n ":`\n display: ${o.wrapper?'block':'inline-block'};\n text-decoration-line: ${o.underline===!0?'underline':'none'};\n border-bottom: ${o.pseudo||typeof o.underline=='string'?`1px ${typeof o.underline=='string'?o.underline:'dashed'}`:'none'};\n `}\n \n `),(o=>o.onColored?COLOR_SCHEMA.onColored:o.preset==='brand'?COLOR_SCHEMA.primary:COLOR_SCHEMA.default),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin,(o=>o.display&&display.display(o.display)),(o=>o.color&&`color: ${color.getColor(o.color,o)};`));exports.Root=Root;
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Anchor/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport type { ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { getColor } from 'mixins/color'\nimport { focus } from 'mixins/focus'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { display } from 'mixins/display'\nimport
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Anchor/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport type { ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { getColor } from 'mixins/color'\nimport { focus } from 'mixins/focus'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { display } from 'mixins/display'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledAnchorProps, AnchorPalette } from './types'\n\nconst shouldForwardAnchorProp = createShouldForwardProp(\n (propKey) => !['display', 'underline', 'onColored', 'verticalAlign', 'pseudo', 'wrapper'].includes(propKey)\n)\n\nconst template = (palette: AnchorPalette) => `\n color: ${palette.color};\n &:hover {\n color: ${palette.colorHover};\n }\n &:active {\n color: ${palette.color};\n }\n &[data-disabled=\"true\"] {\n color: ${palette.colorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: css<StyledAnchorProps>`\n ${(props) =>\n template({\n color: props.wrapper ? 'inherit' : props.theme.colors.accent,\n colorHover: props.wrapper ? 'inherit' : props.theme.colors.primary,\n colorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n `,\n primary: css<StyledAnchorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-link'],\n colorHover: tinycolor(props.theme.colors['content-link']).lighten(10).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n `,\n onColored: css<StyledAnchorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n colorHover: tinycolor(props.theme.colors['content-oncolor-primary']).darken(10).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n}\n\nconst anchorStyles = (props: ThemedStyledProps<StyledAnchorProps, DefaultTheme>) => {\n if (props.onColored) return COLOR_SCHEMA.onColored\n return props.preset === 'brand' ? COLOR_SCHEMA.primary : COLOR_SCHEMA.default\n}\n\nexport const Root = styled.a.withConfig<StyledAnchorProps>({\n shouldForwardProp: shouldForwardAnchorProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n transition-property: color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n vertical-align: ${\n props.verticalAlign\n ? `${typeof props.verticalAlign === 'string' ? props.verticalAlign : 'text-bottom'}`\n : 'baseline'\n };\n ${\n props.preset === 'brand'\n ? `\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n `\n : `\n display: ${props.wrapper ? 'block' : 'inline-block'};\n text-decoration-line: ${props.underline === true ? 'underline' : 'none'};\n border-bottom: ${\n props.pseudo || typeof props.underline === 'string'\n ? `1px ${typeof props.underline === 'string' ? props.underline : 'dashed'}`\n : 'none'\n };\n `\n }\n \n `}\n\n ${anchorStyles}\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n \n ${(props) => props.display && display(props.display)}\n ${(props) => props.color && `color: ${getColor(props.color, props)};`}\n`\n"],"names":["shouldForwardAnchorProp","createShouldForwardProp","propKey","includes","template","palette","color","colorHover","colorDisabled","COLOR_SCHEMA","default","css","props","wrapper","theme","colors","accent","primary","tinycolor","lighten","toString","onColored","darken","Root","styled","a","withConfig","shouldForwardProp","displayName","componentId","disabled","verticalAlign","preset","underline","pseudo","focus","responsiveSize","responsiveMargin","display","getColor"],"mappings":"4jBAYA,MAAMA,wBAA0BC,MAAAA,yBAC7BC,IAAa,CAAC,UAAW,YAAa,YAAa,gBAAiB,SAAU,WAAWC,SAASD,KAGrG,MAAME,SAAYC,GAA2B,cAClCA,EAAQC,mCAEND,EAAQE,8CAGRF,EAAQC,wDAGRD,EAAQG,wBAIrB,MAAMC,aAAe,CACnBC,QAASC,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDR,SAAS,CACPE,MAAOM,EAAMC,QAAU,UAAYD,EAAME,MAAMC,OAAOC,OACtDT,WAAYK,EAAMC,QAAU,UAAYD,EAAME,MAAMC,OAAOE,QAC3DT,cAAeI,EAAME,MAAMC,OAAO,uBAC/BH,EAAMP,YAGfY,QAASN,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDR,SAAS,CACPE,MAAOM,EAAME,MAAMC,OAAO,gBAC1BR,WAAYW,UAASR,QAACE,EAAME,MAAMC,OAAO,iBAAiBI,QAAQ,IAAIC,WACtEZ,cAAeI,EAAME,MAAMC,OAAO,uBAC/BH,EAAMP,YAGfgB,UAAWV,OAAGA,IAAA,CAAA,GAAA,KACTC,GACDR,SAAS,CACPE,MAAOM,EAAME,MAAMC,OAAO,2BAC1BR,WAAYW,UAASR,QAACE,EAAME,MAAMC,OAAO,4BAA4BO,OAAO,IAAIF,WAChFZ,cAAeI,EAAME,MAAMC,OAAO,+BAC/BH,EAAMP,aAUV,MAAMkB,KAAOC,gBAAAA,QAAOC,EAAEC,WAA8B,CACzDC,kBAAmB3B,0BACnB0B,WAAA,CAAAE,YAAA,eAAAC,YAAA,oBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KACGZ,GAAU,+LAMCA,EAAMkB,SAAW,cAAgB,qCAEzClB,EAAMmB,cACF,UAAUnB,EAAMmB,eAAkB,SAAWnB,EAAMmB,cAAgB,gBACnE,sBAGJnB,EAAMoB,SAAW,QACb,wKAMA,4BACapB,EAAMC,QAAU,QAAU,wDACbD,EAAMqB,aAAc,EAAO,YAAc,yCAE/DrB,EAAMsB,eAAiBtB,EAAMqB,WAAc,SACvC,cAAcrB,EAAMqB,WAAc,SAAWrB,EAAMqB,UAAY,WAC/D,oCAlCErB,GAChBA,EAAMS,UAAkBZ,aAAaY,UAClCT,EAAMoB,SAAW,QAAUvB,aAAaQ,QAAUR,aAAaC,SAwCpEyB,MAAKA,MACLC,8BACAC,iBAAAA,kBAECzB,GAAUA,EAAM0B,SAAWA,QAAOA,QAAC1B,EAAM0B,WACzC1B,GAAUA,EAAMN,OAAS,UAAUiC,eAAS3B,EAAMN,MAAOM"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import styled,{css}from'styled-components';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{getColor}from'../../mixins/color.mjs';import{focus}from'../../mixins/focus.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{display}from'../../mixins/display.mjs';
|
|
1
|
+
import styled,{css}from'styled-components';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{getColor}from'../../mixins/color.mjs';import{focus}from'../../mixins/focus.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{display}from'../../mixins/display.mjs';const shouldForwardAnchorProp=createShouldForwardProp((o=>!['display','underline','onColored','verticalAlign','pseudo','wrapper'].includes(o)));const template=o=>`\n color: ${o.color};\n &:hover {\n color: ${o.colorHover};\n }\n &:active {\n color: ${o.color};\n }\n &[data-disabled="true"] {\n color: ${o.colorDisabled};\n }\n`;const COLOR_SCHEMA={default:css(["",""],(o=>template({color:o.wrapper?'inherit':o.theme.colors.accent,colorHover:o.wrapper?'inherit':o.theme.colors.primary,colorDisabled:o.theme.colors['content-disabled'],...o.palette}))),primary:css(["",""],(o=>template({color:o.theme.colors['content-link'],colorHover:tinycolor(o.theme.colors['content-link']).lighten(10).toString(),colorDisabled:o.theme.colors['content-disabled'],...o.palette}))),onColored:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],colorHover:tinycolor(o.theme.colors['content-oncolor-primary']).darken(10).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],...o.palette})))};const Root=styled.a.withConfig({shouldForwardProp:shouldForwardAnchorProp}).withConfig({displayName:"Anchor__Root",componentId:"ui__sc-1n89po4-0"})([""," "," "," "," "," "," ",""],(o=>`\n box-sizing: border-box;\n isolation: isolate;\n transition-property: color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n cursor: ${o.disabled?'not-allowed':'pointer'};\n vertical-align: ${o.verticalAlign?`${typeof o.verticalAlign=='string'?o.verticalAlign:'text-bottom'}`:'baseline'};\n ${o.preset==='brand'?"\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n ":`\n display: ${o.wrapper?'block':'inline-block'};\n text-decoration-line: ${o.underline===!0?'underline':'none'};\n border-bottom: ${o.pseudo||typeof o.underline=='string'?`1px ${typeof o.underline=='string'?o.underline:'dashed'}`:'none'};\n `}\n \n `),(o=>o.onColored?COLOR_SCHEMA.onColored:o.preset==='brand'?COLOR_SCHEMA.primary:COLOR_SCHEMA.default),focus,responsiveSize,responsiveMargin,(o=>o.display&&display(o.display)),(o=>o.color&&`color: ${getColor(o.color,o)};`));export{Root};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Anchor/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport type { ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { getColor } from 'mixins/color'\nimport { focus } from 'mixins/focus'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { display } from 'mixins/display'\nimport
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Anchor/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport type { ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { getColor } from 'mixins/color'\nimport { focus } from 'mixins/focus'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { display } from 'mixins/display'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledAnchorProps, AnchorPalette } from './types'\n\nconst shouldForwardAnchorProp = createShouldForwardProp(\n (propKey) => !['display', 'underline', 'onColored', 'verticalAlign', 'pseudo', 'wrapper'].includes(propKey)\n)\n\nconst template = (palette: AnchorPalette) => `\n color: ${palette.color};\n &:hover {\n color: ${palette.colorHover};\n }\n &:active {\n color: ${palette.color};\n }\n &[data-disabled=\"true\"] {\n color: ${palette.colorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: css<StyledAnchorProps>`\n ${(props) =>\n template({\n color: props.wrapper ? 'inherit' : props.theme.colors.accent,\n colorHover: props.wrapper ? 'inherit' : props.theme.colors.primary,\n colorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n `,\n primary: css<StyledAnchorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-link'],\n colorHover: tinycolor(props.theme.colors['content-link']).lighten(10).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n `,\n onColored: css<StyledAnchorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n colorHover: tinycolor(props.theme.colors['content-oncolor-primary']).darken(10).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n}\n\nconst anchorStyles = (props: ThemedStyledProps<StyledAnchorProps, DefaultTheme>) => {\n if (props.onColored) return COLOR_SCHEMA.onColored\n return props.preset === 'brand' ? COLOR_SCHEMA.primary : COLOR_SCHEMA.default\n}\n\nexport const Root = styled.a.withConfig<StyledAnchorProps>({\n shouldForwardProp: shouldForwardAnchorProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n transition-property: color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n vertical-align: ${\n props.verticalAlign\n ? `${typeof props.verticalAlign === 'string' ? props.verticalAlign : 'text-bottom'}`\n : 'baseline'\n };\n ${\n props.preset === 'brand'\n ? `\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n `\n : `\n display: ${props.wrapper ? 'block' : 'inline-block'};\n text-decoration-line: ${props.underline === true ? 'underline' : 'none'};\n border-bottom: ${\n props.pseudo || typeof props.underline === 'string'\n ? `1px ${typeof props.underline === 'string' ? props.underline : 'dashed'}`\n : 'none'\n };\n `\n }\n \n `}\n\n ${anchorStyles}\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n \n ${(props) => props.display && display(props.display)}\n ${(props) => props.color && `color: ${getColor(props.color, props)};`}\n`\n"],"names":["shouldForwardAnchorProp","createShouldForwardProp","propKey","includes","template","palette","color","colorHover","colorDisabled","COLOR_SCHEMA","default","css","props","wrapper","theme","colors","accent","primary","tinycolor","lighten","toString","onColored","darken","Root","styled","a","withConfig","shouldForwardProp","displayName","componentId","disabled","verticalAlign","preset","underline","pseudo","focus","responsiveSize","responsiveMargin","display","getColor"],"mappings":"mdAYA,MAAMA,wBAA0BC,yBAC7BC,IAAa,CAAC,UAAW,YAAa,YAAa,gBAAiB,SAAU,WAAWC,SAASD,KAGrG,MAAME,SAAYC,GAA2B,cAClCA,EAAQC,mCAEND,EAAQE,8CAGRF,EAAQC,wDAGRD,EAAQG,wBAIrB,MAAMC,aAAe,CACnBC,QAASC,IAAG,CAAA,GAAA,KACPC,GACDR,SAAS,CACPE,MAAOM,EAAMC,QAAU,UAAYD,EAAME,MAAMC,OAAOC,OACtDT,WAAYK,EAAMC,QAAU,UAAYD,EAAME,MAAMC,OAAOE,QAC3DT,cAAeI,EAAME,MAAMC,OAAO,uBAC/BH,EAAMP,YAGfY,QAASN,IAAG,CAAA,GAAA,KACPC,GACDR,SAAS,CACPE,MAAOM,EAAME,MAAMC,OAAO,gBAC1BR,WAAYW,UAAUN,EAAME,MAAMC,OAAO,iBAAiBI,QAAQ,IAAIC,WACtEZ,cAAeI,EAAME,MAAMC,OAAO,uBAC/BH,EAAMP,YAGfgB,UAAWV,IAAG,CAAA,GAAA,KACTC,GACDR,SAAS,CACPE,MAAOM,EAAME,MAAMC,OAAO,2BAC1BR,WAAYW,UAAUN,EAAME,MAAMC,OAAO,4BAA4BO,OAAO,IAAIF,WAChFZ,cAAeI,EAAME,MAAMC,OAAO,+BAC/BH,EAAMP,aAUV,MAAMkB,KAAOC,OAAOC,EAAEC,WAA8B,CACzDC,kBAAmB3B,0BACnB0B,WAAA,CAAAE,YAAA,eAAAC,YAAA,oBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KACGZ,GAAU,+LAMCA,EAAMkB,SAAW,cAAgB,qCAEzClB,EAAMmB,cACF,UAAUnB,EAAMmB,eAAkB,SAAWnB,EAAMmB,cAAgB,gBACnE,sBAGJnB,EAAMoB,SAAW,QACb,wKAMA,4BACapB,EAAMC,QAAU,QAAU,wDACbD,EAAMqB,aAAc,EAAO,YAAc,yCAE/DrB,EAAMsB,eAAiBtB,EAAMqB,WAAc,SACvC,cAAcrB,EAAMqB,WAAc,SAAWrB,EAAMqB,UAAY,WAC/D,oCAlCErB,GAChBA,EAAMS,UAAkBZ,aAAaY,UAClCT,EAAMoB,SAAW,QAAUvB,aAAaQ,QAAUR,aAAaC,SAwCpEyB,MACAC,eACAC,kBAECzB,GAAUA,EAAM0B,SAAWA,QAAQ1B,EAAM0B,WACzC1B,GAAUA,EAAMN,OAAS,UAAUiC,SAAS3B,EAAMN,MAAOM"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');var ResizeObserver=require('../../external/.pnpm/resize-observer-polyfill@1.5.1/node_modules/resize-observer-polyfill/dist/ResizeObserver.js');var useMergedPalette=require('../../hooks/useMergedPalette.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=new ResizeObserver.default((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))}));exports.Ellipsis=e=>{const{lines:r=1,defaultExpanded:t=!1,expandable:
|
|
1
|
+
'use strict';var React=require('react');var ResizeObserver=require('../../external/.pnpm/resize-observer-polyfill@1.5.1/node_modules/resize-observer-polyfill/dist/ResizeObserver.js');var useMergedPalette=require('../../hooks/useMergedPalette.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=new ResizeObserver.default((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))}));exports.Ellipsis=e=>{const{lines:r=1,defaultExpanded:t=!1,expandable:n=!1,expandButtonProps:s={},children:i,expanded:l,underline:a,onExpandedChange:c}=e;const{captionExpanded:o="Свернуть",captionCollapsed:u="Развернуть",...d}=s;const p=React.useRef(null);const f=React.useRef(null);const h=React.useRef(-1);const b=useMergedPalette.useMergedPalette(d);const[v,g]=React.useState(null);const[x,y]=React.useState(l??t);const R=React.useCallback((e=>{cancelAnimationFrame(h.current),h.current=requestAnimationFrame((()=>{if(f.current)if(x){const t=Math.round(e.clientHeight/f.current.clientHeight);g(t>r)}else{const r=Math.round(e.scrollHeight/f.current.clientHeight);const t=Math.round(e.clientHeight/f.current.clientHeight);g(r>t)}}))}),[r,x]);return React.useLayoutEffect((()=>{const e=p.current;return n&&e&&(e[resizeHandlerSymbol]=R,resizeObserver.observe(e)),()=>{e&&resizeObserver.unobserve(e)}}),[n,R]),React.useLayoutEffect((()=>{l!==void 0&&(y(l),c&&c(l))}),[l,c]),require$$0.jsxs(require$$0.Fragment,{children:[require$$0.jsxs(style.TextEllipsis,{ref:p,lines:r,expanded:x,underline:a,children:[n&&require$$0.jsx(style.LineHeight,{ref:f,children:" "}),i]}),n&&v===!0&&require$$0.jsx(style.ExpandButton,{...d,type:"button",palette:b,onClick:e=>{if(d.onClick&&d.onClick(e),l===void 0){const e=!x;y(e),c&&c(e)}},children:x?o:u})]})};
|
|
2
2
|
//# sourceMappingURL=Ellipsis.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Ellipsis.js","sources":["../../../../src/components/Text/Ellipsis.tsx"],"sourcesContent":["import { useState, useLayoutEffect, useRef, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport type { Nullable } from 'shared/types'\nimport type { EllipsisProps, ExpandButtonProps } from './types'\nimport * as Styled from './style'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n entry.target[resizeHandlerSymbol](entry.target)\n }\n })\n})\n\nconst Ellipsis = (props: EllipsisProps) => {\n const {\n lines = 1,\n defaultExpanded = false,\n expandable = false,\n expandButtonProps = {} as ExpandButtonProps,\n children,\n expanded,\n onExpandedChange,\n } = props\n\n const { captionExpanded = 'Свернуть', captionCollapsed = 'Развернуть', ...restExpandButtonProps } = expandButtonProps\n\n const textRef = useRef<HTMLSpanElement>(null)\n const lineHeightRef = useRef<HTMLSpanElement>(null)\n const requestAnimationId = useRef<number>(-1)\n\n const expandButtonPalette = useMergedPalette(restExpandButtonProps)\n\n const [expandButtonVisible, setExpandButtonVisible] = useState<Nullable<boolean>>(null)\n const [textExpanded, setTextExpanded] = useState<boolean>(expanded ?? defaultExpanded)\n\n const handleExpandButtonVisibility = useCallback(\n (e: HTMLSpanElement) => {\n cancelAnimationFrame(requestAnimationId.current)\n requestAnimationId.current = requestAnimationFrame(() => {\n if (!lineHeightRef.current) return\n\n if (textExpanded) {\n const linesTotalCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > lines)\n } else {\n const linesTotalCount = Math.round(e.scrollHeight / lineHeightRef.current.clientHeight)\n const linesVisibleCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > linesVisibleCount)\n }\n })\n },\n [lines, textExpanded]\n )\n\n useLayoutEffect(() => {\n const observerTarget = textRef.current\n\n if (expandable && observerTarget) {\n observerTarget[resizeHandlerSymbol] = handleExpandButtonVisibility\n resizeObserver.observe(observerTarget)\n }\n\n return () => {\n if (observerTarget) {\n resizeObserver.unobserve(observerTarget)\n }\n }\n }, [expandable, handleExpandButtonVisibility])\n\n useLayoutEffect(() => {\n if (expanded !== undefined) {\n setTextExpanded(expanded)\n if (onExpandedChange) onExpandedChange(expanded)\n }\n }, [expanded, onExpandedChange])\n\n return (\n <>\n <Styled.TextEllipsis ref={textRef} lines={lines} expanded={textExpanded}>\n {expandable && <Styled.LineHeight ref={lineHeightRef}> </Styled.LineHeight>}\n {children}\n </Styled.TextEllipsis>\n {expandable && expandButtonVisible === true && (\n <Styled.ExpandButton\n {...restExpandButtonProps}\n type='button'\n palette={expandButtonPalette}\n onClick={(evt) => {\n if (restExpandButtonProps.onClick) restExpandButtonProps.onClick(evt)\n\n if (expanded === undefined) {\n const update = !textExpanded\n\n setTextExpanded(update)\n if (onExpandedChange) onExpandedChange(update)\n }\n }}\n >\n {textExpanded ? captionExpanded : captionCollapsed}\n </Styled.ExpandButton>\n )}\n </>\n )\n}\n\nexport { Ellipsis }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","default","entries","forEach","entry","target","props","lines","defaultExpanded","expandable","expandButtonProps","children","expanded","onExpandedChange","captionExpanded","captionCollapsed","restExpandButtonProps","textRef","useRef","lineHeightRef","requestAnimationId","expandButtonPalette","useMergedPalette","expandButtonVisible","setExpandButtonVisible","useState","textExpanded","setTextExpanded","handleExpandButtonVisibility","useCallback","e","cancelAnimationFrame","current","requestAnimationFrame","linesTotalCount","Math","round","clientHeight","scrollHeight","linesVisibleCount","useLayoutEffect","observerTarget","observe","unobserve","undefined","_jsxs","_Fragment","jsxs","Styled","ref","_jsx","jsx","type","palette","onClick","evt","update"],"mappings":"mUAOA,MAAMA,oBAAsBC,OAAO,kBAEnC,MAAMC,eAAiB,IAAIC,eAAcC,SAAEC,IACzCA,EAAQC,SAASC,WACJA,EAAMC,OAAOR,sBAAyB,YAC/CO,EAAMC,OAAOR,qBAAqBO,EAAMC,OAC1C,GACA,qBAGcC,IAChB,MAAMC,MACJA,EAAQ,EAACC,gBACTA,GAAkB,EAAKC,WACvBA,GAAa,EAAKC,kBAClBA,EAAoB,CAAuB,EAAAC,SAC3CA,EAAQC,SACRA,EAAQC,
|
|
1
|
+
{"version":3,"file":"Ellipsis.js","sources":["../../../../src/components/Text/Ellipsis.tsx"],"sourcesContent":["import { useState, useLayoutEffect, useRef, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport type { Nullable } from 'shared/types'\nimport type { EllipsisProps, ExpandButtonProps } from './types'\nimport * as Styled from './style'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n entry.target[resizeHandlerSymbol](entry.target)\n }\n })\n})\n\nconst Ellipsis = (props: EllipsisProps) => {\n const {\n lines = 1,\n defaultExpanded = false,\n expandable = false,\n expandButtonProps = {} as ExpandButtonProps,\n children,\n expanded,\n underline,\n onExpandedChange,\n } = props\n\n const { captionExpanded = 'Свернуть', captionCollapsed = 'Развернуть', ...restExpandButtonProps } = expandButtonProps\n\n const textRef = useRef<HTMLSpanElement>(null)\n const lineHeightRef = useRef<HTMLSpanElement>(null)\n const requestAnimationId = useRef<number>(-1)\n\n const expandButtonPalette = useMergedPalette(restExpandButtonProps)\n\n const [expandButtonVisible, setExpandButtonVisible] = useState<Nullable<boolean>>(null)\n const [textExpanded, setTextExpanded] = useState<boolean>(expanded ?? defaultExpanded)\n\n const handleExpandButtonVisibility = useCallback(\n (e: HTMLSpanElement) => {\n cancelAnimationFrame(requestAnimationId.current)\n requestAnimationId.current = requestAnimationFrame(() => {\n if (!lineHeightRef.current) return\n\n if (textExpanded) {\n const linesTotalCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > lines)\n } else {\n const linesTotalCount = Math.round(e.scrollHeight / lineHeightRef.current.clientHeight)\n const linesVisibleCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > linesVisibleCount)\n }\n })\n },\n [lines, textExpanded]\n )\n\n useLayoutEffect(() => {\n const observerTarget = textRef.current\n\n if (expandable && observerTarget) {\n observerTarget[resizeHandlerSymbol] = handleExpandButtonVisibility\n resizeObserver.observe(observerTarget)\n }\n\n return () => {\n if (observerTarget) {\n resizeObserver.unobserve(observerTarget)\n }\n }\n }, [expandable, handleExpandButtonVisibility])\n\n useLayoutEffect(() => {\n if (expanded !== undefined) {\n setTextExpanded(expanded)\n if (onExpandedChange) onExpandedChange(expanded)\n }\n }, [expanded, onExpandedChange])\n\n return (\n <>\n <Styled.TextEllipsis ref={textRef} lines={lines} expanded={textExpanded} underline={underline}>\n {expandable && <Styled.LineHeight ref={lineHeightRef}> </Styled.LineHeight>}\n {children}\n </Styled.TextEllipsis>\n {expandable && expandButtonVisible === true && (\n <Styled.ExpandButton\n {...restExpandButtonProps}\n type='button'\n palette={expandButtonPalette}\n onClick={(evt) => {\n if (restExpandButtonProps.onClick) restExpandButtonProps.onClick(evt)\n\n if (expanded === undefined) {\n const update = !textExpanded\n\n setTextExpanded(update)\n if (onExpandedChange) onExpandedChange(update)\n }\n }}\n >\n {textExpanded ? captionExpanded : captionCollapsed}\n </Styled.ExpandButton>\n )}\n </>\n )\n}\n\nexport { Ellipsis }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","default","entries","forEach","entry","target","props","lines","defaultExpanded","expandable","expandButtonProps","children","expanded","underline","onExpandedChange","captionExpanded","captionCollapsed","restExpandButtonProps","textRef","useRef","lineHeightRef","requestAnimationId","expandButtonPalette","useMergedPalette","expandButtonVisible","setExpandButtonVisible","useState","textExpanded","setTextExpanded","handleExpandButtonVisibility","useCallback","e","cancelAnimationFrame","current","requestAnimationFrame","linesTotalCount","Math","round","clientHeight","scrollHeight","linesVisibleCount","useLayoutEffect","observerTarget","observe","unobserve","undefined","_jsxs","_Fragment","jsxs","Styled","ref","_jsx","jsx","type","palette","onClick","evt","update"],"mappings":"mUAOA,MAAMA,oBAAsBC,OAAO,kBAEnC,MAAMC,eAAiB,IAAIC,eAAcC,SAAEC,IACzCA,EAAQC,SAASC,WACJA,EAAMC,OAAOR,sBAAyB,YAC/CO,EAAMC,OAAOR,qBAAqBO,EAAMC,OAC1C,GACA,qBAGcC,IAChB,MAAMC,MACJA,EAAQ,EAACC,gBACTA,GAAkB,EAAKC,WACvBA,GAAa,EAAKC,kBAClBA,EAAoB,CAAuB,EAAAC,SAC3CA,EAAQC,SACRA,EAAQC,UACRA,EAASC,iBACTA,GACER,EAEJ,MAAMS,gBAAEA,EAAkB,WAAUC,iBAAEA,EAAmB,gBAAiBC,GAA0BP,EAEpG,MAAMQ,EAAUC,aAAwB,MACxC,MAAMC,EAAgBD,aAAwB,MAC9C,MAAME,EAAqBF,MAAAA,QAAgB,GAE3C,MAAMG,EAAsBC,kCAAiBN,GAE7C,MAAOO,EAAqBC,GAA0BC,MAAQA,SAAoB,MAClF,MAAOC,EAAcC,GAAmBF,MAAAA,SAAkBd,GAAYJ,GAEtE,MAAMqB,EAA+BC,MAAWA,aAC7CC,IACCC,qBAAqBX,EAAmBY,SACxCZ,EAAmBY,QAAUC,uBAAsB,KACjD,GAAKd,EAAca,QAEnB,GAAIN,EAAc,CAChB,MAAMQ,EAAkBC,KAAKC,MAAMN,EAAEO,aAAelB,EAAca,QAAQK,cAE1Eb,EAAuBU,EAAkB5B,EAC3C,KAAO,CACL,MAAM4B,EAAkBC,KAAKC,MAAMN,EAAEQ,aAAenB,EAAca,QAAQK,cAC1E,MAAME,EAAoBJ,KAAKC,MAAMN,EAAEO,aAAelB,EAAca,QAAQK,cAE5Eb,EAAuBU,EAAkBK,EAC3C,IACA,GAEJ,CAACjC,EAAOoB,IAyBV,OAtBAc,MAAAA,iBAAgB,KACd,MAAMC,EAAiBxB,EAAQe,QAO/B,OALIxB,GAAciC,IAChBA,EAAe7C,qBAAuBgC,EACtC9B,eAAe4C,QAAQD,IAGlB,KACDA,GACF3C,eAAe6C,UAAUF,EAC3B,CACD,GACA,CAACjC,EAAYoB,IAEhBY,MAAAA,iBAAgB,KACV7B,SAAaiC,IACfjB,EAAgBhB,GACZE,GAAkBA,EAAiBF,GACzC,GACC,CAACA,EAAUE,IAGZgC,WAAAA,KAAAC,WAAAA,SAAA,CAAApC,SACEmC,CAAAA,WAAAE,KAACC,mBAAmB,CAACC,IAAKhC,EAASX,MAAOA,EAAOK,SAAUe,EAAcd,UAAWA,EAAUF,UAC3FF,GAAc0C,WAAAC,IAACH,iBAAiB,CAACC,IAAK9B,EAAcT,SAAC,MACrDA,KAEFF,GAAce,KAAwB,GACrC2B,WAAAA,IAACF,MAAAA,aAAmB,IACdhC,EACJoC,KAAK,SACLC,QAAShC,EACTiC,QAAUC,IAGR,GAFIvC,EAAsBsC,SAAStC,EAAsBsC,QAAQC,GAE7D5C,SAAaiC,EAAW,CAC1B,MAAMY,GAAU9B,EAEhBC,EAAgB6B,GACZ3C,GAAkBA,EAAiB2C,EACzC,GACA9C,SAEDgB,EAAeZ,EAAkBC,MAGrC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useRef,useState,useCallback,useLayoutEffect}from'react';import ResizeObserver from'../../external/.pnpm/resize-observer-polyfill@1.5.1/node_modules/resize-observer-polyfill/dist/ResizeObserver.mjs';import{useMergedPalette}from'../../hooks/useMergedPalette.mjs';import{TextEllipsis,LineHeight,ExpandButton}from'./style.mjs';import{jsxs,Fragment,jsx}from'react/jsx-runtime';const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=new ResizeObserver((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))}));const Ellipsis=e=>{const{lines:t=1,defaultExpanded:r=!1,expandable:
|
|
1
|
+
import{useRef,useState,useCallback,useLayoutEffect}from'react';import ResizeObserver from'../../external/.pnpm/resize-observer-polyfill@1.5.1/node_modules/resize-observer-polyfill/dist/ResizeObserver.mjs';import{useMergedPalette}from'../../hooks/useMergedPalette.mjs';import{TextEllipsis,LineHeight,ExpandButton}from'./style.mjs';import{jsxs,Fragment,jsx}from'react/jsx-runtime';const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=new ResizeObserver((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))}));const Ellipsis=e=>{const{lines:t=1,defaultExpanded:r=!1,expandable:n=!1,expandButtonProps:s={},children:i,expanded:o,underline:l,onExpandedChange:a}=e;const{captionExpanded:c="Свернуть",captionCollapsed:u="Развернуть",...d}=s;const p=useRef(null);const m=useRef(null);const f=useRef(-1);const h=useMergedPalette(d);const[x,b]=useState(null);const[g,y]=useState(o??r);const z=useCallback((e=>{cancelAnimationFrame(f.current),f.current=requestAnimationFrame((()=>{if(m.current)if(g){const r=Math.round(e.clientHeight/m.current.clientHeight);b(r>t)}else{const t=Math.round(e.scrollHeight/m.current.clientHeight);const r=Math.round(e.clientHeight/m.current.clientHeight);b(t>r)}}))}),[t,g]);return useLayoutEffect((()=>{const e=p.current;return n&&e&&(e[resizeHandlerSymbol]=z,resizeObserver.observe(e)),()=>{e&&resizeObserver.unobserve(e)}}),[n,z]),useLayoutEffect((()=>{o!==void 0&&(y(o),a&&a(o))}),[o,a]),jsxs(Fragment,{children:[jsxs(TextEllipsis,{ref:p,lines:t,expanded:g,underline:l,children:[n&&jsx(LineHeight,{ref:m,children:" "}),i]}),n&&x===!0&&jsx(ExpandButton,{...d,type:"button",palette:h,onClick:e=>{if(d.onClick&&d.onClick(e),o===void 0){const e=!g;y(e),a&&a(e)}},children:g?c:u})]})};export{Ellipsis};
|
|
2
2
|
//# sourceMappingURL=Ellipsis.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Ellipsis.mjs","sources":["../../../../src/components/Text/Ellipsis.tsx"],"sourcesContent":["import { useState, useLayoutEffect, useRef, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport type { Nullable } from 'shared/types'\nimport type { EllipsisProps, ExpandButtonProps } from './types'\nimport * as Styled from './style'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n entry.target[resizeHandlerSymbol](entry.target)\n }\n })\n})\n\nconst Ellipsis = (props: EllipsisProps) => {\n const {\n lines = 1,\n defaultExpanded = false,\n expandable = false,\n expandButtonProps = {} as ExpandButtonProps,\n children,\n expanded,\n onExpandedChange,\n } = props\n\n const { captionExpanded = 'Свернуть', captionCollapsed = 'Развернуть', ...restExpandButtonProps } = expandButtonProps\n\n const textRef = useRef<HTMLSpanElement>(null)\n const lineHeightRef = useRef<HTMLSpanElement>(null)\n const requestAnimationId = useRef<number>(-1)\n\n const expandButtonPalette = useMergedPalette(restExpandButtonProps)\n\n const [expandButtonVisible, setExpandButtonVisible] = useState<Nullable<boolean>>(null)\n const [textExpanded, setTextExpanded] = useState<boolean>(expanded ?? defaultExpanded)\n\n const handleExpandButtonVisibility = useCallback(\n (e: HTMLSpanElement) => {\n cancelAnimationFrame(requestAnimationId.current)\n requestAnimationId.current = requestAnimationFrame(() => {\n if (!lineHeightRef.current) return\n\n if (textExpanded) {\n const linesTotalCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > lines)\n } else {\n const linesTotalCount = Math.round(e.scrollHeight / lineHeightRef.current.clientHeight)\n const linesVisibleCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > linesVisibleCount)\n }\n })\n },\n [lines, textExpanded]\n )\n\n useLayoutEffect(() => {\n const observerTarget = textRef.current\n\n if (expandable && observerTarget) {\n observerTarget[resizeHandlerSymbol] = handleExpandButtonVisibility\n resizeObserver.observe(observerTarget)\n }\n\n return () => {\n if (observerTarget) {\n resizeObserver.unobserve(observerTarget)\n }\n }\n }, [expandable, handleExpandButtonVisibility])\n\n useLayoutEffect(() => {\n if (expanded !== undefined) {\n setTextExpanded(expanded)\n if (onExpandedChange) onExpandedChange(expanded)\n }\n }, [expanded, onExpandedChange])\n\n return (\n <>\n <Styled.TextEllipsis ref={textRef} lines={lines} expanded={textExpanded}>\n {expandable && <Styled.LineHeight ref={lineHeightRef}> </Styled.LineHeight>}\n {children}\n </Styled.TextEllipsis>\n {expandable && expandButtonVisible === true && (\n <Styled.ExpandButton\n {...restExpandButtonProps}\n type='button'\n palette={expandButtonPalette}\n onClick={(evt) => {\n if (restExpandButtonProps.onClick) restExpandButtonProps.onClick(evt)\n\n if (expanded === undefined) {\n const update = !textExpanded\n\n setTextExpanded(update)\n if (onExpandedChange) onExpandedChange(update)\n }\n }}\n >\n {textExpanded ? captionExpanded : captionCollapsed}\n </Styled.ExpandButton>\n )}\n </>\n )\n}\n\nexport { Ellipsis }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","entries","forEach","entry","target","Ellipsis","props","lines","defaultExpanded","expandable","expandButtonProps","children","expanded","onExpandedChange","captionExpanded","captionCollapsed","restExpandButtonProps","textRef","useRef","lineHeightRef","requestAnimationId","expandButtonPalette","useMergedPalette","expandButtonVisible","setExpandButtonVisible","useState","textExpanded","setTextExpanded","handleExpandButtonVisibility","useCallback","e","cancelAnimationFrame","current","requestAnimationFrame","linesTotalCount","Math","round","clientHeight","scrollHeight","linesVisibleCount","useLayoutEffect","observerTarget","observe","unobserve","undefined","_jsxs","_Fragment","Styled","ref","_jsx","type","palette","onClick","evt","update"],"mappings":"2XAOA,MAAMA,oBAAsBC,OAAO,kBAEnC,MAAMC,eAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,WACJA,EAAMC,OAAOP,sBAAyB,YAC/CM,EAAMC,OAAOP,qBAAqBM,EAAMC,OAC1C,GACA,IAGEC,MAAAA,SAAYC,IAChB,MAAMC,MACJA,EAAQ,EAACC,gBACTA,GAAkB,EAAKC,WACvBA,GAAa,EAAKC,kBAClBA,EAAoB,CAAuB,EAAAC,SAC3CA,EAAQC,SACRA,EAAQC,
|
|
1
|
+
{"version":3,"file":"Ellipsis.mjs","sources":["../../../../src/components/Text/Ellipsis.tsx"],"sourcesContent":["import { useState, useLayoutEffect, useRef, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport type { Nullable } from 'shared/types'\nimport type { EllipsisProps, ExpandButtonProps } from './types'\nimport * as Styled from './style'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n entry.target[resizeHandlerSymbol](entry.target)\n }\n })\n})\n\nconst Ellipsis = (props: EllipsisProps) => {\n const {\n lines = 1,\n defaultExpanded = false,\n expandable = false,\n expandButtonProps = {} as ExpandButtonProps,\n children,\n expanded,\n underline,\n onExpandedChange,\n } = props\n\n const { captionExpanded = 'Свернуть', captionCollapsed = 'Развернуть', ...restExpandButtonProps } = expandButtonProps\n\n const textRef = useRef<HTMLSpanElement>(null)\n const lineHeightRef = useRef<HTMLSpanElement>(null)\n const requestAnimationId = useRef<number>(-1)\n\n const expandButtonPalette = useMergedPalette(restExpandButtonProps)\n\n const [expandButtonVisible, setExpandButtonVisible] = useState<Nullable<boolean>>(null)\n const [textExpanded, setTextExpanded] = useState<boolean>(expanded ?? defaultExpanded)\n\n const handleExpandButtonVisibility = useCallback(\n (e: HTMLSpanElement) => {\n cancelAnimationFrame(requestAnimationId.current)\n requestAnimationId.current = requestAnimationFrame(() => {\n if (!lineHeightRef.current) return\n\n if (textExpanded) {\n const linesTotalCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > lines)\n } else {\n const linesTotalCount = Math.round(e.scrollHeight / lineHeightRef.current.clientHeight)\n const linesVisibleCount = Math.round(e.clientHeight / lineHeightRef.current.clientHeight)\n\n setExpandButtonVisible(linesTotalCount > linesVisibleCount)\n }\n })\n },\n [lines, textExpanded]\n )\n\n useLayoutEffect(() => {\n const observerTarget = textRef.current\n\n if (expandable && observerTarget) {\n observerTarget[resizeHandlerSymbol] = handleExpandButtonVisibility\n resizeObserver.observe(observerTarget)\n }\n\n return () => {\n if (observerTarget) {\n resizeObserver.unobserve(observerTarget)\n }\n }\n }, [expandable, handleExpandButtonVisibility])\n\n useLayoutEffect(() => {\n if (expanded !== undefined) {\n setTextExpanded(expanded)\n if (onExpandedChange) onExpandedChange(expanded)\n }\n }, [expanded, onExpandedChange])\n\n return (\n <>\n <Styled.TextEllipsis ref={textRef} lines={lines} expanded={textExpanded} underline={underline}>\n {expandable && <Styled.LineHeight ref={lineHeightRef}> </Styled.LineHeight>}\n {children}\n </Styled.TextEllipsis>\n {expandable && expandButtonVisible === true && (\n <Styled.ExpandButton\n {...restExpandButtonProps}\n type='button'\n palette={expandButtonPalette}\n onClick={(evt) => {\n if (restExpandButtonProps.onClick) restExpandButtonProps.onClick(evt)\n\n if (expanded === undefined) {\n const update = !textExpanded\n\n setTextExpanded(update)\n if (onExpandedChange) onExpandedChange(update)\n }\n }}\n >\n {textExpanded ? captionExpanded : captionCollapsed}\n </Styled.ExpandButton>\n )}\n </>\n )\n}\n\nexport { Ellipsis }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","entries","forEach","entry","target","Ellipsis","props","lines","defaultExpanded","expandable","expandButtonProps","children","expanded","underline","onExpandedChange","captionExpanded","captionCollapsed","restExpandButtonProps","textRef","useRef","lineHeightRef","requestAnimationId","expandButtonPalette","useMergedPalette","expandButtonVisible","setExpandButtonVisible","useState","textExpanded","setTextExpanded","handleExpandButtonVisibility","useCallback","e","cancelAnimationFrame","current","requestAnimationFrame","linesTotalCount","Math","round","clientHeight","scrollHeight","linesVisibleCount","useLayoutEffect","observerTarget","observe","unobserve","undefined","_jsxs","_Fragment","Styled","ref","_jsx","type","palette","onClick","evt","update"],"mappings":"2XAOA,MAAMA,oBAAsBC,OAAO,kBAEnC,MAAMC,eAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,WACJA,EAAMC,OAAOP,sBAAyB,YAC/CM,EAAMC,OAAOP,qBAAqBM,EAAMC,OAC1C,GACA,IAGEC,MAAAA,SAAYC,IAChB,MAAMC,MACJA,EAAQ,EAACC,gBACTA,GAAkB,EAAKC,WACvBA,GAAa,EAAKC,kBAClBA,EAAoB,CAAuB,EAAAC,SAC3CA,EAAQC,SACRA,EAAQC,UACRA,EAASC,iBACTA,GACER,EAEJ,MAAMS,gBAAEA,EAAkB,WAAUC,iBAAEA,EAAmB,gBAAiBC,GAA0BP,EAEpG,MAAMQ,EAAUC,OAAwB,MACxC,MAAMC,EAAgBD,OAAwB,MAC9C,MAAME,EAAqBF,QAAgB,GAE3C,MAAMG,EAAsBC,iBAAiBN,GAE7C,MAAOO,EAAqBC,GAA0BC,SAA4B,MAClF,MAAOC,EAAcC,GAAmBF,SAAkBd,GAAYJ,GAEtE,MAAMqB,EAA+BC,aAClCC,IACCC,qBAAqBX,EAAmBY,SACxCZ,EAAmBY,QAAUC,uBAAsB,KACjD,GAAKd,EAAca,QAEnB,GAAIN,EAAc,CAChB,MAAMQ,EAAkBC,KAAKC,MAAMN,EAAEO,aAAelB,EAAca,QAAQK,cAE1Eb,EAAuBU,EAAkB5B,EAC3C,KAAO,CACL,MAAM4B,EAAkBC,KAAKC,MAAMN,EAAEQ,aAAenB,EAAca,QAAQK,cAC1E,MAAME,EAAoBJ,KAAKC,MAAMN,EAAEO,aAAelB,EAAca,QAAQK,cAE5Eb,EAAuBU,EAAkBK,EAC3C,IACA,GAEJ,CAACjC,EAAOoB,IAyBV,OAtBAc,iBAAgB,KACd,MAAMC,EAAiBxB,EAAQe,QAO/B,OALIxB,GAAciC,IAChBA,EAAe7C,qBAAuBgC,EACtC9B,eAAe4C,QAAQD,IAGlB,KACDA,GACF3C,eAAe6C,UAAUF,EAC3B,CACD,GACA,CAACjC,EAAYoB,IAEhBY,iBAAgB,KACV7B,SAAaiC,IACfjB,EAAgBhB,GACZE,GAAkBA,EAAiBF,GACzC,GACC,CAACA,EAAUE,IAGZgC,KAAAC,SAAA,CAAApC,SACEmC,CAAAA,KAACE,aAAmB,CAACC,IAAK/B,EAASX,MAAOA,EAAOK,SAAUe,EAAcd,UAAWA,EAAUF,UAC3FF,GAAcyC,IAACF,WAAiB,CAACC,IAAK7B,EAAcT,SAAC,MACrDA,KAEFF,GAAce,KAAwB,GACrC0B,IAACF,aAAmB,IACd/B,EACJkC,KAAK,SACLC,QAAS9B,EACT+B,QAAUC,IAGR,GAFIrC,EAAsBoC,SAASpC,EAAsBoC,QAAQC,GAE7D1C,SAAaiC,EAAW,CAC1B,MAAMU,GAAU5B,EAEhBC,EAAgB2B,GACZzC,GAAkBA,EAAiByC,EACzC,GACA5C,SAEDgB,EAAeZ,EAAkBC,MAGrC"}
|
package/components/Text/Text.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var useClassname=require('../../hooks/useClassname.js');var Ellipsis=require('./Ellipsis.js');var constants=require('./constants.js');var defaultConstants=require('./default-constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Text_Heading=require('../Text.Heading/Text.Heading.js');var Text_Ellipse=require('../Text.Ellipse/Text.Ellipse.js');const Text=Object.assign(withMergedProps.withMergedProps(React.forwardRef(((e,s)=>{const t=e.appearance?{...constants.APPEARANCE[e.appearance],...e}:e;const{size:
|
|
1
|
+
'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var useClassname=require('../../hooks/useClassname.js');var Ellipsis=require('./Ellipsis.js');var constants=require('./constants.js');var defaultConstants=require('./default-constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Text_Heading=require('../Text.Heading/Text.Heading.js');var Text_Ellipse=require('../Text.Ellipse/Text.Ellipse.js');const Text=Object.assign(withMergedProps.withMergedProps(React.forwardRef(((e,s)=>{const t=e.appearance?{...constants.APPEARANCE[e.appearance],...e}:e;const{size:r="m",weight:a="normal",lineHeight:n="m",fontStyle:i="normal",className:l,content:o,children:p,ellipsis:u,expandButtonProps:c,onExpandedChange:d,...x}=t;const E=typeof u=='object'&&u!==null?u:{};const T=useClassname.useClassname("Text",l);return require$$0.jsx(style.Root,{...x,size:r,weight:a,lineHeight:n,fontStyle:i,className:T,ellipsis:u,ref:s,children:u?require$$0.jsx(Ellipsis.Ellipsis,{...E,underline:x.underline,expandButtonProps:c,onExpandedChange:d,children:p||o}):p||o})})),{displayName:"Text",sizes:e=>typeof e.appearance=='string'?constants.SIZES[e.appearance]??defaultConstants.SIZES_DEFAULT:defaultConstants.SIZES_DEFAULT}),{Heading:Text_Heading.TextHeading,Ellipse:Text_Ellipse.TextEllipse});exports.COMPONENT_NAME="Text",exports.Text=Text;
|
|
2
2
|
//# sourceMappingURL=Text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useClassname } from 'hooks/useClassname'\nimport { TextHeading } from 'components/Text.Heading'\nimport { TextEllipse } from 'components/Text.Ellipse'\nimport { Ellipsis } from './Ellipsis'\nimport type { TextProps } from './types'\nimport { APPEARANCE, SIZES } from './constants'\nimport { SIZES_DEFAULT } from './default-constants'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Text'\n\n/**\n *\n * Компонент поддерживает все нативные атрибуты рутового элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Text/types.ts).\n */\nconst Text: React.ForwardRefExoticComponent<TextProps> & { Heading: typeof TextHeading; Ellipse: typeof TextEllipse } =\n Object.assign(\n withMergedProps<TextProps, HTMLElement>(\n forwardRef((props, ref) => {\n const textProps = props.appearance ? { ...APPEARANCE[props.appearance], ...props } : props\n\n const {\n size = 'm',\n weight = 'normal',\n lineHeight = 'm',\n fontStyle = 'normal',\n className,\n content,\n children,\n ellipsis,\n expandButtonProps,\n onExpandedChange,\n ...restProps\n } = textProps\n\n const ellipsisProps = typeof ellipsis === 'object' && ellipsis !== null ? ellipsis : {}\n\n const textClassName = useClassname(COMPONENT_NAME, className)\n\n return (\n <Styled.Root\n {...restProps}\n size={size}\n weight={weight}\n lineHeight={lineHeight}\n fontStyle={fontStyle}\n className={textClassName}\n ref={ref}\n >\n {ellipsis ? (\n <Ellipsis
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useClassname } from 'hooks/useClassname'\nimport { TextHeading } from 'components/Text.Heading'\nimport { TextEllipse } from 'components/Text.Ellipse'\nimport { Ellipsis } from './Ellipsis'\nimport type { TextProps } from './types'\nimport { APPEARANCE, SIZES } from './constants'\nimport { SIZES_DEFAULT } from './default-constants'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Text'\n\n/**\n *\n * Компонент поддерживает все нативные атрибуты рутового элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Text/types.ts).\n */\nconst Text: React.ForwardRefExoticComponent<TextProps> & { Heading: typeof TextHeading; Ellipse: typeof TextEllipse } =\n Object.assign(\n withMergedProps<TextProps, HTMLElement>(\n forwardRef((props, ref) => {\n const textProps = props.appearance ? { ...APPEARANCE[props.appearance], ...props } : props\n\n const {\n size = 'm',\n weight = 'normal',\n lineHeight = 'm',\n fontStyle = 'normal',\n className,\n content,\n children,\n ellipsis,\n expandButtonProps,\n onExpandedChange,\n ...restProps\n } = textProps\n\n const ellipsisProps = typeof ellipsis === 'object' && ellipsis !== null ? ellipsis : {}\n\n const textClassName = useClassname(COMPONENT_NAME, className)\n\n return (\n <Styled.Root\n {...restProps}\n size={size}\n weight={weight}\n lineHeight={lineHeight}\n fontStyle={fontStyle}\n className={textClassName}\n ellipsis={ellipsis}\n ref={ref}\n >\n {ellipsis ? (\n <Ellipsis\n {...ellipsisProps}\n underline={restProps.underline}\n expandButtonProps={expandButtonProps}\n onExpandedChange={onExpandedChange}\n >\n {children || content}\n </Ellipsis>\n ) : (\n children || content\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => {\n if (typeof props.appearance === 'string') {\n return SIZES[props.appearance] ?? SIZES_DEFAULT\n }\n\n return SIZES_DEFAULT\n },\n }\n ),\n {\n Heading: TextHeading,\n Ellipse: TextEllipse,\n }\n )\n\nexport { Text, COMPONENT_NAME }\n"],"names":["Text","Object","assign","withMergedProps","forwardRef","props","ref","textProps","appearance","APPEARANCE","size","weight","lineHeight","fontStyle","className","content","children","ellipsis","expandButtonProps","onExpandedChange","restProps","ellipsisProps","textClassName","useClassname","_jsx","Styled","jsx","Ellipsis","underline","displayName","sizes","SIZES","SIZES_DEFAULT","Heading","TextHeading","Ellipse","TextEllipse"],"mappings":"seAuBA,MAAMA,KACJC,OAAOC,OACLC,gBAAAA,gBACEC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,EAAYF,EAAMG,WAAa,IAAKC,UAAUA,WAACJ,EAAMG,eAAgBH,GAAUA,EAErF,MAAMK,KACJA,EAAO,IAAGC,OACVA,EAAS,SAAQC,WACjBA,EAAa,IAAGC,UAChBA,EAAY,SAAQC,UACpBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,SACRA,EAAQC,kBACRA,EAAiBC,iBACjBA,KACGC,GACDb,EAEJ,MAAMc,SAAuBJ,GAAa,UAAYA,IAAa,KAAOA,EAAW,GAErF,MAAMK,EAAgBC,aAAAA,aAlCP,OAkCoCT,GAEnD,OACEU,WAAAA,IAACC,MAAAA,KAAW,IACNL,EACJV,KAAMA,EACNC,OAAQA,EACRC,WAAYA,EACZC,UAAWA,EACXC,UAAWQ,EACXL,SAAUA,EACVX,IAAKA,EAAIU,SAERC,EACCO,WAAAE,IAACC,kBAAQ,IACHN,EACJO,UAAWR,EAAUQ,UACrBV,kBAAmBA,EACnBC,iBAAkBA,EAAiBH,SAElCA,GAAYD,IAGfC,GAAYD,GAEF,IAGlB,CACEc,YA/De,OAgEfC,MAAQzB,UACKA,EAAMG,YAAe,SACvBuB,gBAAM1B,EAAMG,aAAewB,iBAAAA,cAG7BA,iCAIb,CACEC,QAASC,aAAWA,YACpBC,QAASC,aAAAA,qCA3EQ"}
|
package/components/Text/Text.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useClassname}from'../../hooks/useClassname.mjs';import{Ellipsis}from'./Ellipsis.mjs';import{SIZES,APPEARANCE}from'./constants.mjs';import{SIZES_DEFAULT}from'./default-constants.mjs';import{Root}from'./style.mjs';import{jsx}from'react/jsx-runtime';import{TextHeading}from'../Text.Heading/Text.Heading.mjs';import{TextEllipse}from'../Text.Ellipse/Text.Ellipse.mjs';const COMPONENT_NAME='Text';const Text=Object.assign(withMergedProps(forwardRef(((e,s)=>{const t=e.appearance?{...APPEARANCE[e.appearance],...e}:e;const{size:o="m",weight:
|
|
1
|
+
import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useClassname}from'../../hooks/useClassname.mjs';import{Ellipsis}from'./Ellipsis.mjs';import{SIZES,APPEARANCE}from'./constants.mjs';import{SIZES_DEFAULT}from'./default-constants.mjs';import{Root}from'./style.mjs';import{jsx}from'react/jsx-runtime';import{TextHeading}from'../Text.Heading/Text.Heading.mjs';import{TextEllipse}from'../Text.Ellipse/Text.Ellipse.mjs';const COMPONENT_NAME='Text';const Text=Object.assign(withMergedProps(forwardRef(((e,s)=>{const t=e.appearance?{...APPEARANCE[e.appearance],...e}:e;const{size:o="m",weight:n="normal",lineHeight:i="m",fontStyle:r="normal",className:a,content:l,children:p,ellipsis:m,expandButtonProps:E,onExpandedChange:c,...d}=t;const x=typeof m=='object'&&m!==null?m:{};const f=useClassname("Text",a);return jsx(Root,{...d,size:o,weight:n,lineHeight:i,fontStyle:r,className:f,ellipsis:m,ref:s,children:m?jsx(Ellipsis,{...x,underline:d.underline,expandButtonProps:E,onExpandedChange:c,children:p||l}):p||l})})),{displayName:"Text",sizes:e=>typeof e.appearance=='string'?SIZES[e.appearance]??SIZES_DEFAULT:SIZES_DEFAULT}),{Heading:TextHeading,Ellipse:TextEllipse});export{COMPONENT_NAME,Text};
|
|
2
2
|
//# sourceMappingURL=Text.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.mjs","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useClassname } from 'hooks/useClassname'\nimport { TextHeading } from 'components/Text.Heading'\nimport { TextEllipse } from 'components/Text.Ellipse'\nimport { Ellipsis } from './Ellipsis'\nimport type { TextProps } from './types'\nimport { APPEARANCE, SIZES } from './constants'\nimport { SIZES_DEFAULT } from './default-constants'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Text'\n\n/**\n *\n * Компонент поддерживает все нативные атрибуты рутового элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Text/types.ts).\n */\nconst Text: React.ForwardRefExoticComponent<TextProps> & { Heading: typeof TextHeading; Ellipse: typeof TextEllipse } =\n Object.assign(\n withMergedProps<TextProps, HTMLElement>(\n forwardRef((props, ref) => {\n const textProps = props.appearance ? { ...APPEARANCE[props.appearance], ...props } : props\n\n const {\n size = 'm',\n weight = 'normal',\n lineHeight = 'm',\n fontStyle = 'normal',\n className,\n content,\n children,\n ellipsis,\n expandButtonProps,\n onExpandedChange,\n ...restProps\n } = textProps\n\n const ellipsisProps = typeof ellipsis === 'object' && ellipsis !== null ? ellipsis : {}\n\n const textClassName = useClassname(COMPONENT_NAME, className)\n\n return (\n <Styled.Root\n {...restProps}\n size={size}\n weight={weight}\n lineHeight={lineHeight}\n fontStyle={fontStyle}\n className={textClassName}\n ref={ref}\n >\n {ellipsis ? (\n <Ellipsis
|
|
1
|
+
{"version":3,"file":"Text.mjs","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useClassname } from 'hooks/useClassname'\nimport { TextHeading } from 'components/Text.Heading'\nimport { TextEllipse } from 'components/Text.Ellipse'\nimport { Ellipsis } from './Ellipsis'\nimport type { TextProps } from './types'\nimport { APPEARANCE, SIZES } from './constants'\nimport { SIZES_DEFAULT } from './default-constants'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Text'\n\n/**\n *\n * Компонент поддерживает все нативные атрибуты рутового элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Text/types.ts).\n */\nconst Text: React.ForwardRefExoticComponent<TextProps> & { Heading: typeof TextHeading; Ellipse: typeof TextEllipse } =\n Object.assign(\n withMergedProps<TextProps, HTMLElement>(\n forwardRef((props, ref) => {\n const textProps = props.appearance ? { ...APPEARANCE[props.appearance], ...props } : props\n\n const {\n size = 'm',\n weight = 'normal',\n lineHeight = 'm',\n fontStyle = 'normal',\n className,\n content,\n children,\n ellipsis,\n expandButtonProps,\n onExpandedChange,\n ...restProps\n } = textProps\n\n const ellipsisProps = typeof ellipsis === 'object' && ellipsis !== null ? ellipsis : {}\n\n const textClassName = useClassname(COMPONENT_NAME, className)\n\n return (\n <Styled.Root\n {...restProps}\n size={size}\n weight={weight}\n lineHeight={lineHeight}\n fontStyle={fontStyle}\n className={textClassName}\n ellipsis={ellipsis}\n ref={ref}\n >\n {ellipsis ? (\n <Ellipsis\n {...ellipsisProps}\n underline={restProps.underline}\n expandButtonProps={expandButtonProps}\n onExpandedChange={onExpandedChange}\n >\n {children || content}\n </Ellipsis>\n ) : (\n children || content\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => {\n if (typeof props.appearance === 'string') {\n return SIZES[props.appearance] ?? SIZES_DEFAULT\n }\n\n return SIZES_DEFAULT\n },\n }\n ),\n {\n Heading: TextHeading,\n Ellipse: TextEllipse,\n }\n )\n\nexport { Text, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Text","Object","assign","withMergedProps","forwardRef","props","ref","textProps","appearance","APPEARANCE","size","weight","lineHeight","fontStyle","className","content","children","ellipsis","expandButtonProps","onExpandedChange","restProps","ellipsisProps","textClassName","useClassname","_jsx","Styled","Ellipsis","underline","displayName","sizes","SIZES","SIZES_DEFAULT","Heading","TextHeading","Ellipse","TextEllipse"],"mappings":"4cAWMA,MAAAA,eAAiB,OAYvB,MAAMC,KACJC,OAAOC,OACLC,gBACEC,YAAW,CAACC,EAAOC,KACjB,MAAMC,EAAYF,EAAMG,WAAa,IAAKC,WAAWJ,EAAMG,eAAgBH,GAAUA,EAErF,MAAMK,KACJA,EAAO,IAAGC,OACVA,EAAS,SAAQC,WACjBA,EAAa,IAAGC,UAChBA,EAAY,SAAQC,UACpBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,SACRA,EAAQC,kBACRA,EAAiBC,iBACjBA,KACGC,GACDb,EAEJ,MAAMc,SAAuBJ,GAAa,UAAYA,IAAa,KAAOA,EAAW,GAErF,MAAMK,EAAgBC,aAlCP,OAkCoCT,GAEnD,OACEU,IAACC,KAAW,IACNL,EACJV,KAAMA,EACNC,OAAQA,EACRC,WAAYA,EACZC,UAAWA,EACXC,UAAWQ,EACXL,SAAUA,EACVX,IAAKA,EAAIU,SAERC,EACCO,IAACE,SAAQ,IACHL,EACJM,UAAWP,EAAUO,UACrBT,kBAAmBA,EACnBC,iBAAkBA,EAAiBH,SAElCA,GAAYD,IAGfC,GAAYD,GAEF,IAGlB,CACEa,YA/De,OAgEfC,MAAQxB,UACKA,EAAMG,YAAe,SACvBsB,MAAMzB,EAAMG,aAAeuB,cAG7BA,gBAIb,CACEC,QAASC,YACTC,QAASC"}
|
package/components/Text/style.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var styled=require('styled-components');var tinycolor=require('../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.js');var display=require('../../mixins/display.js');var color=require('../../mixins/color.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const WEIGHT_MAP={lighter:100,normal:400,bold:600,bolder:800};const LINE_HEIGHT_MAP={l:1.5,m:1.3,s:1.15,xs:1};const shouldForwardTextProp=style.createShouldForwardProp((e=>!['appearance','fontFamily','weight','fontStyle','transform','underlineLinks','textAlign','lineHeight','content','display','chars','quoted','showZeroMinorPart','separator','whiteSpace','wordBreak'].includes(e)));const template=e=>`\n color: ${e.color};\n background-color: ${e.backgroundColor};\n &:hover {\n color: ${e.colorHover};\n }\n &:active {\n color: ${e.color};\n }\n &:disabled {\n color: ${e.colorDisabled};\n }\n`;const COLOR_SCHEMA={primary:styled.css(["",""],(e=>template({color:e.theme.colors['content-link'],colorHover:tinycolor.default(e.theme.colors['content-link']).lighten(10).toString(),colorDisabled:e.theme.colors['content-disabled'],backgroundColor:e.theme.colors.transparent,...e.palette}))),contrast:styled.css(["",""],(e=>template({color:e.theme.colors['content-oncolor-primary'],colorHover:tinycolor.default(e.theme.colors['content-oncolor-primary']).darken(10).toString(),colorDisabled:e.theme.colors['content-oncolor-disabled'],backgroundColor:e.theme.colors.transparent,...e.palette})))};const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardTextProp}).withConfig({displayName:"Text__Root",componentId:"ui__sc-s2fogy-0"})([""," "," "," "," ",""],(e=>`\n margin: 0;\n padding: 0;\n ${e.fontFamily?`font-family: ${e.fontFamily};`:''}\n ${e.transform?`text-transform: ${e.transform};`:''}\n ${e.weight?`font-weight: ${WEIGHT_MAP[e.weight]??e.weight};`:''}\n ${e.fontStyle?`font-style: ${e.fontStyle};`:''}\n ${e.textAlign?`text-align: ${e.textAlign};`:''}\n ${e.lineHeight?`line-height: ${LINE_HEIGHT_MAP[e.lineHeight]??e.lineHeight};`:''}\n ${e.whiteSpace?`white-space: ${e.whiteSpace};`:''}\n ${e.wordBreak?`word-break: ${e.wordBreak};`:''}\n a {\n text-decoration: ${e.underlineLinks?'underline':'none'};\n &:hover {\n text-decoration: none;\n }\n }\n `),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin,(e=>e.display?display.display(e.display):null),(e=>color.color(e.color?e.color:e.theme.textColor)));const TextEllipsis=styled__default.default.span.withConfig({shouldForwardProp:e=>!['lines','expanded'].includes(e)}).withConfig({displayName:"Text__TextEllipsis",componentId:"ui__sc-s2fogy-1"})(["box-sizing:border-box;display:block;position:relative;",""],(e=>!e.expanded&&`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${e.lines};\n overflow: hidden;\n text-overflow: ellipsis;\n `));const LineHeight=styled__default.default.span.withConfig({displayName:"Text__LineHeight",componentId:"ui__sc-s2fogy-2"})(["box-sizing:border-box;position:absolute;visibility:hidden;"]);const ExpandButton=styled__default.default.button.withConfig({shouldForwardProp:e=>!['contrast','palette'].includes(e)}).withConfig({displayName:"Text__ExpandButton",componentId:"ui__sc-s2fogy-3"})(["box-sizing:border-box;appearance:none;padding:0;border:0;font-size:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;margin-top:0.2em;text-decoration-line:underline;text-decoration-style:dashed;text-underline-offset:0.3em;cursor:pointer;&:disabled{cursor:not-allowed;}"," ",""],(e=>e.contrast?COLOR_SCHEMA.contrast:COLOR_SCHEMA.primary),focus.focus);exports.ExpandButton=ExpandButton,exports.LineHeight=LineHeight,exports.Root=Root,exports.TextEllipsis=TextEllipsis;
|
|
1
|
+
'use strict';var styled=require('styled-components');var tinycolor=require('../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.js');var display=require('../../mixins/display.js');var color=require('../../mixins/color.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const WEIGHT_MAP={lighter:100,normal:400,bold:600,bolder:800};const LINE_HEIGHT_MAP={l:1.5,m:1.3,s:1.15,xs:1};const shouldForwardTextProp=style.createShouldForwardProp((e=>!['appearance','fontFamily','weight','fontStyle','transform','underlineLinks','textAlign','lineHeight','content','display','chars','quoted','showZeroMinorPart','separator','whiteSpace','wordBreak','underline','ellipsis'].includes(e)));const template=e=>`\n color: ${e.color};\n background-color: ${e.backgroundColor};\n &:hover {\n color: ${e.colorHover};\n }\n &:active {\n color: ${e.color};\n }\n &:disabled {\n color: ${e.colorDisabled};\n }\n`;const COLOR_SCHEMA={primary:styled.css(["",""],(e=>template({color:e.theme.colors['content-link'],colorHover:tinycolor.default(e.theme.colors['content-link']).lighten(10).toString(),colorDisabled:e.theme.colors['content-disabled'],backgroundColor:e.theme.colors.transparent,...e.palette}))),contrast:styled.css(["",""],(e=>template({color:e.theme.colors['content-oncolor-primary'],colorHover:tinycolor.default(e.theme.colors['content-oncolor-primary']).darken(10).toString(),colorDisabled:e.theme.colors['content-oncolor-disabled'],backgroundColor:e.theme.colors.transparent,...e.palette})))};const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardTextProp}).withConfig({displayName:"Text__Root",componentId:"ui__sc-s2fogy-0"})([""," "," "," "," "," ",""],(e=>`\n margin: 0;\n padding: 0;\n ${e.fontFamily?`font-family: ${e.fontFamily};`:''}\n ${e.transform?`text-transform: ${e.transform};`:''}\n ${e.weight?`font-weight: ${WEIGHT_MAP[e.weight]??e.weight};`:''}\n ${e.fontStyle?`font-style: ${e.fontStyle};`:''}\n ${e.textAlign?`text-align: ${e.textAlign};`:''}\n ${e.lineHeight?`line-height: ${LINE_HEIGHT_MAP[e.lineHeight]??e.lineHeight};`:''}\n ${e.whiteSpace?`white-space: ${e.whiteSpace};`:''}\n ${e.wordBreak?`word-break: ${e.wordBreak};`:''}\n a {\n text-decoration: ${e.underlineLinks?'underline':'none'};\n &:hover {\n text-decoration: none;\n }\n }\n `),(e=>e.underline&&!e.ellipsis&&`\n text-decoration-line: underline;\n text-decoration-style: ${typeof e.underline=='string'?e.underline:'solid'};\n text-underline-offset: 0.3em;\n `),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin,(e=>e.display?display.display(e.display):null),(e=>color.color(e.color?e.color:e.theme.textColor)));const TextEllipsis=styled__default.default.span.withConfig({shouldForwardProp:e=>!['lines','expanded','underline'].includes(e)}).withConfig({displayName:"Text__TextEllipsis",componentId:"ui__sc-s2fogy-1"})(["box-sizing:border-box;display:block;position:relative;"," ",""],(e=>!e.expanded&&`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${e.lines};\n overflow: hidden;\n text-overflow: ellipsis;\n `),(e=>e.underline&&`\n text-decoration-line: underline;\n text-decoration-style: ${typeof e.underline=='string'?e.underline:'solid'};\n text-underline-offset: 0.3em;\n `));const LineHeight=styled__default.default.span.withConfig({displayName:"Text__LineHeight",componentId:"ui__sc-s2fogy-2"})(["box-sizing:border-box;position:absolute;visibility:hidden;"]);const ExpandButton=styled__default.default.button.withConfig({shouldForwardProp:e=>!['contrast','palette'].includes(e)}).withConfig({displayName:"Text__ExpandButton",componentId:"ui__sc-s2fogy-3"})(["box-sizing:border-box;appearance:none;padding:0;border:0;font-size:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;margin-top:0.2em;text-decoration-line:underline;text-decoration-style:dashed;text-underline-offset:0.3em;cursor:pointer;&:disabled{cursor:not-allowed;}"," ",""],(e=>e.contrast?COLOR_SCHEMA.contrast:COLOR_SCHEMA.primary),focus.focus);exports.ExpandButton=ExpandButton,exports.LineHeight=LineHeight,exports.Root=Root,exports.TextEllipsis=TextEllipsis;
|
|
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 tinycolor from 'tinycolor2'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { Color, CSSColor } from 'shared/types'\nimport type { StyledTextProps, ExpandButtonPalette, StyledTextEllipsisProps, StyledExpandButtonProps } from './types'\n\nconst WEIGHT_MAP = {\n lighter: 100,\n normal: 400,\n bold: 600,\n bolder: 800,\n}\n\nconst LINE_HEIGHT_MAP = {\n l: 1.5,\n m: 1.3,\n s: 1.15,\n xs: 1,\n}\n\nconst shouldForwardTextProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'appearance',\n 'fontFamily',\n 'weight',\n 'fontStyle',\n 'transform',\n 'underlineLinks',\n 'textAlign',\n 'lineHeight',\n 'content',\n 'display',\n 'chars',\n 'quoted',\n 'showZeroMinorPart',\n 'separator',\n 'whiteSpace',\n 'wordBreak',\n ].includes(propKey)\n)\n\nconst template = (palette: ExpandButtonPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n &:hover {\n color: ${palette.colorHover};\n }\n &:active {\n color: ${palette.color};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n primary: css<StyledExpandButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-link'],\n colorHover: tinycolor(props.theme.colors['content-link']).lighten(10).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n contrast: css<StyledExpandButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n colorHover: tinycolor(props.theme.colors['content-oncolor-primary']).darken(10).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledTextProps>({\n shouldForwardProp: shouldForwardTextProp,\n})`\n ${(props) => `\n margin: 0;\n padding: 0;\n ${props.fontFamily ? `font-family: ${props.fontFamily};` : ''}\n ${props.transform ? `text-transform: ${props.transform};` : ''}\n ${props.weight ? `font-weight: ${WEIGHT_MAP[props.weight] ?? props.weight};` : ''}\n ${props.fontStyle ? `font-style: ${props.fontStyle};` : ''}\n ${props.textAlign ? `text-align: ${props.textAlign};` : ''}\n ${props.lineHeight ? `line-height: ${LINE_HEIGHT_MAP[props.lineHeight] ?? props.lineHeight};` : ''}\n ${props.whiteSpace ? `white-space: ${props.whiteSpace};` : ''}\n ${props.wordBreak ? `word-break: ${props.wordBreak};` : ''}\n a {\n text-decoration: ${props.underlineLinks ? 'underline' : 'none'};\n &:hover {\n text-decoration: none;\n }\n }\n `}\n\n ${responsiveSize}\n ${responsiveMargin}\n\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.color ? color(props.color) : color(props.theme.textColor as Color))}\n`\n\nexport const TextEllipsis = styled.span.withConfig<StyledTextEllipsisProps>({\n shouldForwardProp: (propKey) => !['lines', 'expanded'].includes(propKey),\n})`\n box-sizing: border-box;\n display: block;\n position: relative;\n\n ${(props) =>\n !props.expanded &&\n `\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${props.lines};\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n`\n\nexport const LineHeight = styled.span`\n box-sizing: border-box;\n position: absolute;\n visibility: hidden;\n`\n\nexport const ExpandButton = styled.button.withConfig<StyledExpandButtonProps>({\n shouldForwardProp: (propKey) => !['contrast', 'palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: none;\n padding: 0;\n border: 0;\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n font-style: inherit;\n margin-top: 0.2em;\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 0.3em;\n cursor: pointer;\n &:disabled {\n cursor: not-allowed;\n }\n\n ${(props) => (props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.primary)}\n\n ${focus}\n`\n"],"names":["WEIGHT_MAP","lighter","normal","bold","bolder","LINE_HEIGHT_MAP","l","m","s","xs","shouldForwardTextProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","colorHover","colorDisabled","COLOR_SCHEMA","primary","css","props","theme","colors","tinycolor","default","lighten","toString","transparent","contrast","darken","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","fontFamily","transform","weight","fontStyle","textAlign","lineHeight","whiteSpace","wordBreak","underlineLinks","responsiveSize","responsiveMargin","display","textColor","TextEllipsis","span","expanded","lines","LineHeight","ExpandButton","button","focus"],"mappings":"4jBAWA,MAAMA,WAAa,CACjBC,QAAS,IACTC,OAAQ,IACRC,KAAM,IACNC,OAAQ,KAGV,MAAMC,gBAAkB,CACtBC,EAAG,IACHC,EAAG,IACHC,EAAG,KACHC,GAAI,GAGN,MAAMC,sBAAwBC,MAAuBA,yBAClDC,IACE,CACC,aACA,aACA,SACA,YACA,YACA,iBACA,YACA,aACA,UACA,UACA,QACA,SACA,oBACA,YACA,aACA,
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { Color, CSSColor } from 'shared/types'\nimport type { StyledTextProps, ExpandButtonPalette, StyledTextEllipsisProps, StyledExpandButtonProps } from './types'\n\nconst WEIGHT_MAP = {\n lighter: 100,\n normal: 400,\n bold: 600,\n bolder: 800,\n}\n\nconst LINE_HEIGHT_MAP = {\n l: 1.5,\n m: 1.3,\n s: 1.15,\n xs: 1,\n}\n\nconst shouldForwardTextProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'appearance',\n 'fontFamily',\n 'weight',\n 'fontStyle',\n 'transform',\n 'underlineLinks',\n 'textAlign',\n 'lineHeight',\n 'content',\n 'display',\n 'chars',\n 'quoted',\n 'showZeroMinorPart',\n 'separator',\n 'whiteSpace',\n 'wordBreak',\n 'underline',\n 'ellipsis',\n ].includes(propKey)\n)\n\nconst template = (palette: ExpandButtonPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n &:hover {\n color: ${palette.colorHover};\n }\n &:active {\n color: ${palette.color};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n primary: css<StyledExpandButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-link'],\n colorHover: tinycolor(props.theme.colors['content-link']).lighten(10).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n contrast: css<StyledExpandButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n colorHover: tinycolor(props.theme.colors['content-oncolor-primary']).darken(10).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledTextProps>({\n shouldForwardProp: shouldForwardTextProp,\n})`\n ${(props) => `\n margin: 0;\n padding: 0;\n ${props.fontFamily ? `font-family: ${props.fontFamily};` : ''}\n ${props.transform ? `text-transform: ${props.transform};` : ''}\n ${props.weight ? `font-weight: ${WEIGHT_MAP[props.weight] ?? props.weight};` : ''}\n ${props.fontStyle ? `font-style: ${props.fontStyle};` : ''}\n ${props.textAlign ? `text-align: ${props.textAlign};` : ''}\n ${props.lineHeight ? `line-height: ${LINE_HEIGHT_MAP[props.lineHeight] ?? props.lineHeight};` : ''}\n ${props.whiteSpace ? `white-space: ${props.whiteSpace};` : ''}\n ${props.wordBreak ? `word-break: ${props.wordBreak};` : ''}\n a {\n text-decoration: ${props.underlineLinks ? 'underline' : 'none'};\n &:hover {\n text-decoration: none;\n }\n }\n `}\n\n ${(props) =>\n props.underline &&\n !props.ellipsis &&\n `\n text-decoration-line: underline;\n text-decoration-style: ${typeof props.underline === 'string' ? props.underline : 'solid'};\n text-underline-offset: 0.3em;\n `}\n\n ${responsiveSize}\n ${responsiveMargin}\n\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.color ? color(props.color) : color(props.theme.textColor as Color))}\n`\n\nexport const TextEllipsis = styled.span.withConfig<StyledTextEllipsisProps>({\n shouldForwardProp: (propKey) => !['lines', 'expanded', 'underline'].includes(propKey),\n})`\n box-sizing: border-box;\n display: block;\n position: relative;\n\n ${(props) =>\n !props.expanded &&\n `\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${props.lines};\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n\n ${(props) =>\n props.underline &&\n `\n text-decoration-line: underline;\n text-decoration-style: ${typeof props.underline === 'string' ? props.underline : 'solid'};\n text-underline-offset: 0.3em;\n `}\n`\n\nexport const LineHeight = styled.span`\n box-sizing: border-box;\n position: absolute;\n visibility: hidden;\n`\n\nexport const ExpandButton = styled.button.withConfig<StyledExpandButtonProps>({\n shouldForwardProp: (propKey) => !['contrast', 'palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: none;\n padding: 0;\n border: 0;\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n font-style: inherit;\n margin-top: 0.2em;\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 0.3em;\n cursor: pointer;\n &:disabled {\n cursor: not-allowed;\n }\n\n ${(props) => (props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.primary)}\n\n ${focus}\n`\n"],"names":["WEIGHT_MAP","lighter","normal","bold","bolder","LINE_HEIGHT_MAP","l","m","s","xs","shouldForwardTextProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","colorHover","colorDisabled","COLOR_SCHEMA","primary","css","props","theme","colors","tinycolor","default","lighten","toString","transparent","contrast","darken","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","fontFamily","transform","weight","fontStyle","textAlign","lineHeight","whiteSpace","wordBreak","underlineLinks","underline","ellipsis","responsiveSize","responsiveMargin","display","textColor","TextEllipsis","span","expanded","lines","LineHeight","ExpandButton","button","focus"],"mappings":"4jBAWA,MAAMA,WAAa,CACjBC,QAAS,IACTC,OAAQ,IACRC,KAAM,IACNC,OAAQ,KAGV,MAAMC,gBAAkB,CACtBC,EAAG,IACHC,EAAG,IACHC,EAAG,KACHC,GAAI,GAGN,MAAMC,sBAAwBC,MAAuBA,yBAClDC,IACE,CACC,aACA,aACA,SACA,YACA,YACA,iBACA,YACA,aACA,UACA,UACA,QACA,SACA,oBACA,YACA,aACA,YACA,YACA,YACAC,SAASD,KAGf,MAAME,SAAYC,GAAiC,cACxCA,EAAQC,+BACGD,EAAQE,6CAEjBF,EAAQG,8CAGRH,EAAQC,2CAGRD,EAAQI,wBAIrB,MAAMC,aAAe,CACnBC,QAASC,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDT,SAAS,CACPE,MAAOO,EAAMC,MAAMC,OAAO,gBAC1BP,WAAYQ,UAASC,QAACJ,EAAMC,MAAMC,OAAO,iBAAiBG,QAAQ,IAAIC,WACtEV,cAAeI,EAAMC,MAAMC,OAAO,oBAClCR,gBAAiBM,EAAMC,MAAMC,OAAOK,eACjCP,EAAMR,YAGfgB,SAAUT,OAAGA,IAAA,CAAA,GAAA,KACRC,GACDT,SAAS,CACPE,MAAOO,EAAMC,MAAMC,OAAO,2BAC1BP,WAAYQ,UAASC,QAACJ,EAAMC,MAAMC,OAAO,4BAA4BO,OAAO,IAAIH,WAChFV,cAAeI,EAAMC,MAAMC,OAAO,4BAClCR,gBAAiBM,EAAMC,MAAMC,OAAOK,eACjCP,EAAMR,aAKV,MAAMkB,KAAOC,gBAAAA,QAAOC,IAAIC,WAA4B,CACzDC,kBAAmB3B,wBACnB0B,WAAA,CAAAE,YAAA,aAAAC,YAAA,mBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KACGX,GAAU,0CAGTA,EAAMiB,WAAa,gBAAgBjB,EAAMiB,cAAgB,WACzDjB,EAAMkB,UAAY,mBAAmBlB,EAAMkB,aAAe,WAC1DlB,EAAMmB,OAAS,gBAAgB1C,WAAWuB,EAAMmB,SAAWnB,EAAMmB,UAAY,WAC7EnB,EAAMoB,UAAY,eAAepB,EAAMoB,aAAe,WACtDpB,EAAMqB,UAAY,eAAerB,EAAMqB,aAAe,WACtDrB,EAAMsB,WAAa,gBAAgBxC,gBAAgBkB,EAAMsB,aAAetB,EAAMsB,cAAgB,WAC9FtB,EAAMuB,WAAa,gBAAgBvB,EAAMuB,cAAgB,WACzDvB,EAAMwB,UAAY,eAAexB,EAAMwB,aAAe,uCAEnCxB,EAAMyB,eAAiB,YAAc,iFAOzDzB,GACDA,EAAM0B,YACL1B,EAAM2B,UACP,iFAEkC3B,EAAM0B,WAAc,SAAW1B,EAAM0B,UAAY,uDAInFE,eAAAA,eACAC,iBAAgBA,kBAEf7B,GAAWA,EAAM8B,QAAUA,gBAAQ9B,EAAM8B,SAAW,OACpD9B,GAAyBP,MAAKA,MAAnBO,EAAMP,MAAcO,EAAMP,MAAeO,EAAMC,MAAM8B,aAG9D,MAAMC,aAAerB,gBAAAA,QAAOsB,KAAKpB,WAAoC,CAC1EC,kBAAoBzB,IAAa,CAAC,QAAS,WAAY,aAAaC,SAASD,KAC7EwB,WAAA,CAAAE,YAAA,qBAAAC,YAAA,mBAF0BL,CAE1B,CAAA,yDAAA,IAAA,KAKGX,IACAA,EAAMkC,UACP,iGAGwBlC,EAAMmC,0EAK7BnC,GACDA,EAAM0B,WACN,iFAEkC1B,EAAM0B,WAAc,SAAW1B,EAAM0B,UAAY,8DAK1EU,WAAazB,gBAAAA,QAAOsB,KAAIpB,WAAA,CAAAE,YAAA,mBAAAC,YAAA,mBAAXL,CAIzB,CAAA,+DAEM,MAAM0B,aAAe1B,gBAAAA,QAAO2B,OAAOzB,WAAoC,CAC5EC,kBAAoBzB,IAAa,CAAC,WAAY,WAAWC,SAASD,KAClEwB,WAAA,CAAAE,YAAA,qBAAAC,YAAA,mBAF0BL,CAE1B,CAAA,gSAAA,IAAA,KAkBGX,GAAWA,EAAMQ,SAAWX,aAAaW,SAAWX,aAAaC,SAElEyC,MAAKA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import styled,{css}from'styled-components';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{display}from'../../mixins/display.mjs';import{color}from'../../mixins/color.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';const WEIGHT_MAP={lighter:100,normal:400,bold:600,bolder:800};const LINE_HEIGHT_MAP={l:1.5,m:1.3,s:1.15,xs:1};const shouldForwardTextProp=createShouldForwardProp((o=>!['appearance','fontFamily','weight','fontStyle','transform','underlineLinks','textAlign','lineHeight','content','display','chars','quoted','showZeroMinorPart','separator','whiteSpace','wordBreak'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n &:hover {\n color: ${o.colorHover};\n }\n &:active {\n color: ${o.color};\n }\n &:disabled {\n color: ${o.colorDisabled};\n }\n`;const COLOR_SCHEMA={primary:css(["",""],(o=>template({color:o.theme.colors['content-link'],colorHover:tinycolor(o.theme.colors['content-link']).lighten(10).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,...o.palette}))),contrast:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],colorHover:tinycolor(o.theme.colors['content-oncolor-primary']).darken(10).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,...o.palette})))};const Root=styled.div.withConfig({shouldForwardProp:shouldForwardTextProp}).withConfig({displayName:"Text__Root",componentId:"ui__sc-s2fogy-0"})([""," "," "," "," ",""],(o=>`\n margin: 0;\n padding: 0;\n ${o.fontFamily?`font-family: ${o.fontFamily};`:''}\n ${o.transform?`text-transform: ${o.transform};`:''}\n ${o.weight?`font-weight: ${WEIGHT_MAP[o.weight]??o.weight};`:''}\n ${o.fontStyle?`font-style: ${o.fontStyle};`:''}\n ${o.textAlign?`text-align: ${o.textAlign};`:''}\n ${o.lineHeight?`line-height: ${LINE_HEIGHT_MAP[o.lineHeight]??o.lineHeight};`:''}\n ${o.whiteSpace?`white-space: ${o.whiteSpace};`:''}\n ${o.wordBreak?`word-break: ${o.wordBreak};`:''}\n a {\n text-decoration: ${o.underlineLinks?'underline':'none'};\n &:hover {\n text-decoration: none;\n }\n }\n `),responsiveSize,responsiveMargin,(o=>o.display?display(o.display):null),(o=>color(o.color?o.color:o.theme.textColor)));const TextEllipsis=styled.span.withConfig({shouldForwardProp:o=>!['lines','expanded'].includes(o)}).withConfig({displayName:"Text__TextEllipsis",componentId:"ui__sc-s2fogy-1"})(["box-sizing:border-box;display:block;position:relative;",""],(o=>!o.expanded&&`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${o.lines};\n overflow: hidden;\n text-overflow: ellipsis;\n `));const LineHeight=styled.span.withConfig({displayName:"Text__LineHeight",componentId:"ui__sc-s2fogy-2"})(["box-sizing:border-box;position:absolute;visibility:hidden;"]);const ExpandButton=styled.button.withConfig({shouldForwardProp:o=>!['contrast','palette'].includes(o)}).withConfig({displayName:"Text__ExpandButton",componentId:"ui__sc-s2fogy-3"})(["box-sizing:border-box;appearance:none;padding:0;border:0;font-size:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;margin-top:0.2em;text-decoration-line:underline;text-decoration-style:dashed;text-underline-offset:0.3em;cursor:pointer;&:disabled{cursor:not-allowed;}"," ",""],(o=>o.contrast?COLOR_SCHEMA.contrast:COLOR_SCHEMA.primary),focus);export{ExpandButton,LineHeight,Root,TextEllipsis};
|
|
1
|
+
import styled,{css}from'styled-components';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{display}from'../../mixins/display.mjs';import{color}from'../../mixins/color.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';const WEIGHT_MAP={lighter:100,normal:400,bold:600,bolder:800};const LINE_HEIGHT_MAP={l:1.5,m:1.3,s:1.15,xs:1};const shouldForwardTextProp=createShouldForwardProp((o=>!['appearance','fontFamily','weight','fontStyle','transform','underlineLinks','textAlign','lineHeight','content','display','chars','quoted','showZeroMinorPart','separator','whiteSpace','wordBreak','underline','ellipsis'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n &:hover {\n color: ${o.colorHover};\n }\n &:active {\n color: ${o.color};\n }\n &:disabled {\n color: ${o.colorDisabled};\n }\n`;const COLOR_SCHEMA={primary:css(["",""],(o=>template({color:o.theme.colors['content-link'],colorHover:tinycolor(o.theme.colors['content-link']).lighten(10).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,...o.palette}))),contrast:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],colorHover:tinycolor(o.theme.colors['content-oncolor-primary']).darken(10).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,...o.palette})))};const Root=styled.div.withConfig({shouldForwardProp:shouldForwardTextProp}).withConfig({displayName:"Text__Root",componentId:"ui__sc-s2fogy-0"})([""," "," "," "," "," ",""],(o=>`\n margin: 0;\n padding: 0;\n ${o.fontFamily?`font-family: ${o.fontFamily};`:''}\n ${o.transform?`text-transform: ${o.transform};`:''}\n ${o.weight?`font-weight: ${WEIGHT_MAP[o.weight]??o.weight};`:''}\n ${o.fontStyle?`font-style: ${o.fontStyle};`:''}\n ${o.textAlign?`text-align: ${o.textAlign};`:''}\n ${o.lineHeight?`line-height: ${LINE_HEIGHT_MAP[o.lineHeight]??o.lineHeight};`:''}\n ${o.whiteSpace?`white-space: ${o.whiteSpace};`:''}\n ${o.wordBreak?`word-break: ${o.wordBreak};`:''}\n a {\n text-decoration: ${o.underlineLinks?'underline':'none'};\n &:hover {\n text-decoration: none;\n }\n }\n `),(o=>o.underline&&!o.ellipsis&&`\n text-decoration-line: underline;\n text-decoration-style: ${typeof o.underline=='string'?o.underline:'solid'};\n text-underline-offset: 0.3em;\n `),responsiveSize,responsiveMargin,(o=>o.display?display(o.display):null),(o=>color(o.color?o.color:o.theme.textColor)));const TextEllipsis=styled.span.withConfig({shouldForwardProp:o=>!['lines','expanded','underline'].includes(o)}).withConfig({displayName:"Text__TextEllipsis",componentId:"ui__sc-s2fogy-1"})(["box-sizing:border-box;display:block;position:relative;"," ",""],(o=>!o.expanded&&`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${o.lines};\n overflow: hidden;\n text-overflow: ellipsis;\n `),(o=>o.underline&&`\n text-decoration-line: underline;\n text-decoration-style: ${typeof o.underline=='string'?o.underline:'solid'};\n text-underline-offset: 0.3em;\n `));const LineHeight=styled.span.withConfig({displayName:"Text__LineHeight",componentId:"ui__sc-s2fogy-2"})(["box-sizing:border-box;position:absolute;visibility:hidden;"]);const ExpandButton=styled.button.withConfig({shouldForwardProp:o=>!['contrast','palette'].includes(o)}).withConfig({displayName:"Text__ExpandButton",componentId:"ui__sc-s2fogy-3"})(["box-sizing:border-box;appearance:none;padding:0;border:0;font-size:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;margin-top:0.2em;text-decoration-line:underline;text-decoration-style:dashed;text-underline-offset:0.3em;cursor:pointer;&:disabled{cursor:not-allowed;}"," ",""],(o=>o.contrast?COLOR_SCHEMA.contrast:COLOR_SCHEMA.primary),focus);export{ExpandButton,LineHeight,Root,TextEllipsis};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { Color, CSSColor } from 'shared/types'\nimport type { StyledTextProps, ExpandButtonPalette, StyledTextEllipsisProps, StyledExpandButtonProps } from './types'\n\nconst WEIGHT_MAP = {\n lighter: 100,\n normal: 400,\n bold: 600,\n bolder: 800,\n}\n\nconst LINE_HEIGHT_MAP = {\n l: 1.5,\n m: 1.3,\n s: 1.15,\n xs: 1,\n}\n\nconst shouldForwardTextProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'appearance',\n 'fontFamily',\n 'weight',\n 'fontStyle',\n 'transform',\n 'underlineLinks',\n 'textAlign',\n 'lineHeight',\n 'content',\n 'display',\n 'chars',\n 'quoted',\n 'showZeroMinorPart',\n 'separator',\n 'whiteSpace',\n 'wordBreak',\n ].includes(propKey)\n)\n\nconst template = (palette: ExpandButtonPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n &:hover {\n color: ${palette.colorHover};\n }\n &:active {\n color: ${palette.color};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n primary: css<StyledExpandButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-link'],\n colorHover: tinycolor(props.theme.colors['content-link']).lighten(10).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n contrast: css<StyledExpandButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n colorHover: tinycolor(props.theme.colors['content-oncolor-primary']).darken(10).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledTextProps>({\n shouldForwardProp: shouldForwardTextProp,\n})`\n ${(props) => `\n margin: 0;\n padding: 0;\n ${props.fontFamily ? `font-family: ${props.fontFamily};` : ''}\n ${props.transform ? `text-transform: ${props.transform};` : ''}\n ${props.weight ? `font-weight: ${WEIGHT_MAP[props.weight] ?? props.weight};` : ''}\n ${props.fontStyle ? `font-style: ${props.fontStyle};` : ''}\n ${props.textAlign ? `text-align: ${props.textAlign};` : ''}\n ${props.lineHeight ? `line-height: ${LINE_HEIGHT_MAP[props.lineHeight] ?? props.lineHeight};` : ''}\n ${props.whiteSpace ? `white-space: ${props.whiteSpace};` : ''}\n ${props.wordBreak ? `word-break: ${props.wordBreak};` : ''}\n a {\n text-decoration: ${props.underlineLinks ? 'underline' : 'none'};\n &:hover {\n text-decoration: none;\n }\n }\n `}\n\n ${responsiveSize}\n ${responsiveMargin}\n\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.color ? color(props.color) : color(props.theme.textColor as Color))}\n`\n\nexport const TextEllipsis = styled.span.withConfig<StyledTextEllipsisProps>({\n shouldForwardProp: (propKey) => !['lines', 'expanded'].includes(propKey),\n})`\n box-sizing: border-box;\n display: block;\n position: relative;\n\n ${(props) =>\n !props.expanded &&\n `\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${props.lines};\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n`\n\nexport const LineHeight = styled.span`\n box-sizing: border-box;\n position: absolute;\n visibility: hidden;\n`\n\nexport const ExpandButton = styled.button.withConfig<StyledExpandButtonProps>({\n shouldForwardProp: (propKey) => !['contrast', 'palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: none;\n padding: 0;\n border: 0;\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n font-style: inherit;\n margin-top: 0.2em;\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 0.3em;\n cursor: pointer;\n &:disabled {\n cursor: not-allowed;\n }\n\n ${(props) => (props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.primary)}\n\n ${focus}\n`\n"],"names":["WEIGHT_MAP","lighter","normal","bold","bolder","LINE_HEIGHT_MAP","l","m","s","xs","shouldForwardTextProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","colorHover","colorDisabled","COLOR_SCHEMA","primary","css","props","theme","colors","tinycolor","lighten","toString","transparent","contrast","darken","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","fontFamily","transform","weight","fontStyle","textAlign","lineHeight","whiteSpace","wordBreak","underlineLinks","responsiveSize","responsiveMargin","display","textColor","TextEllipsis","span","expanded","lines","LineHeight","ExpandButton","button","focus"],"mappings":"gdAWA,MAAMA,WAAa,CACjBC,QAAS,IACTC,OAAQ,IACRC,KAAM,IACNC,OAAQ,KAGV,MAAMC,gBAAkB,CACtBC,EAAG,IACHC,EAAG,IACHC,EAAG,KACHC,GAAI,GAGN,MAAMC,sBAAwBC,yBAC3BC,IACE,CACC,aACA,aACA,SACA,YACA,YACA,iBACA,YACA,aACA,UACA,UACA,QACA,SACA,oBACA,YACA,aACA,
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { Color, CSSColor } from 'shared/types'\nimport type { StyledTextProps, ExpandButtonPalette, StyledTextEllipsisProps, StyledExpandButtonProps } from './types'\n\nconst WEIGHT_MAP = {\n lighter: 100,\n normal: 400,\n bold: 600,\n bolder: 800,\n}\n\nconst LINE_HEIGHT_MAP = {\n l: 1.5,\n m: 1.3,\n s: 1.15,\n xs: 1,\n}\n\nconst shouldForwardTextProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'appearance',\n 'fontFamily',\n 'weight',\n 'fontStyle',\n 'transform',\n 'underlineLinks',\n 'textAlign',\n 'lineHeight',\n 'content',\n 'display',\n 'chars',\n 'quoted',\n 'showZeroMinorPart',\n 'separator',\n 'whiteSpace',\n 'wordBreak',\n 'underline',\n 'ellipsis',\n ].includes(propKey)\n)\n\nconst template = (palette: ExpandButtonPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n &:hover {\n color: ${palette.colorHover};\n }\n &:active {\n color: ${palette.color};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n primary: css<StyledExpandButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-link'],\n colorHover: tinycolor(props.theme.colors['content-link']).lighten(10).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n contrast: css<StyledExpandButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n colorHover: tinycolor(props.theme.colors['content-oncolor-primary']).darken(10).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledTextProps>({\n shouldForwardProp: shouldForwardTextProp,\n})`\n ${(props) => `\n margin: 0;\n padding: 0;\n ${props.fontFamily ? `font-family: ${props.fontFamily};` : ''}\n ${props.transform ? `text-transform: ${props.transform};` : ''}\n ${props.weight ? `font-weight: ${WEIGHT_MAP[props.weight] ?? props.weight};` : ''}\n ${props.fontStyle ? `font-style: ${props.fontStyle};` : ''}\n ${props.textAlign ? `text-align: ${props.textAlign};` : ''}\n ${props.lineHeight ? `line-height: ${LINE_HEIGHT_MAP[props.lineHeight] ?? props.lineHeight};` : ''}\n ${props.whiteSpace ? `white-space: ${props.whiteSpace};` : ''}\n ${props.wordBreak ? `word-break: ${props.wordBreak};` : ''}\n a {\n text-decoration: ${props.underlineLinks ? 'underline' : 'none'};\n &:hover {\n text-decoration: none;\n }\n }\n `}\n\n ${(props) =>\n props.underline &&\n !props.ellipsis &&\n `\n text-decoration-line: underline;\n text-decoration-style: ${typeof props.underline === 'string' ? props.underline : 'solid'};\n text-underline-offset: 0.3em;\n `}\n\n ${responsiveSize}\n ${responsiveMargin}\n\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.color ? color(props.color) : color(props.theme.textColor as Color))}\n`\n\nexport const TextEllipsis = styled.span.withConfig<StyledTextEllipsisProps>({\n shouldForwardProp: (propKey) => !['lines', 'expanded', 'underline'].includes(propKey),\n})`\n box-sizing: border-box;\n display: block;\n position: relative;\n\n ${(props) =>\n !props.expanded &&\n `\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${props.lines};\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n\n ${(props) =>\n props.underline &&\n `\n text-decoration-line: underline;\n text-decoration-style: ${typeof props.underline === 'string' ? props.underline : 'solid'};\n text-underline-offset: 0.3em;\n `}\n`\n\nexport const LineHeight = styled.span`\n box-sizing: border-box;\n position: absolute;\n visibility: hidden;\n`\n\nexport const ExpandButton = styled.button.withConfig<StyledExpandButtonProps>({\n shouldForwardProp: (propKey) => !['contrast', 'palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: none;\n padding: 0;\n border: 0;\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n font-style: inherit;\n margin-top: 0.2em;\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 0.3em;\n cursor: pointer;\n &:disabled {\n cursor: not-allowed;\n }\n\n ${(props) => (props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.primary)}\n\n ${focus}\n`\n"],"names":["WEIGHT_MAP","lighter","normal","bold","bolder","LINE_HEIGHT_MAP","l","m","s","xs","shouldForwardTextProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","colorHover","colorDisabled","COLOR_SCHEMA","primary","css","props","theme","colors","tinycolor","lighten","toString","transparent","contrast","darken","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","fontFamily","transform","weight","fontStyle","textAlign","lineHeight","whiteSpace","wordBreak","underlineLinks","underline","ellipsis","responsiveSize","responsiveMargin","display","textColor","TextEllipsis","span","expanded","lines","LineHeight","ExpandButton","button","focus"],"mappings":"gdAWA,MAAMA,WAAa,CACjBC,QAAS,IACTC,OAAQ,IACRC,KAAM,IACNC,OAAQ,KAGV,MAAMC,gBAAkB,CACtBC,EAAG,IACHC,EAAG,IACHC,EAAG,KACHC,GAAI,GAGN,MAAMC,sBAAwBC,yBAC3BC,IACE,CACC,aACA,aACA,SACA,YACA,YACA,iBACA,YACA,aACA,UACA,UACA,QACA,SACA,oBACA,YACA,aACA,YACA,YACA,YACAC,SAASD,KAGf,MAAME,SAAYC,GAAiC,cACxCA,EAAQC,+BACGD,EAAQE,6CAEjBF,EAAQG,8CAGRH,EAAQC,2CAGRD,EAAQI,wBAIrB,MAAMC,aAAe,CACnBC,QAASC,IAAG,CAAA,GAAA,KACPC,GACDT,SAAS,CACPE,MAAOO,EAAMC,MAAMC,OAAO,gBAC1BP,WAAYQ,UAAUH,EAAMC,MAAMC,OAAO,iBAAiBE,QAAQ,IAAIC,WACtET,cAAeI,EAAMC,MAAMC,OAAO,oBAClCR,gBAAiBM,EAAMC,MAAMC,OAAOI,eACjCN,EAAMR,YAGfe,SAAUR,IAAG,CAAA,GAAA,KACRC,GACDT,SAAS,CACPE,MAAOO,EAAMC,MAAMC,OAAO,2BAC1BP,WAAYQ,UAAUH,EAAMC,MAAMC,OAAO,4BAA4BM,OAAO,IAAIH,WAChFT,cAAeI,EAAMC,MAAMC,OAAO,4BAClCR,gBAAiBM,EAAMC,MAAMC,OAAOI,eACjCN,EAAMR,aAKV,MAAMiB,KAAOC,OAAOC,IAAIC,WAA4B,CACzDC,kBAAmB1B,wBACnByB,WAAA,CAAAE,YAAA,aAAAC,YAAA,mBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KACGV,GAAU,0CAGTA,EAAMgB,WAAa,gBAAgBhB,EAAMgB,cAAgB,WACzDhB,EAAMiB,UAAY,mBAAmBjB,EAAMiB,aAAe,WAC1DjB,EAAMkB,OAAS,gBAAgBzC,WAAWuB,EAAMkB,SAAWlB,EAAMkB,UAAY,WAC7ElB,EAAMmB,UAAY,eAAenB,EAAMmB,aAAe,WACtDnB,EAAMoB,UAAY,eAAepB,EAAMoB,aAAe,WACtDpB,EAAMqB,WAAa,gBAAgBvC,gBAAgBkB,EAAMqB,aAAerB,EAAMqB,cAAgB,WAC9FrB,EAAMsB,WAAa,gBAAgBtB,EAAMsB,cAAgB,WACzDtB,EAAMuB,UAAY,eAAevB,EAAMuB,aAAe,uCAEnCvB,EAAMwB,eAAiB,YAAc,iFAOzDxB,GACDA,EAAMyB,YACLzB,EAAM0B,UACP,iFAEkC1B,EAAMyB,WAAc,SAAWzB,EAAMyB,UAAY,uDAInFE,eACAC,kBAEC5B,GAAWA,EAAM6B,QAAUA,QAAQ7B,EAAM6B,SAAW,OACpD7B,GAAyBP,MAAdO,EAAMP,MAAcO,EAAMP,MAAeO,EAAMC,MAAM6B,aAG9D,MAAMC,aAAerB,OAAOsB,KAAKpB,WAAoC,CAC1EC,kBAAoBxB,IAAa,CAAC,QAAS,WAAY,aAAaC,SAASD,KAC7EuB,WAAA,CAAAE,YAAA,qBAAAC,YAAA,mBAF0BL,CAE1B,CAAA,yDAAA,IAAA,KAKGV,IACAA,EAAMiC,UACP,iGAGwBjC,EAAMkC,0EAK7BlC,GACDA,EAAMyB,WACN,iFAEkCzB,EAAMyB,WAAc,SAAWzB,EAAMyB,UAAY,8DAK1EU,WAAazB,OAAOsB,KAAIpB,WAAA,CAAAE,YAAA,mBAAAC,YAAA,mBAAXL,CAIzB,CAAA,+DAEM,MAAM0B,aAAe1B,OAAO2B,OAAOzB,WAAoC,CAC5EC,kBAAoBxB,IAAa,CAAC,WAAY,WAAWC,SAASD,KAClEuB,WAAA,CAAAE,YAAA,qBAAAC,YAAA,mBAF0BL,CAE1B,CAAA,gSAAA,IAAA,KAkBGV,GAAWA,EAAMO,SAAWV,aAAaU,SAAWV,aAAaC,SAElEwC"}
|
package/dts/index.d.ts
CHANGED
|
@@ -1130,6 +1130,8 @@ DisplayProperty, ColorProperty, Omit<React.HTMLAttributes<HTMLElement>, 'color'>
|
|
|
1130
1130
|
whiteSpace?: string;
|
|
1131
1131
|
/** Значение для `word-break` */
|
|
1132
1132
|
wordBreak?: string;
|
|
1133
|
+
/** Использовать подчеркивание */
|
|
1134
|
+
underline?: boolean | 'solid' | 'dashed';
|
|
1133
1135
|
/** @ignore */
|
|
1134
1136
|
ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
|
|
1135
1137
|
/** @ignore @deprecated Use Anchor interface */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@foxford/ui",
|
|
3
|
-
"version": "2.57.
|
|
3
|
+
"version": "2.57.1-beta-a74b35e-20241220",
|
|
4
4
|
"description": "UI components library",
|
|
5
5
|
"bugs": {
|
|
6
6
|
"url": "https://github.com/foxford/ui/issues"
|
|
@@ -31,11 +31,12 @@
|
|
|
31
31
|
"react-router-dom": ">=5.x.x",
|
|
32
32
|
"styled-components": "5.x"
|
|
33
33
|
},
|
|
34
|
-
"main": "index.js",
|
|
35
|
-
"module": "index.mjs",
|
|
36
|
-
"types": "dts/index.d.ts",
|
|
34
|
+
"main": "./index.js",
|
|
35
|
+
"module": "./index.mjs",
|
|
36
|
+
"types": "./dts/index.d.ts",
|
|
37
37
|
"exports": {
|
|
38
38
|
".": {
|
|
39
|
+
"types": "./dts/index.d.ts",
|
|
39
40
|
"require": "./index.js",
|
|
40
41
|
"default": "./index.mjs"
|
|
41
42
|
},
|
|
@@ -62,3 +63,4 @@
|
|
|
62
63
|
"theme"
|
|
63
64
|
]
|
|
64
65
|
}
|
|
66
|
+
|