npm - @skbkontur/react-ui - Versions diffs - 0.0.0-b08da15166 → 0.0.0-b5a1896fa9 - Mend

@skbkontur/react-ui 0.0.0-b08da15166 → 0.0.0-b5a1896fa9

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 (2163) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","keyListener","ThemeContext","CommonWrapper","cx","rootNode","styles","globalClasses","colorWarningShown","Toggle","props","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","theme","renderMain","children","captionPosition","error","loading","color","id","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","root","rootLeft","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","Component","__KONTUR_REACT_UI__","propTypes","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\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';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends CommonProps {\n children?: React.ReactNode;\n /*\n Положение `children` относительно переключателя.\n * @default 'right'\n /\n captionPosition: 'left' \| 'right';\n /\n Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.\n * @default false\n /\n checked?: boolean;\n /\n Делает `тогл` включенным по умолчанию.\n /\n defaultChecked?: boolean;\n /\n Отключает `тогл`.\n /\n disabled?: boolean;\n /\n Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.\n /\n onValueChange?: (value: boolean) => void;\n /\n Событие вызывающееся при клике на `тогл`.\n /\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n /\n Состояние валидации при предупреждении.\n * @default false\n /\n warning?: boolean;\n /\n Состояние валидации при ошибке.\n * @default false\n /\n error?: boolean;\n /\n Добавляет стили для состояния `loading` и отключает `тогл`.\n /\n loading?: boolean;\n /\n Если true, выставляет фокус на `тогле` после загрузки страницы.\n /\n autoFocus?: boolean;\n /\n Событие вызывающееся, когда `тогл` получает фокус.\n /\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n /\n Событие вызывающееся, когда `тогл` теряет фокус.\n /\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n /\n @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.\n /\n color?: React.CSSProperties['color'];\n /\n HTML-атрибут `id` для передачи во внутренний `<input />`.\n /\n id?: string;\n}\n\nexport interface ToggleState {\n checked?: boolean;\n focusByTab?: boolean;\n}\n\n/\n _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\n /\n@rootNode\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n public static __KONTUR_REACT_UI__ = 'Toggle';\n\n public static propTypes = {\n checked: PropTypes.bool,\n defaultChecked: PropTypes.bool,\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n loading: PropTypes.bool,\n warning: PropTypes.bool,\n onValueChange: PropTypes.func,\n color: (props: ToggleProps) => {\n if (props.color && !colorWarningShown) {\n warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n colorWarningShown = true;\n }\n },\n };\n\n public static defaultProps = {\n disabled: false,\n loading: false,\n captionPosition: 'right',\n };\n\n private theme!: Theme;\n private input: HTMLInputElement \| null = null;\n private setRootNode!: TSetRootNode;\n\n constructor(props: ToggleProps) {\n super(props);\n\n this.state = {\n focusByTab: false,\n checked: props.defaultChecked,\n };\n }\n\n public componentDidMount() {\n if (this.props.autoFocus) {\n keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n /\n @public\n */\n public focus = () => {\n if (this.input) {\n keyListener.isTabPressed = true;\n this.input.focus();\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 private renderMain() {\n const { children, captionPosition, warning, error, loading, color, id } = this.props;\n const disabled = this.props.disabled \|\| loading;\n const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n const containerClassNames = cx(styles.container(this.theme), {\n [styles.containerDisabled(this.theme)]: !!disabled,\n [globalClasses.container]: true,\n [globalClasses.containerDisabled]: !!disabled,\n [globalClasses.containerLoading]: loading,\n });\n\n const labelClassNames = cx(styles.root(this.theme), {\n [styles.rootLeft()]: captionPosition === 'left',\n [styles.disabled()]: !!disabled,\n [globalClasses.disabled]: !!disabled,\n });\n\n let caption = null;\n if (children) {\n const captionClass = cx(styles.caption(this.theme), {\n [styles.captionLeft(this.theme)]: captionPosition === 'left',\n [styles.disabledCaption(this.theme)]: !!disabled,\n });\n caption = <span className={captionClass}>{children}</span>;\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <label className={labelClassNames}>\n <div\n className={cx(styles.button(this.theme), {\n [styles.buttonRight()]: captionPosition === 'left',\n [styles.isWarning(this.theme)]: !!warning,\n [styles.isError(this.theme)]: !!error,\n [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n })}\n >\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={this.handleChange}\n className={styles.input(this.theme)}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={this.inputRef}\n disabled={disabled}\n id={id}\n />\n <div\n className={containerClassNames}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n >\n <div\n className={cx(styles.activeBackground(), globalClasses.background, {\n [styles.activeBackgroundLoading(this.theme)]: loading,\n [styles.disabledBackground(this.theme)]: disabled,\n })}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n />\n </div>\n <div\n className={cx(styles.handle(this.theme), globalClasses.handle, {\n [styles.handleDisabled(this.theme)]: disabled,\n })}\n />\n </div>\n {caption}\n </label>\n </CommonWrapper>\n );\n }\n\n private inputRef = (element: HTMLInputElement) => {\n this.input = element;\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.checked);\n }\n\n if (this.isUncontrolled()) {\n this.setState({\n checked: event.target.checked,\n });\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n\n if (keyListener.isTabPressed) {\n this.setState({ focusByTab: true });\n }\n };\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n this.setState({\n focusByTab: false,\n });\n };\n\n private isUncontrolled() {\n return this.props.checked === undefined;\n }\n}\n"]}
1	+ {"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","keyListener","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","isTestEnv","isTheme2022","styles","globalClasses","colorWarningShown","ToggleDataTids","root","Toggle","props","getProps","defaultProps","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","theme","renderMain","children","error","color","id","ariaDescribedby","loading","captionPosition","disableAnimations","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","activeHandle","rootLeft","disableAnimation","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","input2022","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","Component","__KONTUR_REACT_UI__","propTypes","bool","func"],"mappings":"2JAAA,OAAOA,KAAP,MAAsC,OAAtC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,OAAP,MAAoB,SAApB;;AAEA,SAASC,WAAT,QAA4B,8BAA5B;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;AACA,SAASC,SAAT,QAA0B,8BAA1B;AACA,SAASC,WAAT,QAA4B,gCAA5B;;AAEA,SAASC,MAAT,EAAiBC,aAAjB,QAAsC,iBAAtC;;AAEA,IAAIC,iBAAiB,GAAG,KAAxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EA,OAAO,IAAMC,cAAc,GAAG;AAC5BC,EAAAA,IAAI,EAAE,cADsB,EAAvB;;;;;;;;;AAUP,OAJA;AACA;AACA,GAEA,IAAaC,MAAb,GADCT,QACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCE,kBAAYU,KAAZ,EAAgC;AAC9B,wCAAMA,KAAN,UAD8B,MANxBC,QAMwB,GANbV,iBAAiB,CAACQ,MAAM,CAACG,YAAR,CAMJ,OAHxBC,KAGwB,GAHS,IAGT;;;;;;;;;;;;;;;;;;AAmBzBC,IAAAA,KAnByB,GAmBjB,YAAM;AACnB,UAAI,MAAKD,KAAT,EAAgB;AACdjB,QAAAA,WAAW,CAACmB,YAAZ,GAA2B,IAA3B;AACA,cAAKF,KAAL,CAAWC,KAAX;AACD;AACF,KAxB+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmIxBE,IAAAA,QAnIwB,GAmIb,UAACC,OAAD,EAA+B;AAChD,YAAKJ,KAAL,GAAaI,OAAb;AACD,KArI+B;;AAuIxBC,IAAAA,YAvIwB,GAuIT,UAACC,KAAD,EAAgD;AACrE,UAAI,MAAKT,KAAL,CAAWU,aAAf,EAA8B;AAC5B,cAAKV,KAAL,CAAWU,aAAX,CAAyBD,KAAK,CAACE,MAAN,CAAaC,OAAtC;AACD;;AAED,UAAI,MAAKC,cAAL,EAAJ,EAA2B;AACzB,cAAKC,QAAL,CAAc;AACZF,UAAAA,OAAO,EAAEH,KAAK,CAACE,MAAN,CAAaC,OADV,EAAd;;AAGD;;AAED,UAAI,MAAKZ,KAAL,CAAWe,QAAf,EAAyB;AACvB,cAAKf,KAAL,CAAWe,QAAX,CAAoBN,KAApB;AACD;AACF,KArJ+B;;AAuJxBO,IAAAA,WAvJwB,GAuJV,UAACP,KAAD,EAA+C;AACnE,UAAI,MAAKT,KAAL,CAAWiB,OAAf,EAAwB;AACtB,cAAKjB,KAAL,CAAWiB,OAAX,CAAmBR,KAAnB;AACD;;AAED,UAAIvB,WAAW,CAACmB,YAAhB,EAA8B;AAC5B,cAAKS,QAAL,CAAc,EAAEI,UAAU,EAAE,IAAd,EAAd;AACD;AACF,KA/J+B;;AAiKxBC,IAAAA,UAjKwB,GAiKX,UAACV,KAAD,EAA+C;AAClE,UAAI,MAAKT,KAAL,CAAWoB,MAAf,EAAuB;AACrB,cAAKpB,KAAL,CAAWoB,MAAX,CAAkBX,KAAlB;AACD;AACD,YAAKK,QAAL,CAAc;AACZI,QAAAA,UAAU,EAAE,KADA,EAAd;;AAGD,KAxK+B,CAG9B,MAAKG,KAAL,GAAa,EACXH,UAAU,EAAE,KADD,EAEXN,OAAO,EAAEZ,KAAK,CAACsB,cAFJ,EAAb,CAH8B,aAO/B,CAvCH,qCAyCSC,iBAzCT,GAyCE,6BAA2B,CACzB,IAAI,KAAKvB,KAAL,CAAWwB,SAAf,EAA0B,CACxBtC,WAAW,CAACmB,YAAZ,GAA2B,IAA3B,CACA,KAAKD,KAAL,GACD,CACF,CA9CH,CAgDE;AACF;AACA,KAlDA,QA0DSqB,MA1DT,GA0DE,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,CAnEH,QAqEUA,UArEV,GAqEE,sBAAqB,iCACnB,kBAAqF,KAAK3B,KAA1F,CAAQ4B,QAAR,eAAQA,QAAR,CAAkB3C,OAAlB,eAAkBA,OAAlB,CAA2B4C,KAA3B,eAA2BA,KAA3B,CAAkCC,KAAlC,eAAkCA,KAAlC,CAAyCC,EAAzC,eAAyCA,EAAzC,CAAiEC,eAAjE,eAA6C,kBAA7C,EACA,qBAAwD,KAAK/B,QAAL,EAAxD,CAAQgC,OAAR,kBAAQA,OAAR,CAAiBC,eAAjB,kBAAiBA,eAAjB,CAAkCC,iBAAlC,kBAAkCA,iBAAlC,CACA,IAAMC,QAAQ,GAAG,KAAKnC,QAAL,GAAgBmC,QAAhB,IAA4BH,OAA7C,CACA,IAAMrB,OAAO,GAAG,KAAKC,cAAL,KAAwB,KAAKQ,KAAL,CAAWT,OAAnC,GAA6C,KAAKZ,KAAL,CAAWY,OAAxE,CAEA,IAAMyB,mBAAmB,GAAGhD,EAAE,CAACK,MAAM,CAAC4C,SAAP,CAAiB,KAAKZ,KAAtB,CAAD,iBAC3BhC,MAAM,CAAC6C,iBAAP,CAAyB,KAAKb,KAA9B,CAD2B,IACY,CAAC,CAACU,QADd,MAE3BzC,aAAa,CAAC2C,SAFa,IAED,IAFC,MAG3B3C,aAAa,CAAC4C,iBAHa,IAGO,CAAC,CAACH,QAHT,MAI3BzC,aAAa,CAAC6C,gBAJa,IAIMP,OAJN,OAA9B,CAOA,IAAMQ,eAAe,GAAGpD,EAAE,CAACK,MAAM,CAACI,IAAP,CAAY,KAAK4B,KAAjB,CAAD,mBACvBhC,MAAM,CAACgD,YAAP,CAAoB,KAAKhB,KAAzB,CADuB,IACW,CAACjC,WAAW,CAAC,KAAKiC,KAAN,CADvB,OAEvBhC,MAAM,CAACiD,QAAP,EAFuB,IAEHT,eAAe,KAAK,MAFjB,OAGvBxC,MAAM,CAAC0C,QAAP,EAHuB,IAGH,CAAC,CAACA,QAHC,OAIvBzC,aAAa,CAACyC,QAJS,IAIE,CAAC,CAACA,QAJJ,OAKvB1C,MAAM,CAACkD,gBAAP,EALuB,IAKKT,iBALL,QAA1B,CAQA,IAAIU,OAAO,GAAG,IAAd,CACA,IAAIjB,QAAJ,EAAc,UACZ,IAAMkB,YAAY,GAAGzD,EAAE,CAACK,MAAM,CAACmD,OAAP,CAAe,KAAKnB,KAApB,CAAD,mBACpBhC,MAAM,CAACqD,WAAP,CAAmB,KAAKrB,KAAxB,CADoB,IACaQ,eAAe,KAAK,MADjC,OAEpBxC,MAAM,CAACsD,eAAP,CAAuB,KAAKtB,KAA5B,CAFoB,IAEiB,CAAC,CAACU,QAFnB,QAAvB,CAIAS,OAAO,gBAAG,8BAAM,SAAS,EAAEC,YAAjB,IAAgClB,QAAhC,CAAV,CACD,CAED,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,KAAKqB,WAAjC,IAAkD,KAAKjD,KAAvD,gBACE,+BAAO,YAAUH,cAAc,CAACC,IAAhC,EAAsC,SAAS,EAAE2C,eAAjD,iBACE,6BACE,SAAS,EAAEpD,EAAE,CAACK,MAAM,CAACwD,MAAP,CAAc,KAAKxB,KAAnB,CAAD,mBACVhC,MAAM,CAACyD,WAAP,EADU,IACajB,eAAe,KAAK,MADjC,OAEVxC,MAAM,CAAC0D,SAAP,CAAiB,KAAK1B,KAAtB,CAFU,IAEqB,CAAC,CAACzC,OAFvB,OAGVS,MAAM,CAAC2D,OAAP,CAAe,KAAK3B,KAApB,CAHU,IAGmB,CAAC,CAACG,KAHrB,OAIVnC,MAAM,CAAC4D,OAAP,CAAe,KAAK5B,KAApB,CAJU,IAImB,CAACU,QAAD,IAAa,CAAC,CAAC,KAAKf,KAAL,CAAWH,UAJ7C,QADf,iBAQE,+BACE,IAAI,EAAC,UADP,EAEE,OAAO,EAAEN,OAFX,EAGE,QAAQ,EAAE,KAAKJ,YAHjB,EAIE,SAAS,EAAEnB,EAAE,CAACK,MAAM,CAACS,KAAP,CAAa,KAAKuB,KAAlB,CAAD,EAA2BjC,WAAW,CAAC,KAAKiC,KAAN,CAAX,IAA2BhC,MAAM,CAAC6D,SAAP,CAAiB,KAAK7B,KAAtB,CAAtD,CAJf,EAKE,OAAO,EAAE,KAAKV,WALhB,EAME,MAAM,EAAE,KAAKG,UANf,EAOE,GAAG,EAAE,KAAKb,QAPZ,EAQE,QAAQ,EAAE8B,QARZ,EASE,EAAE,EAAEL,EATN,EAUE,IAAI,EAAC,QAVP,EAWE,oBAAkBC,eAXpB,GARF,eAqBE,6BACE,SAAS,EAAEK,mBADb,EAEE,KAAK,EACHzB,OAAO,IAAIkB,KAAX,IAAoB,CAACM,QAArB,GACI,EACEoB,eAAe,EAAE1B,KADnB,EAEE2B,SAAS,uBAAqB3B,KAFhC,EADJ,GAKI4B,SARR,IAWG,CAACjE,WAAW,CAAC,KAAKiC,KAAN,CAAZ,iBACC,6BACE,SAAS,EAAErC,EAAE,CAACK,MAAM,CAACiE,gBAAP,EAAD,EAA4BhE,aAAa,CAACiE,UAA1C,mBACVlE,MAAM,CAACmE,uBAAP,CAA+B,KAAKnC,KAApC,CADU,IACmCO,OADnC,OAEVvC,MAAM,CAACoE,kBAAP,CAA0B,KAAKpC,KAA/B,CAFU,IAE8BU,QAF9B,QADf,EAKE,KAAK,EACHxB,OAAO,IAAIkB,KAAX,IAAoB,CAACM,QAArB,GACI,EACEoB,eAAe,EAAE1B,KADnB,EAEE2B,SAAS,uBAAqB3B,KAFhC,EADJ,GAKI4B,SAXR,GAZJ,CArBF,eAiDE,6BACE,SAAS,EAAErE,EAAE,CAACK,MAAM,CAACqE,MAAP,CAAc,KAAKrC,KAAnB,CAAD,EAA4B/B,aAAa,CAACoE,MAA1C,mBACVrE,MAAM,CAACsE,cAAP,CAAsB,KAAKtC,KAA3B,CADU,IAC0BU,QAD1B,QADf,GAjDF,CADF,EAwDGS,OAxDH,CADF,CADF,CA8DD,CAjKH,QA0MUhC,cA1MV,GA0ME,0BAAyB;AACvB,WAAO,KAAKb,KAAL,CAAWY,OAAX,KAAuB8C,SAA9B;AACD,GA5MH,iBAA4B3E,KAAK,CAACkF,SAAlC,WACgBC,mBADhB,GACsC,QADtC,UAGgBC,SAHhB,GAG4B,EACxBvD,OAAO,EAAE5B,SAAS,CAACoF,IADK,EAExB9C,cAAc,EAAEtC,SAAS,CAACoF,IAFF,EAGxBhC,QAAQ,EAAEpD,SAAS,CAACoF,IAHI,EAIxBvC,KAAK,EAAE7C,SAAS,CAACoF,IAJO,EAKxBnC,OAAO,EAAEjD,SAAS,CAACoF,IALK,EAMxBnF,OAAO,EAAED,SAAS,CAACoF,IANK,EAOxB1D,aAAa,EAAE1B,SAAS,CAACqF,IAPD,EAQxBvC,KAAK,EAAE,eAAC9B,KAAD,EAAwB,CAC7B,IAAIA,KAAK,CAAC8B,KAAN,IAAe,CAAClC,iBAApB,EAAuC,CACrCX,OAAO,CAAC,KAAD,iGAAP,CACAW,iBAAiB,GAAG,IAApB,CACD,CACF,CAbuB,EAH5B,UAmBgBM,YAnBhB,GAmB6C,EACzCkC,QAAQ,EAAE,KAD+B,EAEzCH,OAAO,EAAE,KAFgC,EAGzCC,eAAe,EAAE,OAHwB,EAIzCC,iBAAiB,EAAE3C,SAJsB,EAnB7C","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\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 { isTestEnv } from '../../lib/currentEnvironment';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends CommonProps {\n children?: React.ReactNode;\n /*\n Положение `children` относительно переключателя.\n * @default 'right'\n /\n captionPosition?: 'left' \| 'right';\n /\n Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.\n * @default false\n /\n checked?: boolean;\n /\n Делает `тогл` включенным по умолчанию.\n /\n defaultChecked?: boolean;\n /\n Отключает `тогл`.\n /\n disabled?: boolean;\n /\n Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.\n /\n onValueChange?: (value: boolean) => void;\n /\n Событие вызывающееся при клике на `тогл`.\n /\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n /\n Состояние валидации при предупреждении.\n * @default false\n /\n warning?: boolean;\n /\n Состояние валидации при ошибке.\n * @default false\n /\n error?: boolean;\n /\n Добавляет стили для состояния `loading` и отключает `тогл`.\n /\n loading?: boolean;\n /\n Если true, выставляет фокус на `тогле` после загрузки страницы.\n /\n autoFocus?: boolean;\n /\n Атрибут для указания id элемента(-ов), описывающих его\n /\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n /\n Событие вызывающееся, когда `тогл` получает фокус.\n /\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n /\n Событие вызывающееся, когда `тогл` теряет фокус.\n /\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n /\n @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.\n /\n color?: React.CSSProperties['color'];\n /\n HTML-атрибут `id` для передачи во внутренний `<input />`.\n /\n id?: string;\n /\n Не показывать анимацию\n /\n disableAnimations?: boolean;\n}\n\nexport interface ToggleState {\n checked?: boolean;\n focusByTab?: boolean;\n}\n\nexport const ToggleDataTids = {\n root: 'Toggle__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ToggleProps, 'disabled' \| 'loading' \| 'captionPosition' \| 'disableAnimations'>>;\n\n/\n _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\n /\n@rootNode\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n public static __KONTUR_REACT_UI__ = 'Toggle';\n\n public static propTypes = {\n checked: PropTypes.bool,\n defaultChecked: PropTypes.bool,\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n loading: PropTypes.bool,\n warning: PropTypes.bool,\n onValueChange: PropTypes.func,\n color: (props: ToggleProps) => {\n if (props.color && !colorWarningShown) {\n warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n colorWarningShown = true;\n }\n },\n };\n\n public static defaultProps: DefaultProps = {\n disabled: false,\n loading: false,\n captionPosition: 'right',\n disableAnimations: isTestEnv,\n };\n\n private getProps = createPropsGetter(Toggle.defaultProps);\n\n private theme!: Theme;\n private input: HTMLInputElement \| null = null;\n private setRootNode!: TSetRootNode;\n\n constructor(props: ToggleProps) {\n super(props);\n\n this.state = {\n focusByTab: false,\n checked: props.defaultChecked,\n };\n }\n\n public componentDidMount() {\n if (this.props.autoFocus) {\n keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n /\n @public\n */\n public focus = () => {\n if (this.input) {\n keyListener.isTabPressed = true;\n this.input.focus();\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 private renderMain() {\n const { children, warning, error, color, id, 'aria-describedby': ariaDescribedby } = this.props;\n const { loading, captionPosition, disableAnimations } = this.getProps();\n const disabled = this.getProps().disabled \|\| loading;\n const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n const containerClassNames = cx(styles.container(this.theme), {\n [styles.containerDisabled(this.theme)]: !!disabled,\n [globalClasses.container]: true,\n [globalClasses.containerDisabled]: !!disabled,\n [globalClasses.containerLoading]: loading,\n });\n\n const labelClassNames = cx(styles.root(this.theme), {\n [styles.activeHandle(this.theme)]: !isTheme2022(this.theme),\n [styles.rootLeft()]: captionPosition === 'left',\n [styles.disabled()]: !!disabled,\n [globalClasses.disabled]: !!disabled,\n [styles.disableAnimation()]: disableAnimations,\n });\n\n let caption = null;\n if (children) {\n const captionClass = cx(styles.caption(this.theme), {\n [styles.captionLeft(this.theme)]: captionPosition === 'left',\n [styles.disabledCaption(this.theme)]: !!disabled,\n });\n caption = <span className={captionClass}>{children}</span>;\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <label data-tid={ToggleDataTids.root} className={labelClassNames}>\n <div\n className={cx(styles.button(this.theme), {\n [styles.buttonRight()]: captionPosition === 'left',\n [styles.isWarning(this.theme)]: !!warning,\n [styles.isError(this.theme)]: !!error,\n [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n })}\n >\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={this.handleChange}\n className={cx(styles.input(this.theme), isTheme2022(this.theme) && styles.input2022(this.theme))}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={this.inputRef}\n disabled={disabled}\n id={id}\n role=\"switch\"\n aria-describedby={ariaDescribedby}\n />\n <div\n className={containerClassNames}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n >\n {!isTheme2022(this.theme) && (\n <div\n className={cx(styles.activeBackground(), globalClasses.background, {\n [styles.activeBackgroundLoading(this.theme)]: loading,\n [styles.disabledBackground(this.theme)]: disabled,\n })}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n />\n )}\n </div>\n <div\n className={cx(styles.handle(this.theme), globalClasses.handle, {\n [styles.handleDisabled(this.theme)]: disabled,\n })}\n />\n </div>\n {caption}\n </label>\n </CommonWrapper>\n );\n }\n\n private inputRef = (element: HTMLInputElement) => {\n this.input = element;\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.checked);\n }\n\n if (this.isUncontrolled()) {\n this.setState({\n checked: event.target.checked,\n });\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n\n if (keyListener.isTabPressed) {\n this.setState({ focusByTab: true });\n }\n };\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n this.setState({\n focusByTab: false,\n });\n };\n\n private isUncontrolled() {\n return this.props.checked === undefined;\n }\n}\n"]}

