npm - @skbkontur/react-ui - Versions diffs - 0.0.0-0fe669bb2d → 0.0.0-0ffbe8b468 - Mend

@skbkontur/react-ui 0.0.0-0fe669bb2d → 0.0.0-0ffbe8b468

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

package/internal/Popup/Popup.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { Nullable } from '../../typings/utility-types';
 import { FocusEventType, MouseEventType } from '../../typings/event-types';
@@ -6,6 +6,7 @@ import { CommonProps } from '../CommonWrapper';
 export declare const PopupPositions: readonly ["top left", "top center", "top right", "right top", "right middle", "right bottom", "bottom right", "bottom center", "bottom left", "left bottom", "left middle", "left top"];
 export declare const DefaultPosition: "top left";
 export declare type PopupPositionsType = typeof PopupPositions[number];
+export declare const DUMMY_LOCATION: PopupLocation;
 export interface PopupHandlerProps {
     onMouseEnter?: (event: MouseEventType) => void;
     onMouseLeave?: (event: MouseEventType) => void;
@@ -15,7 +16,7 @@ export interface PopupHandlerProps {
     onOpen?: () => void;
     onClose?: () => void;
 }
-export interface PopupProps extends CommonProps, PopupHandlerProps {
+export interface PopupProps extends Omit<CommonProps, 'children'>, PopupHandlerProps, Pick<HTMLAttributes<HTMLDivElement>, 'id'> {
     anchorElement: React.ReactNode | HTMLElement;
     backgroundColor?: React.CSSProperties['backgroundColor'];
     borderColor?: React.CSSProperties['borderColor'];
@@ -48,6 +49,10 @@ export interface PopupProps extends CommonProps, PopupHandlerProps {
     tryPreserveFirstRenderedPosition?: boolean;
     withoutMobile?: boolean;
     mobileOnCloseRequest?: () => void;
+    /**
+     * Возвращает текущую позицию попапа
+     */
+    onPositionChange?: (pos: PopupPositionsType) => void;
 }
 interface PopupLocation {
     coordinates: {
@@ -60,10 +65,14 @@ export interface PopupState {
     location: Nullable<PopupLocation>;
 }
 export declare const PopupDataTids: {
+    readonly root: "Popup__root";
     readonly content: "PopupContent";
     readonly contentInner: "PopupContentInner";
     readonly popupPin: "PopupPin__root";
 };
+export declare const PopupIds: {
+    root: "Popup__root";
+};
 declare type DefaultProps = Required<Pick<PopupProps, 'popupOffset' | 'hasPin' | 'hasShadow' | 'disableAnimations' | 'useWrapper' | 'ignoreHover' | 'width'>>;
 export declare class Popup extends React.Component<PopupProps, PopupState> {
     static __KONTUR_REACT_UI__: string;
@@ -128,6 +137,8 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
     private isMobileLayout;
     private setRootNode;
     private refForTransition;
+    private hasAnchorElementListeners;
+    private rootId;
     anchorElement: Nullable<Element>;
     componentDidMount(): void;
     static getDerivedStateFromProps(props: Readonly<PopupProps>, state: PopupState): PopupState;

package/internal/PopupMenu/PopupMenu/PopupMenu.js CHANGED Viewed

@@ -4,14 +4,17 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _class2, _temp;
 import React from 'react';
+import { getRandomID } from "../../../lib/utils";
 import { isKeyArrowVertical, isKeyEnter, isKeyEscape, isKeySpace, someKeys } from "../../../lib/events/keyboard/identifiers";
-import { InternalMenu } from "../../InternalMenu";
-import { Popup } from "../../Popup";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+import { Popup, PopupIds } from "../../Popup";
 import { RenderLayer } from "../../RenderLayer";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { responsiveLayout } from "../../../components/ResponsiveLayout/decorator";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { Menu } from "../../Menu";
 import { isValidPositions } from "../validatePositions";
 import { styles } from "../PopupMenu.styles";
 export var PopupMenuType = {
@@ -34,6 +37,7 @@ export var PopupMenu = rootNode(_class = responsiveLayout(_class = (_temp = _cla
     }
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.rootId = PopupIds.root + getRandomID();
     _this.getProps = createPropsGetter(PopupMenu.defaultProps);
     _this.state = {
       menuVisible: false,
@@ -61,6 +65,20 @@ export var PopupMenu = rootNode(_class = responsiveLayout(_class = (_temp = _cla
       }
     };
+    _this.passPropsToCaption = function (caption) {
+      var _this$props$popupMenu;
+      if (typeof caption === 'string' || typeof caption === 'number') {
+        return caption;
+      }
+      return /*#__PURE__*/React.cloneElement(caption, {
+        'aria-controls': (_this$props$popupMenu = _this.props.popupMenuId) != null ? _this$props$popupMenu : _this.rootId,
+        'aria-expanded': _this.state.menuVisible ? 'true' : 'false',
+        'aria-label': _this.props['aria-label']
+      });
+    };
     _this.renderCaption = function () {
       if (typeof _this.props.caption === 'function') {
         var caption = _this.props.caption({
@@ -76,7 +94,7 @@ export var PopupMenu = rootNode(_class = responsiveLayout(_class = (_temp = _cla
           ref: function ref(element) {
             return _this.captionWrapper = element;
           }
-        }, caption);
+        }, _this.passPropsToCaption(caption));
       }
       return /*#__PURE__*/React.createElement("span", {
@@ -87,7 +105,7 @@ export var PopupMenu = rootNode(_class = responsiveLayout(_class = (_temp = _cla
           return _this.captionWrapper = element;
         },
         className: styles.caption()
-      }, _this.props.caption);
+      }, _this.passPropsToCaption(_this.props.caption));
     };
     _this.hideMenuWithoutFocusing = function () {
@@ -190,6 +208,20 @@ export var PopupMenu = rootNode(_class = responsiveLayout(_class = (_temp = _cla
   var _proto = PopupMenu.prototype;
   _proto.render = function render() {
+    var _this2 = this;
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: ThemeFactory.create({
+          menuOffsetY: theme.popupMenuMenuOffsetY
+        }, theme)
+      }, _this2.renderMain());
+    });
+  };
+  _proto.renderMain = function renderMain() {
+    var _this$props$popupMenu2;
     var _this$getProps = this.getProps(),
         popupHasPin = _this$getProps.popupHasPin,
         disableAnimations = _this$getProps.disableAnimations;
@@ -207,6 +239,7 @@ export var PopupMenu = rootNode(_class = responsiveLayout(_class = (_temp = _cla
         width: this.props.width
       }
     }, this.renderCaption(), this.captionWrapper && this.props.children && /*#__PURE__*/React.createElement(Popup, {
+      id: (_this$props$popupMenu2 = this.props.popupMenuId) != null ? _this$props$popupMenu2 : this.rootId,
       anchorElement: this.captionWrapper,
       opened: this.state.menuVisible,
       hasShadow: true,
@@ -218,11 +251,12 @@ export var PopupMenu = rootNode(_class = responsiveLayout(_class = (_temp = _cla
       onOpen: this.handleOpen,
       mobileOnCloseRequest: this.hideMenu,
       width: this.isMobileLayout ? 'auto' : this.props.menuWidth || 'auto'
-    }, /*#__PURE__*/React.createElement(InternalMenu, {
+    }, /*#__PURE__*/React.createElement(Menu, {
       hasShadow: false,
       maxHeight: this.isMobileLayout ? 'none' : this.props.menuMaxHeight || 'none',
       onKeyDown: this.handleKeyDown,
       onItemClick: this.handleItemSelection,
+      preventIconsOffset: this.props.preventIconsOffset,
       cyclicSelection: false,
       ref: this.refInternalMenu,
       initialSelectedItemIndex: this.state.firstItemShouldBeSelected ? 0 : -1,

package/internal/PopupMenu/PopupMenu/PopupMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["PopupMenu.tsx"],"names":["React","isKeyArrowVertical","isKeyEnter","isKeyEscape","isKeySpace","someKeys","InternalMenu","Popup","RenderLayer","CommonWrapper","responsiveLayout","rootNode","createPropsGetter","isValidPositions","styles","PopupMenuType","Dropdown","Tooltip","PopupMenuDataTids","root","caption","Positions","PopupMenu","getProps","defaultProps","state","menuVisible","firstItemShouldBeSelected","captionWrapper","savedFocusableElement","menu","open","showMenu","close","hideMenu","refInternalMenu","element","handleOpen","focus","renderCaption","props","opened","openMenu","closeMenu","toggleMenu","handleCaptionClick","handleCaptionKeyDown","hideMenuWithoutFocusing","saveFocus","setState","handleChangeMenuVisible","restoreFocus","e","preventDefault","handleKeyDown","document","activeElement","focusShouldBeRestored","onOpen","onClose","onChangeMenuState","handleItemSelection","event","isDefaultPrevented","type","render","popupHasPin","disableAnimations","setRootNode","container","width","children","popupMargin","popupPinOffset","getPositions","isMobileLayout","menuWidth","menuMaxHeight","header","footer","positions","Component","__KONTUR_REACT_UI__","Type"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {\n isKeyArrowVertical,\n isKeyEnter,\n isKeyEscape,\n isKeySpace,\n someKeys,\n} from '../../lib/events/keyboard/identifiers';\nimport { InternalMenu } from '../InternalMenu';\nimport { Popup, PopupPositionsType } from '../Popup';\nimport { RenderLayer } from '../RenderLayer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { isValidPositions } from './validatePositions';\nimport { styles } from './PopupMenu.styles';\n\nexport interface PopupMenuCaptionProps {\n opened: boolean;\n openMenu: (firstItemShouldBeSelected?: boolean) => void;\n closeMenu: (restoreFocus?: boolean) => void;\n toggleMenu: () => void;\n}\n\nexport interface PopupMenuProps extends CommonProps {\n children?: React.ReactNode;\n /** Максимальная высота меню /\n menuMaxHeight?: number \| string;\n /* Ширина меню /\n menuWidth?: number \| string;\n /* Ширина контейнера и caption /\n width?: React.CSSProperties['width'];\n\n /\n Элемент или функция возвращающая элемент,\n * если передана, используется вместо ```caption```,\n * в таком случае управлять открытием и закрытием меню\n * придется в этой функции\n /\n caption: React.ReactNode \| ((props: PopupMenuCaptionProps) => React.ReactNode);\n\n header?: React.ReactNode;\n footer?: React.ReactNode;\n\n /* Массив разрешенных положений меню относительно caption'а. /\n positions?: PopupPositionsType[];\n /* Колбэк, вызываемый после открытия/закрытия меню /\n onChangeMenuState?: (isOpened: boolean, restoreFocus: boolean) => void;\n /* Пропсы, передающиеся в Popup /\n popupHasPin?: boolean;\n popupMargin?: number;\n popupPinOffset?: number;\n type?: 'dropdown' \| 'tooltip';\n disableAnimations?: boolean;\n /* Действие при открытии меню /\n onOpen?: () => void;\n /* Действие при закрытии меню */\n onClose?: () => void;\n}\n\ninterface PopupMenuState {\n menuVisible: boolean;\n firstItemShouldBeSelected?: boolean;\n}\n\nexport const PopupMenuType = {\n Dropdown: 'dropdown',\n Tooltip: 'tooltip',\n} as const;\n\nexport const PopupMenuDataTids = {\n root: 'PopupMenu__root',\n caption: 'PopupMenu__caption',\n} as const;\n\nconst Positions: PopupPositionsType[] = [\n 'top left',\n 'top center',\n 'top right',\n 'right top',\n 'right middle',\n 'right bottom',\n 'bottom left',\n 'bottom center',\n 'bottom right',\n 'left top',\n 'left middle',\n 'left bottom',\n];\n\ntype DefaultProps = Required<Pick<PopupMenuProps, 'positions' \| 'type' \| 'popupHasPin' \| 'disableAnimations'>>;\n\n@rootNode\n@responsiveLayout\nexport class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {\n public static __KONTUR_REACT_UI__ = 'PopupMenu';\n\n private isMobileLayout!: boolean;\n\n public static defaultProps: DefaultProps = {\n positions: Positions,\n type: PopupMenuType.Tooltip,\n popupHasPin: true,\n disableAnimations: false,\n };\n\n private getProps = createPropsGetter(PopupMenu.defaultProps);\n\n public static Type = PopupMenuType;\n\n public state = {\n menuVisible: false,\n firstItemShouldBeSelected: false,\n };\n\n private captionWrapper: HTMLSpanElement \| null = null;\n private savedFocusableElement: HTMLElement \| null = null;\n private menu: Nullable<InternalMenu> = null;\n private setRootNode!: TSetRootNode;\n\n public render() {\n const { popupHasPin, disableAnimations } = this.getProps();\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <RenderLayer\n onClickOutside={this.hideMenuWithoutFocusing}\n onFocusOutside={this.hideMenuWithoutFocusing}\n active={this.state.menuVisible}\n >\n <div data-tid={PopupMenuDataTids.root} className={styles.container()} style={{ width: this.props.width }}>\n {this.renderCaption()}\n {this.captionWrapper && this.props.children && (\n <Popup\n anchorElement={this.captionWrapper}\n opened={this.state.menuVisible}\n hasShadow\n margin={this.props.popupMargin}\n hasPin={popupHasPin}\n pinOffset={this.props.popupPinOffset}\n positions={this.getPositions()}\n disableAnimations={disableAnimations}\n onOpen={this.handleOpen}\n mobileOnCloseRequest={this.hideMenu}\n width={this.isMobileLayout ? 'auto' : this.props.menuWidth \|\| 'auto'}\n >\n <InternalMenu\n hasShadow={false}\n maxHeight={this.isMobileLayout ? 'none' : this.props.menuMaxHeight \|\| 'none'}\n onKeyDown={this.handleKeyDown}\n onItemClick={this.handleItemSelection}\n cyclicSelection={false}\n ref={this.refInternalMenu}\n initialSelectedItemIndex={this.state.firstItemShouldBeSelected ? 0 : -1}\n header={this.props.header}\n footer={this.props.footer}\n >\n {this.props.children}\n </InternalMenu>\n </Popup>\n )}\n </div>\n </RenderLayer>\n </CommonWrapper>\n );\n }\n\n public open = (): void => this.showMenu();\n public close = (): void => this.hideMenu();\n\n private refInternalMenu = (element: Nullable<InternalMenu>) => (this.menu = element);\n\n private handleOpen = () => {\n if (this.menu) {\n this.menu.focus();\n }\n };\n\n private renderCaption = () => {\n if (typeof this.props.caption === 'function') {\n const caption = this.props.caption({\n opened: this.state.menuVisible,\n openMenu: this.showMenu,\n closeMenu: this.hideMenu,\n toggleMenu: this.toggleMenu,\n });\n\n return (\n <span\n data-tid={PopupMenuDataTids.caption}\n className={styles.caption()}\n ref={(element) => (this.captionWrapper = element)}\n >\n {caption}\n </span>\n );\n }\n\n return (\n <span\n data-tid={PopupMenuDataTids.caption}\n onClick={this.handleCaptionClick}\n onKeyDown={this.handleCaptionKeyDown}\n ref={(element) => (this.captionWrapper = element)}\n className={styles.caption()}\n >\n {this.props.caption}\n </span>\n );\n };\n\n private hideMenuWithoutFocusing = () => this.hideMenu();\n\n private getPositions(): Readonly<PopupPositionsType[]> {\n const positions = this.getProps().positions;\n if (positions && isValidPositions(positions)) {\n return positions;\n }\n\n return Positions;\n }\n\n private showMenu = (firstItemShouldBeSelected?: boolean): void => {\n this.saveFocus();\n this.setState(\n {\n menuVisible: true,\n firstItemShouldBeSelected,\n },\n () => {\n this.handleChangeMenuVisible(false);\n },\n );\n };\n\n private hideMenu = (restoreFocus?: boolean): void => {\n this.setState(\n {\n menuVisible: false,\n firstItemShouldBeSelected: false,\n },\n () => {\n this.handleChangeMenuVisible(!!restoreFocus);\n },\n );\n };\n\n private toggleMenu = (): void => {\n this.state.menuVisible ? this.hideMenu() : this.showMenu();\n };\n\n private handleCaptionClick = (): void => {\n this.toggleMenu();\n };\n\n private handleCaptionKeyDown = (e: React.KeyboardEvent<HTMLElement>): void => {\n if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n e.preventDefault();\n this.showMenu(true);\n }\n };\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (isKeyEscape(e)) {\n const restoreFocus = true;\n this.hideMenu(restoreFocus);\n }\n };\n\n private saveFocus = (): void => {\n if (document) {\n this.savedFocusableElement = document.activeElement as HTMLElement;\n }\n };\n\n private restoreFocus = (): void => {\n if (this.savedFocusableElement) {\n this.savedFocusableElement.focus();\n this.savedFocusableElement = null;\n }\n };\n\n private handleChangeMenuVisible = (focusShouldBeRestored: boolean): void => {\n if (focusShouldBeRestored) {\n this.restoreFocus();\n }\n\n if (this.state.menuVisible && this.props.onOpen) {\n this.props.onOpen();\n }\n\n if (!this.state.menuVisible && this.props.onClose) {\n this.props.onClose();\n }\n\n if (typeof this.props.onChangeMenuState === 'function') {\n this.props.onChangeMenuState(this.state.menuVisible, focusShouldBeRestored);\n }\n };\n\n private handleItemSelection = (event: React.SyntheticEvent<HTMLElement>): void => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n if (event.type === 'keydown') {\n event.preventDefault();\n }\n\n const restoreFocus = event.type === 'keydown';\n this.hideMenu(restoreFocus);\n };\n}\n"]}
1	+ {"version":3,"sources":["PopupMenu.tsx"],"names":["React","getRandomID","isKeyArrowVertical","isKeyEnter","isKeyEscape","isKeySpace","someKeys","ThemeContext","ThemeFactory","Popup","PopupIds","RenderLayer","CommonWrapper","responsiveLayout","rootNode","createPropsGetter","Menu","isValidPositions","styles","PopupMenuType","Dropdown","Tooltip","PopupMenuDataTids","root","caption","Positions","PopupMenu","rootId","getProps","defaultProps","state","menuVisible","firstItemShouldBeSelected","captionWrapper","savedFocusableElement","menu","open","showMenu","close","hideMenu","refInternalMenu","element","handleOpen","focus","passPropsToCaption","cloneElement","props","popupMenuId","renderCaption","opened","openMenu","closeMenu","toggleMenu","handleCaptionClick","handleCaptionKeyDown","hideMenuWithoutFocusing","saveFocus","setState","handleChangeMenuVisible","restoreFocus","e","preventDefault","handleKeyDown","document","activeElement","focusShouldBeRestored","onOpen","onClose","onChangeMenuState","handleItemSelection","event","isDefaultPrevented","type","render","theme","create","menuOffsetY","popupMenuMenuOffsetY","renderMain","popupHasPin","disableAnimations","setRootNode","container","width","children","popupMargin","popupPinOffset","getPositions","isMobileLayout","menuWidth","menuMaxHeight","preventIconsOffset","header","footer","positions","Component","__KONTUR_REACT_UI__","Type"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { getRandomID } from '../../lib/utils';\nimport { HTMLProps } from '../../typings/html';\nimport {\n isKeyArrowVertical,\n isKeyEnter,\n isKeyEscape,\n isKeySpace,\n someKeys,\n} from '../../lib/events/keyboard/identifiers';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Popup, PopupIds, PopupPositionsType } from '../Popup';\nimport { RenderLayer } from '../RenderLayer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Menu, MenuProps } from '../Menu';\n\nimport { isValidPositions } from './validatePositions';\nimport { styles } from './PopupMenu.styles';\n\nexport interface PopupMenuCaptionProps {\n opened: boolean;\n openMenu: (firstItemShouldBeSelected?: boolean) => void;\n closeMenu: (restoreFocus?: boolean) => void;\n toggleMenu: () => void;\n}\n\nexport interface PopupMenuProps\n extends CommonProps,\n Pick<MenuProps, 'preventIconsOffset'>,\n Pick<AriaAttributes, 'aria-label'> {\n children?: React.ReactNode;\n /** Максимальная высота меню /\n menuMaxHeight?: number \| string;\n /* Ширина меню /\n menuWidth?: number \| string;\n /* Ширина контейнера и caption /\n width?: React.CSSProperties['width'];\n\n /\n Элемент или функция возвращающая элемент,\n * если передана, используется вместо ```caption```,\n * в таком случае управлять открытием и закрытием меню\n * придется в этой функции\n /\n caption: React.ReactNode \| ((props: PopupMenuCaptionProps) => React.ReactNode);\n\n header?: React.ReactNode;\n footer?: React.ReactNode;\n\n /* Массив разрешенных положений меню относительно caption'а. /\n positions?: PopupPositionsType[];\n /* Колбэк, вызываемый после открытия/закрытия меню /\n onChangeMenuState?: (isOpened: boolean, restoreFocus: boolean) => void;\n /* Пропсы, передающиеся в Popup /\n popupHasPin?: boolean;\n popupMargin?: number;\n popupPinOffset?: number;\n type?: 'dropdown' \| 'tooltip';\n disableAnimations?: boolean;\n /* Действие при открытии меню /\n onOpen?: () => void;\n /* Действие при закрытии меню /\n onClose?: () => void;\n /\n Позволяет задать `id` выпадающему меню.\n \n Это может пригодиться при реализации a11y. Например, для того, чтобы связать `aria-controls` с выпадающим меню.\n */\n popupMenuId?: HTMLProps['id'];\n}\n\ninterface PopupMenuState {\n menuVisible: boolean;\n firstItemShouldBeSelected?: boolean;\n}\n\nexport const PopupMenuType = {\n Dropdown: 'dropdown',\n Tooltip: 'tooltip',\n} as const;\n\nexport const PopupMenuDataTids = {\n root: 'PopupMenu__root',\n caption: 'PopupMenu__caption',\n} as const;\n\nconst Positions: PopupPositionsType[] = [\n 'top left',\n 'top center',\n 'top right',\n 'right top',\n 'right middle',\n 'right bottom',\n 'bottom left',\n 'bottom center',\n 'bottom right',\n 'left top',\n 'left middle',\n 'left bottom',\n];\n\ntype DefaultProps = Required<Pick<PopupMenuProps, 'positions' \| 'type' \| 'popupHasPin' \| 'disableAnimations'>>;\n\n@rootNode\n@responsiveLayout\nexport class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {\n public static __KONTUR_REACT_UI__ = 'PopupMenu';\n\n private isMobileLayout!: boolean;\n private rootId = PopupIds.root + getRandomID();\n\n public static defaultProps: DefaultProps = {\n positions: Positions,\n type: PopupMenuType.Tooltip,\n popupHasPin: true,\n disableAnimations: false,\n };\n\n private getProps = createPropsGetter(PopupMenu.defaultProps);\n\n public static Type = PopupMenuType;\n\n public state = {\n menuVisible: false,\n firstItemShouldBeSelected: false,\n };\n\n private captionWrapper: HTMLSpanElement \| null = null;\n private savedFocusableElement: HTMLElement \| null = null;\n private menu: Nullable<Menu> = null;\n private setRootNode!: TSetRootNode;\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n menuOffsetY: theme.popupMenuMenuOffsetY,\n },\n theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { popupHasPin, disableAnimations } = this.getProps();\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <RenderLayer\n onClickOutside={this.hideMenuWithoutFocusing}\n onFocusOutside={this.hideMenuWithoutFocusing}\n active={this.state.menuVisible}\n >\n <div data-tid={PopupMenuDataTids.root} className={styles.container()} style={{ width: this.props.width }}>\n {this.renderCaption()}\n {this.captionWrapper && this.props.children && (\n <Popup\n id={this.props.popupMenuId ?? this.rootId}\n anchorElement={this.captionWrapper}\n opened={this.state.menuVisible}\n hasShadow\n margin={this.props.popupMargin}\n hasPin={popupHasPin}\n pinOffset={this.props.popupPinOffset}\n positions={this.getPositions()}\n disableAnimations={disableAnimations}\n onOpen={this.handleOpen}\n mobileOnCloseRequest={this.hideMenu}\n width={this.isMobileLayout ? 'auto' : this.props.menuWidth \|\| 'auto'}\n >\n <Menu\n hasShadow={false}\n maxHeight={this.isMobileLayout ? 'none' : this.props.menuMaxHeight \|\| 'none'}\n onKeyDown={this.handleKeyDown}\n onItemClick={this.handleItemSelection}\n preventIconsOffset={this.props.preventIconsOffset}\n cyclicSelection={false}\n ref={this.refInternalMenu}\n initialSelectedItemIndex={this.state.firstItemShouldBeSelected ? 0 : -1}\n header={this.props.header}\n footer={this.props.footer}\n >\n {this.props.children}\n </Menu>\n </Popup>\n )}\n </div>\n </RenderLayer>\n </CommonWrapper>\n );\n }\n\n public open = (): void => this.showMenu();\n public close = (): void => this.hideMenu();\n\n private refInternalMenu = (element: Nullable<Menu>) => (this.menu = element);\n\n private handleOpen = () => {\n if (this.menu) {\n this.menu.focus();\n }\n };\n\n private passPropsToCaption = (caption: React.ReactNode) => {\n if (typeof caption === 'string' \|\| typeof caption === 'number') {\n return caption;\n }\n\n return React.cloneElement(caption as React.ReactElement, {\n 'aria-controls': this.props.popupMenuId ?? this.rootId,\n 'aria-expanded': this.state.menuVisible ? 'true' : 'false',\n 'aria-label': this.props['aria-label'],\n });\n };\n\n private renderCaption = () => {\n if (typeof this.props.caption === 'function') {\n const caption = this.props.caption({\n opened: this.state.menuVisible,\n openMenu: this.showMenu,\n closeMenu: this.hideMenu,\n toggleMenu: this.toggleMenu,\n });\n\n return (\n <span\n data-tid={PopupMenuDataTids.caption}\n className={styles.caption()}\n ref={(element) => (this.captionWrapper = element)}\n >\n {this.passPropsToCaption(caption)}\n </span>\n );\n }\n\n return (\n <span\n data-tid={PopupMenuDataTids.caption}\n onClick={this.handleCaptionClick}\n onKeyDown={this.handleCaptionKeyDown}\n ref={(element) => (this.captionWrapper = element)}\n className={styles.caption()}\n >\n {this.passPropsToCaption(this.props.caption)}\n </span>\n );\n };\n\n private hideMenuWithoutFocusing = () => this.hideMenu();\n\n private getPositions(): Readonly<PopupPositionsType[]> {\n const positions = this.getProps().positions;\n if (positions && isValidPositions(positions)) {\n return positions;\n }\n\n return Positions;\n }\n\n private showMenu = (firstItemShouldBeSelected?: boolean): void => {\n this.saveFocus();\n this.setState(\n {\n menuVisible: true,\n firstItemShouldBeSelected,\n },\n () => {\n this.handleChangeMenuVisible(false);\n },\n );\n };\n\n private hideMenu = (restoreFocus?: boolean): void => {\n this.setState(\n {\n menuVisible: false,\n firstItemShouldBeSelected: false,\n },\n () => {\n this.handleChangeMenuVisible(!!restoreFocus);\n },\n );\n };\n\n private toggleMenu = (): void => {\n this.state.menuVisible ? this.hideMenu() : this.showMenu();\n };\n\n private handleCaptionClick = (): void => {\n this.toggleMenu();\n };\n\n private handleCaptionKeyDown = (e: React.KeyboardEvent<HTMLElement>): void => {\n if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n e.preventDefault();\n this.showMenu(true);\n }\n };\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (isKeyEscape(e)) {\n const restoreFocus = true;\n this.hideMenu(restoreFocus);\n }\n };\n\n private saveFocus = (): void => {\n if (document) {\n this.savedFocusableElement = document.activeElement as HTMLElement;\n }\n };\n\n private restoreFocus = (): void => {\n if (this.savedFocusableElement) {\n this.savedFocusableElement.focus();\n this.savedFocusableElement = null;\n }\n };\n\n private handleChangeMenuVisible = (focusShouldBeRestored: boolean): void => {\n if (focusShouldBeRestored) {\n this.restoreFocus();\n }\n\n if (this.state.menuVisible && this.props.onOpen) {\n this.props.onOpen();\n }\n\n if (!this.state.menuVisible && this.props.onClose) {\n this.props.onClose();\n }\n\n if (typeof this.props.onChangeMenuState === 'function') {\n this.props.onChangeMenuState(this.state.menuVisible, focusShouldBeRestored);\n }\n };\n\n private handleItemSelection = (event: React.SyntheticEvent<HTMLElement>): void => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n if (event.type === 'keydown') {\n event.preventDefault();\n }\n\n const restoreFocus = event.type === 'keydown';\n this.hideMenu(restoreFocus);\n };\n}\n"]}

package/internal/PopupMenu/PopupMenu.d.ts CHANGED Viewed

@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
+import { HTMLProps } from '../../typings/html';
 import { PopupPositionsType } from '../Popup';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { MenuProps } from '../Menu';
 export interface PopupMenuCaptionProps {
     opened: boolean;
     openMenu: (firstItemShouldBeSelected?: boolean) => void;
     closeMenu: (restoreFocus?: boolean) => void;
     toggleMenu: () => void;
 }
-export interface PopupMenuProps extends CommonProps {
+export interface PopupMenuProps extends CommonProps, Pick<MenuProps, 'preventIconsOffset'>, Pick<AriaAttributes, 'aria-label'> {
     children?: React.ReactNode;
     /** Максимальная высота меню */
     menuMaxHeight?: number | string;
@@ -38,6 +40,12 @@ export interface PopupMenuProps extends CommonProps {
     onOpen?: () => void;
     /** Действие при закрытии меню */
     onClose?: () => void;
+    /**
+     * Позволяет задать `id` выпадающему меню.
+     *
+     * Это может пригодиться при реализации a11y. Например, для того, чтобы связать `aria-controls` с выпадающим меню.
+     */
+    popupMenuId?: HTMLProps['id'];
 }
 interface PopupMenuState {
     menuVisible: boolean;
@@ -55,6 +63,7 @@ declare type DefaultProps = Required<Pick<PopupMenuProps, 'positions' | 'type' |
 export declare class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {
     static __KONTUR_REACT_UI__: string;
     private isMobileLayout;
+    private rootId;
     static defaultProps: DefaultProps;
     private getProps;
     static Type: {
@@ -70,10 +79,12 @@ export declare class PopupMenu extends React.Component<PopupMenuProps, PopupMenu
     private menu;
     private setRootNode;
     render(): JSX.Element;
+    private renderMain;
     open: () => void;
     close: () => void;
     private refInternalMenu;
     private handleOpen;
+    private passPropsToCaption;
     private renderCaption;
     private hideMenuWithoutFocusing;
     private getPositions;

package/internal/RenderLayer/RenderLayer/RenderLayer.js CHANGED Viewed

@@ -93,7 +93,7 @@ export var RenderLayer = rootNode(_class = (_temp = _class2 = /*#__PURE__*/funct
       return [node];
     }, this.handleFocusOutside);
     window.addEventListener('blur', this.handleFocusOutside);
-    document.addEventListener('ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown', this.handleNativeDocClick);
+    document.addEventListener('ontouchstart' in document.documentElement && 'onpointerup' in document.documentElement ? 'pointerup' : 'mousedown', this.handleNativeDocClick);
   };
   _proto.detachListeners = function detachListeners() {
@@ -103,7 +103,7 @@ export var RenderLayer = rootNode(_class = (_temp = _class2 = /*#__PURE__*/funct
     }
     window.removeEventListener('blur', this.handleFocusOutside);
-    document.removeEventListener('ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown', this.handleNativeDocClick);
+    document.removeEventListener('ontouchstart' in document.documentElement && 'onpointerup' in document.documentElement ? 'pointerup' : 'mousedown', this.handleNativeDocClick);
   };
   return RenderLayer;

package/internal/RenderLayer/RenderLayer/RenderLayer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["RenderLayer.tsx"],"names":["React","listen","listenFocusOutside","containsTargetOrRenderContainer","CommonWrapper","getRootNode","rootNode","createPropsGetter","RenderLayer","getProps","defaultProps","focusOutsideListenerToken","handleFocusOutside","event","props","onFocusOutside","handleNativeDocClick","target","srcElement","node","getAnchorNode","Element","onClickOutside","componentDidMount","active","attachListeners","componentDidUpdate","prevProps","detachListeners","componentWillUnmount","render","setRootNode","Children","only","children","getAnchorElement","window","addEventListener","document","documentElement","remove","removeEventListener","Component","__KONTUR_REACT_UI__","propTypes","propName","componentName","Error"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAM,IAAIC,kBAAnB,EAAuCC,+BAAvC,QAA8E,8BAA9E;AACA,SAAsBC,aAAtB,QAA2C,kBAA3C;AACA,SAASC,WAAT,EAAsBC,QAAtB,QAAoD,oBAApD;;AAEA,SAASC,iBAAT,QAAkC,6BAAlC;;;;;;;;;;;;;AAaA,WAAaC,WAAb,GADCF,QACD;;;;;;;;;;;;;;;;;;AAkBUG,IAAAA,QAlBV,GAkBqBF,iBAAiB,CAACC,WAAW,CAACE,YAAb,CAlBtC;;AAoBUC,IAAAA,yBApBV;;AAsBa,QAtBb~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFUC~~,IAAAA,~~kBAvFV~~,~~GAuF~~+B,UAACC,KAAD,EAAkB;AAC7C,UAAI,MAAKC,KAAL,CAAWC,cAAf,EAA+B;AAC7B,cAAKD,KAAL,CAAWC,cAAX,CAA0BF,KAA1B;AACD;AACF,~~KA3FH~~;;~~AA6FUG~~,IAAAA,~~oBA7FV~~,~~GA6FiC~~,UAACH,KAAD,EAAkB;AAC/C,UAAMI,MAAM,GAAGJ,KAAK,CAACI,MAAN,IAAgBJ,KAAK,CAACK,UAArC;AACA,UAAMC,IAAI,GAAG,MAAKC,aAAL,EAAb;;AAEA,UAAI,CAACD,IAAD,IAAUF,MAAM,YAAYI,OAAlB,IAA6BlB,+BAA+B,CAACc,MAAD,CAA/B,CAAwCE,IAAxC,CAA3C,EAA2F;AACzF;AACD;;AAED,UAAI,MAAKL,KAAL,CAAWQ,cAAf,EAA+B;AAC7B,cAAKR,KAAL,CAAWQ,cAAX,CAA0BT,KAA1B;AACD;AACF,~~KAxGH~~,yDAyBSU,iBAzBT,GAyBE,6BAA2B,CACzB,IAAI,KAAKd,QAAL,GAAgBe,MAApB,EAA4B,CAC1B,KAAKC,eAAL,GACD,CACF,CA7BH,QA+BSC,kBA/BT,GA+BE,4BAA0BC,SAA1B,EAAuD,CACrD,IAAMH,MAAM,GAAG,KAAKf,QAAL,GAAgBe,MAA/B,CACA,IAAI,CAACG,SAAS,CAACH,MAAX,IAAqBA,MAAzB,EAAiC,CAC/B,KAAKC,eAAL,GACD,CACD,IAAIE,SAAS,CAACH,MAAV,IAAoB,CAACA,MAAzB,EAAiC,CAC/B,KAAKI,eAAL,GACD,CACF,CAvCH,QAyCSC,oBAzCT,GAyCE,gCAA8B,CAC5B,IAAI,KAAKpB,QAAL,GAAgBe,MAApB,EAA4B,CAC1B,KAAKI,eAAL,GACD,CACF,CA7CH,QA+CSE,MA/CT,GA+CE,kBAAgB,CACd,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,KAAKC,WAAjC,IAAkD,KAAKjB,KAAvD,GACGd,KAAK,CAACgC,QAAN,CAAeC,IAAf,CAAoB,KAAKnB,KAAL,CAAWoB,QAA/B,CADH,CADF,CAKD,CArDH,QAuDUd,aAvDV,GAuDE,yBAA2C,CACzC,IAAQe,gBAAR,GAA6B,KAAKrB,KAAlC,CAAQqB,gBAAR,CACA,OAAOA,gBAAgB,GAAGA,gBAAgB,EAAnB,GAAwB9B,WAAW,CAAC,IAAD,CAA1D,CACD,CA1DH,QA4DUoB,eA5DV,GA4DE,2BAA0B,CACxB,IAAMN,IAAI,GAAG,KAAKC,aAAL,EAAb,CACA,IAAI,CAACD,IAAL,EAAW,CACT,OACD,CAED,KAAKR,yBAAL,GAAiCT,kBAAkB,CAAC,oBAAM,CAACiB,IAAD,CAAN,EAAD,EAAe,KAAKP,kBAApB,CAAnD,CACAwB,MAAM,CAACC,gBAAP,CAAwB,MAAxB,EAAgC,KAAKzB,kBAArC,EACA0B,QAAQ,CAACD,gBAAT,CACE,kBAAkBC,QAAQ,CAACC,eAA3B,~~GAA6C~~,~~YAA7C~~,~~GAA4D~~,~~WAD9D~~,~~EAEE~~,KAAKvB,~~oBAFP~~,~~EAID~~,~~CAxEH~~,~~QA0EUY~~,~~eA1EV~~,~~GA0EE~~,2BAA0B,CACxB,IAAI,KAAKjB,yBAAT,EAAoC,CAClC,KAAKA,yBAAL,CAA+B6B,MAA/B,GACA,KAAK7B,yBAAL,GAAiC,IAAjC,CACD,CAEDyB,MAAM,CAACK,mBAAP,CAA2B,MAA3B,EAAmC,KAAK7B,kBAAxC,EACA0B,QAAQ,CAACG,mBAAT,CACE,kBAAkBH,QAAQ,CAACC,eAA3B,~~GAA6C~~,~~YAA7C~~,~~GAA4D~~,~~WAD9D~~,~~EAEE~~,KAAKvB,~~oBAFP~~,~~EAID~~,~~CArFH~~,sBAAiChB,KAAK,CAAC0C,SAAvC,WACgBC,mBADhB,GACsC,aADtC,UAGgBC,SAHhB,GAG4B,EACxBpB,MADwB,kBACjBV,KADiB,EACQ+B,QADR,EAC0CC,aAD1C,EACiE,CACvF,IAAQtB,MAAR,GAAmDV,KAAnD,CAAQU,MAAR,CAAgBF,cAAhB,GAAmDR,KAAnD,CAAgBQ,cAAhB,CAAgCP,cAAhC,GAAmDD,KAAnD,CAAgCC,cAAhC,CACA,IAAIS,MAAM,IAAI,EAAEF,cAAc,IAAIP,cAApB,CAAd,EAAmD,CACjD,OAAO,IAAIgC,KAAJ,OACDD,aADC,uGAAP,CAGD,CACF,CARuB,EAH5B,UAcgBpC,YAdhB,GAc6C,EACzCc,MAAM,EAAE,IADiC,EAd7C","sourcesContent":["import React from 'react';\n\nimport { listen as listenFocusOutside, containsTargetOrRenderContainer } from '../../lib/listenFocusOutside';\nimport { CommonProps, CommonWrapper } from '../CommonWrapper';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { Nullable } from '../../typings/utility-types';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport interface RenderLayerProps extends CommonProps {\n children: JSX.Element;\n onClickOutside?: (e: Event) => void;\n onFocusOutside?: (e: Event) => void;\n active?: boolean;\n getAnchorElement?: () => Nullable<Element>;\n}\n\ntype DefaultProps = Required<Pick<RenderLayerProps, 'active'>>;\n\n@rootNode\nexport class RenderLayer extends React.Component<RenderLayerProps> {\n public static __KONTUR_REACT_UI__ = 'RenderLayer';\n\n public static propTypes = {\n active(props: RenderLayerProps, propName: keyof RenderLayerProps, componentName: string) {\n const { active, onClickOutside, onFocusOutside } = props;\n if (active && !(onClickOutside \|\| onFocusOutside)) {\n return new Error(\n `[${componentName}]: using the component without either 'onClickOutside' or 'onFocusOutside' callback is pointless.`,\n );\n }\n },\n };\n\n public static defaultProps: DefaultProps = {\n active: true,\n };\n\n private getProps = createPropsGetter(RenderLayer.defaultProps);\n\n private focusOutsideListenerToken: {\n remove: () => void;\n } \| null = null;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n if (this.getProps().active) {\n this.attachListeners();\n }\n }\n\n public componentDidUpdate(prevProps: RenderLayerProps) {\n const active = this.getProps().active;\n if (!prevProps.active && active) {\n this.attachListeners();\n }\n if (prevProps.active && !active) {\n this.detachListeners();\n }\n }\n\n public componentWillUnmount() {\n if (this.getProps().active) {\n this.detachListeners();\n }\n }\n\n public render() {\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n {React.Children.only(this.props.children)}\n </CommonWrapper>\n );\n }\n\n private getAnchorNode(): Nullable<Element> {\n const { getAnchorElement } = this.props;\n return getAnchorElement ? getAnchorElement() : getRootNode(this);\n }\n\n private attachListeners() {\n const node = this.getAnchorNode();\n if (!node) {\n return;\n }\n\n this.focusOutsideListenerToken = listenFocusOutside(() => [node], this.handleFocusOutside);\n window.addEventListener('blur', this.handleFocusOutside);\n document.addEventListener(\n 'ontouchstart' in document.documentElement ? '~~touchstart~~' : 'mousedown',\n this.handleNativeDocClick,\n );\n }\n\n private detachListeners() {\n if (this.focusOutsideListenerToken) {\n this.focusOutsideListenerToken.remove();\n this.focusOutsideListenerToken = null;\n }\n\n window.removeEventListener('blur', this.handleFocusOutside);\n document.removeEventListener(\n 'ontouchstart' in document.documentElement ? '~~touchstart~~' : 'mousedown',\n this.handleNativeDocClick,\n );\n }\n\n private handleFocusOutside = (event: Event) => {\n if (this.props.onFocusOutside) {\n this.props.onFocusOutside(event);\n }\n };\n\n private handleNativeDocClick = (event: Event) => {\n const target = event.target \|\| event.srcElement;\n const node = this.getAnchorNode();\n\n if (!node \|\| (target instanceof Element && containsTargetOrRenderContainer(target)(node))) {\n return;\n }\n\n if (this.props.onClickOutside) {\n this.props.onClickOutside(event);\n }\n };\n}\n"]}
1	+ {"version":3,"sources":["RenderLayer.tsx"],"names":["React","listen","listenFocusOutside","containsTargetOrRenderContainer","CommonWrapper","getRootNode","rootNode","createPropsGetter","RenderLayer","getProps","defaultProps","focusOutsideListenerToken","handleFocusOutside","event","props","onFocusOutside","handleNativeDocClick","target","srcElement","node","getAnchorNode","Element","onClickOutside","componentDidMount","active","attachListeners","componentDidUpdate","prevProps","detachListeners","componentWillUnmount","render","setRootNode","Children","only","children","getAnchorElement","window","addEventListener","document","documentElement","remove","removeEventListener","Component","__KONTUR_REACT_UI__","propTypes","propName","componentName","Error"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { listen as listenFocusOutside, containsTargetOrRenderContainer } from '../../lib/listenFocusOutside';\nimport { CommonProps, CommonWrapper } from '../CommonWrapper';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { Nullable } from '../../typings/utility-types';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport interface RenderLayerProps extends CommonProps {\n children: JSX.Element;\n onClickOutside?: (e: Event) => void;\n onFocusOutside?: (e: Event) => void;\n active?: boolean;\n getAnchorElement?: () => Nullable<Element>;\n}\n\ntype DefaultProps = Required<Pick<RenderLayerProps, 'active'>>;\n\n@rootNode\nexport class RenderLayer extends React.Component<RenderLayerProps> {\n public static __KONTUR_REACT_UI__ = 'RenderLayer';\n\n public static propTypes = {\n active(props: RenderLayerProps, propName: keyof RenderLayerProps, componentName: string) {\n const { active, onClickOutside, onFocusOutside } = props;\n if (active && !(onClickOutside \|\| onFocusOutside)) {\n return new Error(\n `[${componentName}]: using the component without either 'onClickOutside' or 'onFocusOutside' callback is pointless.`,\n );\n }\n },\n };\n\n public static defaultProps: DefaultProps = {\n active: true,\n };\n\n private getProps = createPropsGetter(RenderLayer.defaultProps);\n\n private focusOutsideListenerToken: {\n remove: () => void;\n } \| null = null;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n if (this.getProps().active) {\n this.attachListeners();\n }\n }\n\n public componentDidUpdate(prevProps: RenderLayerProps) {\n const active = this.getProps().active;\n if (!prevProps.active && active) {\n this.attachListeners();\n }\n if (prevProps.active && !active) {\n this.detachListeners();\n }\n }\n\n public componentWillUnmount() {\n if (this.getProps().active) {\n this.detachListeners();\n }\n }\n\n public render() {\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n {React.Children.only(this.props.children)}\n </CommonWrapper>\n );\n }\n\n private getAnchorNode(): Nullable<Element> {\n const { getAnchorElement } = this.props;\n return getAnchorElement ? getAnchorElement() : getRootNode(this);\n }\n\n private attachListeners() {\n const node = this.getAnchorNode();\n if (!node) {\n return;\n }\n\n this.focusOutsideListenerToken = listenFocusOutside(() => [node], this.handleFocusOutside);\n window.addEventListener('blur', this.handleFocusOutside);\n document.addEventListener(\n 'ontouchstart' in document.documentElement && 'onpointerup' in document.documentElement\n ? 'pointerup'\n : 'mousedown',\n this.handleNativeDocClick,\n );\n }\n\n private detachListeners() {\n if (this.focusOutsideListenerToken) {\n this.focusOutsideListenerToken.remove();\n this.focusOutsideListenerToken = null;\n }\n\n window.removeEventListener('blur', this.handleFocusOutside);\n document.removeEventListener(\n 'ontouchstart' in document.documentElement && 'onpointerup' in document.documentElement\n ? 'pointerup'\n : 'mousedown',\n this.handleNativeDocClick,\n );\n }\n\n private handleFocusOutside = (event: Event) => {\n if (this.props.onFocusOutside) {\n this.props.onFocusOutside(event);\n }\n };\n\n private handleNativeDocClick = (event: Event) => {\n const target = event.target \|\| event.srcElement;\n const node = this.getAnchorNode();\n\n if (!node \|\| (target instanceof Element && containsTargetOrRenderContainer(target)(node))) {\n return;\n }\n\n if (this.props.onClickOutside) {\n this.props.onClickOutside(event);\n }\n };\n}\n"]}

package/internal/ThemePlayground/AnotherInputsPlayground/AnotherInputsPlayground.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["AnotherInputsPlayground.tsx"],"names":["React","Tooltip","DatePicker","DatePickerPlayground","state","value","error","tooltip","handleChange","setState","invalidate","validate","currentValue","removeTooltip","render","props","disabled","size","Component"],"mappings":"gIAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,OAAT,QAAwB,0BAAxB;AACA,SAASC,UAAT,QAA4C,6BAA5C;;;;;;;;AAQA,WAAaC,oBAAb;AACSC,IAAAA,KADT,GAC4C;AACxCC,MAAAA,KAAK,EAAE,YADiC;AAExCC,MAAAA,KAAK,EAAE,KAFiC;AAGxCC,MAAAA,OAAO,EAAE,KAH+B,EAD5C;;;;;;;;;;;;;;;;;;;;;;;;;AA6BUC,IAAAA,YA7BV,GA6ByB,UAACH,KAAD,EAAmB;AACxC,YAAKI,QAAL,CAAc;AACZJ,QAAAA,KAAK,EAALA,KADY,EAAd;;AAGD,KAjCH;;AAmCUK,IAAAA,UAnCV,GAmCuB,YAAM;AACzB,YAAKD,QAAL,CAAc,EAAEH,KAAK,EAAE,KAAT,EAAgBC,OAAO,EAAE,KAAzB,EAAd;AACD,KArCH;;AAuCUI,IAAAA,QAvCV,GAuCqB,YAAM;AACvB,UAAMC,YAAY,GAAG,MAAKR,KAAL,CAAWC,KAAhC;AACA,YAAKI,QAAL,CAAc,YAAM;AAClB,YAAMH,KAAK,GAAG,CAAC,CAACM,YAAF,IAAkB,CAACV,UAAU,CAACS,QAAX,CAAoBC,YAApB,CAAjC;AACA,eAAO;AACLN,UAAAA,KAAK,EAALA,KADK;AAELC,UAAAA,OAAO,EAAED,KAFJ,EAAP;;AAID,OAND;AAOD,KAhDH;;AAkDUO,IAAAA,aAlDV,GAkD0B,YAAM;AAC5B,YAAKJ,QAAL,CAAc;AACZF,QAAAA,OAAO,EAAE,KADG,EAAd;;AAGD,KAtDH,kEAOSO,MAPT,GAOE,kBAAgB,CACd,oBACE,oBAAC,OAAD,IACE,OAAO,EAAE,KAAKV,KAAL,CAAWG,OAAX,GAAqB,QAArB,GAAgC,QAD3C,EAEE,MAAM,EAAE,0BAAM,0BAAN,EAFV,EAGE,YAAY,EAAE,KAAKM,aAHrB,iBAKE,oBAAC,UAAD,eACM,KAAKE,KADX,IAEE,QAAQ,EAAE,KAAKA,KAAL,CAAWC,QAFvB,EAGE,IAAI,EAAE,KAAKD,KAAL,CAAWE,IAHnB,EAIE,KAAK,EAAE,KAAKb,KAAL,CAAWE,KAJpB,EAKE,KAAK,EAAE,KAAKF,KAAL,CAAWC,KALpB,EAME,aAAa,EAAE,KAAKG,YANtB,EAOE,OAAO,EAAE,KAAKE,UAPhB,EAQE,MAAM,EAAE,KAAKC,QARf,EASE,eAAe,MATjB,IALF,CADF,CAmBD,CA3BH,+BAA0CX,KAAK,CAACkB,SAAhD","sourcesContent":["import React from 'react';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { Tooltip } from '../../components/Tooltip';\nimport { DatePicker, DatePickerProps } from '../../components/DatePicker';\n\ninterface DatePickerPlaygroundState {\n value: Nullable<string>;\n error: boolean;\n tooltip: boolean;\n}\ntype DatePickerPlaygroundProps = Partial<DatePickerProps~~<string>>;\~~nexport class DatePickerPlayground extends React.Component<DatePickerPlaygroundProps> {\n public state: DatePickerPlaygroundState = {\n value: '17.06.2019',\n error: false,\n tooltip: false,\n };\n\n public render() {\n return (\n <Tooltip\n trigger={this.state.tooltip ? 'opened' : 'closed'}\n render={() => 'Такой даты не существует'}\n onCloseClick={this.removeTooltip}\n >\n <DatePicker\n {...this.props}\n disabled={this.props.disabled}\n size={this.props.size}\n error={this.state.error}\n value={this.state.value}\n onValueChange={this.handleChange}\n onFocus={this.invalidate}\n onBlur={this.validate}\n enableTodayLink\n />\n </Tooltip>\n );\n }\n\n private handleChange = (value: string) => {\n this.setState({\n value,\n });\n };\n\n private invalidate = () => {\n this.setState({ error: false, tooltip: false });\n };\n\n private validate = () => {\n const currentValue = this.state.value;\n this.setState(() => {\n const error = !!currentValue && !DatePicker.validate(currentValue);\n return {\n error,\n tooltip: error,\n };\n });\n };\n\n private removeTooltip = () => {\n this.setState({\n tooltip: false,\n });\n };\n}\n"]}
1	+ {"version":3,"sources":["AnotherInputsPlayground.tsx"],"names":["React","Tooltip","DatePicker","DatePickerPlayground","state","value","error","tooltip","handleChange","setState","invalidate","validate","currentValue","removeTooltip","render","props","disabled","size","Component"],"mappings":"gIAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,OAAT,QAAwB,0BAAxB;AACA,SAASC,UAAT,QAA4C,6BAA5C;;;;;;;;AAQA,WAAaC,oBAAb;AACSC,IAAAA,KADT,GAC4C;AACxCC,MAAAA,KAAK,EAAE,YADiC;AAExCC,MAAAA,KAAK,EAAE,KAFiC;AAGxCC,MAAAA,OAAO,EAAE,KAH+B,EAD5C;;;;;;;;;;;;;;;;;;;;;;;;;AA6BUC,IAAAA,YA7BV,GA6ByB,UAACH,KAAD,EAAmB;AACxC,YAAKI,QAAL,CAAc;AACZJ,QAAAA,KAAK,EAALA,KADY,EAAd;;AAGD,KAjCH;;AAmCUK,IAAAA,UAnCV,GAmCuB,YAAM;AACzB,YAAKD,QAAL,CAAc,EAAEH,KAAK,EAAE,KAAT,EAAgBC,OAAO,EAAE,KAAzB,EAAd;AACD,KArCH;;AAuCUI,IAAAA,QAvCV,GAuCqB,YAAM;AACvB,UAAMC,YAAY,GAAG,MAAKR,KAAL,CAAWC,KAAhC;AACA,YAAKI,QAAL,CAAc,YAAM;AAClB,YAAMH,KAAK,GAAG,CAAC,CAACM,YAAF,IAAkB,CAACV,UAAU,CAACS,QAAX,CAAoBC,YAApB,CAAjC;AACA,eAAO;AACLN,UAAAA,KAAK,EAALA,KADK;AAELC,UAAAA,OAAO,EAAED,KAFJ,EAAP;;AAID,OAND;AAOD,KAhDH;;AAkDUO,IAAAA,aAlDV,GAkD0B,YAAM;AAC5B,YAAKJ,QAAL,CAAc;AACZF,QAAAA,OAAO,EAAE,KADG,EAAd;;AAGD,KAtDH,kEAOSO,MAPT,GAOE,kBAAgB,CACd,oBACE,oBAAC,OAAD,IACE,OAAO,EAAE,KAAKV,KAAL,CAAWG,OAAX,GAAqB,QAArB,GAAgC,QAD3C,EAEE,MAAM,EAAE,0BAAM,0BAAN,EAFV,EAGE,YAAY,EAAE,KAAKM,aAHrB,iBAKE,oBAAC,UAAD,eACM,KAAKE,KADX,IAEE,QAAQ,EAAE,KAAKA,KAAL,CAAWC,QAFvB,EAGE,IAAI,EAAE,KAAKD,KAAL,CAAWE,IAHnB,EAIE,KAAK,EAAE,KAAKb,KAAL,CAAWE,KAJpB,EAKE,KAAK,EAAE,KAAKF,KAAL,CAAWC,KALpB,EAME,aAAa,EAAE,KAAKG,YANtB,EAOE,OAAO,EAAE,KAAKE,UAPhB,EAQE,MAAM,EAAE,KAAKC,QARf,EASE,eAAe,MATjB,IALF,CADF,CAmBD,CA3BH,+BAA0CX,KAAK,CAACkB,SAAhD","sourcesContent":["import React from 'react';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { Tooltip } from '../../components/Tooltip';\nimport { DatePicker, DatePickerProps } from '../../components/DatePicker';\n\ninterface DatePickerPlaygroundState {\n value: Nullable<string>;\n error: boolean;\n tooltip: boolean;\n}\ntype DatePickerPlaygroundProps = Partial<DatePickerProps>;\nexport class DatePickerPlayground extends React.Component<DatePickerPlaygroundProps> {\n public state: DatePickerPlaygroundState = {\n value: '17.06.2019',\n error: false,\n tooltip: false,\n };\n\n public render() {\n return (\n <Tooltip\n trigger={this.state.tooltip ? 'opened' : 'closed'}\n render={() => 'Такой даты не существует'}\n onCloseClick={this.removeTooltip}\n >\n <DatePicker\n {...this.props}\n disabled={this.props.disabled}\n size={this.props.size}\n error={this.state.error}\n value={this.state.value}\n onValueChange={this.handleChange}\n onFocus={this.invalidate}\n onBlur={this.validate}\n enableTodayLink\n />\n </Tooltip>\n );\n }\n\n private handleChange = (value: string) => {\n this.setState({\n value,\n });\n };\n\n private invalidate = () => {\n this.setState({ error: false, tooltip: false });\n };\n\n private validate = () => {\n const currentValue = this.state.value;\n this.setState(() => {\n const error = !!currentValue && !DatePicker.validate(currentValue);\n return {\n error,\n tooltip: error,\n };\n });\n };\n\n private removeTooltip = () => {\n this.setState({\n tooltip: false,\n });\n };\n}\n"]}

package/internal/ThemePlayground/AnotherInputsPlayground.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ interface DatePickerPlaygroundState {
     error: boolean;
     tooltip: boolean;
 }
-declare type DatePickerPlaygroundProps = Partial<DatePickerProps<string>>;
+declare type DatePickerPlaygroundProps = Partial<DatePickerProps>;
 export declare class DatePickerPlayground extends React.Component<DatePickerPlaygroundProps> {
     state: DatePickerPlaygroundState;
     render(): JSX.Element;

package/internal/ThemePlayground/SizesGroup/SizesGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["SizesGroup.tsx"],"names":["React","CardIcon","LinkIcon","Input","Gapped","Button","SelectPlayground","SizesGroup","size"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,6BAArB;AACA,OAAOC,QAAP,MAAqB,6BAArB;;AAEA,SAASC,KAAT,QAAsB,wBAAtB;AACA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,MAAT,QAAuB,yBAAvB~~;;AAEA~~,SAASC,gBAAT,QAAiC,oBAAjC;;;;;;AAMA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,YAAGC,IAAH,QAAGA,IAAH;AACxB,wBAAC,MAAD,IAAQ,IAAI,MAAZ,EAAa,aAAa,EAAC,QAA3B,EAAoC,GAAG,EAAE,EAAzC;AACE,wBAAC,gBAAD,IAAkB,KAAK,EAAE,GAAzB,EAA8B,IAAI,EAAEA,IAApC,GADF;AAEE,wBAAC,KAAD,IAAO,SAAS,eAAE,oBAAC,QAAD,OAAlB,EAAgC,WAAW,EAAE,YAA7C,EAA2D,IAAI,EAAEA,IAAjE,GAFF;AAGE,wBAAC,MAAD,IAAQ,KAAK,EAAE,GAAf,EAAoB,IAAI,EAAEA,IAA1B,aAHF;;;AAME,wBAAC,MAAD,IAAQ,IAAI,eAAE,oBAAC,QAAD,OAAd,EAA4B,GAAG,EAAE,MAAjC,EAAyC,IAAI,EAAEA,IAA/C,yBANF,CADwB,GAAnB","sourcesContent":["import React from 'react';\nimport CardIcon from '@skbkontur/react-icons/Card';\nimport LinkIcon from '@skbkontur/react-icons/Link';\n\nimport { Input } from '../../components/Input';\nimport { Gapped } from '../../components/Gapped';\nimport { Button } from '../../components/Button';\n\nimport { SelectPlayground } from './SelectPlayground';\n\nexport interface SizesGroupProps {\n size: ~~'small' \| 'medium' \| 'large'~~;\n}\n\nexport const SizesGroup = ({ size }: SizesGroupProps) => (\n <Gapped wrap verticalAlign=\"middle\" gap={10}>\n <SelectPlayground width={120} size={size} />\n <Input rightIcon={<CardIcon />} placeholder={'Text value'} size={size} />\n <Button width={120} size={size}>\n Button\n </Button>\n <Button icon={<LinkIcon />} use={'link'} size={size}>\n Button like a link\n </Button>\n </Gapped>\n);\n"]}
1	+ {"version":3,"sources":["SizesGroup.tsx"],"names":["React","CardIcon","LinkIcon","Input","Gapped","Button","SelectPlayground","SizesGroup","size"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,6BAArB;AACA,OAAOC,QAAP,MAAqB,6BAArB;;AAEA,SAASC,KAAT,QAAsB,wBAAtB;AACA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,MAAT,QAAuB,yBAAvB;;;AAGA,SAASC,gBAAT,QAAiC,oBAAjC;;;;;;AAMA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,YAAGC,IAAH,QAAGA,IAAH;AACxB,wBAAC,MAAD,IAAQ,IAAI,MAAZ,EAAa,aAAa,EAAC,QAA3B,EAAoC,GAAG,EAAE,EAAzC;AACE,wBAAC,gBAAD,IAAkB,KAAK,EAAE,GAAzB,EAA8B,IAAI,EAAEA,IAApC,GADF;AAEE,wBAAC,KAAD,IAAO,SAAS,eAAE,oBAAC,QAAD,OAAlB,EAAgC,WAAW,EAAE,YAA7C,EAA2D,IAAI,EAAEA,IAAjE,GAFF;AAGE,wBAAC,MAAD,IAAQ,KAAK,EAAE,GAAf,EAAoB,IAAI,EAAEA,IAA1B,aAHF;;;AAME,wBAAC,MAAD,IAAQ,IAAI,eAAE,oBAAC,QAAD,OAAd,EAA4B,GAAG,EAAE,MAAjC,EAAyC,IAAI,EAAEA,IAA/C,yBANF,CADwB,GAAnB","sourcesContent":["import React from 'react';\nimport CardIcon from '@skbkontur/react-icons/Card';\nimport LinkIcon from '@skbkontur/react-icons/Link';\n\nimport { Input } from '../../components/Input';\nimport { Gapped } from '../../components/Gapped';\nimport { Button } from '../../components/Button';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { SelectPlayground } from './SelectPlayground';\n\nexport interface SizesGroupProps {\n size: SizeProp;\n}\n\nexport const SizesGroup = ({ size }: SizesGroupProps) => (\n <Gapped wrap verticalAlign=\"middle\" gap={10}>\n <SelectPlayground width={120} size={size} />\n <Input rightIcon={<CardIcon />} placeholder={'Text value'} size={size} />\n <Button width={120} size={size}>\n Button\n </Button>\n <Button icon={<LinkIcon />} use={'link'} size={size}>\n Button like a link\n </Button>\n </Gapped>\n);\n"]}

package/internal/ThemePlayground/SizesGroup.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
+import { SizeProp } from '../../lib/types/props';
 export interface SizesGroupProps {
-    size: 'small' | 'medium' | 'large';
+    size: SizeProp;
 }
 export declare const SizesGroup: ({ size }: SizesGroupProps) => JSX.Element;

package/internal/ThemePlayground/constants/constants.js CHANGED Viewed

@@ -91,5 +91,8 @@ export var VARIABLES_GROUPS = [{
 }, {
   title: 'GlobalLoader',
   prefix: 'globalLoader'
+}, {
+  title: 'CloseButtonIcon',
+  prefix: 'closeBtnIcon'
 }];
 export var DEPRECATED_VARIABLES = [];

package/internal/ThemePlayground/constants/constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["constants.ts"],"names":["ThemeType","VARIABLES_GROUPS","title","prefix","isCommon","DEPRECATED_VARIABLES"],"mappings":";;AAEA,WAAYA,SAAZ,C,WAAYA,S,GAAAA,S,wBAAAA,S,kBAAAA,S,8BAAAA,S,wBAAAA,S,4BAAAA,S,uCAAAA,S,KAAAA,S;;;;;;;;;AASZ,OAAO,IAAMC,gBAAgB,GAAG;AAC9B,EAAEC,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,MAA3B,EAAmCC,QAAQ,EAAE,IAA7C,EAD8B;AAE9B,EAAEF,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,KAA3B,EAF8B;AAG9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAH8B;AAI9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAJ8B;AAK9B,EAAED,KAAK,EAAE,YAAT,EAAuBC,MAAM,EAAE,sBAA/B,EAL8B;AAM9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAN8B;AAO9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAP8B;AAQ9B,EAAED,KAAK,EAAE,MAAT,EAAiBC,MAAM,EAAE,MAAzB,EAR8B;AAS9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAT8B;AAU9B,EAAED,KAAK,EAAE,MAAT,EAAiBC,MAAM,EAAE,MAAzB,EAV8B;AAW9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAX8B;AAY9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAZ8B;AAa9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAb8B;AAc9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAd8B;AAe9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAf8B;AAgB9B,EAAED,KAAK,EAAE,MAAT,EAAiBC,MAAM,EAAE,KAAzB,EAhB8B;AAiB9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAjB8B;AAkB9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAlB8B;AAmB9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAnB8B;AAoB9B,EAAED,KAAK,EAAE,SAAT,EAAoBC,MAAM,EAAE,SAA5B,EApB8B;AAqB9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EArB8B;AAsB9B,EAAED,KAAK,EAAE,YAAT,EAAuBC,MAAM,EAAE,YAA/B,EAtB8B;AAuB9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAvB8B;AAwB9B,EAAED,KAAK,EAAE,SAAT,EAAoBC,MAAM,EAAE,SAA5B,EAxB8B;AAyB9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAzB8B;AA0B9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,SAA3B,EA1B8B;AA2B9B,EAAED,KAAK,EAAE,cAAT,EAAyBC,MAAM,EAAE,cAAjC,EA3B8B,CAAzB;;;~~AA8BP~~,OAAO,IAAME,oBAAwC,GAAG,EAAjD","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\n\nexport enum ThemeType {\n Default = 'default',\n Dark = 'dark',\n DefaultOld = 'defaultOld',\n FlatOld = 'flatOld',\n Theme2022 = 'theme2022',\n Theme2022Dark = 'theme2022Dark',\n}\n\nexport const VARIABLES_GROUPS = [\n { title: 'Common', prefix: 'null', isCommon: true },\n { title: 'Button', prefix: 'btn' },\n { title: 'Border', prefix: 'border' },\n { title: 'Checkbox', prefix: 'checkbox' },\n { title: 'DatePicker', prefix: 'date calendar picker' },\n { title: 'Dropdown', prefix: 'dropdown' },\n { title: 'Input', prefix: 'input' },\n { title: 'Link', prefix: 'link' },\n { title: 'Loader', prefix: 'loader' },\n { title: 'Menu', prefix: 'menu' },\n { title: 'Modal', prefix: 'modal' },\n { title: 'Paging', prefix: 'paging' },\n { title: 'Popup', prefix: 'popup' },\n { title: 'Radio', prefix: 'radio' },\n { title: 'SidePage', prefix: 'sidePage' },\n { title: 'Tabs', prefix: 'tab' },\n { title: 'Textarea', prefix: 'textarea' },\n { title: 'Toast', prefix: 'toast' },\n { title: 'Toggle', prefix: 'toggle' },\n { title: 'Tooltip', prefix: 'tooltip' },\n { title: 'Token', prefix: 'token' },\n { title: 'TokenInput', prefix: 'tokenInput' },\n { title: 'Select', prefix: 'select' },\n { title: 'Spinner', prefix: 'spinner' },\n { title: 'Switcher', prefix: 'switcher' },\n { title: 'Legacy', prefix: 'chb slt' },\n { title: 'GlobalLoader', prefix: 'globalLoader' },\n];\n\nexport const DEPRECATED_VARIABLES: Array<keyof Theme> = [];\n"]}
1	+ {"version":3,"sources":["constants.ts"],"names":["ThemeType","VARIABLES_GROUPS","title","prefix","isCommon","DEPRECATED_VARIABLES"],"mappings":";;AAEA,WAAYA,SAAZ,C,WAAYA,S,GAAAA,S,wBAAAA,S,kBAAAA,S,8BAAAA,S,wBAAAA,S,4BAAAA,S,uCAAAA,S,KAAAA,S;;;;;;;;;AASZ,OAAO,IAAMC,gBAAgB,GAAG;AAC9B,EAAEC,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,MAA3B,EAAmCC,QAAQ,EAAE,IAA7C,EAD8B;AAE9B,EAAEF,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,KAA3B,EAF8B;AAG9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAH8B;AAI9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAJ8B;AAK9B,EAAED,KAAK,EAAE,YAAT,EAAuBC,MAAM,EAAE,sBAA/B,EAL8B;AAM9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAN8B;AAO9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAP8B;AAQ9B,EAAED,KAAK,EAAE,MAAT,EAAiBC,MAAM,EAAE,MAAzB,EAR8B;AAS9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAT8B;AAU9B,EAAED,KAAK,EAAE,MAAT,EAAiBC,MAAM,EAAE,MAAzB,EAV8B;AAW9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAX8B;AAY9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAZ8B;AAa9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAb8B;AAc9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAd8B;AAe9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAf8B;AAgB9B,EAAED,KAAK,EAAE,MAAT,EAAiBC,MAAM,EAAE,KAAzB,EAhB8B;AAiB9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAjB8B;AAkB9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAlB8B;AAmB9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAnB8B;AAoB9B,EAAED,KAAK,EAAE,SAAT,EAAoBC,MAAM,EAAE,SAA5B,EApB8B;AAqB9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EArB8B;AAsB9B,EAAED,KAAK,EAAE,YAAT,EAAuBC,MAAM,EAAE,YAA/B,EAtB8B;AAuB9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAvB8B;AAwB9B,EAAED,KAAK,EAAE,SAAT,EAAoBC,MAAM,EAAE,SAA5B,EAxB8B;AAyB9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAzB8B;AA0B9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,SAA3B,EA1B8B;AA2B9B,EAAED,KAAK,EAAE,cAAT,EAAyBC,MAAM,EAAE,cAAjC,EA3B8B;AA4B9B,EAAED,KAAK,EAAE,iBAAT,EAA4BC,MAAM,EAAE,cAApC,EA5B8B,CAAzB;;;AA+BP,OAAO,IAAME,oBAAwC,GAAG,EAAjD","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\n\nexport enum ThemeType {\n Default = 'default',\n Dark = 'dark',\n DefaultOld = 'defaultOld',\n FlatOld = 'flatOld',\n Theme2022 = 'theme2022',\n Theme2022Dark = 'theme2022Dark',\n}\n\nexport const VARIABLES_GROUPS = [\n { title: 'Common', prefix: 'null', isCommon: true },\n { title: 'Button', prefix: 'btn' },\n { title: 'Border', prefix: 'border' },\n { title: 'Checkbox', prefix: 'checkbox' },\n { title: 'DatePicker', prefix: 'date calendar picker' },\n { title: 'Dropdown', prefix: 'dropdown' },\n { title: 'Input', prefix: 'input' },\n { title: 'Link', prefix: 'link' },\n { title: 'Loader', prefix: 'loader' },\n { title: 'Menu', prefix: 'menu' },\n { title: 'Modal', prefix: 'modal' },\n { title: 'Paging', prefix: 'paging' },\n { title: 'Popup', prefix: 'popup' },\n { title: 'Radio', prefix: 'radio' },\n { title: 'SidePage', prefix: 'sidePage' },\n { title: 'Tabs', prefix: 'tab' },\n { title: 'Textarea', prefix: 'textarea' },\n { title: 'Toast', prefix: 'toast' },\n { title: 'Toggle', prefix: 'toggle' },\n { title: 'Tooltip', prefix: 'tooltip' },\n { title: 'Token', prefix: 'token' },\n { title: 'TokenInput', prefix: 'tokenInput' },\n { title: 'Select', prefix: 'select' },\n { title: 'Spinner', prefix: 'spinner' },\n { title: 'Switcher', prefix: 'switcher' },\n { title: 'Legacy', prefix: 'chb slt' },\n { title: 'GlobalLoader', prefix: 'globalLoader' },\n { title: 'CloseButtonIcon', prefix: 'closeBtnIcon' },\n];\n\nexport const DEPRECATED_VARIABLES: Array<keyof Theme> = [];\n"]}

package/internal/ThemePlayground/darkTheme/darkTheme.js CHANGED Viewed

@@ -244,7 +244,7 @@ export var darkTheme = ThemeFactory.create({
   toastCloseColor: '#a0a0a0',
   toastCloseHoverColor: 'white',
   tdDividerBg: '#808080',
-  menuItemPaddingForIcon: '36px',
+  menuItemPaddingForIconSmall: '36px',
   menuBorder: 'rgba(0, 0, 0, 0)',
   menuShadow: '0 0 0 1px #404040, 0 5px 20px 0 rgba(0, 0, 0, 0.4)',