npm - @skbkontur/react-ui - Versions diffs - 6.2.0-beta.0 → 6.2.0 - Mend

@skbkontur/react-ui 6.2.0-beta.0 → 6.2.0

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab.js","sourceRoot":"","sources":["Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport invariant from 'invariant';\nimport type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';\nimport { ResizeDetector } from '../../internal/ResizeDetector/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers.js';\nimport { KeyListener } from '../../lib/events/keyListener.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isFunctionalComponent } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getHorizontalStyles, getStyles, getVerticalStyles, globalClasses } from './Tab.styles.js';\nimport { TabsContext, TabsContextDefaultValue } from './TabsContext.js';\nimport type { TabsContextType } from './TabsContext.js';\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>\n extends Pick<AriaAttributes, 'aria-label' \| 'aria-describedby'>, CommonProps {\n /** Компонент или тег для рендера корневого элемента. /\n component?: React.ComponentType<any> \| string;\n\n /* HTML-атрибут `href`. /\n href?: string;\n\n /* Уникальный идентификатор таба. По нему компонент `<Tabs />` определяет выбранный таб. /\n id?: T;\n\n /`HTML`-событие `onclick`. /\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /** `HTML`-событие `onkeydown`. /\n onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n /* Делает таб недоступным. /\n disabled?: boolean;\n\n /* Переводит таб в состояние валидации \"Ошибка\". /\n error?: boolean;\n\n /* Переводит таб в состояние валидации \"Предупреждение\". /\n warning?: boolean;\n\n /* Переводит таб в состояние валидации \"Успех\". /\n success?: boolean;\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 Табы группируют контент и помогают в навигации.\n \n Для создания группы табов используйте специальный контейнер - компонент [Tabs](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_display-data-tabs-tabs--docs).\n */\n@withRenderEnvironment\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 globalObject!: GlobalObject;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private horizontalStyles!: ReturnType<typeof getHorizontalStyles>;\n private verticalStyles!: ReturnType<typeof getVerticalStyles>;\n private theme!: Theme;\n private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private keyListener!: KeyListener;\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 this.keyListener = new KeyListener(this.globalObject);\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(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n this.horizontalStyles = getHorizontalStyles(this.emotion);\n this.verticalStyles = getVerticalStyles(this.emotion);\n\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(): TabIndicators {\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(): Nullable<React.ReactElement<Tab<T>>> {\n return this.tabComponent;\n }\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 ? this.verticalStyles : this.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={this.cx({\n [this.styles.rootSmall(this.theme)]: this.context.size === 'small',\n [this.styles.rootMedium(this.theme)]: this.context.size === 'medium',\n [this.styles.rootLarge(this.theme)]: this.context.size === 'large',\n [this.styles.verticalSmall(this.theme)]: !!isVertical && this.context.size === 'small',\n [this.styles.verticalMedium(this.theme)]: !!isVertical && this.context.size === 'medium',\n [this.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 [this.styles.active()]: !!isActive,\n [orientationStyles.active(this.theme)]: !!isActive,\n [this.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={this.cx(globalClasses.focus, {\n [this.styles.focusSmall(this.theme)]: this.context.size === 'small',\n [this.styles.focusMedium(this.theme)]: this.context.size === 'medium',\n [this.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 this.globalObject.requestAnimationFrame?.(() => {\n if (this.keyListener.isTabPressed \|\| this.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,"file":"Tab.js","sourceRoot":"","sources":["Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport invariant from 'invariant';\nimport type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';\nimport { ResizeDetector } from '../../internal/ResizeDetector/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers.js';\nimport { KeyListener } from '../../lib/events/keyListener.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isFunctionalComponent } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getHorizontalStyles, getStyles, getVerticalStyles, globalClasses } from './Tab.styles.js';\nimport { TabsContext, TabsContextDefaultValue } from './TabsContext.js';\nimport type { TabsContextType } from './TabsContext.js';\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>\n extends Pick<AriaAttributes, 'aria-label' \| 'aria-describedby'>, CommonProps {\n /** Компонент или тег для рендера корневого элемента. /\n component?: React.ComponentType<any> \| string;\n\n /* HTML-атрибут `href`. /\n href?: string;\n\n /* Уникальный идентификатор таба. По нему компонент `<Tabs />` определяет выбранный таб. /\n id?: T;\n\n /`HTML`-событие `onclick`. /\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /** `HTML`-событие `onkeydown`. /\n onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n /* Делает таб недоступным. /\n disabled?: boolean;\n\n /* Переводит таб в состояние ошибки. /\n error?: boolean;\n\n /* Переводит таб в состояние предупреждения. /\n warning?: boolean;\n\n /* Переводит таб в состояние успеха. /\n success?: boolean;\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 Табы группируют контент и помогают в навигации.\n \n /\n@withRenderEnvironment\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 globalObject!: GlobalObject;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private horizontalStyles!: ReturnType<typeof getHorizontalStyles>;\n private verticalStyles!: ReturnType<typeof getVerticalStyles>;\n private theme!: Theme;\n private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private keyListener!: KeyListener;\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 this.keyListener = new KeyListener(this.globalObject);\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(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n this.horizontalStyles = getHorizontalStyles(this.emotion);\n this.verticalStyles = getVerticalStyles(this.emotion);\n\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(): TabIndicators {\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(): Nullable<React.ReactElement<Tab<T>>> {\n return this.tabComponent;\n }\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 ? this.verticalStyles : this.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={this.cx({\n [this.styles.rootSmall(this.theme)]: this.context.size === 'small',\n [this.styles.rootMedium(this.theme)]: this.context.size === 'medium',\n [this.styles.rootLarge(this.theme)]: this.context.size === 'large',\n [this.styles.verticalSmall(this.theme)]: !!isVertical && this.context.size === 'small',\n [this.styles.verticalMedium(this.theme)]: !!isVertical && this.context.size === 'medium',\n [this.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 [this.styles.active()]: !!isActive,\n [orientationStyles.active(this.theme)]: !!isActive,\n [this.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={this.cx(globalClasses.focus, {\n [this.styles.focusSmall(this.theme)]: this.context.size === 'small',\n [this.styles.focusMedium(this.theme)]: this.context.size === 'medium',\n [this.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 this.globalObject.requestAnimationFrame?.(() => {\n if (this.keyListener.isTabPressed \|\| this.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/Tabs.d.ts CHANGED Viewed

@@ -12,7 +12,7 @@ export interface TabsProps<T extends ValueBaseType = string> extends CommonProps
     size?: SizeProp;
     /** Идентификатор активного таба. Совпадает с `id` выбранного `<Tab />`. */
     value: T;
-    /** Вызывается при смене активного таба. */
+    /** Событие смены активного таба. */
     onValueChange?: (value: T) => void;
     /** Располагает табы вертикально.
      * @default false */
@@ -28,7 +28,7 @@ export declare const TabsDataTids: {
 };
 type DefaultProps = Required<Pick<TabsProps, 'vertical' | 'size'>>;
 /**
- * Контейнер для компонента [Tab](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_display-data-tabs-tab--doc). Группирует табы и позволяет управлять их состоянием.
+ * Табы группируют контент и помогают в навигации.
  */
 export declare class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {
     static __KONTUR_REACT_UI__: string;

package/components/Tabs/Tabs.js CHANGED Viewed

@@ -47,7 +47,7 @@ export var TabsDataTids = {
     indicatorRoot: 'Indicator__root',
 };
 /**
- * Контейнер для компонента [Tab](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_display-data-tabs-tab--doc). Группирует табы и позволяет управлять их состоянием.
+ * Табы группируют контент и помогают в навигации.
  */
 var Tabs = /** @class */ (function (_super) {
     __extends(Tabs, _super);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAGjE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAiC/C,MAAM,CAAC,IAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,YAAY;IAClB,aAAa,EAAE,iBAAiB;CACxB,CAAC;AAIX;;GAEG;AAGH;IAAqD,wBAA6B;IAAlF;;QASU,cAAQ,GAAG,iBAAiB,CAAC,MAAI,CAAC,YAAY,CAAC,CAAC;QAUhD,UAAI,GAAsB,EAAE,CAAC;QAE7B,gBAAU,GAAG;YACnB,EAAE,EAAE,UAAC,EAAc;gBACjB,IAAM,KAAK,GAAG,KAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBACtC,OAAO;oBACL,KAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;gBAClC,CAAC,CAAC;YACJ,CAAC;SACF,CAAC;QAEM,eAAS,GAA+B,EAAE,CAAC;QAsD3C,gBAAU,GAAqC,UAAC,OAAO,EAAE,KAAK;YAC5D,IAAA,IAAI,GAAK,KAAI,KAAT,CAAU;YACtB,IAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,EAAE,KAAK,OAAO,EAAhB,CAAgB,CAAC,CAAC;YACtD,IAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;YACvE,IAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;YAE3B,IAAM,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAM,QAAQ,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;YAEtC,IAAI,YAAY,CAAC,QAAQ,EAAE,KAAI,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,OAAO,QAAQ,CAAC,KAAK,KAAK,UAAU,EAAE,CAAC;gBAClG,QAAQ,CAAC,KAAK,EAAE,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;QAEM,kBAAY,GAAuC;YACzD,KAAI,CAAC,SAAS,CAAC,OAAO,CAAC,UAAC,EAAE,IAAK,OAAA,EAAE,EAAE,EAAJ,CAAI,CAAC,CAAC;QACvC,CAAC,CAAC;QAEM,eAAS,GAAoC,UAAC,EAAE;YAChD,IAAA,KAA2B,KAAI,CAAC,KAAK,EAAnC,aAAa,mBAAA,EAAE,KAAK,WAAe,CAAC;YAC5C,IAAI,EAAE,KAAK,KAAK,IAAI,aAAa,EAAE,CAAC;gBAClC,aAAa,CAAC,EAAE,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;QAEM,YAAM,GAAiC,UAAC,EAAE;YACxC,IAAA,KAAmB,CAAA,KAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,EAAE,KAAK,EAAE,EAAX,CAAW,CAAC,IAAI,EAAE,CAAA,QAA7C,EAAd,OAAO,mBAAG,IAAI,KAAA,CAA8C;YACpE,OAAO,OAAO,IAAI,OAAO,EAAE,CAAC;QAC9B,CAAC,CAAC;QAEM,YAAM,GAAiC,UAAC,EAAE,EAAE,OAAO;YACzD,KAAI,CAAC,IAAI,GAAG,KAAI,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,IAAA,EAAE,OAAO,SAAA,EAAE,CAAC,CAAC;QAChD,CAAC,CAAC;QAEM,eAAS,GAAoC,UAAC,EAAE;YACtD,KAAI,CAAC,IAAI,GAAG,KAAI,CAAC,IAAI,CAAC,MAAM,CAAC,UAAC,GAAG,IAAK,OAAA,GAAG,CAAC,EAAE,KAAK,EAAE,EAAb,CAAa,CAAC,CAAC;QACvD,CAAC,CAAC;;IACJ,CAAC;aAzHY,IAAI;IAkCR,qBAAM,GAAb;QAAA,iBAgDC;QA/CO,IAAA,KAAsF,IAAI,CAAC,KAAK,EAA9F,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAE,kBAAkB,wBAAA,EAAsB,eAAe,yBAAe,CAAC;QACjG,IAAA,KAAqB,IAAI,CAAC,QAAQ,EAAE,EAAlC,QAAQ,cAAA,EAAE,IAAI,UAAoB,CAAC;QAC3C,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;;YACL,KAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,KAAI,CAAC,WAAW,IAAM,KAAI,CAAC,KAAK;gBAC1D,yCACY,YAAY,CAAC,IAAI,EAC3B,SAAS,EAAE,KAAI,CAAC,EAAE;wBAChB,GAAC,KAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,IAAI,KAAK,OAAO;wBACrD,GAAC,KAAI,CAAC,MAAM,CAAC,UAAU,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,IAAI,KAAK,QAAQ;wBACvD,GAAC,KAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,IAAI,KAAK,OAAO;wBACrD,GAAC,KAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAG,QAAQ;4BAClC,EACF,KAAK,EAAE,EAAE,KAAK,OAAA,EAAE,sBACE,eAAe;oBAEjC,oBAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;4BACL,QAAQ,UAAA;4BACR,SAAS,EAAE,KAAK;4BAChB,IAAI,MAAA;4BACJ,MAAM,EAAE,KAAI,CAAC,MAAM;4BACnB,MAAM,EAAE,KAAI,CAAC,MAAM;4BACnB,SAAS,EAAE,KAAI,CAAC,SAAS;4BACzB,YAAY,EAAE,KAAI,CAAC,YAAY;4BAC/B,UAAU,EAAE,KAAI,CAAC,UAAU;4BAC3B,SAAS,EAAE,KAAI,CAAC,SAAS;yBAC1B;wBAEA,QAAQ;wBACT,oBAAC,SAAS,IACR,SAAS,EAAE,kBAAkB,EAC7B,UAAU,EAAE,KAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,KAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,GAClC,CACmB,CACnB,CACQ,CACjB,CAAC;QACJ,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;;IAjFa,wBAAmB,GAAG,MAAM,AAAT,CAAU;IAC7B,gBAAW,GAAG,MAAM,AAAT,CAAU;IAErB,iBAAY,GAAiB;QACzC,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,OAAO;KACd,AAHyB,CAGxB;IAIY,QAAG,GAAG,GAAG,AAAN,CAAO;IAXb,IAAI;QAFhB,qBAAqB;QACrB,QAAQ;OACI,IAAI,CAyHhB;IAAD,WAAC;CAAA,AAzHD,CAAqD,KAAK,CAAC,SAAS,GAyHnE;SAzHY,IAAI","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes, JSX } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isInstanceOf } from '../../lib/isInstanceOf.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport { getRootNode } from '../../lib/rootNode/getRootNode.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { emptyHandler } from '../../lib/utils.js';\nimport { Indicator } from './Indicator.js';\nimport { Tab } from './Tab.js';\nimport { getStyles } from './Tabs.styles.js';\nimport { TabsContext } from './TabsContext.js';\nimport type { TabsContextType } from './TabsContext.js';\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 indicatorClassName?: string;\n\n /* Размер табов. /\n size?: SizeProp;\n\n /* Идентификатор активного таба. Совпадает с `id` выбранного `<Tab />`. /\n value: T;\n\n /* Вызывается при смене активного таба. /\n onValueChange?: (value: T) => void;\n\n /* Располагает табы вертикально.\n * @default false /\n vertical?: boolean;\n\n /* Ширина компонента. /\n width?: number \| string;\n\n /* @ignore /\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](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_display-data-tabs-tab--doc). Группирует табы и позволяет управлять их состоянием.\n */\n@withRenderEnvironment\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 globalObject!: GlobalObject;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\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 public getRootNode!: TGetRootNode;\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 this.styles = getStyles(this.emotion);\n\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={this.cx({\n [this.styles.rootSmall(this.theme)]: size === 'small',\n [this.styles.rootMedium(this.theme)]: size === 'medium',\n [this.styles.rootLarge(this.theme)]: size === 'large',\n [this.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, this.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"]}
1	+ {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes, JSX } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isInstanceOf } from '../../lib/isInstanceOf.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport { getRootNode } from '../../lib/rootNode/getRootNode.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { emptyHandler } from '../../lib/utils.js';\nimport { Indicator } from './Indicator.js';\nimport { Tab } from './Tab.js';\nimport { getStyles } from './Tabs.styles.js';\nimport { TabsContext } from './TabsContext.js';\nimport type { TabsContextType } from './TabsContext.js';\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 indicatorClassName?: string;\n\n /* Размер табов. /\n size?: SizeProp;\n\n /* Идентификатор активного таба. Совпадает с `id` выбранного `<Tab />`. /\n value: T;\n\n /* Событие смены активного таба. /\n onValueChange?: (value: T) => void;\n\n /* Располагает табы вертикально.\n * @default false /\n vertical?: boolean;\n\n /* Ширина компонента. /\n width?: number \| string;\n\n /* @ignore /\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 Табы группируют контент и помогают в навигации.\n */\n@withRenderEnvironment\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 globalObject!: GlobalObject;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\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 public getRootNode!: TGetRootNode;\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 this.styles = getStyles(this.emotion);\n\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={this.cx({\n [this.styles.rootSmall(this.theme)]: size === 'small',\n [this.styles.rootMedium(this.theme)]: size === 'medium',\n [this.styles.rootLarge(this.theme)]: size === 'large',\n [this.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, this.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"]}

package/components/Toggle/Toggle.classes.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export declare const globalClasses: {
+    handle: string;
+    container: string;
+    disabled: string;
+    containerDisabled: string;
+    containerLoading: string;
+    background: string;
+};

package/components/Toggle/Toggle.classes.js ADDED Viewed

@@ -0,0 +1,10 @@
+import { prefix } from '../../lib/theming/Emotion.js';
+export var globalClasses = prefix('toggle')({
+    handle: 'handle',
+    container: 'container',
+    disabled: 'disabled',
+    containerDisabled: 'container-disabled',
+    containerLoading: 'container-loading',
+    background: 'background',
+});
+//# sourceMappingURL=Toggle.classes.js.map

package/components/Toggle/Toggle.classes.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Toggle.classes.js","sourceRoot":"","sources":["Toggle.classes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAEtD,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,UAAU;IACpB,iBAAiB,EAAE,oBAAoB;IACvC,gBAAgB,EAAE,mBAAmB;IACrC,UAAU,EAAE,YAAY;CACzB,CAAC,CAAC","sourcesContent":["import { prefix } from '../../lib/theming/Emotion.js';\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"]}

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

@@ -39,6 +39,8 @@ export interface ToggleProps extends Pick<AriaAttributes, 'aria-label' | 'aria-d
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     /** Отключает анимацию. */
     disableAnimations?: boolean;
+    /** Задаёт второстепенный пояснительный текст под основным текстом тогла. */
+    comment?: React.ReactNode;
 }
 export interface ToggleState {
     checked?: boolean;
@@ -80,7 +82,10 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
     private getRootSizeClassName;
     private getInputSizeClassName;
     private getCaptionSizeClassName;
+    private getSubcaptionSizeClassName;
     private renderMain;
+    private renderCaption;
+    private renderComment;
     private inputRef;
     private handleChange;
     private handleFocus;

package/components/Toggle/Toggle.js CHANGED Viewed

@@ -181,9 +181,20 @@ var Toggle = /** @class */ (function (_super) {
                 return this.styles.captionSmall(this.theme);
         }
     };
+    Toggle.prototype.getSubcaptionSizeClassName = function () {
+        switch (this.size) {
+            case 'large':
+                return this.styles.subcaptionLarge(this.theme);
+            case 'medium':
+                return this.styles.subcaptionMedium(this.theme);
+            case 'small':
+            default:
+                return this.styles.subcaptionSmall(this.theme);
+        }
+    };
     Toggle.prototype.renderMain = function () {
         var _a, _b, _c, _d, _e;
-        var _f = this.props, children = _f.children, warning = _f.warning, error = _f.error, id = _f.id, name = _f.name, ariaDescribedby = _f["aria-describedby"], ariaLabel = _f["aria-label"];
+        var _f = this.props, children = _f.children, warning = _f.warning, error = _f.error, id = _f.id, name = _f.name, comment = _f.comment, ariaDescribedby = _f["aria-describedby"], ariaLabel = _f["aria-label"];
         var _g = this.getProps(), loading = _g.loading, captionPosition = _g.captionPosition, disableAnimations = _g.disableAnimations;
         var disabled = this.getProps().disabled || loading;
         var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;
@@ -201,32 +212,45 @@ var Toggle = /** @class */ (function (_super) {
             _b[globalClasses.disabled] = !!disabled,
             _b[this.styles.disableAnimation()] = disableAnimations,
             _b));
-        var caption = null;
-        if (children) {
-            var captionClass = this.cx(this.getCaptionSizeClassName(), (_c = {},
-                _c[this.styles.caption(this.theme)] = true,
-                _c[this.styles.captionLeft(this.theme)] = captionPosition === 'left',
-                _c[this.styles.disabledCaption(this.theme)] = !!disabled,
-                _c));
-            caption = React.createElement("span", { className: captionClass }, children);
-        }
         return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
             React.createElement("label", { "data-tid": ToggleDataTids.root, className: labelClassNames },
-                React.createElement("div", { className: this.cx(this.getButtonSizeClassName(), (_d = {},
-                        _d[this.styles.button(this.theme)] = true,
-                        _d[this.styles.buttonRight()] = captionPosition === 'left',
-                        _d[this.styles.isWarning(this.theme)] = !!warning,
-                        _d[this.styles.isError(this.theme)] = !!error,
-                        _d[this.styles.focused(this.theme)] = !disabled && !!this.state.focusByTab,
-                        _d)) },
+                React.createElement("div", { className: this.cx(this.getButtonSizeClassName(), (_c = {},
+                        _c[this.styles.button(this.theme)] = true,
+                        _c[this.styles.buttonRight()] = captionPosition === 'left',
+                        _c[this.styles.isWarning(this.theme)] = !!warning,
+                        _c[this.styles.isError(this.theme)] = !!error,
+                        _c[this.styles.focused(this.theme)] = !disabled && !!this.state.focusByTab,
+                        _c)) },
                     React.createElement(FocusControlWrapper, { onBlurWhenDisabled: this.resetFocus },
                         React.createElement("input", { type: "checkbox", checked: checked, onChange: this.handleChange, className: this.cx(this.getInputSizeClassName(), this.styles.input(this.theme)), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: this.inputRef, disabled: disabled, id: id, name: name, role: "switch", "aria-label": ariaLabel, "aria-describedby": ariaDescribedby })),
                     React.createElement("div", { className: containerClassNames }),
-                    React.createElement("div", { className: this.cx(this.getHandleSizeClassName(), globalClasses.handle, (_e = {},
-                            _e[this.styles.handle(this.theme)] = true,
-                            _e[this.styles.handleDisabled(this.theme)] = disabled,
-                            _e)) })),
-                caption)));
+                    React.createElement("div", { className: this.cx(this.getHandleSizeClassName(), globalClasses.handle, (_d = {},
+                            _d[this.styles.handle(this.theme)] = true,
+                            _d[this.styles.handleDisabled(this.theme)] = disabled,
+                            _d)) })),
+                children &&
+                    (comment ? (React.createElement("div", { className: this.cx(this.styles.captionWrapper(), (_e = {},
+                            _e[this.styles.captionWrapperGap(this.theme)] = captionPosition !== 'left',
+                            _e[this.styles.captionWrapperGapLeft(this.theme)] = captionPosition === 'left',
+                            _e)) },
+                        this.renderCaption(disabled, captionPosition, true),
+                        this.renderComment(disabled))) : (this.renderCaption(disabled, captionPosition, false))))));
+    };
+    Toggle.prototype.renderCaption = function (disabled, captionPosition, noGap) {
+        var _a;
+        var captionClass = this.cx(this.getCaptionSizeClassName(), (_a = {},
+            _a[this.styles.caption(this.theme)] = true,
+            _a[this.styles.captionLeft(this.theme)] = captionPosition === 'left',
+            _a[this.styles.disabledCaption(this.theme)] = !!disabled,
+            _a[this.styles.captionNoGap()] = noGap,
+            _a));
+        return React.createElement("div", { className: captionClass }, this.props.children);
+    };
+    Toggle.prototype.renderComment = function (disabled) {
+        var _a;
+        return (React.createElement("div", { className: this.cx(this.styles.subcaption(this.theme), this.getSubcaptionSizeClassName(), (_a = {},
+                _a[this.styles.subcaptionDisabled(this.theme)] = !!disabled,
+                _a)) }, this.props.comment));
     };
     Toggle.prototype.isUncontrolled = function () {
         return this.props.checked === undefined;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toggle.js","sourceRoot":"","sources":["Toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes, InputHTMLAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { KeyListener } from '../../lib/events/keyListener.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { getStyles, globalClasses } from './Toggle.styles.js';\n\nexport interface ToggleProps\n extends\n Pick<AriaAttributes, 'aria-label' \| 'aria-describedby'>,\n Pick<InputHTMLAttributes<HTMLInputElement>, 'id' \| 'name'>,\n CommonProps {\n /** @ignore /\n children?: React.ReactNode;\n\n /* Расположение названия относительно переключателя.\n * @default 'right' /\n captionPosition?: 'left' \| 'right';\n\n /* Включает тогл.\n * @default false /\n checked?: boolean;\n\n /* Делает тогл включенным по умолчанию. Не работает, если задан проп `checked`. /\n defaultChecked?: boolean;\n\n /* Блокирует тогл. /\n disabled?: boolean;\n\n /* Событие изменения значения. /\n onValueChange?: (value: boolean) => void;\n\n /* Событие клика на тогл. /\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n\n /* Переводит тогл в состояние предупреждения.\n * @default false /\n warning?: boolean;\n\n /* Переводит тогл в состояние ошибки.\n * @default false /\n error?: boolean;\n\n /* Переводит тогл в состояние загрузки: добавляет стили для состояния `loading` и отключает тогл./\n loading?: boolean;\n\n /* Устанавливает фокус на тогл после окончания загрузки страницы.\n * @default false /\n autoFocus?: boolean;\n\n /* Размер тогла. /\n size?: SizeProp;\n\n /* Событие получения тоглом фокуса./\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n\n /* Событие потери тоглом фокуса. /\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\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 /\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n public static __KONTUR_REACT_UI__ = 'Toggle';\n public static displayName = 'Toggle';\n\n public static defaultProps: DefaultProps = {\n disabled: false,\n loading: false,\n captionPosition: 'right',\n disableAnimations: isTestEnv,\n };\n private size!: SizeProp;\n\n private getProps = createPropsGetter(Toggle.defaultProps);\n\n private styles!: ReturnType<typeof getStyles>;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private globalObject!: GlobalObject;\n private theme!: Theme;\n private input: HTMLInputElement \| null = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private keyListener!: KeyListener;\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 this.keyListener = new KeyListener(this.globalObject);\n if (this.props.autoFocus) {\n this.keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n /\n @public\n */\n public focus = (): void => {\n if (this.input) {\n this.keyListener.isTabPressed = true;\n this.input.focus();\n }\n };\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private getContainerSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.containerLarge(this.theme);\n case 'medium':\n return this.styles.containerMedium(this.theme);\n case 'small':\n default:\n return this.styles.containerSmall(this.theme);\n }\n }\n\n private getHandleSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.handleLarge(this.theme);\n case 'medium':\n return this.styles.handleMedium(this.theme);\n case 'small':\n default:\n return this.styles.handleSmall(this.theme);\n }\n }\n\n private getButtonSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.buttonLarge(this.theme);\n case 'medium':\n return this.styles.buttonMedium(this.theme);\n case 'small':\n default:\n return this.styles.buttonSmall(this.theme);\n }\n }\n\n private getRootSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.rootLarge(this.theme);\n case 'medium':\n return this.styles.rootMedium(this.theme);\n case 'small':\n default:\n return this.styles.rootSmall(this.theme);\n }\n }\n\n private getInputSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.inputLarge(this.theme);\n case 'medium':\n return this.styles.inputMedium(this.theme);\n case 'small':\n default:\n return this.styles.inputSmall(this.theme);\n }\n }\n\n private getCaptionSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.captionLarge(this.theme);\n case 'medium':\n return this.styles.captionMedium(this.theme);\n case 'small':\n default:\n return this.styles.captionSmall(this.theme);\n }\n }\n\n private renderMain() {\n const {\n children,\n warning,\n error,\n id,\n name,\n 'aria-describedby': ariaDescribedby,\n 'aria-label': ariaLabel,\n } = 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 = this.cx(this.getContainerSizeClassName(), {\n [this.styles.container(this.theme)]: true,\n [this.styles.containerDisabled(this.theme)]: !!disabled,\n [globalClasses.container]: true,\n [globalClasses.containerDisabled]: !!disabled,\n [globalClasses.containerLoading]: loading,\n });\n\n const labelClassNames = this.cx(this.getRootSizeClassName(), {\n [this.styles.root(this.theme)]: true,\n [this.styles.rootLeft()]: captionPosition === 'left',\n [this.styles.disabled()]: !!disabled,\n [globalClasses.disabled]: !!disabled,\n [this.styles.disableAnimation()]: disableAnimations,\n });\n\n let caption = null;\n if (children) {\n const captionClass = this.cx(this.getCaptionSizeClassName(), {\n [this.styles.caption(this.theme)]: true,\n [this.styles.captionLeft(this.theme)]: captionPosition === 'left',\n [this.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={this.cx(this.getButtonSizeClassName(), {\n [this.styles.button(this.theme)]: true,\n [this.styles.buttonRight()]: captionPosition === 'left',\n [this.styles.isWarning(this.theme)]: !!warning,\n [this.styles.isError(this.theme)]: !!error,\n [this.styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n })}\n >\n <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={this.handleChange}\n className={this.cx(this.getInputSizeClassName(), this.styles.input(this.theme))}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={this.inputRef}\n disabled={disabled}\n id={id}\n name={name}\n role=\"switch\"\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n />\n </FocusControlWrapper>\n <div className={containerClassNames} />\n <div\n className={this.cx(this.getHandleSizeClassName(), globalClasses.handle, {\n [this.styles.handle(this.theme)]: true,\n [this.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 (this.keyListener.isTabPressed) {\n this.setState({ focusByTab: true });\n }\n };\n\n private resetFocus = () => this.setState({ focusByTab: false });\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n this.resetFocus();\n this.props.onBlur?.(event);\n };\n\n private isUncontrolled() {\n return this.props.checked === undefined;\n }\n}\n"]}
1	+ {"version":3,"file":"Toggle.js","sourceRoot":"","sources":["Toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes, InputHTMLAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { KeyListener } from '../../lib/events/keyListener.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { getStyles, globalClasses } from './Toggle.styles.js';\n\nexport interface ToggleProps\n extends\n Pick<AriaAttributes, 'aria-label' \| 'aria-describedby'>,\n Pick<InputHTMLAttributes<HTMLInputElement>, 'id' \| 'name'>,\n CommonProps {\n /** @ignore /\n children?: React.ReactNode;\n\n /* Расположение названия относительно переключателя.\n * @default 'right' /\n captionPosition?: 'left' \| 'right';\n\n /* Включает тогл.\n * @default false /\n checked?: boolean;\n\n /* Делает тогл включенным по умолчанию. Не работает, если задан проп `checked`. /\n defaultChecked?: boolean;\n\n /* Блокирует тогл. /\n disabled?: boolean;\n\n /* Событие изменения значения. /\n onValueChange?: (value: boolean) => void;\n\n /* Событие клика на тогл. /\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n\n /* Переводит тогл в состояние предупреждения.\n * @default false /\n warning?: boolean;\n\n /* Переводит тогл в состояние ошибки.\n * @default false /\n error?: boolean;\n\n /* Переводит тогл в состояние загрузки: добавляет стили для состояния `loading` и отключает тогл./\n loading?: boolean;\n\n /* Устанавливает фокус на тогл после окончания загрузки страницы.\n * @default false /\n autoFocus?: boolean;\n\n /* Размер тогла. /\n size?: SizeProp;\n\n /* Событие получения тоглом фокуса./\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n\n /* Событие потери тоглом фокуса. /\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n\n /* Отключает анимацию. /\n disableAnimations?: boolean;\n\n /* Задаёт второстепенный пояснительный текст под основным текстом тогла. /\n comment?: React.ReactNode;\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 /\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n public static __KONTUR_REACT_UI__ = 'Toggle';\n public static displayName = 'Toggle';\n\n public static defaultProps: DefaultProps = {\n disabled: false,\n loading: false,\n captionPosition: 'right',\n disableAnimations: isTestEnv,\n };\n private size!: SizeProp;\n\n private getProps = createPropsGetter(Toggle.defaultProps);\n\n private styles!: ReturnType<typeof getStyles>;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private globalObject!: GlobalObject;\n private theme!: Theme;\n private input: HTMLInputElement \| null = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private keyListener!: KeyListener;\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 this.keyListener = new KeyListener(this.globalObject);\n if (this.props.autoFocus) {\n this.keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n /\n @public\n */\n public focus = (): void => {\n if (this.input) {\n this.keyListener.isTabPressed = true;\n this.input.focus();\n }\n };\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private getContainerSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.containerLarge(this.theme);\n case 'medium':\n return this.styles.containerMedium(this.theme);\n case 'small':\n default:\n return this.styles.containerSmall(this.theme);\n }\n }\n\n private getHandleSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.handleLarge(this.theme);\n case 'medium':\n return this.styles.handleMedium(this.theme);\n case 'small':\n default:\n return this.styles.handleSmall(this.theme);\n }\n }\n\n private getButtonSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.buttonLarge(this.theme);\n case 'medium':\n return this.styles.buttonMedium(this.theme);\n case 'small':\n default:\n return this.styles.buttonSmall(this.theme);\n }\n }\n\n private getRootSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.rootLarge(this.theme);\n case 'medium':\n return this.styles.rootMedium(this.theme);\n case 'small':\n default:\n return this.styles.rootSmall(this.theme);\n }\n }\n\n private getInputSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.inputLarge(this.theme);\n case 'medium':\n return this.styles.inputMedium(this.theme);\n case 'small':\n default:\n return this.styles.inputSmall(this.theme);\n }\n }\n\n private getCaptionSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.captionLarge(this.theme);\n case 'medium':\n return this.styles.captionMedium(this.theme);\n case 'small':\n default:\n return this.styles.captionSmall(this.theme);\n }\n }\n\n private getSubcaptionSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.subcaptionLarge(this.theme);\n case 'medium':\n return this.styles.subcaptionMedium(this.theme);\n case 'small':\n default:\n return this.styles.subcaptionSmall(this.theme);\n }\n }\n\n private renderMain() {\n const {\n children,\n warning,\n error,\n id,\n name,\n comment,\n 'aria-describedby': ariaDescribedby,\n 'aria-label': ariaLabel,\n } = 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 = this.cx(this.getContainerSizeClassName(), {\n [this.styles.container(this.theme)]: true,\n [this.styles.containerDisabled(this.theme)]: !!disabled,\n [globalClasses.container]: true,\n [globalClasses.containerDisabled]: !!disabled,\n [globalClasses.containerLoading]: loading,\n });\n\n const labelClassNames = this.cx(this.getRootSizeClassName(), {\n [this.styles.root(this.theme)]: true,\n [this.styles.rootLeft()]: captionPosition === 'left',\n [this.styles.disabled()]: !!disabled,\n [globalClasses.disabled]: !!disabled,\n [this.styles.disableAnimation()]: disableAnimations,\n });\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <label data-tid={ToggleDataTids.root} className={labelClassNames}>\n <div\n className={this.cx(this.getButtonSizeClassName(), {\n [this.styles.button(this.theme)]: true,\n [this.styles.buttonRight()]: captionPosition === 'left',\n [this.styles.isWarning(this.theme)]: !!warning,\n [this.styles.isError(this.theme)]: !!error,\n [this.styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n })}\n >\n <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={this.handleChange}\n className={this.cx(this.getInputSizeClassName(), this.styles.input(this.theme))}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={this.inputRef}\n disabled={disabled}\n id={id}\n name={name}\n role=\"switch\"\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n />\n </FocusControlWrapper>\n <div className={containerClassNames} />\n <div\n className={this.cx(this.getHandleSizeClassName(), globalClasses.handle, {\n [this.styles.handle(this.theme)]: true,\n [this.styles.handleDisabled(this.theme)]: disabled,\n })}\n />\n </div>\n {children &&\n (comment ? (\n <div\n className={this.cx(this.styles.captionWrapper(), {\n [this.styles.captionWrapperGap(this.theme)]: captionPosition !== 'left',\n [this.styles.captionWrapperGapLeft(this.theme)]: captionPosition === 'left',\n })}\n >\n {this.renderCaption(disabled, captionPosition, true)}\n {this.renderComment(disabled)}\n </div>\n ) : (\n this.renderCaption(disabled, captionPosition, false)\n ))}\n </label>\n </CommonWrapper>\n );\n }\n\n private renderCaption(disabled: boolean, captionPosition: 'left' \| 'right', noGap: boolean) {\n const captionClass = this.cx(this.getCaptionSizeClassName(), {\n [this.styles.caption(this.theme)]: true,\n [this.styles.captionLeft(this.theme)]: captionPosition === 'left',\n [this.styles.disabledCaption(this.theme)]: !!disabled,\n [this.styles.captionNoGap()]: noGap,\n });\n\n return <div className={captionClass}>{this.props.children}</div>;\n }\n\n private renderComment(disabled: boolean) {\n return (\n <div\n className={this.cx(this.styles.subcaption(this.theme), this.getSubcaptionSizeClassName(), {\n [this.styles.subcaptionDisabled(this.theme)]: !!disabled,\n })}\n >\n {this.props.comment}\n </div>\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 (this.keyListener.isTabPressed) {\n this.setState({ focusByTab: true });\n }\n };\n\n private resetFocus = () => this.setState({ focusByTab: false });\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n this.resetFocus();\n this.props.onBlur?.(event);\n };\n\n private isUncontrolled() {\n return this.props.checked === undefined;\n }\n}\n"]}

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

@@ -1,6 +1,8 @@
 export declare const toggleSizeMixin: (fontSize: string, toggleHeight: string, toggleWidth: string) => string;
 export declare const buttonSizeMixin: (labGrotesqueBaselineCompensation: string, fontSize: string, toggleHeight: string, toggleWidth: string, toggleBorderRadius: string, toggleButtonOffsetY: string) => string;
 export declare const captionSizeMixin: (fontSize: string, toggleHeight: string) => string;
+export declare const subcaptionMixin: (fontSize: string, lineHeight: string) => string;
+export declare const disabledTextColorMixin: (textColor: string) => string;
 export declare const handleMixin: (toggleHandleSize: string, toggleHandleBorderRadius: string) => string;
 export declare const containerSizeMixin: (toggleBorderRadius: string) => string;
 export declare const inputSizeMixin: (toggleHeight: string, toggleWidth: string) => string;

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

@@ -1,5 +1,5 @@
 import { isChrome } from '../../lib/client.js';
-import { globalClasses } from './Toggle.styles.js';
+import { globalClasses } from './Toggle.classes.js';
 export var toggleSizeMixin = function (fontSize, toggleHeight, toggleWidth) {
     return "\n    line-height: ".concat(toggleHeight, ";\n    font-size: ").concat(fontSize, ";\n\n    &::before {\n      width: ").concat(toggleWidth, ";\n    }\n  ");
 };
@@ -12,6 +12,12 @@ export var buttonSizeMixin = function (labGrotesqueBaselineCompensation, fontSiz
 export var captionSizeMixin = function (fontSize, toggleHeight) {
     return "\n    line-height: ".concat(toggleHeight, ";\n    font-size: ").concat(fontSize, ";\n  ");
 };
+export var subcaptionMixin = function (fontSize, lineHeight) {
+    return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n  ");
+};
+export var disabledTextColorMixin = function (textColor) {
+    return "\n    color: ".concat(textColor, ";\n  ");
+};
 export var handleMixin = function (toggleHandleSize, toggleHandleBorderRadius) {
     return "\n    border-radius: ".concat(toggleHandleBorderRadius, ";\n    height: ").concat(toggleHandleSize, ";\n    width: ").concat(toggleHandleSize, ";\n  ");
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toggle.mixins.js","sourceRoot":"","sources":["Toggle.mixins.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,~~oBAAoB~~,CAAC;~~AAEnD~~,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,QAAgB,EAAE,YAAoB,EAAE,WAAmB;IACzF,OAAO,6BACU,YAAY,+BACd,QAAQ,gDAGV,WAAW,iBAEvB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAC7B,gCAAwC,EACxC,QAAgB,EAChB,YAAoB,EACpB,WAAmB,EACnB,kBAA0B,EAC1B,mBAA2B;IAE3B,IAAM,yBAAyB,GAAG,QAAQ,CAAC,gCAAgC,CAAC,CAAC;IAC7E,IAAM,cAAc,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC1C,IAAM,oBAAoB,GAAG,cAAc,IAAI,EAAE,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/F,OAAO,wBACK,YAAY,2BACb,WAAW,8BACR,WAAW,qCAEN,kBAAkB,iCACpB,YAAY,uCAER,mBAAmB,gBAAM,oBAAoB,aACjE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,QAAgB,EAAE,YAAoB;IACrE,OAAO,6BACU,YAAY,+BACd,QAAQ,UACtB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,gBAAwB,EAAE,wBAAgC;IACpF,OAAO,+BACY,wBAAwB,4BAC/B,gBAAgB,2BACjB,gBAAgB,UAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAAC,kBAA0B;IAC3D,OAAO,+BACY,kBAAkB,UACpC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,YAAoB,EAAE,WAAmB;IACtE,IAAM,sBAAsB,GAAG,YAAY,CAAC;IAC5C,IAAM,MAAM,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACtC,OAAO,6BACU,aAAa,CAAC,iBAAiB,eAAK,aAAa,CAAC,UAAU,sCACxD,MAAM,GAAG,GAAG,oBAAU,MAAM,GAAG,GAAG,0CAEtC,aAAa,CAAC,MAAM,6CACT,WAAW,2BAAiB,sBAAsB,kBAE7E,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { isChrome } from '../../lib/client.js';\nimport { globalClasses } from './Toggle.~~styles~~.js';\n\nexport const toggleSizeMixin = (fontSize: string, toggleHeight: string, toggleWidth: string): string => {\n return `\n line-height: ${toggleHeight};\n font-size: ${fontSize};\n\n &::before {\n width: ${toggleWidth};\n }\n `;\n};\n\nexport const buttonSizeMixin = (\n labGrotesqueBaselineCompensation: string,\n fontSize: string,\n toggleHeight: string,\n toggleWidth: string,\n toggleBorderRadius: string,\n toggleButtonOffsetY: string,\n): string => {\n const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n const buttonFontSize = parseInt(fontSize);\n const baselineCompensation = buttonFontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;\n return `\n height: ${toggleHeight};\n width: ${toggleWidth};\n flex: 1 0 ${toggleWidth};\n\n border-radius: ${toggleBorderRadius};\n line-height: ${toggleHeight};\n\n margin-top: calc(${toggleButtonOffsetY} + ${baselineCompensation}px);\n `;\n};\n\nexport const captionSizeMixin = (fontSize: string, toggleHeight: string): string => {\n return `\n line-height: ${toggleHeight};\n font-size: ${fontSize};\n `;\n};\n\nexport const handleMixin = (toggleHandleSize: string, toggleHandleBorderRadius: string): string => {\n return `\n border-radius: ${toggleHandleBorderRadius};\n height: ${toggleHandleSize};\n width: ${toggleHandleSize};\n `;\n};\n\nexport const containerSizeMixin = (toggleBorderRadius: string): string => {\n return `\n border-radius: ${toggleBorderRadius};\n `;\n};\n\nexport const inputSizeMixin = (toggleHeight: string, toggleWidth: string): string => {\n const handleWidthWithBorders = toggleHeight;\n const height = parseInt(toggleHeight);\n return `\n &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n border-radius: ${height * 0.5}px 0 0 ${height * 0.5}px;\n }\n &:checked ~ .${globalClasses.handle} {\n transform: translateX(${toggleWidth}) translateX(-${handleWidthWithBorders});\n }\n `;\n};\n"]}
1	+ {"version":3,"file":"Toggle.mixins.js","sourceRoot":"","sources":["Toggle.mixins.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,QAAgB,EAAE,YAAoB,EAAE,WAAmB;IACzF,OAAO,6BACU,YAAY,+BACd,QAAQ,gDAGV,WAAW,iBAEvB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAC7B,gCAAwC,EACxC,QAAgB,EAChB,YAAoB,EACpB,WAAmB,EACnB,kBAA0B,EAC1B,mBAA2B;IAE3B,IAAM,yBAAyB,GAAG,QAAQ,CAAC,gCAAgC,CAAC,CAAC;IAC7E,IAAM,cAAc,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC1C,IAAM,oBAAoB,GAAG,cAAc,IAAI,EAAE,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/F,OAAO,wBACK,YAAY,2BACb,WAAW,8BACR,WAAW,qCAEN,kBAAkB,iCACpB,YAAY,uCAER,mBAAmB,gBAAM,oBAAoB,aACjE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,QAAgB,EAAE,YAAoB;IACrE,OAAO,6BACU,YAAY,+BACd,QAAQ,UACtB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,QAAgB,EAAE,UAAkB;IAClE,OAAO,2BACQ,QAAQ,iCACN,UAAU,UAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,sBAAsB,GAAG,UAAC,SAAiB;IACtD,OAAO,uBACI,SAAS,UACnB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,gBAAwB,EAAE,wBAAgC;IACpF,OAAO,+BACY,wBAAwB,4BAC/B,gBAAgB,2BACjB,gBAAgB,UAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAAC,kBAA0B;IAC3D,OAAO,+BACY,kBAAkB,UACpC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,YAAoB,EAAE,WAAmB;IACtE,IAAM,sBAAsB,GAAG,YAAY,CAAC;IAC5C,IAAM,MAAM,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACtC,OAAO,6BACU,aAAa,CAAC,iBAAiB,eAAK,aAAa,CAAC,UAAU,sCACxD,MAAM,GAAG,GAAG,oBAAU,MAAM,GAAG,GAAG,0CAEtC,aAAa,CAAC,MAAM,6CACT,WAAW,2BAAiB,sBAAsB,kBAE7E,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { isChrome } from '../../lib/client.js';\nimport { globalClasses } from './Toggle.classes.js';\n\nexport const toggleSizeMixin = (fontSize: string, toggleHeight: string, toggleWidth: string): string => {\n return `\n line-height: ${toggleHeight};\n font-size: ${fontSize};\n\n &::before {\n width: ${toggleWidth};\n }\n `;\n};\n\nexport const buttonSizeMixin = (\n labGrotesqueBaselineCompensation: string,\n fontSize: string,\n toggleHeight: string,\n toggleWidth: string,\n toggleBorderRadius: string,\n toggleButtonOffsetY: string,\n): string => {\n const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n const buttonFontSize = parseInt(fontSize);\n const baselineCompensation = buttonFontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;\n return `\n height: ${toggleHeight};\n width: ${toggleWidth};\n flex: 1 0 ${toggleWidth};\n\n border-radius: ${toggleBorderRadius};\n line-height: ${toggleHeight};\n\n margin-top: calc(${toggleButtonOffsetY} + ${baselineCompensation}px);\n `;\n};\n\nexport const captionSizeMixin = (fontSize: string, toggleHeight: string): string => {\n return `\n line-height: ${toggleHeight};\n font-size: ${fontSize};\n `;\n};\n\nexport const subcaptionMixin = (fontSize: string, lineHeight: string): string => {\n return `\n font-size: ${fontSize};\n line-height: ${lineHeight};\n `;\n};\n\nexport const disabledTextColorMixin = (textColor: string): string => {\n return `\n color: ${textColor};\n `;\n};\n\nexport const handleMixin = (toggleHandleSize: string, toggleHandleBorderRadius: string): string => {\n return `\n border-radius: ${toggleHandleBorderRadius};\n height: ${toggleHandleSize};\n width: ${toggleHandleSize};\n `;\n};\n\nexport const containerSizeMixin = (toggleBorderRadius: string): string => {\n return `\n border-radius: ${toggleBorderRadius};\n `;\n};\n\nexport const inputSizeMixin = (toggleHeight: string, toggleWidth: string): string => {\n const handleWidthWithBorders = toggleHeight;\n const height = parseInt(toggleHeight);\n return `\n &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n border-radius: ${height * 0.5}px 0 0 ${height * 0.5}px;\n }\n &:checked ~ .${globalClasses.handle} {\n transform: translateX(${toggleWidth}) translateX(-${handleWidthWithBorders});\n }\n `;\n};\n"]}

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

@@ -1,12 +1,6 @@
 import type { Theme } from '../../lib/theming/Theme.js';
-export declare const globalClasses: {
-    handle: string;
-    container: string;
-    disabled: string;
-    containerDisabled: string;
-    containerLoading: string;
-    background: string;
-};
+import { globalClasses } from './Toggle.classes.js';
+export { globalClasses };
 export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
     root(t: Theme): string;
     rootSmall(t: Theme): string;
@@ -43,4 +37,13 @@ export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGet
     captionLarge(t: Theme): string;
     disabledCaption(t: Theme): string;
     captionLeft(t: Theme): string;
+    captionWrapper(): string;
+    captionWrapperGap(t: Theme): string;
+    captionWrapperGapLeft(t: Theme): string;
+    captionNoGap(): string;
+    subcaption(t: Theme): string;
+    subcaptionDisabled(t: Theme): string;
+    subcaptionSmall(t: Theme): string;
+    subcaptionMedium(t: Theme): string;
+    subcaptionLarge(t: Theme): string;
 }>;

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

@@ -2,16 +2,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { memoizeGetStyles, prefix } from '../../lib/theming/Emotion.js';
-import { buttonSizeMixin, captionSizeMixin, containerSizeMixin, handleMixin, inputSizeMixin, toggleSizeMixin, } from './Toggle.mixins.js';
-export var globalClasses = prefix('toggle')({
-    handle: 'handle',
-    container: 'container',
-    disabled: 'disabled',
-    containerDisabled: 'container-disabled',
-    containerLoading: 'container-loading',
-    background: 'background',
-});
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+import { globalClasses } from './Toggle.classes.js';
+import { buttonSizeMixin, captionSizeMixin, containerSizeMixin, disabledTextColorMixin, handleMixin, inputSizeMixin, subcaptionMixin, toggleSizeMixin, } from './Toggle.mixins.js';
+export { globalClasses };
 export var getStyles = memoizeGetStyles(function (_a) {
     var css = _a.css;
     return ({
@@ -120,7 +114,34 @@ export var getStyles = memoizeGetStyles(function (_a) {
         captionLeft: function (t) {
             return css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "], ["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])), t.toggleTextColor, t.toggleCaptionGap);
         },
+        captionWrapper: function () {
+            return css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n      display: inline-block;\n    "], ["\n      display: inline-block;\n    "])));
+        },
+        captionWrapperGap: function (t) {
+            return css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n      padding: 0 0 0 ", ";\n    "], ["\n      padding: 0 0 0 ", ";\n    "])), t.toggleCaptionGap);
+        },
+        captionWrapperGapLeft: function (t) {
+            return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n      padding: 0 ", " 0 0;\n    "], ["\n      padding: 0 ", " 0 0;\n    "])), t.toggleCaptionGap);
+        },
+        captionNoGap: function () {
+            return css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n      padding: 0;\n    "], ["\n      padding: 0;\n    "])));
+        },
+        subcaption: function (t) {
+            return css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n      margin-top: 2px;\n      color: ", ";\n    "], ["\n      margin-top: 2px;\n      color: ", ";\n    "])), t.toggleCommentTextColor);
+        },
+        subcaptionDisabled: function (t) {
+            return css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), disabledTextColorMixin(t.textColorDisabled));
+        },
+        subcaptionSmall: function (t) {
+            return css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), subcaptionMixin(t.toggleCommentFontSizeSmall, t.toggleCommentLineHeightSmall));
+        },
+        subcaptionMedium: function (t) {
+            return css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), subcaptionMixin(t.toggleCommentFontSizeMedium, t.toggleCommentLineHeightMedium));
+        },
+        subcaptionLarge: function (t) {
+            return css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), subcaptionMixin(t.toggleCommentFontSizeLarge, t.toggleCommentLineHeightLarge));
+        },
     });
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44;
 //# sourceMappingURL=Toggle.styles.js.map