npm - @skbkontur/react-ui - Versions diffs - 0.0.0-1ee663e1d9 → 0.0.0-1fb0cccdc2 - Mend

@skbkontur/react-ui 0.0.0-1ee663e1d9 → 0.0.0-1fb0cccdc2

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.

Files changed (2369) hide show

package/components/Tabs/Tab/Tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Tab.tsx"],"names":["React","invariant","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","keyListener","isFunctionalComponent","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","TabsContext","TabsContextDefaultValue","styles","horizontalStyles","verticalStyles","globalClasses","TabDataTids","root","Tab","props","context","getProps","defaultProps","state","focusedByKeyboard","tabComponent","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","component","onClick","defaultPrevented","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","isTabPressed","isArrowPressed","setState","handleBlur","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","children","ariaDescribedby","Component","isActive","isVertical","vertical","orientationStyles","setRootNode","active","focus","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport invariant from 'invariant';\n\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { TabsContext, TabsContextType, TabsContextDefaultValue } from './TabsContext';\nimport { styles, horizontalStyles, verticalStyles, globalClasses } from './Tab.styles';\n\nexport interface TabIndicators {\n error: boolean;\n warning: boolean;\n success: boolean;\n primary: boolean;\n disabled: boolean;\n}\n\nexport const TabDataTids = {\n root: 'Tab__root',\n} as const;\n\nexport interface TabProps<T extends string = string> extends CommonProps {\n /*\n Tab content\n /\n children?: React.ReactNode;\n\n /\n Component to use as a tab\n /\n component?: React.ComponentType<any> \| string;\n\n /\n Link href\n /\n href?: string;\n\n /\n Tab identifier\n /\n id?: T;\n\n /\n Click event\n /\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /\n Click event\n /\n onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n /\n Disabled indicator\n /\n disabled?: boolean;\n\n /\n Состояние валидации при ошибке.\n /\n error?: boolean;\n\n /\n Состояние валидации при предупреждении.\n /\n warning?: boolean;\n\n /\n Success indicator\n /\n success?: boolean;\n\n /\n Primary indicator\n /\n primary?: boolean;\n\n /\n Style property\n /\n style?: React.CSSProperties;\n\n /\n Атрибут для указания id элемента(-ов), описывающих его\n /\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport interface TabState {\n focusedByKeyboard: boolean;\n}\n\ntype DefaultProps = Required<Pick<TabProps, 'component' \| 'href'>>;\n\n/\n Tab element of Tabs component\n \n Can be used for creating custom tabs\n * ```js\n \n const RouteTab = (props) => (\n * <Tab id={props.to} component={RouteLink} {...props}/>\n * )\n \n const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>\n * ```\n \n Works only inside Tabs component, otherwise throws\n */\n@rootNode\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n public static __KONTUR_REACT_UI__ = 'Tab';\n\n public static contextType = TabsContext;\n public context: TabsContextType = this.context;\n\n public static defaultProps: DefaultProps = {\n component: 'a',\n href: '',\n };\n\n private getProps = createPropsGetter(Tab.defaultProps);\n\n public state: TabState = {\n focusedByKeyboard: false,\n };\n\n private theme!: Theme;\n private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n private setRootNode!: TSetRootNode;\n\n constructor(props: TabProps<T>) {\n super(props);\n invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n }\n\n public componentDidMount() {\n const id = this.getId();\n if (typeof id === 'string') {\n this.context.addTab(id, this.getTabInstance);\n }\n }\n\n public componentDidUpdate() {\n if (this.context.activeTab === this.props.id) {\n this.context.notifyUpdate();\n }\n }\n\n public componentWillUnmount() {\n const id = this.getId();\n if (typeof id === 'string') {\n this.context.removeTab(id);\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getIndicators() {\n return {\n error: Boolean(this.props.error),\n warning: Boolean(this.props.warning),\n success: Boolean(this.props.success),\n primary: Boolean(this.props.primary),\n disabled: Boolean(this.props.disabled),\n };\n }\n\n public getUnderlyingNode = () => this.tabComponent;\n\n private renderMain() {\n const { children, disabled, error, warning, success, primary, 'aria-describedby': ariaDescribedby } = this.props;\n const { component: Component, href } = this.getProps();\n\n let isActive = false;\n let isVertical = false;\n\n const id = this.getId();\n if (typeof id === 'string') {\n isActive = this.context.activeTab === this.getId();\n isVertical = this.context.vertical;\n }\n const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <Component\n data-tid={TabDataTids.root}\n className={cx({\n [styles.root(this.theme)]: true,\n [styles.vertical(this.theme)]: !!isVertical,\n [orientationStyles.primary(this.theme)]: !!primary,\n [orientationStyles.success(this.theme)]: !!success,\n [orientationStyles.warning(this.theme)]: !!warning,\n [orientationStyles.error(this.theme)]: !!error,\n [styles.active()]: !!isActive,\n [orientationStyles.active(this.theme)]: !!isActive,\n [styles.disabled(this.theme)]: !!disabled,\n [orientationStyles.disabled()]: !!disabled,\n })}\n onBlur={this.handleBlur}\n onClick={this.switchTab}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n tabIndex={disabled ? -1 : 0}\n ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n href={href}\n aria-describedby={ariaDescribedby}\n >\n <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n {this.state.focusedByKeyboard && <div className={cx(styles.focus(this.theme), globalClasses.focus)} />}\n </Component>\n </CommonWrapper>\n );\n }\n\n private getId = () => this.props.id \|\| this.getProps().href;\n\n private refTabComponent = (instance: React.ReactElement<any>) => {\n this.tabComponent = instance;\n };\n\n private getTabInstance = () => this;\n\n private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n if (this.props.disabled) {\n event.preventDefault();\n return;\n }\n const { href, component } = this.getProps();\n\n const id = this.props.id \|\| href;\n if (this.props.onClick) {\n this.props.onClick(event);\n if (event.defaultPrevented) {\n return;\n }\n }\n if (typeof id === 'string') {\n this.context.switchTab(id);\n }\n if (component === 'a' && !href) {\n event.preventDefault();\n }\n };\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (this.props.disabled) {\n return;\n }\n\n if (this.props.onKeyDown) {\n this.props.onKeyDown(e);\n if (e.defaultPrevented) {\n return;\n }\n }\n const id = this.getId();\n if (typeof id !== 'string') {\n return;\n }\n if (!isKeyArrow(e)) {\n return;\n }\n e.preventDefault();\n const delta = isKeyArrowLeft(e) \|\| isKeyArrowUp(e) ? -1 : 1;\n this.context.shiftFocus(id, delta);\n };\n\n private handleFocus = () => {\n if (this.props.disabled) {\n return;\n }\n\n // focus event fires before keyDown eventlistener\n // so we should check focusKeyPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed \|\| keyListener.isArrowPressed) {\n this.setState({ focusedByKeyboard: true });\n }\n });\n };\n\n private handleBlur = () => {\n if (this.props.disabled) {\n return;\n }\n\n this.setState({ focusedByKeyboard: false });\n };\n}\n"]}
1	+ {"version":3,"sources":["Tab.tsx"],"names":["React","invariant","globalObject","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","keyListener","isFunctionalComponent","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","getVisualStateDataAttributes","TabsContext","TabsContextDefaultValue","globalClasses","horizontalStyles","styles","verticalStyles","TabDataTids","root","Tab","props","context","getProps","defaultProps","state","focusedByKeyboard","tabComponent","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","component","onClick","defaultPrevented","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","isTabPressed","isArrowPressed","setState","handleBlur","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","children","ariaDescribedby","ariaLabel","Component","isActive","isVertical","vertical","orientationStyles","setRootNode","active","rootSmall","size","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","focus","focusSmall","focusMedium","focusLarge","__KONTUR_REACT_UI__","displayName","contextType"],"mappings":"iPAAA,OAAOA,KAAP,MAAsC,OAAtC;AACA,OAAOC,SAAP,MAAsB,WAAtB;AACA,SAASC,YAAT,QAA6B,0BAA7B;;AAEA,SAASC,cAAT,QAA+B,+BAA/B;AACA,SAASC,UAAT,EAAqBC,cAArB,EAAqCC,YAArC,QAAyD,uCAAzD;AACA,SAASC,WAAT,QAA4B,8BAA5B;;AAEA,SAASC,qBAAT,QAAsC,iBAAtC;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;;AAEA,SAASC,4BAAT,QAA6C,iEAA7C;;AAEA,SAASC,WAAT,EAAsBC,uBAAtB,QAAsE,eAAtE;AACA,SAASC,aAAT,EAAwBC,gBAAxB,EAA0CC,MAA1C,EAAkDC,cAAlD,QAAwE,cAAxE;;;;;;;;;;AAUA,OAAO,IAAMC,WAAW,GAAG;AACzBC,EAAAA,IAAI,EAAE,WADmB,EAApB;;;AAIP;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,OAJA;AACA;AACA,GAEA,IAAaC,GAAb,GADCX,QACD;;;;;;;;;;;;;;;;;;;;AAsBE,eAAYY,KAAZ,EAAgC;AAC9B,wCAAMA,KAAN,UAD8B,MAjBzBC,OAiByB,GAjBE,MAAKA,OAiBP,OAVxBC,QAUwB,GAVbb,iBAAiB,CAACU,GAAG,CAACI,YAAL,CAUJ,OARzBC,KAQyB,GARP,EACvBC,iBAAiB,EAAE,KADI,EAQO,OAHxBC,YAGwB,GAH6B,IAG7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CzBC,IAAAA,iBA9CyB,GA8CL,oBAAM,MAAKD,YAAX,EA9CK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwHxBE,IAAAA,KAxHwB,GAwHhB,oBAAM,MAAKR,KAAL,CAAWS,EAAX,IAAiB,MAAKP,QAAL,GAAgBQ,IAAvC,EAxHgB;;AA0HxBC,IAAAA,eA1HwB,GA0HN,UAACC,QAAD,EAAuC;AAC/D,YAAKN,YAAL,GAAoBM,QAApB;AACD,KA5H+B;;AA8HxBC,IAAAA,cA9HwB,GA8HP,mDA9HO;;AAgIxBC,IAAAA,SAhIwB,GAgIZ,UAACC,KAAD,EAA0C;AAC5D,UAAI,MAAKf,KAAL,CAAWgB,QAAf,EAAyB;AACvBD,QAAAA,KAAK,CAACE,cAAN;AACA;AACD;AACD,2BAA4B,MAAKf,QAAL,EAA5B,CAAQQ,IAAR,kBAAQA,IAAR,CAAcQ,SAAd,kBAAcA,SAAd;;AAEA,UAAMT,EAAE,GAAG,MAAKT,KAAL,CAAWS,EAAX,IAAiBC,IAA5B;AACA,UAAI,MAAKV,KAAL,CAAWmB,OAAf,EAAwB;AACtB,cAAKnB,KAAL,CAAWmB,OAAX,CAAmBJ,KAAnB;AACA,YAAIA,KAAK,CAACK,gBAAV,EAA4B;AAC1B;AACD;AACF;AACD,UAAI,OAAOX,EAAP,KAAc,QAAlB,EAA4B;AAC1B,cAAKR,OAAL,CAAaa,SAAb,CAAuBL,EAAvB;AACD;AACD,UAAIS,SAAS,KAAK,GAAd,IAAqB,CAACR,IAA1B,EAAgC;AAC9BK,QAAAA,KAAK,CAACE,cAAN;AACD;AACF,KApJ+B;;AAsJxBI,IAAAA,aAtJwB,GAsJR,UAACC,CAAD,EAAyC;AAC/D,UAAI,MAAKtB,KAAL,CAAWgB,QAAf,EAAyB;AACvB;AACD;;AAED,UAAI,MAAKhB,KAAL,CAAWuB,SAAf,EAA0B;AACxB,cAAKvB,KAAL,CAAWuB,SAAX,CAAqBD,CAArB;AACA,YAAIA,CAAC,CAACF,gBAAN,EAAwB;AACtB;AACD;AACF;AACD,UAAMX,EAAE,GAAG,MAAKD,KAAL,EAAX;AACA,UAAI,OAAOC,EAAP,KAAc,QAAlB,EAA4B;AAC1B;AACD;AACD,UAAI,CAAC7B,UAAU,CAAC0C,CAAD,CAAf,EAAoB;AAClB;AACD;AACDA,MAAAA,CAAC,CAACL,cAAF;AACA,UAAMO,KAAK,GAAG3C,cAAc,CAACyC,CAAD,CAAd,IAAqBxC,YAAY,CAACwC,CAAD,CAAjC,GAAuC,CAAC,CAAxC,GAA4C,CAA1D;AACA,YAAKrB,OAAL,CAAawB,UAAb,CAAwBhB,EAAxB,EAA4Be,KAA5B;AACD,KA3K+B;;AA6KxBE,IAAAA,WA7KwB,GA6KV,YAAM;AAC1B,UAAI,MAAK1B,KAAL,CAAWgB,QAAf,EAAyB;AACvB;AACD;;AAED;AACA;AACAtC,MAAAA,YAAY,CAACiD,qBAAb,oBAAAjD,YAAY,CAACiD,qBAAb,CAAqC,YAAM;AACzC,YAAI5C,WAAW,CAAC6C,YAAZ,IAA4B7C,WAAW,CAAC8C,cAA5C,EAA4D;AAC1D,gBAAKC,QAAL,CAAc,EAAEzB,iBAAiB,EAAE,IAArB,EAAd;AACD;AACF,OAJD;AAKD,KAzL+B;;AA2LxB0B,IAAAA,UA3LwB,GA2LX,YAAM;AACzB,UAAI,MAAK/B,KAAL,CAAWgB,QAAf,EAAyB;AACvB;AACD;;AAED,YAAKc,QAAL,CAAc,EAAEzB,iBAAiB,EAAE,KAArB,EAAd;AACD,KAjM+B,CAE9B5B,SAAS,CAAC,MAAKwB,OAAL,KAAiBT,uBAAlB,EAA2C,4CAA3C,CAAT,CAF8B,aAG/B,CAzBH,kCA2BSwC,iBA3BT,GA2BE,6BAA2B,CACzB,IAAMvB,EAAE,GAAG,KAAKD,KAAL,EAAX,CACA,IAAI,OAAOC,EAAP,KAAc,QAAlB,EAA4B,CAC1B,KAAKR,OAAL,CAAagC,MAAb,CAAoBxB,EAApB,EAAwB,KAAKI,cAA7B,EACD,CACF,CAhCH,QAkCSqB,kBAlCT,GAkCE,8BAA4B,CAC1B,IAAI,KAAKjC,OAAL,CAAakC,SAAb,KAA2B,KAAKnC,KAAL,CAAWS,EAA1C,EAA8C,CAC5C,KAAKR,OAAL,CAAamC,YAAb,GACD,CACF,CAtCH,QAwCSC,oBAxCT,GAwCE,gCAA8B,CAC5B,IAAM5B,EAAE,GAAG,KAAKD,KAAL,EAAX,CACA,IAAI,OAAOC,EAAP,KAAc,QAAlB,EAA4B,CAC1B,KAAKR,OAAL,CAAaqC,SAAb,CAAuB7B,EAAvB,EACD,CACF,CA7CH,QA+CS8B,MA/CT,GA+CE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CAxDH,QA0DSC,aA1DT,GA0DE,yBAAuB,CACrB,OAAO,EACLC,KAAK,EAAEC,OAAO,CAAC,KAAK5C,KAAL,CAAW2C,KAAZ,CADT,EAELE,OAAO,EAAED,OAAO,CAAC,KAAK5C,KAAL,CAAW6C,OAAZ,CAFX,EAGLC,OAAO,EAAEF,OAAO,CAAC,KAAK5C,KAAL,CAAW8C,OAAZ,CAHX,EAILC,OAAO,EAAEH,OAAO,CAAC,KAAK5C,KAAL,CAAW+C,OAAZ,CAJX,EAKL/B,QAAQ,EAAE4B,OAAO,CAAC,KAAK5C,KAAL,CAAWgB,QAAZ,CALZ,EAAP,CAOD,CAlEH,QAsEUyB,UAtEV,GAsEE,sBAAqB,eACnB,kBASI,KAAKzC,KATT,CACEgD,QADF,eACEA,QADF,CAEEhC,QAFF,eAEEA,QAFF,CAGE2B,KAHF,eAGEA,KAHF,CAIEE,OAJF,eAIEA,OAJF,CAKEC,OALF,eAKEA,OALF,CAMEC,OANF,eAMEA,OANF,CAOsBE,eAPtB,eAOE,kBAPF,EAQgBC,SARhB,eAQE,YARF,EAUA,sBAAuC,KAAKhD,QAAL,EAAvC,CAAmBiD,SAAnB,mBAAQjC,SAAR,CAA8BR,IAA9B,mBAA8BA,IAA9B,CAEA,IAAI0C,QAAQ,GAAG,KAAf,CACA,IAAIC,UAAU,GAAG,KAAjB,CAEA,IAAM5C,EAAE,GAAG,KAAKD,KAAL,EAAX,CACA,IAAI,OAAOC,EAAP,KAAc,QAAlB,EAA4B,CAC1B2C,QAAQ,GAAG,KAAKnD,OAAL,CAAakC,SAAb,KAA2B,KAAK3B,KAAL,EAAtC,CACA6C,UAAU,GAAG,KAAKpD,OAAL,CAAaqD,QAA1B,CACD,CACD,IAAMC,iBAAiB,GAAGF,UAAU,GAAGzD,cAAH,GAAoBF,gBAAxD,CAEA,oBACE,oBAAC,aAAD,aACE,WAAW,EAAE,KAAK8D,WADpB,IAEMlE,4BAA4B,CAAC,EAAEmE,MAAM,EAAEL,QAAV,EAAoBpC,QAAQ,EAARA,QAApB,EAAD,CAFlC,EAGM,KAAKhB,KAHX,gBAKE,oBAAC,SAAD,IACE,YAAUH,WAAW,CAACC,IADxB,EAEE,SAAS,EAAEX,EAAE,gBACVQ,MAAM,CAAC+D,SAAP,CAAiB,KAAKlB,KAAtB,CADU,IACqB,KAAKvC,OAAL,CAAa0D,IAAb,KAAsB,OAD3C,MAEVhE,MAAM,CAACiE,UAAP,CAAkB,KAAKpB,KAAvB,CAFU,IAEsB,KAAKvC,OAAL,CAAa0D,IAAb,KAAsB,QAF5C,MAGVhE,MAAM,CAACkE,SAAP,CAAiB,KAAKrB,KAAtB,CAHU,IAGqB,KAAKvC,OAAL,CAAa0D,IAAb,KAAsB,OAH3C,MAIVhE,MAAM,CAACmE,aAAP,CAAqB,KAAKtB,KAA1B,CAJU,IAIyB,CAAC,CAACa,UAAF,IAAgB,KAAKpD,OAAL,CAAa0D,IAAb,KAAsB,OAJ/D,MAKVhE,MAAM,CAACoE,cAAP,CAAsB,KAAKvB,KAA3B,CALU,IAK0B,CAAC,CAACa,UAAF,IAAgB,KAAKpD,OAAL,CAAa0D,IAAb,KAAsB,QALhE,MAMVhE,MAAM,CAACqE,aAAP,CAAqB,KAAKxB,KAA1B,CANU,IAMyB,CAAC,CAACa,UAAF,IAAgB,KAAKpD,OAAL,CAAa0D,IAAb,KAAsB,OAN/D,MAOVJ,iBAAiB,CAACR,OAAlB,CAA0B,KAAKP,KAA/B,CAPU,IAO8B,CAAC,CAACO,OAPhC,MAQVQ,iBAAiB,CAACT,OAAlB,CAA0B,KAAKN,KAA/B,CARU,IAQ8B,CAAC,CAACM,OARhC,MASVS,iBAAiB,CAACV,OAAlB,CAA0B,KAAKL,KAA/B,CATU,IAS8B,CAAC,CAACK,OAThC,MAUVU,iBAAiB,CAACZ,KAAlB,CAAwB,KAAKH,KAA7B,CAVU,IAU4B,CAAC,CAACG,KAV9B,MAWVhD,MAAM,CAAC8D,MAAP,EAXU,IAWQ,CAAC,CAACL,QAXV,MAYVG,iBAAiB,CAACE,MAAlB,CAAyB,KAAKjB,KAA9B,CAZU,IAY6B,CAAC,CAACY,QAZ/B,MAaVzD,MAAM,CAACqB,QAAP,CAAgB,KAAKwB,KAArB,CAbU,IAaoB,CAAC,CAACxB,QAbtB,MAcVuC,iBAAiB,CAACvC,QAAlB,EAdU,IAcqB,CAAC,CAACA,QAdvB,OAFf,EAkBE,MAAM,EAAE,KAAKe,UAlBf,EAmBE,OAAO,EAAE,KAAKjB,SAnBhB,EAoBE,OAAO,EAAE,KAAKY,WApBhB,EAqBE,SAAS,EAAE,KAAKL,aArBlB,EAsBE,QAAQ,EAAEL,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAtB5B,EAuBE,GAAG,EAAEhC,qBAAqB,CAACmE,SAAD,CAArB,GAAmC,IAAnC,GAA0C,KAAKxC,eAvBtD,EAwBE,IAAI,EAAED,IAxBR,EAyBE,oBAAkBuC,eAzBpB,EA0BE,cAAYC,SA1Bd,iBA4BE,oBAAC,cAAD,IAAgB,QAAQ,EAAE,KAAKjD,OAAL,CAAamC,YAAvC,IAAsDY,QAAtD,CA5BF,EA6BG,KAAK5C,KAAL,CAAWC,iBAAX,iBACC,6BACE,SAAS,EAAElB,EAAE,CAACM,aAAa,CAACwE,KAAf,mBACVtE,MAAM,CAACuE,UAAP,CAAkB,KAAK1B,KAAvB,CADU,IACsB,KAAKvC,OAAL,CAAa0D,IAAb,KAAsB,OAD5C,OAEVhE,MAAM,CAACwE,WAAP,CAAmB,KAAK3B,KAAxB,CAFU,IAEuB,KAAKvC,OAAL,CAAa0D,IAAb,KAAsB,QAF7C,OAGVhE,MAAM,CAACyE,UAAP,CAAkB,KAAK5B,KAAvB,CAHU,IAGsB,KAAKvC,OAAL,CAAa0D,IAAb,KAAsB,OAH5C,QADf,GA9BJ,CALF,CADF,CA+CD,CA5IH,cAAoDnF,KAAK,CAAC2E,SAA1D,WACgBkB,mBADhB,GACsC,KADtC,UAEgBC,WAFhB,GAE8B,KAF9B,UAIgBC,WAJhB,GAI8BhF,WAJ9B,UAOgBY,YAPhB,GAO6C,EACzCe,SAAS,EAAE,GAD8B,EAEzCR,IAAI,EAAE,EAFmC,EAP7C","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport invariant from 'invariant';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { SizeProp } from '../../lib/types/props';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\n\nimport { TabsContext, TabsContextDefaultValue, TabsContextType } from './TabsContext';\nimport { globalClasses, horizontalStyles, styles, verticalStyles } from './Tab.styles';\n\nexport interface TabIndicators {\n error: boolean;\n warning: boolean;\n success: boolean;\n primary: boolean;\n disabled: boolean;\n}\n\nexport const TabDataTids = {\n root: 'Tab__root',\n} as const;\n\n/*\n @deprecated use SizeProp\n /\nexport type TabSize = SizeProp;\n\nexport interface TabProps<T extends string = string>\n extends Pick<AriaAttributes, 'aria-label' \| 'aria-describedby'>,\n CommonProps {\n /\n Позволяет передавать свой компонент, строку или функцию, которая заменит собой элемент используемый в компоненте по умолчанию. Реализует паттерн [render prop](https://www.patterns.dev/posts/render-props-pattern).\n /\n component?: React.ComponentType<any> \| string;\n\n /\n `HTML`-аттрибут `href`.\n /\n href?: string;\n\n /\n Уникальный идентификатор таба. По нему компонент `<Tabs />` определяет какой `<Tab />` сейчас выбран.\n /\n id?: T;\n\n /\n `HTML`-событие `onclick`.\n /\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /\n `HTML`-событие `onkeydown`.\n /\n onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n /\n Переводит компонент в отключенное состояние.\n /\n disabled?: boolean;\n\n /\n Визуальное состояние ошибки.\n /\n error?: boolean;\n\n /\n Визуальное состояние предупреждения.\n /\n warning?: boolean;\n\n /\n Визуальное состояние успеха.\n /\n success?: boolean;\n\n /\n Визуальное состояние главного элемента.\n /\n primary?: boolean;\n}\n\nexport interface TabState {\n focusedByKeyboard: boolean;\n}\n\ntype DefaultProps = Required<Pick<TabProps, 'component' \| 'href'>>;\n\n/\n Вложенный элемент компонента `<Tabs />`.\n */\n@rootNode\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n public static __KONTUR_REACT_UI__ = 'Tab';\n public static displayName = 'Tab';\n\n public static contextType = TabsContext;\n public context: TabsContextType = this.context;\n\n public static defaultProps: DefaultProps = {\n component: 'a',\n href: '',\n };\n\n private getProps = createPropsGetter(Tab.defaultProps);\n\n public state: TabState = {\n focusedByKeyboard: false,\n };\n\n private theme!: Theme;\n private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n private setRootNode!: TSetRootNode;\n\n constructor(props: TabProps<T>) {\n super(props);\n invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n }\n\n public componentDidMount() {\n const id = this.getId();\n if (typeof id === 'string') {\n this.context.addTab(id, this.getTabInstance);\n }\n }\n\n public componentDidUpdate() {\n if (this.context.activeTab === this.props.id) {\n this.context.notifyUpdate();\n }\n }\n\n public componentWillUnmount() {\n const id = this.getId();\n if (typeof id === 'string') {\n this.context.removeTab(id);\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getIndicators() {\n return {\n error: Boolean(this.props.error),\n warning: Boolean(this.props.warning),\n success: Boolean(this.props.success),\n primary: Boolean(this.props.primary),\n disabled: Boolean(this.props.disabled),\n };\n }\n\n public getUnderlyingNode = () => this.tabComponent;\n\n private renderMain() {\n const {\n children,\n disabled,\n error,\n warning,\n success,\n primary,\n 'aria-describedby': ariaDescribedby,\n 'aria-label': ariaLabel,\n } = this.props;\n const { component: Component, href } = this.getProps();\n\n let isActive = false;\n let isVertical = false;\n\n const id = this.getId();\n if (typeof id === 'string') {\n isActive = this.context.activeTab === this.getId();\n isVertical = this.context.vertical;\n }\n const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n return (\n <CommonWrapper\n rootNodeRef={this.setRootNode}\n {...getVisualStateDataAttributes({ active: isActive, disabled })}\n {...this.props}\n >\n <Component\n data-tid={TabDataTids.root}\n className={cx({\n [styles.rootSmall(this.theme)]: this.context.size === 'small',\n [styles.rootMedium(this.theme)]: this.context.size === 'medium',\n [styles.rootLarge(this.theme)]: this.context.size === 'large',\n [styles.verticalSmall(this.theme)]: !!isVertical && this.context.size === 'small',\n [styles.verticalMedium(this.theme)]: !!isVertical && this.context.size === 'medium',\n [styles.verticalLarge(this.theme)]: !!isVertical && this.context.size === 'large',\n [orientationStyles.primary(this.theme)]: !!primary,\n [orientationStyles.success(this.theme)]: !!success,\n [orientationStyles.warning(this.theme)]: !!warning,\n [orientationStyles.error(this.theme)]: !!error,\n [styles.active()]: !!isActive,\n [orientationStyles.active(this.theme)]: !!isActive,\n [styles.disabled(this.theme)]: !!disabled,\n [orientationStyles.disabled()]: !!disabled,\n })}\n onBlur={this.handleBlur}\n onClick={this.switchTab}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n tabIndex={disabled ? -1 : 0}\n ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n href={href}\n aria-describedby={ariaDescribedby}\n aria-label={ariaLabel}\n >\n <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n {this.state.focusedByKeyboard && (\n <div\n className={cx(globalClasses.focus, {\n [styles.focusSmall(this.theme)]: this.context.size === 'small',\n [styles.focusMedium(this.theme)]: this.context.size === 'medium',\n [styles.focusLarge(this.theme)]: this.context.size === 'large',\n })}\n />\n )}\n </Component>\n </CommonWrapper>\n );\n }\n\n private getId = () => this.props.id \|\| this.getProps().href;\n\n private refTabComponent = (instance: React.ReactElement<any>) => {\n this.tabComponent = instance;\n };\n\n private getTabInstance = () => this;\n\n private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n if (this.props.disabled) {\n event.preventDefault();\n return;\n }\n const { href, component } = this.getProps();\n\n const id = this.props.id \|\| href;\n if (this.props.onClick) {\n this.props.onClick(event);\n if (event.defaultPrevented) {\n return;\n }\n }\n if (typeof id === 'string') {\n this.context.switchTab(id);\n }\n if (component === 'a' && !href) {\n event.preventDefault();\n }\n };\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (this.props.disabled) {\n return;\n }\n\n if (this.props.onKeyDown) {\n this.props.onKeyDown(e);\n if (e.defaultPrevented) {\n return;\n }\n }\n const id = this.getId();\n if (typeof id !== 'string') {\n return;\n }\n if (!isKeyArrow(e)) {\n return;\n }\n e.preventDefault();\n const delta = isKeyArrowLeft(e) \|\| isKeyArrowUp(e) ? -1 : 1;\n this.context.shiftFocus(id, delta);\n };\n\n private handleFocus = () => {\n if (this.props.disabled) {\n return;\n }\n\n // focus event fires before keyDown eventlistener\n // so we should check focusKeyPressed in async way\n globalObject.requestAnimationFrame?.(() => {\n if (keyListener.isTabPressed \|\| keyListener.isArrowPressed) {\n this.setState({ focusedByKeyboard: true });\n }\n });\n };\n\n private handleBlur = () => {\n if (this.props.disabled) {\n return;\n }\n\n this.setState({ focusedByKeyboard: false });\n };\n}\n"]}