package/components/Toggle/Toggle.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 export interface ToggleProps extends CommonProps {
@@ -7,7 +7,7 @@ export interface ToggleProps extends CommonProps {
      * Положение `children` относительно переключателя.
      * @default 'right'
      */
-    captionPosition: 'left' | 'right';
+    captionPosition?: 'left' | 'right';
     /**
      * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.
      * @default false
@@ -47,6 +47,10 @@ export interface ToggleProps extends CommonProps {
      * Если true, выставляет фокус на `тогле` после загрузки страницы.
      */
     autoFocus?: boolean;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
     /**
      * Событие вызывающееся, когда `тогл` получает фокус.
      */
@@ -63,11 +67,19 @@ export interface ToggleProps extends CommonProps {
      * HTML-атрибут `id` для передачи во внутренний `<input />`.
      */
     id?: string;
+    /**
+     * Не показывать анимацию
+     */
+    disableAnimations?: boolean;
 }
 export interface ToggleState {
     checked?: boolean;
     focusByTab?: boolean;
 }
+export declare const ToggleDataTids: {
+    readonly root: "Toggle__root";
+};
+declare type DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations'>>;
 /**
  * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
  */
@@ -83,11 +95,8 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
         onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
         color: (props: ToggleProps) => void;
     };
-    static defaultProps: {
-        disabled: boolean;
-        loading: boolean;
-        captionPosition: string;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     private theme;
     private input;
     private setRootNode;
@@ -105,3 +114,4 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
     private handleBlur;
     private isUncontrolled;
 }
+export {};

package/components/Toggle/Toggle.styles/Toggle.styles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
 import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import { isChrome } from "../../../lib/client";
@@ -14,66 +14,75 @@ export var globalClasses = prefix('toggle')({
 });
 export var styles = memoizeStyle({
   root: function root(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n\n      &:hover .", " {\n        background: ", ";\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned button,\n        // and also height and baseline for toggle without caption.\n        content: '\\00A0';\n        display: inline-block;\n        width: ", ";\n        flex: 0 0 auto;\n      }\n    "], ["\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n\n      &:hover .", " {\n        background: ", ";\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned button,\n        // and also height and baseline for toggle without caption.\n        content: '\\\\00A0';\n        display: inline-block;\n        width: ", ";\n        flex: 0 0 auto;\n      }\n    "])), t.toggleLineHeight, t.toggleFontSize, globalClasses.handle, t.toggleBgHover, t.toggleWidth);
+  },
+  activeHandle: function activeHandle(t) {
     var handleWidthWithBorders = t.toggleHeight;
     var handleActiveWidth = "calc(" + handleWidthWithBorders + " - 2 * " + t.toggleBorderWidth + " + " + t.toggleHandleActiveWidthIncrement + ")";
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n\n      &:hover .", " {\n        background: ", ";\n      }\n      &:active:not(.", ") .", " {\n        width: ", ";\n      }\n      &:active:not(.", ") input:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ") translateX(-4px);\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned button,\n        // and also height and baseline for toggle without caption.\n        content: '\\00A0';\n        display: inline-block;\n        width: ", ";\n        flex: 0 0 auto;\n      }\n    "], ["\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n\n      &:hover .", " {\n        background: ", ";\n      }\n      &:active:not(.", ") .", " {\n        width: ", ";\n      }\n      &:active:not(.", ") input:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ") translateX(-4px);\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned button,\n        // and also height and baseline for toggle without caption.\n        content: '\\\\00A0';\n        display: inline-block;\n        width: ", ";\n        flex: 0 0 auto;\n      }\n    "])), t.toggleLineHeight, t.toggleFontSize, globalClasses.handle, t.toggleBgHover, globalClasses.disabled, globalClasses.handle, handleActiveWidth, globalClasses.disabled, globalClasses.handle, t.toggleWidth, handleWidthWithBorders, t.toggleWidth);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      &:active:not(.", ") .", " {\n        width: ", ";\n      }\n      &:active:not(.", ") input:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ") translateX(-4px);\n      }\n    "])), globalClasses.disabled, globalClasses.handle, handleActiveWidth, globalClasses.disabled, globalClasses.handle, t.toggleWidth, handleWidthWithBorders);
+  },
+  disableAnimation: function disableAnimation() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      &,\n      * {\n        transition: none !important;\n      }\n    "])));
   },
   handle: function handle(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n      bottom: ", ";\n      box-shadow: 0 ", " 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ", " rgba(0, 0, 0, 0.15);\n      height: ", ";\n      left: ", ";\n      position: absolute;\n      top: ", ";\n      transition: 0.2s ease-in;\n      width: ", ";\n    "])), t.toggleHandleBg, t.toggleHandleBorderRadius, t.toggleBorderWidth, t.toggleBorderWidth, t.toggleBorderWidth, t.toggleHandleSize, t.toggleHandleLeft, t.toggleHandleTop, t.toggleHandleSize);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n      bottom: ", ";\n      box-shadow: ", ";\n      height: ", ";\n      left: ", ";\n      position: absolute;\n      top: ", ";\n      transition: 0.2s ease-in;\n      width: ", ";\n    "])), t.toggleHandleBg, t.toggleHandleBorderRadius, t.toggleBorderWidth, t.toggleHandleBoxShadowOld, t.toggleHandleSize, t.toggleHandleLeft, t.toggleHandleTop, t.toggleHandleSize);
   },
   handleDisabled: function handleDisabled(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override root hover/active styles\n    "])), t.toggleDisabledHandleBg);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override root hover/active styles\n    "])), t.toggleDisabledHandleBg);
   },
   input: function input(t) {
     var handleWidthWithBorders = t.toggleHeight;
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n        border-radius: calc(", " * 0.5) 0 0 calc(", " * 0.5);\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n      &:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ");\n        background: ", ";\n        &:hover {\n          background: ", ";\n        }\n      }\n    "])), globalClasses.container, t.toggleBorderWidth, t.toggleBgChecked, t.toggleBgChecked, globalClasses.containerDisabled, t.toggleBorderWidth, t.toggleBorderColorDisabledChecked, t.toggleBgDisabledChecked, globalClasses.containerLoading, t.toggleBorderColor, t.toggleBorderWidth, t.toggleBorderColor, globalClasses.container, globalClasses.background, t.toggleBgChecked, globalClasses.containerDisabled, globalClasses.background, t.toggleBgDisabledChecked, t.toggleHeight, t.toggleHeight, t.toggleBorderColorDisabledChecked, globalClasses.handle, t.toggleWidth, handleWidthWithBorders, t.toggleCheckedBg, t.toggleCheckedBgHover);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n        border-radius: calc(", " * 0.5) 0 0 calc(", " * 0.5);\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n      &:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ");\n        background: ", ";\n        &:hover {\n          background: ", ";\n        }\n      }\n    "])), globalClasses.container, t.toggleBorderWidth, t.toggleBgChecked, t.toggleBgChecked, globalClasses.containerDisabled, t.toggleBorderWidth, t.toggleBorderColorDisabledChecked, t.toggleBgDisabledChecked, globalClasses.containerLoading, t.toggleBorderColor, t.toggleBorderWidth, t.toggleBorderColor, globalClasses.container, globalClasses.background, t.toggleBgChecked, globalClasses.containerDisabled, globalClasses.background, t.toggleBgDisabledChecked, t.toggleHeight, t.toggleHeight, t.toggleBorderColorDisabledChecked, globalClasses.handle, t.toggleWidth, handleWidthWithBorders, t.toggleCheckedBg, t.toggleCheckedBgHover);
+  },
+  input2022: function input2022(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &:enabled {\n        ~ .", ", ~ .", " {\n          transition: 0.2s ease-in !important;\n        }\n        :not(:checked) {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n        :checked {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n      }\n      &:enabled:hover {\n        :not(:checked) {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n        :checked {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n      }\n      &:disabled {\n        :not(:checked) {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", " !important;\n            box-shadow: ", ";\n          }\n        }\n        :checked {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", " !important;\n            box-shadow: ", ";\n          }\n        }\n      }\n    "])), globalClasses.container, globalClasses.handle, globalClasses.container, t.toggleContainerBg, t.toggleContainerBoxShadow, globalClasses.handle, t.toggleHandleBg, t.toggleHandleBoxShadow, globalClasses.container, t.toggleContainerBgChecked, t.toggleContainerBoxShadowChecked, globalClasses.handle, t.toggleHandleBgChecked, t.toggleHandleBoxShadowChecked, globalClasses.container, t.toggleContainerBgHover, t.toggleContainerBoxShadowHover, globalClasses.handle, t.toggleHandleBgHover, t.toggleHandleBoxShadowHover, globalClasses.container, t.toggleContainerBgCheckedHover, t.toggleContainerBoxShadowCheckedHover, globalClasses.handle, t.toggleHandleBgCheckedHover, t.toggleHandleBoxShadowCheckedHover, globalClasses.container, t.toggleContainerBgDisabled, t.toggleContainerBoxShadowDisabled, globalClasses.handle, t.toggleHandleBgDisabled, t.toggleHandleBoxShadowDisabled, globalClasses.container, t.toggleContainerBgDisabledChecked, t.toggleContainerBoxShadowDisabledChecked, globalClasses.handle, t.toggleHandleBgDisabledChecked, t.toggleHandleBoxShadowDisabledChecked);
   },
   container: function container(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n      box-shadow: inset 0 0 0 ", " ", ";\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    "])), t.toggleBorderRadius, t.toggleBorderWidth, t.toggleBorderColor);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n      box-shadow: inset 0 0 0 ", " ", ";\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    "])), t.toggleBorderRadius, t.toggleBorderWidth, t.toggleBorderColor);
   },
   containerDisabled: function containerDisabled(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    "])), t.toggleBgDisabled, t.toggleBorderColorDisabled);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    "])), t.toggleBgDisabled, t.toggleBorderColorDisabled);
   },
   focused: function focused(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
   },
   activeBackground: function activeBackground() {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      background: inherit;\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      transition: 0.2s ease-in;\n      width: 10px;\n    "])));
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      background: inherit;\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      transition: 0.2s ease-in;\n      width: 10px;\n    "])));
   },
   disabledBackground: function disabledBackground(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      box-shadow: inset 0 0 0 1px ", ";\n      width: 0;\n    "])), t.toggleBorderColorDisabled);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      box-shadow: inset 0 0 0 1px ", ";\n      width: 0;\n    "])), t.toggleBorderColorDisabled);
   },
   activeBackgroundLoading: function activeBackgroundLoading(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.toggleBgActive);
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.toggleBgActive);
   },
   isWarning: function isWarning(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
   },
   isError: function isError(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
   },
   button: function button(t) {
     var labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);
     var fontSize = parseInt(t.checkboxFontSize);
     var baselineCompensation = fontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      left: 0;\n      top: 0;\n      height: ", ";\n      width: ", ";\n      flex: 1 0 ", ";\n\n      background: ", ";\n      border-radius: ", ";\n      line-height: ", ";\n\n      margin-top: calc(", " + ", "px);\n    "])), t.toggleHeight, t.toggleWidth, t.toggleWidth, t.toggleBaseBg, t.toggleBorderRadius, t.toggleHeight, t.toggleButtonOffsetY, baselineCompensation);
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      left: 0;\n      top: 0;\n      height: ", ";\n      width: ", ";\n      flex: 1 0 ", ";\n\n      background: ", ";\n      border-radius: ", ";\n      line-height: ", ";\n\n      margin-top: calc(", " + ", "px);\n    "])), t.toggleHeight, t.toggleWidth, t.toggleWidth, t.toggleBaseBg, t.toggleBorderRadius, t.toggleHeight, t.toggleButtonOffsetY, baselineCompensation);
   },
   buttonRight: function buttonRight() {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      right: 0;\n      left: auto;\n    "])));
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      right: 0;\n      left: auto;\n    "])));
   },
   disabled: function disabled() {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
   },
   rootLeft: function rootLeft() {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      flex-direction: row-reverse;\n    "])));
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      flex-direction: row-reverse;\n    "])));
   },
   caption: function caption(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 0 0 ", ";\n      line-height: ", ";\n      font-size: ", ";\n    "])), t.toggleTextColor, t.toggleCaptionGap, t.toggleLineHeight, t.toggleFontSize);
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 0 0 ", ";\n      line-height: ", ";\n      font-size: ", ";\n    "])), t.toggleTextColor, t.toggleCaptionGap, t.toggleLineHeight, t.toggleFontSize);
   },
   disabledCaption: function disabledCaption(t) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDisabled);
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDisabled);
   },
   captionLeft: function captionLeft(t) {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])), t.toggleTextColor, t.toggleCaptionGap);
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])), t.toggleTextColor, t.toggleCaptionGap);
   }
 });

package/components/Toggle/Toggle.styles/Toggle.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Toggle.styles.ts"],"names":["css","memoizeStyle","prefix","isChrome","globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","styles","root","t","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","toggleLineHeight","toggleFontSize","toggleBgHover","toggleWidth","toggleHandleBg","toggleHandleBorderRadius","toggleHandleSize","toggleHandleLeft","toggleHandleTop","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleCheckedBg","toggleCheckedBgHover","toggleBorderRadius","toggleBgDisabled","toggleBorderColorDisabled","focused","outlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","button","labGrotesqueCompenstation","parseInt","labGrotesqueBaselineCompensation","fontSize","checkboxFontSize","baselineCompensation","toggleBaseBg","toggleButtonOffsetY","buttonRight","rootLeft","caption","toggleTextColor","toggleCaptionGap","disabledCaption","textColorDisabled","captionLeft"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isChrome } from '../../lib/client';\n\nexport const globalClasses = prefix('toggle')({\n handle: 'handle',\n container: 'container',\n disabled: 'disabled',\n containerDisabled: 'container-disabled',\n containerLoading: 'container-loading',\n background: 'background',\n});\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n const handleWidthWithBorders = t.toggleHeight;\n const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\n return css`\n display: inline-flex;\n cursor: pointer;\n align-items: baseline;\n position: relative;\n line-height: ${t.toggleLineHeight};\n font-size: ${t.toggleFontSize};\n\n &:hover .${globalClasses.handle} {\n background: ${t.toggleBgHover};\n }\n &:active:not(.${globalClasses.disabled}) .${globalClasses.handle} {\n width: ${handleActiveWidth};\n }\n &:active:not(.${globalClasses.disabled}) input:checked ~ .${globalClasses.handle} {\n transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders}) translateX(-4px);\n }\n\n &::before {\n // non-breaking space.\n // makes a correct space for absolutely positioned button,\n // and also height and baseline for toggle without caption.\n content: '\\\\00A0';\n display: inline-block;\n width: ${t.toggleWidth};\n flex: 0 0 auto;\n }\n `;\n },\n\n handle(t: Theme) {\n return css`\n background: ${t.toggleHandleBg};\n border-radius: ${t.toggleHandleBorderRadius};\n bottom: ${t.toggleBorderWidth};\n box-shadow: 0 ${t.toggleBorderWidth} 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ${t.toggleBorderWidth} rgba(0, 0, 0, 0.15);\n height: ${t.toggleHandleSize};\n left: ${t.toggleHandleLeft};\n position: absolute;\n top: ${t.toggleHandleTop};\n transition: 0.2s ease-in;\n width: ${t.toggleHandleSize};\n `;\n },\n\n handleDisabled(t: Theme) {\n return css`\n background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n `;\n },\n\n input(t: Theme) {\n const handleWidthWithBorders = t.toggleHeight;\n return css`\n position: absolute;\n opacity: 0;\n\n &:focus {\n outline: none;\n }\n &:checked ~ .${globalClasses.container} {\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\n background: ${t.toggleBgChecked};\n transition: background 0s 0.2s;\n }\n &:checked ~ .${globalClasses.containerDisabled} {\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColorDisabledChecked};\n background: ${t.toggleBgDisabledChecked};\n transition: background 0s 0.2s;\n }\n &:checked ~ .${globalClasses.containerLoading} {\n background: ${t.toggleBorderColor};\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n }\n &:checked ~ .${globalClasses.container} .${globalClasses.background} {\n width: 70%;\n background: ${t.toggleBgChecked};\n }\n &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n width: 70%;\n background: ${t.toggleBgDisabledChecked};\n border-radius: calc(${t.toggleHeight} * 0.5) 0 0 calc(${t.toggleHeight} * 0.5);\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabledChecked};\n }\n &:checked ~ .${globalClasses.handle} {\n transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\n background: ${t.toggleCheckedBg};\n &:hover {\n background: ${t.toggleCheckedBgHover};\n }\n }\n `;\n },\n\n container(t: Theme) {\n return css`\n border-radius: ${t.toggleBorderRadius};\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n height: 100%;\n overflow: hidden;\n position: absolute;\n width: 100%;\n /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n z-index: 0;\n `;\n },\n\n containerDisabled(t: Theme) {\n return css`\n background: ${t.toggleBgDisabled};\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n `;\n },\n\n focused(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n `;\n },\n\n activeBackground() {\n return css`\n background: inherit;\n bottom: 0;\n left: 0;\n position: absolute;\n top: 0;\n transition: 0.2s ease-in;\n width: 10px;\n `;\n },\n\n disabledBackground(t: Theme) {\n return css`\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n width: 0;\n `;\n },\n\n activeBackgroundLoading(t: Theme) {\n return css`\n background: ${t.toggleBgActive};\n `;\n },\n\n isWarning(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n `;\n },\n\n isError(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n `;\n },\n\n button(t: Theme) {\n const labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);\n const fontSize = parseInt(t.checkboxFontSize);\n const baselineCompensation = fontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;\n return css`\n position: absolute;\n left: 0;\n top: 0;\n height: ${t.toggleHeight};\n width: ${t.toggleWidth};\n flex: 1 0 ${t.toggleWidth};\n\n background: ${t.toggleBaseBg};\n border-radius: ${t.toggleBorderRadius};\n line-height: ${t.toggleHeight};\n\n margin-top: calc(${t.toggleButtonOffsetY} + ${baselineCompensation}px);\n `;\n },\n\n buttonRight() {\n return css`\n right: 0;\n left: auto;\n `;\n },\n\n disabled() {\n return css`\n cursor: default;\n `;\n },\n\n rootLeft() {\n return css`\n flex-direction: row-reverse;\n `;\n },\n\n caption(t: Theme) {\n return css`\n color: ${t.toggleTextColor};\n padding: 0 0 0 ${t.toggleCaptionGap};\n line-height: ${t.toggleLineHeight};\n font-size: ${t.toggleFontSize};\n `;\n },\n\n disabledCaption(t: Theme) {\n return css`\n color: ${t.textColorDisabled};\n `;\n },\n\n captionLeft(t: Theme) {\n return css`\n color: ${t.toggleTextColor};\n padding: 0 ${t.toggleCaptionGap} 0 0;\n `;\n },\n});\n"]}
1	+ {"version":3,"sources":["Toggle.styles.ts"],"names":["css","memoizeStyle","prefix","isChrome","globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","styles","root","t","toggleLineHeight","toggleFontSize","toggleBgHover","toggleWidth","activeHandle","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","disableAnimation","toggleHandleBg","toggleHandleBorderRadius","toggleHandleBoxShadowOld","toggleHandleSize","toggleHandleLeft","toggleHandleTop","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleCheckedBg","toggleCheckedBgHover","input2022","toggleContainerBg","toggleContainerBoxShadow","toggleHandleBoxShadow","toggleContainerBgChecked","toggleContainerBoxShadowChecked","toggleHandleBgChecked","toggleHandleBoxShadowChecked","toggleContainerBgHover","toggleContainerBoxShadowHover","toggleHandleBgHover","toggleHandleBoxShadowHover","toggleContainerBgCheckedHover","toggleContainerBoxShadowCheckedHover","toggleHandleBgCheckedHover","toggleHandleBoxShadowCheckedHover","toggleContainerBgDisabled","toggleContainerBoxShadowDisabled","toggleHandleBgDisabled","toggleHandleBoxShadowDisabled","toggleContainerBgDisabledChecked","toggleContainerBoxShadowDisabledChecked","toggleHandleBgDisabledChecked","toggleHandleBoxShadowDisabledChecked","toggleBorderRadius","toggleBgDisabled","toggleBorderColorDisabled","focused","toggleOutlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","button","labGrotesqueCompenstation","parseInt","labGrotesqueBaselineCompensation","fontSize","checkboxFontSize","baselineCompensation","toggleBaseBg","toggleButtonOffsetY","buttonRight","rootLeft","caption","toggleTextColor","toggleCaptionGap","disabledCaption","textColorDisabled","captionLeft"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isChrome } from '../../lib/client';\n\nexport const globalClasses = prefix('toggle')({\n handle: 'handle',\n container: 'container',\n disabled: 'disabled',\n containerDisabled: 'container-disabled',\n containerLoading: 'container-loading',\n background: 'background',\n});\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n display: inline-flex;\n cursor: pointer;\n align-items: baseline;\n position: relative;\n line-height: ${t.toggleLineHeight};\n font-size: ${t.toggleFontSize};\n\n &:hover .${globalClasses.handle} {\n background: ${t.toggleBgHover};\n }\n\n &::before {\n // non-breaking space.\n // makes a correct space for absolutely positioned button,\n // and also height and baseline for toggle without caption.\n content: '\\\\00A0';\n display: inline-block;\n width: ${t.toggleWidth};\n flex: 0 0 auto;\n }\n `;\n },\n\n activeHandle(t: Theme) {\n const handleWidthWithBorders = t.toggleHeight;\n const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\n return css`\n &:active:not(.${globalClasses.disabled}) .${globalClasses.handle} {\n width: ${handleActiveWidth};\n }\n &:active:not(.${globalClasses.disabled}) input:checked ~ .${globalClasses.handle} {\n transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders}) translateX(-4px);\n }\n `;\n },\n\n disableAnimation() {\n return css`\n &,\n * {\n transition: none !important;\n }\n `;\n },\n\n handle(t: Theme) {\n return css`\n background: ${t.toggleHandleBg};\n border-radius: ${t.toggleHandleBorderRadius};\n bottom: ${t.toggleBorderWidth};\n box-shadow: ${t.toggleHandleBoxShadowOld};\n height: ${t.toggleHandleSize};\n left: ${t.toggleHandleLeft};\n position: absolute;\n top: ${t.toggleHandleTop};\n transition: 0.2s ease-in;\n width: ${t.toggleHandleSize};\n `;\n },\n\n handleDisabled(t: Theme) {\n return css`\n background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n `;\n },\n\n input(t: Theme) {\n const handleWidthWithBorders = t.toggleHeight;\n return css`\n position: absolute;\n opacity: 0;\n\n &:focus {\n outline: none;\n }\n &:checked ~ .${globalClasses.container} {\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\n background: ${t.toggleBgChecked};\n transition: background 0s 0.2s;\n }\n &:checked ~ .${globalClasses.containerDisabled} {\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColorDisabledChecked};\n background: ${t.toggleBgDisabledChecked};\n transition: background 0s 0.2s;\n }\n &:checked ~ .${globalClasses.containerLoading} {\n background: ${t.toggleBorderColor};\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n }\n &:checked ~ .${globalClasses.container} .${globalClasses.background} {\n width: 70%;\n background: ${t.toggleBgChecked};\n }\n &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n width: 70%;\n background: ${t.toggleBgDisabledChecked};\n border-radius: calc(${t.toggleHeight} * 0.5) 0 0 calc(${t.toggleHeight} * 0.5);\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabledChecked};\n }\n &:checked ~ .${globalClasses.handle} {\n transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\n background: ${t.toggleCheckedBg};\n &:hover {\n background: ${t.toggleCheckedBgHover};\n }\n }\n `;\n },\n\n input2022(t: Theme) {\n return css`\n &:enabled {\n ~ .${globalClasses.container}, ~ .${globalClasses.handle} {\n transition: 0.2s ease-in !important;\n }\n :not(:checked) {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBg};\n box-shadow: ${t.toggleContainerBoxShadow};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBg};\n box-shadow: ${t.toggleHandleBoxShadow};\n }\n }\n :checked {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgChecked};\n box-shadow: ${t.toggleContainerBoxShadowChecked};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgChecked};\n box-shadow: ${t.toggleHandleBoxShadowChecked};\n }\n }\n }\n &:enabled:hover {\n :not(:checked) {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgHover};\n box-shadow: ${t.toggleContainerBoxShadowHover};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgHover};\n box-shadow: ${t.toggleHandleBoxShadowHover};\n }\n }\n :checked {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgCheckedHover};\n box-shadow: ${t.toggleContainerBoxShadowCheckedHover};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgCheckedHover};\n box-shadow: ${t.toggleHandleBoxShadowCheckedHover};\n }\n }\n }\n &:disabled {\n :not(:checked) {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgDisabled};\n box-shadow: ${t.toggleContainerBoxShadowDisabled};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgDisabled} !important;\n box-shadow: ${t.toggleHandleBoxShadowDisabled};\n }\n }\n :checked {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgDisabledChecked};\n box-shadow: ${t.toggleContainerBoxShadowDisabledChecked};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgDisabledChecked} !important;\n box-shadow: ${t.toggleHandleBoxShadowDisabledChecked};\n }\n }\n }\n `;\n },\n\n container(t: Theme) {\n return css`\n border-radius: ${t.toggleBorderRadius};\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n height: 100%;\n overflow: hidden;\n position: absolute;\n width: 100%;\n /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n z-index: 0;\n `;\n },\n\n containerDisabled(t: Theme) {\n return css`\n background: ${t.toggleBgDisabled};\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n `;\n },\n\n focused(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.toggleOutlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n `;\n },\n\n activeBackground() {\n return css`\n background: inherit;\n bottom: 0;\n left: 0;\n position: absolute;\n top: 0;\n transition: 0.2s ease-in;\n width: 10px;\n `;\n },\n\n disabledBackground(t: Theme) {\n return css`\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n width: 0;\n `;\n },\n\n activeBackgroundLoading(t: Theme) {\n return css`\n background: ${t.toggleBgActive};\n `;\n },\n\n isWarning(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.toggleOutlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n `;\n },\n\n isError(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.toggleOutlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n `;\n },\n\n button(t: Theme) {\n const labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);\n const fontSize = parseInt(t.checkboxFontSize);\n const baselineCompensation = fontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;\n return css`\n position: absolute;\n left: 0;\n top: 0;\n height: ${t.toggleHeight};\n width: ${t.toggleWidth};\n flex: 1 0 ${t.toggleWidth};\n\n background: ${t.toggleBaseBg};\n border-radius: ${t.toggleBorderRadius};\n line-height: ${t.toggleHeight};\n\n margin-top: calc(${t.toggleButtonOffsetY} + ${baselineCompensation}px);\n `;\n },\n\n buttonRight() {\n return css`\n right: 0;\n left: auto;\n `;\n },\n\n disabled() {\n return css`\n cursor: default;\n `;\n },\n\n rootLeft() {\n return css`\n flex-direction: row-reverse;\n `;\n },\n\n caption(t: Theme) {\n return css`\n color: ${t.toggleTextColor};\n padding: 0 0 0 ${t.toggleCaptionGap};\n line-height: ${t.toggleLineHeight};\n font-size: ${t.toggleFontSize};\n `;\n },\n\n disabledCaption(t: Theme) {\n return css`\n color: ${t.textColorDisabled};\n `;\n },\n\n captionLeft(t: Theme) {\n return css`\n color: ${t.toggleTextColor};\n padding: 0 ${t.toggleCaptionGap} 0 0;\n `;\n },\n});\n"]}

package/components/Toggle/Toggle.styles.d.ts CHANGED Viewed

@@ -9,9 +9,12 @@ export declare const globalClasses: {
 };
 export declare const styles: {
     root(t: Theme): string;
+    activeHandle(t: Theme): string;
+    disableAnimation(): string;
     handle(t: Theme): string;
     handleDisabled(t: Theme): string;
     input(t: Theme): string;
+    input2022(t: Theme): string;
     container(t: Theme): string;
     containerDisabled(t: Theme): string;
     focused(t: Theme): string;

package/components/Token/Token/Token.js CHANGED Viewed

@@ -10,6 +10,8 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { CloseButtonIcon } from "../../../internal/CloseButtonIcon/CloseButtonIcon";
 import { styles, colorStyles, globalClasses } from "../Token.styles";
 var getValidation = function getValidation(error, warning) {
@@ -22,6 +24,10 @@ var getValidation = function getValidation(error, warning) {
   return null;
 };
+export var TokenDataTids = {
+  root: 'Token__root',
+  removeIcon: 'Token__removeIcon'
+};
 export var Token = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Token, _React$Component);
@@ -63,15 +69,18 @@ export var Token = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   };
   _proto.renderMain = function renderMain() {
-    var _cx, _cx2;
     var _this$props2 = this.props,
         children = _this$props2.children,
         isActive = _this$props2.isActive,
-        colors = _this$props2.colors,
+        _this$props2$colors = _this$props2.colors,
+        colors = _this$props2$colors === void 0 ? {
+      idle: 'defaultIdle',
+      active: 'defaultActive'
+    } : _this$props2$colors,
         error = _this$props2.error,
         warning = _this$props2.warning,
         disabled = _this$props2.disabled,
+        ariaDescribedby = _this$props2['aria-describedby'],
         _this$props2$onClick = _this$props2.onClick,
         onClick = _this$props2$onClick === void 0 ? emptyHandler : _this$props2$onClick,
         _this$props2$onDouble = _this$props2.onDoubleClick,
@@ -86,21 +95,27 @@ export var Token = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
         onBlur = _this$props2$onBlur === void 0 ? emptyHandler : _this$props2$onBlur;
     var theme = this.theme;
     var validation = getValidation(error, warning);
-    var disableClassNames = cx(colorStyles.defaultDisabled(theme), (_cx = {}, _cx[colorStyles.defaultDisabledWarning(theme)] = warning, _cx[colorStyles.defaultDisabledError(theme)] = error, _cx));
-    var tokenClassName = disabled ? disableClassNames : colorStyles.defaultIdle(theme, validation);
-    var activeTokenClassName = disabled ? disableClassNames : colorStyles.defaultActive(theme, validation);
-    if (!disabled && colors) {
-      tokenClassName = colorStyles[colors.idle](theme, validation);
-      var activeClassName = colors.active ? colors.active : colors.idle;
-      activeTokenClassName = colorStyles[activeClassName](theme, validation);
+    var icon = isTheme2022(theme) ? /*#__PURE__*/React.createElement(CloseButtonIcon, {
+      side: 16,
+      color: "inherit",
+      colorHover: "inherit",
+      tabbable: false
+    }) : /*#__PURE__*/React.createElement(CrossIcon, null);
+    var classNames = '';
+    if (isTheme2022(theme)) {
+      classNames = cx(styles.tokenDefaultIdle2022(theme), !isActive && !warning && !error && !disabled && styles.tokenDefaultIdleHovering2022(theme), isActive && styles.tokenDefaultActive2022(theme), warning && styles.tokenWarning2022(theme), error && styles.tokenError2022(theme), disabled && styles.tokenDisabled2022(theme));
+    } else {
+      classNames = cx(colorStyles[colors.idle](theme, validation), !!isActive && colorStyles[colors.active || colors.idle](theme, validation), !!disabled && styles.disabled(theme), !!disabled && colorStyles.defaultDisabled(theme), !!disabled && warning && colorStyles.defaultDisabledWarning(theme), !!disabled && error && colorStyles.defaultDisabledError(theme));
     }
-    var tokenClassNames = cx(styles.token(this.theme), tokenClassName, (_cx2 = {}, _cx2[activeTokenClassName] = !!isActive, _cx2[styles.disabled(theme)] = !!disabled, _cx2));
+    var tokenClassNames = cx(styles.token(this.theme), classNames);
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement("div", {
+      "data-tid": TokenDataTids.root,
       className: tokenClassNames,
+      "aria-describedby": ariaDescribedby,
       onClick: onClick,
       onDoubleClick: onDoubleClick,
       onMouseEnter: onMouseEnter,
@@ -111,8 +126,9 @@ export var Token = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       className: styles.text(this.theme)
     }, children), /*#__PURE__*/React.createElement("span", {
       className: cx(styles.removeIcon(this.theme), globalClasses.removeIcon),
-      onClick: this.onRemoveClick
-    }, /*#__PURE__*/React.createElement(CrossIcon, null))));
+      onClick: this.onRemoveClick,
+      "data-tid": TokenDataTids.removeIcon
+    }, icon)));
   };
   return Token;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["Token.tsx"],"names":["React","CrossIcon","emptyHandler","ThemeContext","CommonWrapper","cx","rootNode","styles","colorStyles","globalClasses","getValidation","error","warning","Token","onRemoveClick","event","props","disabled","onRemove","preventDefault","render","theme","renderMain","children","isActive","colors","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","~~disableClassNames~~","~~defaultDisabled~~","~~defaultDisabledWarning~~","~~defaultDisabledError~~","~~tokenClassName~~","~~defaultIdle~~","~~activeTokenClassName~~","~~defaultActive~~","~~idle~~","~~activeClassName~~","~~active~~","tokenClassNames","token","setRootNode","text","~~removeIcon","~~Component","__KONTUR_REACT_UI__"],"mappings":"2JAAA,OAAOA,KAAP,~~MAAkB~~,~~OAAlB~~;;AAEA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,YAAT,QAA6B,iBAA7B;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,EAAiBC,WAAjB,EAA8BC,aAA9B,QAAmD,gBAAnD~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA~~,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA6BC,OAA7B,EAAgE;AACpF,MAAID,KAAJ,EAAW;AACT,WAAO,OAAP;AACD,GAFD,MAEO,IAAIC,OAAJ,EAAa;AAClB,WAAO,SAAP;AACD;;AAED,SAAO,IAAP;AACD,CARD~~;;;AAWA~~,WAAaC,KAAb,~~GADCP~~,QACD~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EUQ~~,IAAAA,~~aA7EV~~,~~GA6E0B~~,UAACC,KAAD,EAAsD;AAC5E,wBAA8C,MAAKC,KAAnD,CAAQC,QAAR,eAAQA,QAAR,oCAAkBC,QAAlB,CAAkBA,QAAlB,~~qCAA6BhB~~,YAA7B;;AAEA,~~UAAIe~~,QAAJ,EAAc;AACZF,QAAAA,KAAK,CAACI,cAAN;AACA;AACD;;AAEDD,MAAAA,QAAQ,CAACH,KAAD,CAAR;AACD,~~KAtFH~~,mDAMSK,MANT,GAME,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,CAfH,QAiBUA,UAjBV,GAiBE,sBAAqB,~~eACnB~~,~~mBAaI~~,KAAKN,~~KAbT~~,CACEO,QADF,gBACEA,QADF,CAEEC,QAFF,gBAEEA,QAFF,~~CAGEC~~,MAHF,~~gBAGEA~~,MAHF,~~CAIEd~~,KAJF,gBAIEA,KAJF,CAKEC,OALF,gBAKEA,OALF,~~CAMEK~~,QANF,gBAMEA,QANF,~~qCAOES~~,~~OAPF~~,~~CAOEA~~,~~OAPF~~,~~qCAOYxB~~,~~YAPZ~~,~~6DAQEyB,aARF,~~CAQEA,~~aARF~~,~~sCAQkBzB~~,~~YARlB~~,~~8DASE0B~~,~~YATF~~,CASEA,~~YATF~~,~~sCASiB1B~~,~~YATjB~~,~~8DAUE2B~~,YAVF,CAUEA,YAVF,~~sCAUiB3B~~,YAVjB,~~6DAWE4B~~,~~OAXF~~,CAWEA,~~OAXF~~,~~qCAWY5B~~,~~YAXZ~~,~~2DAYE6B~~,~~MAZF~~,CAYEA,~~MAZF~~,~~oCAYW7B~~,~~YAZX~~,~~uBAeA~~,~~IAAMmB~~,KAAK,GAAG,KAAKA,KAAnB,CAEA,~~IAAMW~~,UAAU,~~GAAGtB~~,aAAa,CAACC,KAAD,EAAQC,OAAR,CAAhC,CAEA,~~IAAMqB~~,~~iBAAiB~~,~~GAAG5B~~,EAAE,~~CAACG~~,~~WAAW~~,~~CAAC0B~~,~~eAAZ~~,~~CAA4Bb~~,~~KAA5B~~,~~CAAD~~,~~iBACzBb~~,~~WAAW~~,~~CAAC2B~~,~~sBAAZ~~,~~CAAmCd~~,~~KAAnC~~,~~CADyB~~,~~IACmBT~~,~~OADnB~~,~~MAEzBJ~~,WAAW,~~CAAC4B~~,~~oBAAZ~~,~~CAAiCf~~,~~KAAjC~~,~~CAFyB~~,~~IAEiBV~~,~~KAFjB~~,~~OAA5B~~,~~CAKA~~,~~IAAI0B~~,~~cAAc~~,~~GAAGpB~~,QAAQ,~~GAAGgB~~,~~iBAAH~~,~~GAAuBzB~~,~~WAAW~~,~~CAAC8B~~,~~WAAZ~~,~~CAAwBjB~~,KAAxB,~~EAA+BW~~,~~UAA/B~~,~~CAApD~~,~~CACA~~,~~IAAIO~~,~~oBAAoB~~,~~GAAGtB~~,~~QAAQ~~,~~GAAGgB~~,~~iBAAH~~,~~GAAuBzB~~,~~WAAW~~,~~CAACgC~~,~~aAAZ~~,~~CAA0BnB~~,~~KAA1B~~,~~EAAiCW~~,~~UAAjC~~,~~CAA1D~~,~~CAEA~~,~~IAAI~~,~~CAACf~~,~~QAAD~~,~~IAAaQ~~,~~MAAjB~~,~~EAAyB~~,~~CACvBY~~,~~cAAc~~,~~GAAG7B,~~WAAW,~~CAACiB~~,MAAM,~~CAACgB~~,IAAR,CAAX,~~CAAyBpB~~,KAAzB,~~EAAgCW~~,UAAhC,~~CAAjB~~,~~CAEA~~,~~IAAMU~~,~~eAAe~~,~~GAAGjB~~,MAAM,~~CAACkB~~,MAAP,~~GAAgBlB~~,MAAM,~~CAACkB~~,~~MAAvB~~,~~GAAgClB~~,MAAM,~~CAACgB~~,~~IAA/D~~,~~CACAF~~,~~oBAAoB~~,~~GAAG/B~~,WAAW,~~CAACkC~~,~~eAAD~~,~~CAAX~~,~~CAA6BrB~~,~~KAA7B~~,~~EAAoCW~~,~~UAApC~~,~~CAAvB~~,~~CACD~~,~~CAED~~,~~IAAMY~~,~~eAAe~~,~~GAAGvC~~,~~EAAE~~,~~CAACE~~,~~MAAM~~,~~CAACsC~~,~~KAAP~~,~~CAAa~~,~~KAAKxB~~,~~KAAlB~~,~~CAAD~~,~~EAA2BgB~~,~~cAA3B~~,~~mBACvBE~~,~~oBADuB~~,~~IACA~~,~~CAAC~~,~~CAACf~~,~~QADF~~,~~OAEvBjB~~,MAAM,~~CAACU~~,~~QAAP~~,~~CAAgBI~~,~~KAAhB~~,~~CAFuB~~,~~IAEE~~,~~CAAC~~,~~CAACJ~~,~~QAFJ~~,~~QAA1B~~,~~CAKA,~~oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,~~KAAK6B~~,WAAjC,IAAkD,~~KAAK9B~~,KAAvD,gBACE,6BACE,~~SAAS~~,~~EAAE4B~~,~~eADb~~,EAEE,~~OAAO~~,~~EAAElB~~,~~OAFX~~,EAGE,aAAa,EAAEC,~~aAHjB~~,~~EAIE~~,YAAY,EAAEC,~~YAJhB~~,~~EAKE~~,YAAY,EAAEC,~~YALhB~~,~~EAME~~,OAAO,EAAEC,~~OANX~~,~~EAOE~~,MAAM,EAAEC,~~MAPV~~,~~iBASE~~,8BAAM,SAAS,~~EAAExB~~,MAAM,~~CAACwC~~,IAAP,CAAY,~~KAAK1B~~,KAAjB,CAAjB,IAA2CE,QAA3C,~~CATF~~,~~eAUE~~,~~8BAAM~~,SAAS,~~EAAElB~~,EAAE,~~CAACE~~,MAAM,~~CAACyC~~,UAAP,CAAkB,~~KAAK3B~~,KAAvB,CAAD,~~EAAgCZ~~,aAAa,~~CAACuC~~,UAA9C,~~CAAnB~~,~~EAA8E~~,OAAO,EAAE,~~KAAKlC~~,~~aAA5F~~,~~iBACE~~,~~oBAAC~~,~~SAAD~~,~~OADF~~,~~CAVF~~,CADF,CADF,~~CAkBD~~,~~CA3EH~~,~~gBAA2Bd~~,KAAK,~~CAACiD~~,SAAjC,WACgBC,mBADhB,GACsC,OADtC","sourcesContent":["import React from 'react';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\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 { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles, colorStyles, globalClasses } from './Token.styles';\n\nexport type TokenColorName = keyof typeof colorStyles;\n\nexport interface TokenColors {\n idle: TokenColorName;\n active?: TokenColorName;\n}\n\nexport interface TokenProps extends CommonProps {\n colors?: TokenColors;\n isActive?: boolean;\n /*\n Состояние валидации при ошибке.\n /\n error?: boolean;\n /\n Состояние валидации при предупреждении.\n */\n warning?: boolean;\n disabled?: boolean;\n\n onClick?: React.MouseEventHandler<HTMLDivElement>;\n onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n onRemove?: React.MouseEventHandler<HTMLElement>;\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n onFocus?: React.FocusEventHandler<HTMLDivElement>;\n onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\nconst getValidation = (error: TokenProps['error'], warning: TokenProps['warning']) => {\n if (error) {\n return 'error';\n } else if (warning) {\n return 'warning';\n }\n\n return null;\n};\n\n@rootNode\nexport class Token extends React.Component<TokenProps> {\n public static __KONTUR_REACT_UI__ = 'Token';\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\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 private renderMain() {\n const {\n children,\n isActive,\n colors,\n error,\n warning,\n disabled,\n onClick = emptyHandler,\n onDoubleClick = emptyHandler,\n onMouseEnter = emptyHandler,\n onMouseLeave = emptyHandler,\n onFocus = emptyHandler,\n onBlur = emptyHandler,\n } = this.props;\n\n const theme = this.theme;\n\n const validation = getValidation(error, warning);\n\n const ~~disableClassNames~~ = cx(~~colorStyles.defaultDisabled(~~theme), {\n ~~[colorStyles.defaultDisabledWarning(theme~~)]: ~~warning,\~~n ~~[colorStyles.defaultDisabledError(theme)]:~~ ~~error,\~~n });\n\n let ~~tokenClassName~~ = ~~disabled~~ ? ~~disableClassNames~~ : ~~colorStyles~~.~~defaultIdle~~(theme~~, validation~~);\n ~~let~~ ~~activeTokenClassName~~ = disabled ? ~~disableClassNames~~ : ~~colorStyles~~.~~defaultActive~~(theme, ~~validation~~);\n~~\n if~~ (!disabled && ~~colors~~) {\n ~~tokenClassName~~ = colorStyles[colors.idle](theme, validation);\n~~\n const~~ ~~activeClassName~~ = colors.active ? colors.~~active~~ : ~~colors~~.~~idle;\~~n ~~activeTokenClassName~~ = colorStyles~~[activeClassName]~~(theme, ~~validation~~);\n }\n\n const tokenClassNames = cx(styles.token(this.theme), ~~tokenClassName, {\n [activeTokenClassName]: !!isActive,\n [styles.disabled(theme~~)~~]: !!disabled,\n })~~;\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n className={tokenClassNames}\n onClick={onClick}\n onDoubleClick={onDoubleClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n >\n <span className={styles.text(this.theme)}>{children}</span>\n <span className={cx(styles.removeIcon(this.theme), globalClasses.removeIcon)} onClick={this.onRemoveClick}>\n ~~<CrossIcon />\~~n </span>\n </div>\n </CommonWrapper>\n );\n }\n\n private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n const { disabled, onRemove = emptyHandler } = this.props;\n\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onRemove(event);\n };\n}\n"]}