package/components/Tabs/Tab.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import React, { AriaAttributes } from 'react';
 import { Nullable } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
 import { TabsContextType } from './TabsContext';
 export interface TabIndicators {
     error: boolean;
@@ -12,81 +13,62 @@ export interface TabIndicators {
 export declare const TabDataTids: {
     readonly root: "Tab__root";
 };
-export interface TabProps<T extends string = string> extends CommonProps {
-    /**
-     * Tab content
-     */
-    children?: React.ReactNode;
+/**
+ * @deprecated use SizeProp
+ */
+export declare type TabSize = SizeProp;
+export interface TabProps<T extends string = string> extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps {
     /**
-     * Component to use as a tab
+     * Позволяет передавать свой компонент, строку или функцию, которая заменит собой элемент используемый в компоненте по умолчанию. Реализует паттерн [render prop](https://www.patterns.dev/posts/render-props-pattern).
      */
     component?: React.ComponentType<any> | string;
     /**
-     * Link href
+     * `HTML`-аттрибут `href`.
      */
     href?: string;
     /**
-     * Tab identifier
+     * Уникальный идентификатор таба. По нему компонент `<Tabs />` определяет какой `<Tab />` сейчас выбран.
      */
     id?: T;
     /**
-     * Click event
+     * `HTML`-событие `onclick`.
      */
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /**
-     * Click event
+     * `HTML`-событие `onkeydown`.
      */
     onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
     /**
-     * Disabled indicator
+     * Переводит компонент в отключенное состояние.
      */
     disabled?: boolean;
     /**
-     * Состояние валидации при ошибке.
+     * Визуальное состояние ошибки.
      */
     error?: boolean;
     /**
-     * Состояние валидации при предупреждении.
+     * Визуальное состояние предупреждения.
      */
     warning?: boolean;
     /**
-     * Success indicator
+     * Визуальное состояние успеха.
      */
     success?: boolean;
     /**
-     * Primary indicator
+     * Визуальное состояние главного элемента.
      */
     primary?: boolean;
-    /**
-     * Style property
-     */
-    style?: React.CSSProperties;
-    /**
-     * Атрибут для указания id элемента(-ов), описывающих его
-     */
-    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
 export interface TabState {
     focusedByKeyboard: boolean;
 }
 declare type DefaultProps = Required<Pick<TabProps, 'component' | 'href'>>;
 /**
- * Tab element of Tabs component
- *
- * Can be used for creating custom tabs
- * ```js
- *
- * const RouteTab = (props) => (
- *   <Tab id={props.to} component={RouteLink} {...props}/>
- * )
- *
- * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>
- * ```
- *
- * Works only inside Tabs component, otherwise throws
+ * Вложенный элемент компонента `<Tabs />`.
  */
 export declare class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static contextType: React.Context<TabsContextType<any>>;
     context: TabsContextType;
     static defaultProps: DefaultProps;

package/components/Tabs/Tab.md ADDED Viewed

@@ -0,0 +1,71 @@
+У компонента `<Tabs.Tab />` есть несколько визуальных состояний, в которых компонент может находиться: `primary`, `success`, `warning` и `error`. Чтобы перевести контрол в нужное состояние передайте компоненту булевый проп с соответсвующим названием.
+Используя переменные `tabColorPrimary`, `tabColorSuccess`, `tabColorWarning` и `tabColorError` можно изменить активный цвет состояния, а библиотека автоматически подберёт цвет подчёркивания при наведении.
+```jsx harmony
+import { ThemeContext, ThemeFactory, Button, Tabs } from '@skbkontur/react-ui';
+const getRandomColor = () => '#' + Math.random().toString(16).substr(-6);
+const updateColors = () => {
+  return {
+    tabColorPrimary: getRandomColor(),
+    tabColorSuccess: getRandomColor(),
+    tabColorWarning: getRandomColor(),
+    tabColorError: getRandomColor(),
+  }
+};
+const [activeBase, setActiveBase] = React.useState('error');
+const [activeRandom, setActiveRandom] = React.useState('error');
+const [colors, setColors] = React.useState(updateColors());
+<>
+  <p style={{ fontSize: '17px' }}>C цветами по умолчанию</p>
+  <Tabs value={activeBase} onValueChange={setActiveBase}>
+    <Tabs.Tab primary id="primary">Primary</Tabs.Tab>
+    <Tabs.Tab success id="success">Success</Tabs.Tab>
+    <Tabs.Tab warning id="warning">Warning</Tabs.Tab>
+    <Tabs.Tab error id="error">Error</Tabs.Tab>
+  </Tabs>
+  <p style={{ fontSize: '17px' }}>Со случайным основным цветом</p>
+  <div style={{ display: 'inline-flex', flexDirection: 'column', justifyContent: 'space-between', height: '100px' }}>
+    <ThemeContext.Consumer>
+      {(theme) => {
+        return (
+          <ThemeContext.Provider
+            value={ThemeFactory.create(colors,theme)}
+          >
+            <Tabs value={activeRandom} onValueChange={setActiveRandom}>
+            <Tabs.Tab primary id="primary">Primary</Tabs.Tab>
+            <Tabs.Tab success id="success">Success</Tabs.Tab>
+            <Tabs.Tab warning id="warning">Warning</Tabs.Tab>
+            <Tabs.Tab error id="error">Error</Tabs.Tab>
+          </Tabs>
+          </ThemeContext.Provider>
+        );
+      }}
+    </ThemeContext.Consumer>
+    <Button onClick={() => setColors(updateColors)}>Получить новый набор цветов</Button>
+  </div>
+</>
+```
+С помощью пропа `component` можно изменять корневой элемент `<Tab />`.
+Проп может принимать: компоненты, функции и строки.
+```jsx harmony
+import { Tabs } from '@skbkontur/react-ui';
+const [active, setActive] = React.useState('/fuji');
+const NavLink = props => <a {...props} />;
+<Tabs value={active} onValueChange={setActive}>
+  {/** Кастомный компонент **/}
+  <Tabs.Tab  component={(props) => <NavLink {...props} />} id="/fuji">🌋 Fuji</Tabs.Tab>
+  {/** Функция **/}
+  <Tabs.Tab component={(props) => <a {...props} />} id="/tahat">⛰ Tahat</Tabs.Tab>
+  {/** Строка **/}
+  <Tabs.Tab component="a" id="/alps">🗻 Alps</Tabs.Tab>
+</Tabs>;
+```

package/components/Tabs/Tab.styles/Tab.styles.js CHANGED Viewed

@@ -5,65 +5,94 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import { shift } from "../../../lib/styles/DimensionFunctions";
 import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
+import { fontSize, lineHeight, paddingX, paddingY } from "../helpers";
 export var globalClasses = prefix('tab')({
   focus: 'focus'
 });
 export var styles = memoizeStyle({
-  root: function root(t) {
-    var paddingTop = t.tabPaddingY;
-    var paddingBottom = "calc(" + t.tabPaddingY + " - " + t.tabBorderWidth + ")";
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      border-bottom: ", " solid transparent;\n      box-sizing: border-box;\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-left: ", ";\n      margin-right: ", ";\n      padding-bottom: ", ";\n      padding-top: ", ";\n      position: relative;\n      text-decoration: inherit;\n      transition: border-bottom 0.2s ease-out;\n\n      &:hover {\n        outline: inherit;\n        border-bottom: ", " solid ", ";\n      }\n\n      &:focus {\n        outline: inherit;\n      }\n    "])), t.tabBorderWidth, t.tabTextColorDefault, t.tabFontSize, t.tabLineHeight, t.tabPaddingX, t.tabPaddingX, paddingBottom, paddingTop, t.tabBorderWidth, t.tabColorHover);
+  rootSmall: function rootSmall(t) {
+    return tabRoot(t, 'small');
   },
-  vertical: function vertical(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      border-bottom: none;\n      border-left: ", " solid transparent;\n      display: block;\n      margin-left: 0;\n      margin-right: 0;\n      padding-left: ", ";\n      padding-right: ", ";\n\n      &:hover {\n        border-bottom: none;\n        border-left: ", " solid ", ";\n      }\n\n      .", " {\n        bottom: 0;\n        left: -", ";\n        right: 0;\n      }\n    "])), t.tabBorderWidth, shift(t.tabPaddingX, "-" + t.tabBorderWidth), t.tabPaddingX, t.tabBorderWidth, t.tabColorHover, globalClasses.focus, t.tabBorderWidth);
+  rootMedium: function rootMedium(t) {
+    return tabRoot(t, 'medium');
   },
-  focus: function focus(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      bottom: -", ";\n      left: -", ";\n      position: absolute;\n      right: -", ";\n      top: 0;\n    "])), t.tabOutlineWidth, t.tabColorFocus, t.tabBorderWidth, t.tabPaddingX, t.tabPaddingX);
+  rootLarge: function rootLarge(t) {
+    return tabRoot(t, 'large');
+  },
+  verticalSmall: function verticalSmall(t) {
+    return tabVertical(t, 'small');
+  },
+  verticalMedium: function verticalMedium(t) {
+    return tabVertical(t, 'medium');
+  },
+  verticalLarge: function verticalLarge(t) {
+    return tabVertical(t, 'large');
+  },
+  focusSmall: function focusSmall(t) {
+    return tabFocus(t, 'small');
+  },
+  focusMedium: function focusMedium(t) {
+    return tabFocus(t, 'medium');
+  },
+  focusLarge: function focusLarge(t) {
+    return tabFocus(t, 'large');
   },
   disabled: function disabled(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: rgba(\n        ", ",\n        ", ",\n        ", ",\n        0.5\n      );\n      cursor: default;\n    "])), ColorFunctions.red(t.tabTextColorDefault), ColorFunctions.green(t.tabTextColorDefault), ColorFunctions.blue(t.tabTextColorDefault));
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      color: rgba(\n        ", ",\n        ", ",\n        ", ",\n        0.5\n      );\n      cursor: default;\n    "])), ColorFunctions.red(t.tabTextColorDefault), ColorFunctions.green(t.tabTextColorDefault), ColorFunctions.blue(t.tabTextColorDefault));
   },
   active: function active() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
   }
 });
 export var horizontalStyles = memoizeStyle({
   active: function active(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
   },
   disabled: function disabled() {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "])));
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "])));
   },
   primary: function primary(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
   },
   success: function success(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
   },
   warning: function warning(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
   },
   error: function error(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverError);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverError);
   }
 });
 export var verticalStyles = memoizeStyle({
   active: function active(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
   },
   disabled: function disabled() {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
   },
   primary: function primary(t) {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
   },
   success: function success(t) {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
   },
   warning: function warning(t) {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
   },
   error: function error(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverError);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverError);
   }
-});
+});
+function tabRoot(t, size) {
+  return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " solid transparent;\n    box-sizing: border-box;\n    color: ", ";\n    cursor: pointer;\n    display: inline-block;\n    font-size: ", ";\n    line-height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    padding-bottom: calc(", " - ", ");\n    padding-top: ", ";\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ", " ", ";\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ", " solid ", ";\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  "])), t.tabBorderWidth, t.tabTextColorDefault, fontSize(t, size), lineHeight(t, size), paddingX(t, size), paddingX(t, size), paddingY(t, size), t.tabBorderWidth, paddingY(t, size), t.transitionDuration, t.transitionTimingFunction, t.tabBorderWidth, t.tabColorHover);
+}
+function tabVertical(t, size) {
+  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n    border-bottom: none;\n    border-left: ", " solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ", ";\n    padding-right: ", ";\n\n    &:hover {\n      border-bottom: none;\n      border-left: ", " solid ", ";\n    }\n\n    .", " {\n      bottom: 0;\n      left: -", ";\n      right: 0;\n    }\n  "])), t.tabBorderWidth, shift(paddingX(t, size), "-" + t.tabBorderWidth), paddingX(t, size), t.tabBorderWidth, t.tabColorHover, globalClasses.focus, t.tabBorderWidth);
+}
+function tabFocus(t, size) {
+  return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n    border: ", " solid ", ";\n    bottom: -", ";\n    left: -", ";\n    position: absolute;\n    right: -", ";\n    top: 0;\n  "])), t.tabOutlineWidth, t.tabColorFocus, t.tabBorderWidth, paddingX(t, size), paddingX(t, size));
+}

package/components/Tabs/Tab.styles/Tab.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Tab.styles.ts"],"names":["css","memoizeStyle","prefix","shift","ColorFunctions","globalClasses","focus","styles","~~root~~","t","~~paddingTop~~","~~tabPaddingY~~","~~paddingBottom~~","~~tabBorderWidth~~","~~tabTextColorDefault~~","~~tabFontSize~~","~~tabLineHeight~~","~~tabPaddingX~~","~~tabColorHover~~","~~vertical~~","~~tabOutlineWidth~~","~~tabColorFocus~~","~~disabled~~","~~red~~","green","blue","active","horizontalStyles","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","verticalStyles"],"mappings":"4ZAAA,SAASA,GAAT,EAAcC,YAAd,EAA4BC,MAA5B,QAA0C,2BAA1C;AACA,SAASC,KAAT,QAAsB,qCAAtB;AACA,OAAO,KAAKC,cAAZ,MAAgC,iCAAhC~~;;;AAGA~~,OAAO,IAAMC,aAAa,~~GAAGH~~,MAAM,CAAC,KAAD,CAAN,CAAc;~~AACzCI~~,EAAAA,KAAK,EAAE,OADkC,EAAd,CAAtB;;;AAIP,OAAO,IAAMC,MAAM,~~GAAGN~~,YAAY,CAAC;~~AACjCO~~,EAAAA,~~IADiC~~,~~gBAC5BC~~,~~CAD4B~~,~~EAClB~~;~~AACb~~,~~QAAMC~~,~~UAAU~~,~~GAAGD~~,~~CAAC~~,~~CAACE~~,~~WAArB~~;~~AACA~~,~~QAAMC~~,~~aAAa~~,~~aAAWH~~,~~CAAC~~,~~CAACE~~,~~WAAb~~,~~WAA8BF~~,~~CAAC~~,~~CAACI~~,~~cAAhC~~,~~MAAnB;AACA~~,~~WAAOb~~,~~GAAP~~;~~AACmBS~~,~~IAAAA,CAAC,CAACI,cADrB~~;;~~AAGWJ~~,~~IAAAA~~,~~CAAC~~,~~CAACK~~,~~mBAHb;;;AAMeL~~,~~IAAAA,CAAC,CAACM,WANjB~~;~~AAOiBN~~,~~IAAAA~~,~~CAAC~~,~~CAACO~~,~~aAPnB;AAQiBP~~,~~IAAAA~~,~~CAAC~~,~~CAACQ,WARnB~~;~~AASkBR~~,~~IAAAA~~,~~CAAC~~,~~CAACQ~~,~~WATpB;AAUoBL~~,~~IAAAA~~,~~aAVpB~~;~~AAWiBF~~,~~IAAAA~~,~~UAXjB;;;;;;;AAkBqBD~~,~~IAAAA~~,~~CAAC~~,~~CAACI~~,~~cAlBvB~~,~~EAkB+CJ~~,~~CAAC,CAACS,aAlBjD;;;;;;;AAyBD,GA7BgC~~;;~~AA+BjCC~~,EAAAA,~~QA/BiC~~,~~oBA+BxBV~~,~~CA/BwB~~,~~EA+Bd~~;~~AACjB~~,~~WAAOT~~,~~GAAP;;AAEiBS~~,~~IAAAA~~,~~CAAC~~,~~CAACI~~,~~cAFnB;;;;AAMkBV~~,~~IAAAA~~,~~KAAK~~,~~CAACM~~,~~CAAC~~,~~CAACQ~~,~~WAAH~~,~~QAAoBR,CAAC,CAACI,cAAtB,CANvB~~;~~AAOmBJ~~,~~IAAAA~~,~~CAAC~~,~~CAACQ~~,~~WAPrB;;;;AAWmBR~~,~~IAAAA~~,~~CAAC~~,~~CAACI~~,~~cAXrB~~,~~EAW6CJ~~,~~CAAC~~,~~CAACS~~,~~aAX/C;;;AAcKb~~,~~IAAAA~~,~~aAAa~~,~~CAACC~~,~~KAdnB;;AAgBaG~~,~~IAAAA~~,~~CAAC~~,~~CAACI~~,~~cAhBf;;;;AAoBD~~,~~GApDgC~~;;~~AAsDjCP~~,EAAAA,~~KAtDiC~~,~~iBAsD3BG~~,~~CAtD2B~~,~~EAsDjB~~;~~AACd~~,~~WAAOT~~,~~GAAP;AACYS~~,~~IAAAA~~,~~CAAC~~,~~CAACW~~,~~eADd~~,~~EACuCX~~,~~CAAC~~,~~CAACY~~,~~aADzC;AAEaZ~~,~~IAAAA~~,~~CAAC~~,~~CAACI,cAFf~~;~~AAGWJ~~,~~IAAAA~~,~~CAAC~~,~~CAACQ~~,~~WAHb;;AAKYR~~,~~IAAAA~~,~~CAAC~~,~~CAACQ~~,~~WALd;;;AAQD,GA/DgC~~;;~~AAiEjCK~~,EAAAA,~~QAjEiC~~,~~oBAiExBb~~,~~CAjEwB~~,~~EAiEd~~;AACjB,~~WAAOT~~,GAAP;;AAEMI,IAAAA,cAAc,~~CAACmB~~,GAAf,~~CAAmBd~~,CAAC,~~CAACK~~,mBAArB,CAFN;~~AAGMV~~,IAAAA,cAAc,~~CAACoB~~,KAAf,CAAqBf,CAAC,~~CAACK~~,mBAAvB,CAHN;~~AAIMV~~,IAAAA,cAAc,~~CAACqB~~,IAAf,CAAoBhB,CAAC,~~CAACK~~,mBAAtB,CAJN;;;;;AASD,~~GA3EgC~~;;~~AA6EjCY~~,EAAAA,~~MA7EiC~~,~~oBA6ExB~~;AACP,~~WAAO1B~~,GAAP;;;AAGD,~~GAjFgC~~,EAAD,CAA3B;;;~~AAoFP~~,OAAO,~~IAAM2B~~,gBAAgB,~~GAAG1B~~,YAAY,CAAC;~~AAC3CyB~~,EAAAA,MAD2C,kBACpCjB,CADoC,EAC1B;AACf,~~WAAOT~~,GAAP;;~~AAEqBS~~,IAAAA,CAAC,~~CAACI~~,cAFvB;;;AAKD,GAP0C;;~~AAS3CS~~,EAAAA,QAT2C,sBAShC;AACT,~~WAAOtB~~,GAAP;;;;;AAKD,GAf0C;;~~AAiB3C4B~~,EAAAA,OAjB2C,~~mBAiBnCnB~~,CAjBmC,EAiBzB;AAChB,~~WAAOT~~,GAAP;;~~AAE2BS~~,IAAAA,CAAC,~~CAACoB~~,oBAF7B;;;AAKD,GAvB0C;;AAyB3CC,EAAAA,OAzB2C,~~mBAyBnCrB~~,CAzBmC,EAyBzB;AAChB,~~WAAOT~~,GAAP;;~~AAE2BS~~,IAAAA,CAAC,~~CAACsB~~,oBAF7B;;;AAKD,GA/B0C;;AAiC3CC,EAAAA,OAjC2C,~~mBAiCnCvB~~,CAjCmC,EAiCzB;AAChB,~~WAAOT~~,GAAP;;~~AAE2BS~~,IAAAA,CAAC,~~CAACwB~~,oBAF7B;;;AAKD,GAvC0C;;AAyC3CC,EAAAA,KAzC2C,~~iBAyCrCzB~~,CAzCqC,EAyC3B;AACd,~~WAAOT~~,GAAP;;~~AAE2BS~~,IAAAA,CAAC,~~CAAC0B~~,kBAF7B;;;AAKD,GA/C0C,EAAD,CAArC;;;AAkDP,OAAO,IAAMC,cAAc,~~GAAGnC~~,YAAY,CAAC;~~AACzCyB~~,EAAAA,MADyC,kBAClCjB,CADkC,EACxB;AACf,~~WAAOT~~,GAAP;;~~AAEmBS~~,IAAAA,CAAC,~~CAACI~~,cAFrB;;;AAKD,GAPwC;;~~AASzCS~~,EAAAA,QATyC,sBAS9B;AACT,~~WAAOtB~~,GAAP;;;;;AAKD,GAfwC;;~~AAiBzC4B~~,EAAAA,OAjByC,~~mBAiBjCnB~~,CAjBiC,EAiBvB;AAChB,~~WAAOT~~,GAAP;;~~AAEyBS~~,IAAAA,CAAC,~~CAACoB~~,oBAF3B;;;AAKD,GAvBwC;;AAyBzCC,EAAAA,OAzByC,~~mBAyBjCrB~~,CAzBiC,EAyBvB;AAChB,~~WAAOT~~,GAAP;;~~AAEyBS~~,IAAAA,CAAC,~~CAACsB~~,oBAF3B;;;AAKD,GA/BwC;;AAiCzCC,EAAAA,OAjCyC,~~mBAiCjCvB~~,CAjCiC,EAiCvB;AAChB,~~WAAOT~~,GAAP;;~~AAEyBS~~,IAAAA,CAAC,~~CAACwB~~,oBAF3B;;;AAKD,GAvCwC;;AAyCzCC,EAAAA,KAzCyC,~~iBAyCnCzB~~,CAzCmC,EAyCzB;AACd,~~WAAOT~~,GAAP;;~~AAEyBS~~,IAAAA,CAAC,~~CAAC0B~~,kBAF3B;;;AAKD,GA/CwC,EAAD,CAAnC","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const globalClasses = prefix('tab')({\n focus: 'focus',\n});\n\nexport const styles = memoizeStyle({\n ~~root~~(t: Theme) {\n ~~const~~ ~~paddingTop = t.tabPaddingY;\n const paddingBottom = `calc~~(${t~~.tabPaddingY}~~ ~~- ${t.tabBorderWidth}~~)~~`;\n return css`\n border-bottom: ${t.tabBorderWidth} solid transparent~~;\n ~~box-sizing: border-box;\n color: ${t.tabTextColorDefault~~};\n ~~cursor: pointer;\~~n ~~display: inline-block;\n font-size: ${~~t~~.tabFontSize};\n line-height~~: ~~${t.tabLineHeight};\n margin-left:~~ ${~~t.tabPaddingX};\~~n ~~margin-right:~~ ${t~~.tabPaddingX};\n padding-bottom:~~ ~~${paddingBottom}~~;\n ~~padding-top: ${paddingTop~~};\n ~~position: relative;\~~n ~~text-decoration~~: ~~inherit;\n transition:~~ ~~border-bottom 0.2s ease-out;\n\n &:hover~~ {\n ~~outline:~~ ~~inherit;\n border-bottom: ${~~t~~.tabBorderWidth}~~ ~~solid ${t.tabColorHover}~~;\n }\n\n ~~&:focus~~ {\n ~~outline:~~ ~~inherit~~;\n ~~}\n `;\n~~ },\n\n ~~vertical~~(t: Theme) {\n return ~~css`\n border-bottom:~~ ~~none~~;\n ~~border-left: ${t.tabBorderWidth~~} ~~solid transparent;\~~n ~~display: block;\~~n ~~margin-left~~: ~~0;\n margin-right:~~ ~~0;\~~n ~~padding-left:~~ ~~${shift~~(t~~.tabPaddingX~~, ~~`-${t.tabBorderWidth}`~~)};\n ~~padding-right: ${t.tabPaddingX~~};\n\n ~~&:hover~~ {\n ~~border-bottom:~~ ~~none;\n border-left: ${~~t~~.tabBorderWidth}~~ ~~solid ${t.tabColorHover}~~;\n }\n\n ~~.${globalClasses.focus}~~ {\n ~~bottom:~~ ~~0;\n left: -${~~t~~.tabBorderWidth};\n right:~~ 0;\n ~~}\n `;\n~~ },\n\n ~~focus~~(t: Theme) {\n return ~~css`\n border: ${~~t~~.tabOutlineWidth}~~ ~~solid ${t.tabColorFocus}~~;\n ~~bottom: -${t.tabBorderWidth};\n left: -${t.tabPaddingX};\n position: absolute;\n right: -${t.tabPaddingX};\n top: 0;\n `;\n~~ },\n\n disabled(t: Theme) {\n return css`\n color: rgba(\n ${ColorFunctions.red(t.tabTextColorDefault)},\n ${ColorFunctions.green(t.tabTextColorDefault)},\n ${ColorFunctions.blue(t.tabTextColorDefault)},\n 0.5\n );\n cursor: default;\n `;\n },\n\n active() {\n return css`\n cursor: default;\n `;\n },\n});\n\nexport const horizontalStyles = memoizeStyle({\n active(t: Theme) {\n return css`\n &:hover {\n border-bottom: ${t.tabBorderWidth} solid transparent;\n }\n `;\n },\n\n disabled() {\n return css`\n &:hover {\n border-bottom-color: transparent;\n }\n `;\n },\n\n primary(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverPrimary};\n }\n `;\n },\n\n success(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverSuccess};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverWarning};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverError};\n }\n `;\n },\n});\n\nexport const verticalStyles = memoizeStyle({\n active(t: Theme) {\n return css`\n &:hover {\n border-left: ${t.tabBorderWidth} solid transparent;\n }\n `;\n },\n\n disabled() {\n return css`\n &:hover {\n border-left-color: transparent;\n }\n `;\n },\n\n primary(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverPrimary};\n }\n `;\n },\n\n success(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverSuccess};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverWarning};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverError};\n }\n `;\n },\n});\n"]}
1	+ {"version":3,"sources":["Tab.styles.ts"],"names":["css","memoizeStyle","prefix","shift","ColorFunctions","fontSize","lineHeight","paddingX","paddingY","globalClasses","focus","styles","rootSmall","t","tabRoot","rootMedium","rootLarge","verticalSmall","tabVertical","verticalMedium","verticalLarge","focusSmall","tabFocus","focusMedium","focusLarge","disabled","red","tabTextColorDefault","green","blue","active","horizontalStyles","tabBorderWidth","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","verticalStyles","size","transitionDuration","transitionTimingFunction","tabColorHover","tabOutlineWidth","tabColorFocus"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { fontSize, lineHeight, paddingX, paddingY } from './helpers';\n\nexport const globalClasses = prefix('tab')({\n focus: 'focus',\n});\n\nexport const styles = memoizeStyle({\n rootSmall(t: Theme) {\n return tabRoot(t, 'small');\n },\n\n rootMedium(t: Theme) {\n return tabRoot(t, 'medium');\n },\n\n rootLarge(t: Theme) {\n return tabRoot(t, 'large');\n },\n\n verticalSmall(t: Theme) {\n return tabVertical(t, 'small');\n },\n\n verticalMedium(t: Theme) {\n return tabVertical(t, 'medium');\n },\n\n verticalLarge(t: Theme) {\n return tabVertical(t, 'large');\n },\n\n focusSmall(t: Theme) {\n return tabFocus(t, 'small');\n },\n\n focusMedium(t: Theme) {\n return tabFocus(t, 'medium');\n },\n\n focusLarge(t: Theme) {\n return tabFocus(t, 'large');\n },\n\n disabled(t: Theme) {\n return css`\n color: rgba(\n ${ColorFunctions.red(t.tabTextColorDefault)},\n ${ColorFunctions.green(t.tabTextColorDefault)},\n ${ColorFunctions.blue(t.tabTextColorDefault)},\n 0.5\n );\n cursor: default;\n `;\n },\n\n active() {\n return css`\n cursor: default;\n `;\n },\n});\n\nexport const horizontalStyles = memoizeStyle({\n active(t: Theme) {\n return css`\n &:hover {\n border-bottom: ${t.tabBorderWidth} solid transparent;\n }\n `;\n },\n\n disabled() {\n return css`\n &:hover {\n border-bottom-color: transparent;\n }\n `;\n },\n\n primary(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverPrimary};\n }\n `;\n },\n\n success(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverSuccess};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverWarning};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n &:hover {\n border-bottom-color: ${t.tabColorHoverError};\n }\n `;\n },\n});\n\nexport const verticalStyles = memoizeStyle({\n active(t: Theme) {\n return css`\n &:hover {\n border-left: ${t.tabBorderWidth} solid transparent;\n }\n `;\n },\n\n disabled() {\n return css`\n &:hover {\n border-left-color: transparent;\n }\n `;\n },\n\n primary(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverPrimary};\n }\n `;\n },\n\n success(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverSuccess};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverWarning};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n &:hover {\n border-left-color: ${t.tabColorHoverError};\n }\n `;\n },\n});\n\nfunction tabRoot(t: Theme, size: SizeProp) {\n return css`\n border-bottom: ${t.tabBorderWidth} solid transparent;\n box-sizing: border-box;\n color: ${t.tabTextColorDefault};\n cursor: pointer;\n display: inline-block;\n font-size: ${fontSize(t, size)};\n line-height: ${lineHeight(t, size)};\n margin-left: ${paddingX(t, size)};\n margin-right: ${paddingX(t, size)};\n padding-bottom: calc(${paddingY(t, size)} - ${t.tabBorderWidth});\n padding-top: ${paddingY(t, size)};\n position: relative;\n text-decoration: inherit;\n transition: border-bottom ${t.transitionDuration} ${t.transitionTimingFunction};\n\n &:hover {\n outline: inherit;\n border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n }\n\n &:focus {\n outline: inherit;\n }\n `;\n}\n\nfunction tabVertical(t: Theme, size: SizeProp) {\n return css`\n border-bottom: none;\n border-left: ${t.tabBorderWidth} solid transparent;\n display: block;\n margin-left: 0;\n margin-right: 0;\n padding-left: ${shift(paddingX(t, size), `-${t.tabBorderWidth}`)};\n padding-right: ${paddingX(t, size)};\n\n &:hover {\n border-bottom: none;\n border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n }\n\n .${globalClasses.focus} {\n bottom: 0;\n left: -${t.tabBorderWidth};\n right: 0;\n }\n `;\n}\n\nfunction tabFocus(t: Theme, size: SizeProp) {\n return css`\n border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n bottom: -${t.tabBorderWidth};\n left: -${paddingX(t, size)};\n position: absolute;\n right: -${paddingX(t, size)};\n top: 0;\n `;\n}\n"]}