1	+ {"version":3,"sources":["Token.tsx"],"names":["React","CrossIcon","emptyHandler","ThemeContext","CommonWrapper","cx","rootNode","isTheme2022","CloseButtonIcon","styles","colorStyles","globalClasses","getValidation","error","warning","TokenDataTids","root","removeIcon","Token","onRemoveClick","event","props","disabled","onRemove","preventDefault","render","theme","renderMain","children","isActive","colors","idle","active","ariaDescribedby","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","icon","classNames","tokenDefaultIdle2022","tokenDefaultIdleHovering2022","tokenDefaultActive2022","tokenWarning2022","tokenError2022","tokenDisabled2022","defaultDisabled","defaultDisabledWarning","defaultDisabledError","tokenClassNames","token","setRootNode","text","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\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 { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles, colorStyles, globalClasses } from './Token.styles';\n\nexport type TokenColorName = keyof typeof colorStyles;\n\nexport interface TokenColors {\n idle: TokenColorName;\n active?: TokenColorName;\n}\n\nexport interface TokenProps extends CommonProps {\n colors?: TokenColors;\n isActive?: boolean;\n /*\n Состояние валидации при ошибке.\n /\n error?: boolean;\n /\n Состояние валидации при предупреждении.\n /\n warning?: boolean;\n disabled?: boolean;\n /\n Атрибут для указания id элемента(-ов), описывающих его\n */\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n\n onClick?: React.MouseEventHandler<HTMLDivElement>;\n onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n onRemove?: React.MouseEventHandler<HTMLElement>;\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n onFocus?: React.FocusEventHandler<HTMLDivElement>;\n onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\nconst getValidation = (error: TokenProps['error'], warning: TokenProps['warning']) => {\n if (error) {\n return 'error';\n } else if (warning) {\n return 'warning';\n }\n\n return null;\n};\n\nexport const TokenDataTids = {\n root: 'Token__root',\n removeIcon: 'Token__removeIcon',\n} as const;\n\n@rootNode\nexport class Token extends React.Component<TokenProps> {\n public static __KONTUR_REACT_UI__ = 'Token';\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\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 private renderMain() {\n const {\n children,\n isActive,\n colors = { idle: 'defaultIdle', active: 'defaultActive' },\n error,\n warning,\n disabled,\n 'aria-describedby': ariaDescribedby,\n onClick = emptyHandler,\n onDoubleClick = emptyHandler,\n onMouseEnter = emptyHandler,\n onMouseLeave = emptyHandler,\n onFocus = emptyHandler,\n onBlur = emptyHandler,\n } = this.props;\n\n const theme = this.theme;\n\n const validation = getValidation(error, warning);\n\n const icon = isTheme2022(theme) ? (\n <CloseButtonIcon side={16} color=\"inherit\" colorHover=\"inherit\" tabbable={false} />\n ) : (\n <CrossIcon />\n );\n\n let classNames = '';\n if (isTheme2022(theme)) {\n classNames = cx(\n styles.tokenDefaultIdle2022(theme),\n !isActive && !warning && !error && !disabled && styles.tokenDefaultIdleHovering2022(theme),\n isActive && styles.tokenDefaultActive2022(theme),\n warning && styles.tokenWarning2022(theme),\n error && styles.tokenError2022(theme),\n disabled && styles.tokenDisabled2022(theme),\n );\n } else {\n classNames = cx(\n colorStyles[colors.idle](theme, validation),\n !!isActive && colorStyles[colors.active \|\| colors.idle](theme, validation),\n !!disabled && styles.disabled(theme),\n !!disabled && colorStyles.defaultDisabled(theme),\n !!disabled && warning && colorStyles.defaultDisabledWarning(theme),\n !!disabled && error && colorStyles.defaultDisabledError(theme),\n );\n }\n\n const tokenClassNames = cx(styles.token(this.theme), classNames);\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={TokenDataTids.root}\n className={tokenClassNames}\n aria-describedby={ariaDescribedby}\n onClick={onClick}\n onDoubleClick={onDoubleClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n >\n <span className={styles.text(this.theme)}>{children}</span>\n <span\n className={cx(styles.removeIcon(this.theme), globalClasses.removeIcon)}\n onClick={this.onRemoveClick}\n data-tid={TokenDataTids.removeIcon}\n >\n {icon}\n </span>\n </div>\n </CommonWrapper>\n );\n }\n\n private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n const { disabled, onRemove = emptyHandler } = this.props;\n\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onRemove(event);\n };\n}\n"]}

package/components/Token/Token.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { colorStyles } from './Token.styles';
 export declare type TokenColorName = keyof typeof colorStyles;
@@ -18,6 +18,10 @@ export interface TokenProps extends CommonProps {
      */
     warning?: boolean;
     disabled?: boolean;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onRemove?: React.MouseEventHandler<HTMLElement>;
@@ -26,6 +30,10 @@ export interface TokenProps extends CommonProps {
     onFocus?: React.FocusEventHandler<HTMLDivElement>;
     onBlur?: React.FocusEventHandler<HTMLDivElement>;
 }
+export declare const TokenDataTids: {
+    readonly root: "Token__root";
+    readonly removeIcon: "Token__removeIcon";
+};
 export declare class Token extends React.Component<TokenProps> {
     static __KONTUR_REACT_UI__: string;
     private theme;