package/components/Tabs/Tab.styles.d.ts CHANGED Viewed

@@ -3,9 +3,15 @@ export declare const globalClasses: {
     focus: string;
 };
 export declare const styles: {
-    root(t: Theme): string;
-    vertical(t: Theme): string;
-    focus(t: Theme): string;
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
+    verticalSmall(t: Theme): string;
+    verticalMedium(t: Theme): string;
+    verticalLarge(t: Theme): string;
+    focusSmall(t: Theme): string;
+    focusMedium(t: Theme): string;
+    focusLarge(t: Theme): string;
     disabled(t: Theme): string;
     active(): string;
 };

package/components/Tabs/Tabs/Tabs.js CHANGED Viewed

@@ -5,12 +5,14 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _class2, _temp;
 import React from 'react';
+import { globalObject } from '@skbkontur/global-object';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { getRootNode } from "../../../lib/rootNode/getRootNode";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isInstanceOf } from "../../../lib/isInstanceOf";
 import { Indicator } from "../Indicator";
 import { styles } from "../Tabs.styles";
 import { TabsContext } from "../TabsContext";
@@ -21,9 +23,7 @@ export var TabsDataTids = {
 };
 export
 /**
-* Tabs wrapper
-*
-* contains static property `Tab`
+* Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.
 */
 var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Tabs, _React$Component);
@@ -61,7 +61,7 @@ var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
       var tabNode = tab.getNode();
       var htmlNode = getRootNode(tabNode);
-      if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {
+      if (isInstanceOf(htmlNode, globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {
         htmlNode.focus();
       }
     };
@@ -119,14 +119,20 @@ var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
         children = _this$props2.children,
         indicatorClassName = _this$props2.indicatorClassName,
         ariaDescribedby = _this$props2['aria-describedby'];
-    var vertical = this.getProps().vertical;
+    var _this$getProps = this.getProps(),
+        vertical = _this$getProps.vertical,
+        size = _this$getProps.size;
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      var _cx;
       _this2.theme = theme;
       return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
         rootNodeRef: _this2.setRootNode
       }, _this2.props), /*#__PURE__*/React.createElement("div", {
         "data-tid": TabsDataTids.root,
-        className: cx(styles.root(_this2.theme), vertical && styles.vertical()),
+        className: cx((_cx = {}, _cx[styles.rootSmall(_this2.theme)] = size === 'small', _cx[styles.rootMedium(_this2.theme)] = size === 'medium', _cx[styles.rootLarge(_this2.theme)] = size === 'large', _cx[styles.vertical()] = vertical, _cx)),
         style: {
           width: width
         },
@@ -135,6 +141,7 @@ var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
         value: {
           vertical: vertical,
           activeTab: value,
+          size: size,
           getTab: _this2.getTab,
           addTab: _this2.addTab,
           removeTab: _this2.removeTab,
@@ -151,6 +158,7 @@ var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
   };
   return Tabs;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.defaultProps = {
-  vertical: false
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.displayName = 'Tabs', _class2.defaultProps = {
+  vertical: false,
+  size: 'large'
 }, _class2.Tab = Tab, _temp)) || _class;

package/components/Tabs/Tabs/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Tabs.tsx"],"names":["React","ThemeContext","CommonWrapper","cx","getRootNode","rootNode","createPropsGetter","Indicator","styles","TabsContext","Tab","TabsDataTids","root","indicatorRoot","Tabs","getProps","defaultProps","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","findIndex","x","id","newIndex","Math","max","min","length","tab","tabNode","getNode","htmlNode","HTMLElement","focus","notifyUpdate","forEach","switchTab","props","onValueChange","value","getTab","find","addTab","concat","removeTab","filter","render","width","children","indicatorClassName","ariaDescribedby","vertical","theme","setRootNode","activeTab","Component","__KONTUR_REACT_UI__"],"mappings":"iPAAA,OAAOA,KAAP,MAAsC,OAAtC;;;AAGA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,gCAA5B;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;;AAEA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,MAAT,QAAuB,eAAvB;AACA,SAASC,WAAT,QAA6C,eAA7C;AACA,SAASC,GAAT,QAAoB,OAApB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,OAAO,IAAMC,YAAY,GAAG;AAC1BC,EAAAA,IAAI,EAAE,YADoB;AAE1BC,EAAAA,aAAa,EAAE,iBAFW,EAArB;;;;;;;;;;;AAaP,OANA;AACA;AACA;AACA;AACA,GAEA,IAAaC,IAAb,GADCT,QACD;;;AAOUU,IAAAA,QAPV,GAOqBT,iBAAiB,CAACQ,IAAI,CAACE,YAAN,CAPtC;;;;;;AAaUC,IAAAA,IAbV,GAaoC,EAbpC;;AAeUC,IAAAA,UAfV,GAeuB;AACnBC,MAAAA,EAAE,EAAE,YAACC,EAAD,EAAoB;AACtB,YAAMC,KAAK,GAAG,MAAKC,SAAL,CAAeC,IAAf,CAAoBH,EAApB,CAAd;AACA,eAAO,YAAM;AACX,gBAAKE,SAAL,CAAeE,MAAf,CAAsBH,KAAtB,EAA6B,CAA7B;AACD,SAFD;AAGD,OANkB,EAfvB;;;AAwBUC,IAAAA,SAxBV,GAwBkD,EAxBlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEUG,IAAAA,UArEV,GAqEyD,UAACC,OAAD,EAAUC,KAAV,EAAoB;AACzE,gEAAQV,IAAR,yBAAQA,IAAR;AACA,UAAMI,KAAK,GAAGJ,IAAI,CAACW,SAAL,CAAe,UAACC,CAAD,UAAOA,CAAC,CAACC,EAAF,KAASJ,OAAhB,EAAf,CAAd;AACA,UAAMK,QAAQ,GAAGC,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYD,IAAI,CAACE,GAAL,CAASb,KAAK,GAAGM,KAAjB,EAAwBV,IAAI,CAACkB,MAAL,GAAc,CAAtC,CAAZ,CAAjB;AACA,UAAMC,GAAG,GAAGnB,IAAI,CAACc,QAAD,CAAhB;;AAEA,UAAMM,OAAO,GAAGD,GAAG,CAACE,OAAJ,EAAhB;AACA,UAAMC,QAAQ,GAAGnC,WAAW,CAACiC,OAAD,CAA5B;;AAEA,UAAIE,QAAQ,IAAIA,QAAQ,YAAYC,WAAhC,IAA+C,OAAOD,QAAQ,CAACE,KAAhB,KAA0B,UAA7E,EAAyF;AACvFF,QAAAA,QAAQ,CAACE,KAAT;AACD;AACF,KAjFH;;AAmFUC,IAAAA,YAnFV,GAmF6D,YAAM;AAC/D,YAAKpB,SAAL,CAAeqB,OAAf,CAAuB,UAACvB,EAAD,UAAQA,EAAE,EAAV,EAAvB;AACD,KArFH;;AAuFUwB,IAAAA,SAvFV,GAuFuD,UAACd,EAAD,EAAQ;AAC3D,wBAAiC,MAAKe,KAAtC,CAAQC,aAAR,eAAQA,aAAR,CAAuBC,KAAvB,eAAuBA,KAAvB;AACA,UAAIjB,EAAE,KAAKiB,KAAP,IAAgBD,aAApB,EAAmC;AACjCA,QAAAA,aAAa,CAAChB,EAAD,CAAb;AACD;AACF,KA5FH;;AA8FUkB,IAAAA,MA9FV,GA8FiD,UAAClB,EAAD,EAAQ;AACrD,iBAA2B,MAAKb,IAAL,CAAUgC,IAAV,CAAe,UAACpB,CAAD,UAAOA,CAAC,CAACC,EAAF,KAASA,EAAhB,EAAf,KAAsC,EAAjE,qBAAQQ,OAAR,CAAQA,OAAR,6BAAkB,IAAlB;AACA,aAAOA,OAAO,IAAIA,OAAO,EAAzB;AACD,KAjGH;;AAmGUY,IAAAA,MAnGV,GAmGiD,UAACpB,EAAD,EAAKQ,OAAL,EAAiB;AAC9D,YAAKrB,IAAL,GAAY,MAAKA,IAAL,CAAUkC,MAAV,CAAiB,EAAErB,EAAE,EAAFA,EAAF,EAAMQ,OAAO,EAAPA,OAAN,EAAjB,CAAZ;AACD,KArGH;;AAuGUc,IAAAA,SAvGV,GAuGuD,UAACtB,EAAD,EAAQ;AAC3D,YAAKb,IAAL,GAAY,MAAKA,IAAL,CAAUoC,MAAV,CAAiB,UAACjB,GAAD,UAASA,GAAG,CAACN,EAAJ,KAAWA,EAApB,EAAjB,CAAZ;AACD,KAzGH,kDA2BSwB,MA3BT,GA2BE,kBAA6B,mBAC3B,mBAA4F,KAAKT,KAAjG,CAAQE,KAAR,gBAAQA,KAAR,CAAeQ,KAAf,gBAAeA,KAAf,CAAsBC,QAAtB,gBAAsBA,QAAtB,CAAgCC,kBAAhC,gBAAgCA,kBAAhC,CAAwEC,eAAxE,gBAAoD,kBAApD,EACA,IAAMC,QAAQ,GAAG,KAAK5C,QAAL,GAAgB4C,QAAjC,CACA,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAAChB,KAAvD,gBACE,6BACE,YAAUlC,YAAY,CAACC,IADzB,EAEE,SAAS,EAAET,EAAE,CAACK,MAAM,CAACI,IAAP,CAAY,MAAI,CAACgD,KAAjB,CAAD,EAA0BD,QAAQ,IAAInD,MAAM,CAACmD,QAAP,EAAtC,CAFf,EAGE,KAAK,EAAE,EAAEJ,KAAK,EAALA,KAAF,EAHT,EAIE,oBAAkBG,eAJpB,iBAME,oBAAC,WAAD,CAAa,QAAb,IACE,KAAK,EAAE,EACLC,QAAQ,EAARA,QADK,EAELG,SAAS,EAAEf,KAFN,EAGLC,MAAM,EAAE,MAAI,CAACA,MAHR,EAILE,MAAM,EAAE,MAAI,CAACA,MAJR,EAKLE,SAAS,EAAE,MAAI,CAACA,SALX,EAMLV,YAAY,EAAE,MAAI,CAACA,YANd,EAOLjB,UAAU,EAAE,MAAI,CAACA,UAPZ,EAQLmB,SAAS,EAAE,MAAI,CAACA,SARX,EADT,IAYGY,QAZH,eAaE,oBAAC,SAAD,IACE,SAAS,EAAEC,kBADb,EAEE,UAAU,EAAE,MAAI,CAACvC,UAFnB,EAGE,QAAQ,EAAE,MAAI,CAACH,QAAL,GAAgB4C,QAH5B,GAbF,CANF,CADF,CADF,CA8BD,CAjCH,CADF,CAqCD,CAnEH,eAAqD3D,KAAK,CAAC+D,SAA3D,WACgBC,mBADhB,GACsC,MADtC,UAGgBhD,YAHhB,GAG6C,EACzC2C,QAAQ,EAAE,KAD+B,EAH7C,UASgBjD,GAThB,GASsBA,GATtB","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode } from '../../lib/rootNode/getRootNode';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { Indicator } from './Indicator';\nimport { styles } from './Tabs.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { Tab } from './Tab';\n\ntype ValueBaseType = string;\ninterface TabType<T extends ValueBaseType> {\n getNode: () => Tab<T> \| null;\n id: T;\n}\n\nexport interface TabsProps<T extends ValueBaseType = string> extends CommonProps {\n /*\n Tab component should be child of Tabs component\n /\n children?: React.ReactNode;\n\n /\n Classname of indicator\n /\n indicatorClassName?: string;\n\n /\n Tabs change event\n /\n onValueChange?: (value: T) => void;\n\n /\n Active tab identifier\n /\n value: T;\n\n /\n Vertical indicator\n * @default false\n /\n vertical?: boolean;\n\n /\n Width of tabs container\n /\n width?: number \| string;\n\n /\n Атрибут для указания id элемента(-ов), описывающих его\n /\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const TabsDataTids = {\n root: 'Tabs__root',\n indicatorRoot: 'Indicator__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TabsProps, 'vertical'>>;\n\n/\n Tabs wrapper\n \n contains static property `Tab`\n */\n@rootNode\nexport class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {\n public static __KONTUR_REACT_UI__ = 'Tabs';\n\n public static defaultProps: DefaultProps = {\n vertical: false,\n };\n\n private getProps = createPropsGetter(Tabs.defaultProps);\n\n public static Tab = Tab;\n\n private theme!: Theme;\n\n private tabs: Array<TabType<T>> = [];\n\n private tabUpdates = {\n on: (cb: () => void) => {\n const index = this.listeners.push(cb);\n return () => {\n this.listeners.splice(index, 1);\n };\n },\n };\n\n private listeners: Array<typeof emptyHandler> = [];\n private setRootNode!: TSetRootNode;\n\n public render(): JSX.Element {\n const { value, width, children, indicatorClassName, 'aria-describedby': ariaDescribedby } = this.props;\n const vertical = this.getProps().vertical;\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={TabsDataTids.root}\n className={cx(styles.root(this.theme), vertical && styles.vertical())}\n style={{ width }}\n aria-describedby={ariaDescribedby}\n >\n <TabsContext.Provider\n value={{\n vertical,\n activeTab: value,\n getTab: this.getTab,\n addTab: this.addTab,\n removeTab: this.removeTab,\n notifyUpdate: this.notifyUpdate,\n shiftFocus: this.shiftFocus,\n switchTab: this.switchTab,\n }}\n >\n {children}\n <Indicator\n className={indicatorClassName}\n tabUpdates={this.tabUpdates}\n vertical={this.getProps().vertical}\n />\n </TabsContext.Provider>\n </div>\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private shiftFocus: TabsContextType<T>['shiftFocus'] = (fromTab, delta) => {\n const { tabs } = this;\n const index = tabs.findIndex((x) => x.id === fromTab);\n const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\n const tab = tabs[newIndex];\n\n const tabNode = tab.getNode();\n const htmlNode = getRootNode(tabNode);\n\n if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {\n htmlNode.focus();\n }\n };\n\n private notifyUpdate: TabsContextType<T>['notifyUpdate'] = () => {\n this.listeners.forEach((cb) => cb());\n };\n\n private switchTab: TabsContextType<T>['switchTab'] = (id) => {\n const { onValueChange, value } = this.props;\n if (id !== value && onValueChange) {\n onValueChange(id);\n }\n };\n\n private getTab: TabsContextType<T>['getTab'] = (id) => {\n const { getNode = null } = this.tabs.find((x) => x.id === id) \|\| {};\n return getNode && getNode();\n };\n\n private addTab: TabsContextType<T>['addTab'] = (id, getNode) => {\n this.tabs = this.tabs.concat({ id, getNode });\n };\n\n private removeTab: TabsContextType<T>['removeTab'] = (id) => {\n this.tabs = this.tabs.filter((tab) => tab.id !== id);\n };\n}\n"]}
1	+ {"version":3,"sources":["Tabs.tsx"],"names":["React","globalObject","ThemeContext","CommonWrapper","cx","getRootNode","rootNode","createPropsGetter","isInstanceOf","Indicator","styles","TabsContext","Tab","TabsDataTids","root","indicatorRoot","Tabs","getProps","defaultProps","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","findIndex","x","id","newIndex","Math","max","min","length","tab","tabNode","getNode","htmlNode","HTMLElement","focus","notifyUpdate","forEach","switchTab","props","onValueChange","value","getTab","find","addTab","concat","removeTab","filter","render","width","children","indicatorClassName","ariaDescribedby","vertical","size","theme","setRootNode","rootSmall","rootMedium","rootLarge","activeTab","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode } from '../../lib/rootNode/getRootNode';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { SizeProp } from '../../lib/types/props';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\n\nimport { Indicator } from './Indicator';\nimport { styles } from './Tabs.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { Tab } from './Tab';\n\ntype ValueBaseType = string;\ninterface TabType<T extends ValueBaseType> {\n getNode: () => Tab<T> \| null;\n id: T;\n}\n\nexport interface TabsProps<T extends ValueBaseType = string> extends CommonProps {\n /*\n Позволяет задать кастомный класс подчёркиванию таба.\n /\n indicatorClassName?: string;\n\n /\n Задаёт размер контрола.\n \n Допустимые значения: `\"small\"`, `\"medium\"`, `\"large\"`.\n /\n size?: SizeProp;\n\n /\n Задаёт текущий активный `<Tab />`. Принимает `id` таба.\n /\n value: T;\n\n /\n Функция, позволяющая изменить текущий активный `<Tab />`.\n /\n onValueChange?: (value: T) => void;\n\n /\n Переводит компонент в режим вертикального отображения.\n * @default false\n /\n vertical?: boolean;\n\n /\n `CSS`-свойство `width`.\n /\n width?: number \| string;\n\n /\n Атрибут для указания id элемента(-ов), описывающих его.\n /\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const TabsDataTids = {\n root: 'Tabs__root',\n indicatorRoot: 'Indicator__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TabsProps, 'vertical' \| 'size'>>;\n\n/\n Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.\n */\n@rootNode\nexport class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {\n public static __KONTUR_REACT_UI__ = 'Tabs';\n public static displayName = 'Tabs';\n\n public static defaultProps: DefaultProps = {\n vertical: false,\n size: 'large',\n };\n\n private getProps = createPropsGetter(Tabs.defaultProps);\n\n public static Tab = Tab;\n\n private theme!: Theme;\n\n private tabs: Array<TabType<T>> = [];\n\n private tabUpdates = {\n on: (cb: () => void) => {\n const index = this.listeners.push(cb);\n return () => {\n this.listeners.splice(index, 1);\n };\n },\n };\n\n private listeners: Array<typeof emptyHandler> = [];\n private setRootNode!: TSetRootNode;\n\n public render(): JSX.Element {\n const { value, width, children, indicatorClassName, 'aria-describedby': ariaDescribedby } = this.props;\n const { vertical, size } = this.getProps();\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={TabsDataTids.root}\n className={cx({\n [styles.rootSmall(this.theme)]: size === 'small',\n [styles.rootMedium(this.theme)]: size === 'medium',\n [styles.rootLarge(this.theme)]: size === 'large',\n [styles.vertical()]: vertical,\n })}\n style={{ width }}\n aria-describedby={ariaDescribedby}\n >\n <TabsContext.Provider\n value={{\n vertical,\n activeTab: value,\n size,\n getTab: this.getTab,\n addTab: this.addTab,\n removeTab: this.removeTab,\n notifyUpdate: this.notifyUpdate,\n shiftFocus: this.shiftFocus,\n switchTab: this.switchTab,\n }}\n >\n {children}\n <Indicator\n className={indicatorClassName}\n tabUpdates={this.tabUpdates}\n vertical={this.getProps().vertical}\n />\n </TabsContext.Provider>\n </div>\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private shiftFocus: TabsContextType<T>['shiftFocus'] = (fromTab, delta) => {\n const { tabs } = this;\n const index = tabs.findIndex((x) => x.id === fromTab);\n const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\n const tab = tabs[newIndex];\n\n const tabNode = tab.getNode();\n const htmlNode = getRootNode(tabNode);\n\n if (isInstanceOf(htmlNode, globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {\n htmlNode.focus();\n }\n };\n\n private notifyUpdate: TabsContextType<T>['notifyUpdate'] = () => {\n this.listeners.forEach((cb) => cb());\n };\n\n private switchTab: TabsContextType<T>['switchTab'] = (id) => {\n const { onValueChange, value } = this.props;\n if (id !== value && onValueChange) {\n onValueChange(id);\n }\n };\n\n private getTab: TabsContextType<T>['getTab'] = (id) => {\n const { getNode = null } = this.tabs.find((x) => x.id === id) \|\| {};\n return getNode && getNode();\n };\n\n private addTab: TabsContextType<T>['addTab'] = (id, getNode) => {\n this.tabs = this.tabs.concat({ id, getNode });\n };\n\n private removeTab: TabsContextType<T>['removeTab'] = (id) => {\n this.tabs = this.tabs.filter((tab) => tab.id !== id);\n };\n}\n"]}