npm - @skbkontur/react-ui - Versions diffs - 6.4.2-static-css.0 → 6.4.3-6344a.0 - Mend

@skbkontur/react-ui 6.4.2-static-css.0 → 6.4.3-6344a.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 (941) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PopupMenu.js","sourceRoot":"","sources":["PopupMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gDAAgD,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EACL,kBAAkB,EAClB,UAAU,EACV,WAAW,EACX,UAAU,EACV,QAAQ,GACT,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAIjD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,cAAc,WAAW,CAAC;AA8D1B,MAAM,CAAC,IAAM,aAAa,GAAG;IAC3B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;CACV,CAAC;AAEX,IAAM,SAAS,GAAyB;IACtC,UAAU;IACV,YAAY;IACZ,WAAW;IACX,WAAW;IACX,cAAc;IACd,cAAc;IACd,aAAa;IACb,eAAe;IACf,cAAc;IACd,UAAU;IACV,aAAa;IACb,aAAa;CACd,CAAC;AAOF;IAA+B,6BAA+C;IAA9E;;QAOU,YAAM,GAAG,QAAQ,CAAC,IAAI,GAAG,WAAW,EAAE,CAAC;QASvC,cAAQ,GAAG,iBAAiB,CAAC,WAAS,CAAC,YAAY,CAAC,CAAC;QAItD,WAAK,GAAG;YACb,WAAW,EAAE,KAAK;YAClB,yBAAyB,EAAE,KAAK;SACjC,CAAC;QAEM,oBAAc,GAA2B,IAAI,CAAC;QAC9C,2BAAqB,GAAuB,IAAI,CAAC;QACjD,UAAI,GAAmB,IAAI,CAAC;QAC5B,+BAAyB,GAAG,KAAK,CAAC;QA8EnC,UAAI,GAAG,cAAY,OAAA,KAAI,CAAC,QAAQ,EAAE,EAAf,CAAe,CAAC;QACnC,WAAK,GAAG,cAAY,OAAA,KAAI,CAAC,QAAQ,EAAE,EAAf,CAAe,CAAC;QAuBnC,aAAO,GAAG,UAAC,OAAuB;YACxC,KAAI,CAAC,IAAI,GAAG,OAAO,CAAC;QACtB,CAAC,CAAC;QAEM,gBAAU,GAAG;YACnB,IAAI,KAAI,CAAC,IAAI,EAAE,CAAC;gBACd,KAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;QAEM,wBAAkB,GAAG,UAAC,OAAwB;;YACpD,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;gBAC/D,OAAO,OAAO,CAAC;YACjB,CAAC;YAED,OAAO,KAAK,CAAC,YAAY,CAAC,OAAkC,EAAE;gBAC5D,EAAE,EAAE,KAAI,CAAC,KAAK,CAAC,EAAE;gBACjB,eAAe,EAAE,MAAA,KAAI,CAAC,KAAK,CAAC,WAAW,mCAAI,KAAI,CAAC,MAAM;gBACtD,eAAe,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gBAC1D,YAAY,EAAE,KAAI,CAAC,KAAK,CAAC,YAAY,CAAC;aACvC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,mBAAa,GAAG;YACtB,IAAI,OAAO,KAAI,CAAC,KAAK,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;gBAC7C,IAAM,OAAO,GAAG,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC;oBACjC,MAAM,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW;oBAC9B,QAAQ,EAAE,KAAI,CAAC,QAAQ;oBACvB,SAAS,EAAE,KAAI,CAAC,QAAQ;oBACxB,UAAU,EAAE,KAAI,CAAC,UAAU;oBAC3B,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO;iBAC5B,CAAC,CAAC;gBAEH,OAAO,CACL,0CACY,iBAAiB,CAAC,OAAO,EACnC,SAAS,EAAE,KAAI,CAAC,MAAM,CAAC,OAAO,EAAE,EAChC,GAAG,EAAE,UAAC,OAAO;wBACX,KAAI,CAAC,cAAc,GAAG,OAAO,CAAC;oBAChC,CAAC,IAEA,KAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAC5B,CACR,CAAC;YACJ,CAAC;YAED,OAAO,CACL,0CACY,iBAAiB,CAAC,OAAO,EACnC,OAAO,EAAE,KAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,KAAI,CAAC,oBAAoB,EACpC,GAAG,EAAE,UAAC,OAAO;oBACX,KAAI,CAAC,cAAc,GAAG,OAAO,CAAC;gBAChC,CAAC,EACD,SAAS,EAAE,KAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAE/B,KAAI,CAAC,kBAAkB,CAAC,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CACvC,CACR,CAAC;QACJ,CAAC,CAAC;QAEM,6BAAuB,GAAG,cAAM,OAAA,KAAI,CAAC,QAAQ,EAAE,EAAf,CAAe,CAAC;QAWhD,cAAQ,GAAG,UAAC,yBAAmC;YACrD,KAAI,CAAC,SAAS,EAAE,CAAC;YACjB,KAAI,CAAC,yBAAyB,GAAG,KAAK,CAAC;YACvC,KAAI,CAAC,QAAQ,CAAC;gBACZ,WAAW,EAAE,IAAI;gBACjB,yBAAyB,2BAAA;aAC1B,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,cAAQ,GAAG,UAAC,YAAsB;YACxC,KAAI,CAAC,yBAAyB,GAAG,CAAC,CAAC,YAAY,CAAC;YAChD,KAAI,CAAC,QAAQ,CAAC;gBACZ,WAAW,EAAE,KAAK;gBAClB,yBAAyB,EAAE,KAAK;aACjC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,gBAAU,GAAG;YACnB,KAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAI,CAAC,QAAQ,EAAE,CAAC;QAC7D,CAAC,CAAC;QAEM,wBAAkB,GAAG;YAC3B,KAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC,CAAC;QAEM,0BAAoB,GAAG,UAAC,CAAmC;YACjE,IAAI,QAAQ,CAAC,UAAU,EAAE,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC5D,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;QAEM,mBAAa,GAAG,UAAC,CAAmC;YAC1D,IAAI,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;gBACnB,IAAM,YAAY,GAAG,IAAI,CAAC;gBAC1B,KAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC;QAEM,eAAS,GAAG;YAClB,IAAI,KAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;gBAC/B,KAAI,CAAC,qBAAqB,GAAG,KAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,aAA4B,CAAC;YACvF,CAAC;QACH,CAAC,CAAC;QAEM,kBAAY,GAAG;YACrB,IAAI,KAAI,CAAC,qBAAqB,EAAE,CAAC;gBAC/B,KAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE,CAAC;gBACnC,KAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;YACpC,CAAC;QACH,CAAC,CAAC;QAEM,yBAAmB,GAAG,UAAC,KAAwC;YACrE,IAAI,KAAK,CAAC,kBAAkB,EAAE,EAAE,CAAC;gBAC/B,OAAO;YACT,CAAC;YAED,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;gBAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,CAAC;YAED,IAAM,YAAY,GAAG,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC;YAC9C,KAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;QAC9B,CAAC,CAAC;;IACJ,CAAC;kBA1QY,SAAS;IAgCb,0BAAM,GAAb;QAAA,iBAqBC;QApBC,IAAI,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC;QAE1B,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IACpB,KAAK,EAAE,YAAY,CAAC,MAAM,CACxB;oBACE,WAAW,EAAE,KAAK,CAAC,oBAAoB;iBACxC,EACD,KAAK,CACN,IAEA,KAAI,CAAC,UAAU,EAAE,CACI,CACzB,CAAC;QACJ,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAEO,8BAAU,GAAlB;;QACQ,IAAA,KAAqC,IAAI,CAAC,QAAQ,EAAE,EAAlD,WAAW,iBAAA,EAAE,iBAAiB,uBAAoB,CAAC;QAC3D,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IAAM,IAAI,CAAC,KAAK;YAC1D,oBAAC,WAAW,IACV,cAAc,EAAE,IAAI,CAAC,uBAAuB,EAC5C,cAAc,EAAE,IAAI,CAAC,uBAAuB,EAC5C,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW;gBAE9B,yCACY,iBAAiB,CAAC,IAAI,EAChC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,EAClC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;oBAEjC,IAAI,CAAC,aAAa,EAAE;oBACpB,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAC7C,oBAAC,KAAK,IACJ,EAAE,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,mCAAI,IAAI,CAAC,MAAM,EACzC,aAAa,EAAE,IAAI,CAAC,cAAc,EAClC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EAC9B,SAAS,QACT,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EAC9B,MAAM,EAAE,WAAW,EACnB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EACpC,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,EAC9B,iBAAiB,EAAE,iBAAiB,EACpC,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,oBAAoB,EAAE,IAAI,CAAC,QAAQ,EACnC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,MAAM;wBAEpE,oBAAC,IAAI,IACH,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,MAAM,EAC5E,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,WAAW,EAAE,IAAI,CAAC,mBAAmB,EACrC,kBAAkB,EAAE,IAAI,CAAC,KAAK,CAAC,kBAAkB,EACjD,eAAe,EAAE,KAAK,EACtB,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,wBAAwB,EAAE,IAAI,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACvE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAExB,IAAI,CAAC,KAAK,CAAC,QAAQ,CACf,CACD,CACT,CACG,CACM,CACA,CACjB,CAAC;IACJ,CAAC;IAKM,sCAAkB,GAAzB,UAA0B,UAA0B,EAAE,SAAyB;;QAC7E,IAAI,SAAS,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;YACrD,OAAO;QACT,CAAC;QAED,IAAM,qBAAqB,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,yBAAyB,CAAC;QAExF,IAAI,qBAAqB,EAAE,CAAC;YAC1B,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;YAC3B,MAAA,MAAA,IAAI,CAAC,KAAK,EAAC,MAAM,kDAAI,CAAC;QACxB,CAAC;aAAM,CAAC;YACN,MAAA,MAAA,IAAI,CAAC,KAAK,EAAC,OAAO,kDAAI,CAAC;YACvB,IAAI,CAAC,yBAAyB,GAAG,KAAK,CAAC;QACzC,CAAC;QAED,MAAA,MAAA,IAAI,CAAC,KAAK,EAAC,iBAAiB,mDAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,qBAAqB,CAAC,CAAC;IAChF,CAAC;IAiEO,gCAAY,GAApB;QACE,IAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC;QAC5C,IAAI,SAAS,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE,CAAC;YAC7C,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC;;IAvMa,6BAAmB,GAAG,WAAW,AAAd,CAAe;IAClC,qBAAW,GAAG,WAAW,AAAd,CAAe;IAO1B,sBAAY,GAAiB;QACzC,SAAS,EAAE,SAAS;QACpB,IAAI,EAAE,aAAa,CAAC,OAAO;QAC3B,WAAW,EAAE,IAAI;QACjB,iBAAiB,EAAE,KAAK;KACzB,AALyB,CAKxB;IAIY,cAAI,GAAG,aAAa,AAAhB,CAAiB;IAlBxB,SAAS;QAHrB,qBAAqB;QACrB,QAAQ;QACR,gBAAgB;OACJ,SAAS,CA0QrB;IAAD,gBAAC;CAAA,AA1QD,CAA+B,KAAK,CAAC,SAAS,GA0Q7C;SA1QY,SAAS","sourcesContent":["import type { AriaAttributes, HTMLAttributes, JSX } from 'react';\nimport React from 'react';\n\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport {\n isKeyArrowVertical,\n isKeyEnter,\n isKeyEscape,\n isKeySpace,\n someKeys,\n} from '../../lib/events/keyboard/identifiers.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 { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport { getRandomID } from '../../lib/utils.js';\nimport type { HTMLProps } from '../../typings/html.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport { Menu } from '../Menu/index.js';\nimport type { MenuProps } from '../Menu/index.js';\nimport { Popup, PopupIds } from '../Popup/index.js';\nimport type { PopupPositionsType } from '../Popup/index.js';\nimport { RenderLayer } from '../RenderLayer/index.js';\nimport { getStyles } from './PopupMenu.styles.js';\nimport { PopupMenuDataTids } from './tids.js';\nimport { isValidPositions } from './validatePositions.js';\n\nexport * from './tids.js';\n\nexport interface PopupMenuCaptionProps {\n opened: boolean;\n openMenu: (firstItemShouldBeSelected?: boolean) => void;\n closeMenu: (restoreFocus?: boolean) => void;\n toggleMenu: () => void;\n /** @ignore /\n corners?: React.CSSProperties;\n}\n\nexport interface PopupMenuProps\n extends\n CommonProps,\n Pick<MenuProps, 'preventIconsOffset'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\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 /* `id` выпадающего меню. /\n popupMenuId?: HTMLProps['id'];\n\n /* @ignore */\n corners?: React.CSSProperties;\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\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@withRenderEnvironment\n@rootNode\n@responsiveLayout\nexport class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {\n public static __KONTUR_REACT_UI__ = 'PopupMenu';\n public static displayName = 'PopupMenu';\n\n private globalObject!: GlobalObject;\n private styles!: ReturnType<typeof getStyles>;\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 shouldRestoreFocusOnClose = false;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public render(): JSX.Element {\n this.styles = getStyles();\n\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\n data-tid={PopupMenuDataTids.root}\n className={this.styles.container()}\n style={{ width: this.props.width }}\n >\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 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.menuRef}\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 public componentDidUpdate(_prevProps: PopupMenuProps, prevState: PopupMenuState): void {\n if (prevState.menuVisible === this.state.menuVisible) {\n return;\n }\n\n const focusShouldBeRestored = !this.state.menuVisible && this.shouldRestoreFocusOnClose;\n\n if (focusShouldBeRestored) {\n this.restoreFocus();\n }\n\n if (this.state.menuVisible) {\n this.props.onOpen?.();\n } else {\n this.props.onClose?.();\n this.shouldRestoreFocusOnClose = false;\n }\n\n this.props.onChangeMenuState?.(this.state.menuVisible, focusShouldBeRestored);\n }\n\n private menuRef = (element: Nullable<Menu>) => {\n this.menu = element;\n };\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<any>, {\n id: this.props.id,\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 corners: this.props.corners,\n });\n\n return (\n <span\n data-tid={PopupMenuDataTids.caption}\n className={this.styles.caption()}\n ref={(element) => {\n this.captionWrapper = element;\n }}\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) => {\n this.captionWrapper = element;\n }}\n className={this.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.shouldRestoreFocusOnClose = false;\n this.setState({\n menuVisible: true,\n firstItemShouldBeSelected,\n });\n };\n\n private hideMenu = (restoreFocus?: boolean): void => {\n this.shouldRestoreFocusOnClose = !!restoreFocus;\n this.setState({\n menuVisible: false,\n firstItemShouldBeSelected: false,\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 (this.globalObject.document) {\n this.savedFocusableElement = this.globalObject.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 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,"file":"PopupMenu.js","sourceRoot":"","sources":["PopupMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes, HTMLAttributes, JSX } from 'react';\nimport React from 'react';\n\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport {\n isKeyArrowVertical,\n isKeyEnter,\n isKeyEscape,\n isKeySpace,\n someKeys,\n} from '../../lib/events/keyboard/identifiers.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 { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport { getRandomID } from '../../lib/utils.js';\nimport type { HTMLProps } from '../../typings/html.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport { Menu } from '../Menu/index.js';\nimport type { MenuProps } from '../Menu/index.js';\nimport { Popup, PopupIds } from '../Popup/index.js';\nimport type { PopupPositionsType } from '../Popup/index.js';\nimport { RenderLayer } from '../RenderLayer/index.js';\nimport { getStyles } from './PopupMenu.css.js';\nimport { PopupMenuDataTids } from './tids.js';\nimport { isValidPositions } from './validatePositions.js';\n\nexport * from './tids.js';\n\nexport interface PopupMenuCaptionProps {\n opened: boolean;\n openMenu: (firstItemShouldBeSelected?: boolean) => void;\n closeMenu: (restoreFocus?: boolean) => void;\n toggleMenu: () => void;\n /** @ignore /\n corners?: React.CSSProperties;\n}\n\nexport interface PopupMenuProps\n extends\n CommonProps,\n Pick<MenuProps, 'preventIconsOffset'>,\n Pick<HTMLAttributes<HTMLElement>, 'id'>,\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 /* `id` выпадающего меню. /\n popupMenuId?: HTMLProps['id'];\n\n /* @ignore */\n corners?: React.CSSProperties;\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\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@withRenderEnvironment\n@rootNode\n@responsiveLayout\nexport class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {\n public static __KONTUR_REACT_UI__ = 'PopupMenu';\n public static displayName = 'PopupMenu';\n\n private globalObject!: GlobalObject;\n private emotion!: Emotion;\n private styles!: ReturnType<typeof getStyles>;\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 shouldRestoreFocusOnClose = false;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public render(): JSX.Element {\n this.styles = getStyles(this.emotion);\n\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\n data-tid={PopupMenuDataTids.root}\n className={this.styles.container()}\n style={{ width: this.props.width }}\n >\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 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.menuRef}\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 public componentDidUpdate(_prevProps: PopupMenuProps, prevState: PopupMenuState): void {\n if (prevState.menuVisible === this.state.menuVisible) {\n return;\n }\n\n const focusShouldBeRestored = !this.state.menuVisible && this.shouldRestoreFocusOnClose;\n\n if (focusShouldBeRestored) {\n this.restoreFocus();\n }\n\n if (this.state.menuVisible) {\n this.props.onOpen?.();\n } else {\n this.props.onClose?.();\n this.shouldRestoreFocusOnClose = false;\n }\n\n this.props.onChangeMenuState?.(this.state.menuVisible, focusShouldBeRestored);\n }\n\n private menuRef = (element: Nullable<Menu>) => {\n this.menu = element;\n };\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<any>, {\n id: this.props.id,\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 corners: this.props.corners,\n });\n\n return (\n <span\n data-tid={PopupMenuDataTids.caption}\n className={this.styles.caption()}\n ref={(element) => {\n this.captionWrapper = element;\n }}\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) => {\n this.captionWrapper = element;\n }}\n className={this.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.shouldRestoreFocusOnClose = false;\n this.setState({\n menuVisible: true,\n firstItemShouldBeSelected,\n });\n };\n\n private hideMenu = (restoreFocus?: boolean): void => {\n this.shouldRestoreFocusOnClose = !!restoreFocus;\n this.setState({\n menuVisible: false,\n firstItemShouldBeSelected: false,\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 (this.globalObject.document) {\n this.savedFocusableElement = this.globalObject.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 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/RenderContainer/RenderContainer.d.ts CHANGED Viewed

@@ -17,6 +17,7 @@ export declare class RenderContainer extends React.Component<RenderContainerProp
     shouldComponentUpdate(nextProps: RenderContainerProps): boolean;
     componentWillUnmount(): void;
     render(): React.JSX.Element;
+    private applyThemeVars;
     private createContainer;
     private mountContainer;
     private destroyContainer;

package/internal/RenderContainer/RenderContainer.js CHANGED Viewed

@@ -27,6 +27,8 @@ var __assign = (this && this.__assign) || function () {
 import React from 'react';
 import { callChildRef } from '../../lib/callChildRef/callChildRef.js';
 import { RenderEnvironmentContext } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { getThemeSetTokens, getThemeVars, ThemeCarrierContext } from '../../lib/theming/themeVars.js';
 import { Upgrade } from '../../lib/Upgrades.js';
 import { getRandomID } from '../../lib/utils.js';
 import { RenderInnerContainer } from './RenderInnerContainer.js';
@@ -54,10 +56,33 @@ var RenderContainer = /** @class */ (function (_super) {
         this.destroyContainer();
     };
     RenderContainer.prototype.render = function () {
+        var _this = this;
         if (this.props.children) {
             this.mountContainer();
         }
-        return React.createElement(RenderInnerContainer, __assign({}, this.props, { domContainer: this.domContainer, rootId: this.rootId }));
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.applyThemeVars(getThemeVars(theme), getThemeSetTokens(theme));
+            // портал живёт в body: переменные считаются от темы по умолчанию, для содержимого носитель — контейнер
+            return (React.createElement(ThemeCarrierContext.Provider, { value: theme },
+                React.createElement(RenderInnerContainer, __assign({}, _this.props, { domContainer: _this.domContainer, rootId: _this.rootId }))));
+        }));
+    };
+    RenderContainer.prototype.applyThemeVars = function (vars, setTokens) {
+        var container = this.domContainer;
+        if (!container) {
+            return;
+        }
+        container.removeAttribute('style');
+        if (setTokens) {
+            container.setAttribute('data-k-set', setTokens);
+        }
+        else {
+            container.removeAttribute('data-k-set');
+        }
+        Object.entries(vars).forEach(function (_a) {
+            var name = _a[0], value = _a[1];
+            return container.style.setProperty(name, String(value));
+        });
     };
     RenderContainer.prototype.createContainer = function () {
         var _a;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RenderContainer.js","sourceRoot":"","sources":["RenderContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAGhF,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAMjE,MAAM,CAAC,IAAM,iBAAiB,GAAG,0BAA0B,CAAC;AAC5D,MAAM,CAAC,IAAM,kBAAkB,GAAG,4BAA4B,CAAC;AAE/D;IAAqC,mCAAqC;IAA1E;;QAUU,kBAAY,GAA0B,eAAe,CAAC,eAAe,CAAC;QAE7D,YAAM,GAAW,eAAe,CAAC,SAAS,EAAE,CAAC;QAEvD,iBAAW,GAAiB,cAAyB,OAAA,KAAI,CAAC,YAAY,EAAjB,CAAiB,CAAC;;~~IAwEhF~~,CAAC;~~IAtEQ~~,+CAAqB,GAA5B,UAA6B,SAA+B;QAC1D,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,SAAS,CAAC,QAAQ,EAAE,CAAC;YAC/C,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;YAC/C,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,8CAAoB,GAA3B;QACE,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEM,gCAAM,GAAb;~~QACE~~,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAED,OAAO,oBAAC,oBAAoB,eAAK,~~IAAI~~,CAAC,KAAK,IAAE,YAAY,EAAE,~~IAAI~~,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,CAAC;~~IACxG~~,CAAC;IAEO,yCAAe,GAAvB;;QACE,IAAM,YAAY,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,0CAAE,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9E,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,uBAAuB,EAAE,CAAC,CAAC;YACtE,YAAY,CAAC,YAAY,CAAC,kBAAkB,EAAE,UAAG,IAAI,CAAC,MAAM,CAAE,CAAC,CAAC;YAChE,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACnC,CAAC;IACH,CAAC;IAEO,wCAAc,GAAtB;;QACE,IAAM,sBAAsB,GAAG,IAAI,CAAC,OAAO,CAAC,YAAsC,CAAC;QAEnF,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;QACD,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,MAAK,MAAA,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,0CAAE,IAAI,CAAA,EAAE,CAAC;YACnG,MAAA,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,0CAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAExE,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;gBAC5B,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAC3D,CAAC;YACD,IAAI,sBAAsB,CAAC,YAAY,EAAE,CAAC;gBACxC,sBAAsB,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YAC5E,CAAC;QACH,CAAC;IACH,CAAC;IAEO,0CAAgB,GAAxB;QACE,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;IACH,CAAC;IAEO,0CAAgB,GAAxB;QACE,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;YACtD,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAE5D,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;gBAC5B,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;YAC9C,CAAC;YAED,IAAM,sBAAsB,GAAG,IAAI,CAAC,OAAO,CAAC,YAAsC,CAAC;YACnF,IAAI,sBAAsB,CAAC,YAAY,EAAE,CAAC;gBACxC,sBAAsB,CAAC,YAAY,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACzE,CAAC;QACH,CAAC;IACH,CAAC;~~IApFa~~,mCAAmB,GAAG,iBAAiB,AAApB,CAAqB;IACxC,2BAAW,GAAG,iBAAiB,AAApB,CAAqB;IAEhC,2BAAW,GAAG,wBAAwB,AAA3B,CAA4B;IAGtC,yBAAS,GAAG,cAAM,OAAA,WAAW,EAAE,EAAb,CAAa,AAAtB,CAAuB;IAC/C,sBAAsB;IACC,+BAAe,GAAG,IAAI,AAAP,CAAQ;~~IA6EhD~~,sBAAC;CAAA,~~AAtFD~~,CAAqC,KAAK,CAAC,SAAS,~~GAsFnD~~;~~SAtFY~~,eAAe","sourcesContent":["import React from 'react';\n\nimport { callChildRef } from '../../lib/callChildRef/callChildRef.js';\nimport { RenderEnvironmentContext } from '../../lib/renderEnvironment/index.js';\nimport type { RenderEnvironmentContextType } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode } from '../../lib/rootNode/rootNodeDecorator.js';\nimport { Upgrade } from '../../lib/Upgrades.js';\nimport { getRandomID } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { RenderContainerProps } from './RenderContainerTypes.js';\nimport { RenderInnerContainer } from './RenderInnerContainer.js';\n\ninterface GlobalWithReactTesting {\n ReactTesting?: any;\n}\n\nexport const PORTAL_INLET_ATTR = 'data-render-container-id';\nexport const PORTAL_OUTLET_ATTR = 'data-rendered-container-id';\n\nexport class RenderContainer extends React.Component<RenderContainerProps> {\n public static __KONTUR_REACT_UI__ = 'RenderContainer';\n public static displayName = 'RenderContainer';\n\n public static contextType = RenderEnvironmentContext;\n public context!: RenderEnvironmentContextType;\n\n private static getRootId = () => getRandomID();\n // see #2873 and #2895\n public static readonly defaultRootNode = null;\n private domContainer: Nullable<HTMLElement> = RenderContainer.defaultRootNode;\n\n private readonly rootId: string = RenderContainer.getRootId();\n\n public getRootNode: TGetRootNode = (): Nullable<Element> => this.domContainer;\n\n public shouldComponentUpdate(nextProps: RenderContainerProps) {\n if (!this.props.children && nextProps.children) {\n this.mountContainer();\n }\n if (this.props.children && !nextProps.children) {\n this.unmountContainer();\n }\n return true;\n }\n\n public componentWillUnmount() {\n this.destroyContainer();\n }\n\n public render() {\n if (this.props.children) {\n this.mountContainer();\n }\n\n return <RenderInnerContainer {...this.props} domContainer={this.domContainer} rootId={this.rootId} ~~/>;\~~n }\n\n private createContainer() {\n const domContainer = this.context.globalObject.document?.createElement('div');\n if (domContainer) {\n domContainer.setAttribute('class', Upgrade.getSpecificityClassName());\n domContainer.setAttribute(PORTAL_OUTLET_ATTR, `${this.rootId}`);\n this.domContainer = domContainer;\n }\n }\n\n private mountContainer() {\n const globalWithReactTesting = this.context.globalObject as GlobalWithReactTesting;\n\n if (!this.domContainer) {\n this.createContainer();\n }\n if (this.domContainer && this.domContainer.parentNode !== this.context.globalObject.document?.body) {\n this.context.globalObject.document?.body.appendChild(this.domContainer);\n\n if (this.props.containerRef) {\n callChildRef(this.props.containerRef, this.domContainer);\n }\n if (globalWithReactTesting.ReactTesting) {\n globalWithReactTesting.ReactTesting.addRenderContainer(this.rootId, this);\n }\n }\n }\n\n private destroyContainer() {\n if (this.domContainer) {\n this.unmountContainer();\n this.domContainer = null;\n }\n }\n\n private unmountContainer() {\n if (this.domContainer && this.domContainer.parentNode) {\n this.domContainer.parentNode.removeChild(this.domContainer);\n\n if (this.props.containerRef) {\n callChildRef(this.props.containerRef, null);\n }\n\n const globalWithReactTesting = this.context.globalObject as GlobalWithReactTesting;\n if (globalWithReactTesting.ReactTesting) {\n globalWithReactTesting.ReactTesting.removeRenderContainer(this.rootId);\n }\n }\n }\n}\n"]}
1	+ {"version":3,"file":"RenderContainer.js","sourceRoot":"","sources":["RenderContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAGhF,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACtG,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAMjE,MAAM,CAAC,IAAM,iBAAiB,GAAG,0BAA0B,CAAC;AAC5D,MAAM,CAAC,IAAM,kBAAkB,GAAG,4BAA4B,CAAC;AAE/D;IAAqC,mCAAqC;IAA1E;;QAUU,kBAAY,GAA0B,eAAe,CAAC,eAAe,CAAC;QAE7D,YAAM,GAAW,eAAe,CAAC,SAAS,EAAE,CAAC;QAEvD,iBAAW,GAAiB,cAAyB,OAAA,KAAI,CAAC,YAAY,EAAjB,CAAiB,CAAC;;IAkGhF,CAAC;IAhGQ,+CAAqB,GAA5B,UAA6B,SAA+B;QAC1D,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,SAAS,CAAC,QAAQ,EAAE,CAAC;YAC/C,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;YAC/C,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,8CAAoB,GAA3B;QACE,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEM,gCAAM,GAAb;QAAA,iBAkBC;QAjBC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAED,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,KAAI,CAAC,cAAc,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;YACnE,uGAAuG;YACvG,OAAO,CACL,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;gBACxC,oBAAC,oBAAoB,eAAK,KAAI,CAAC,KAAK,IAAE,YAAY,EAAE,KAAI,CAAC,YAAY,EAAE,MAAM,EAAE,KAAI,CAAC,MAAM,IAAI,CACjE,CAChC,CAAC;QACJ,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAEO,wCAAc,GAAtB,UAAuB,IAAyB,EAAE,SAAiB;QACjE,IAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC;QACpC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QACD,SAAS,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,CAAC,YAAY,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QAClD,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QAC1C,CAAC;QACD,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,UAAC,EAAa;gBAAZ,IAAI,QAAA,EAAE,KAAK,QAAA;YAAM,OAAA,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;QAAhD,CAAgD,CAAC,CAAC;IACpG,CAAC;IAEO,yCAAe,GAAvB;;QACE,IAAM,YAAY,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,0CAAE,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9E,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,uBAAuB,EAAE,CAAC,CAAC;YACtE,YAAY,CAAC,YAAY,CAAC,kBAAkB,EAAE,UAAG,IAAI,CAAC,MAAM,CAAE,CAAC,CAAC;YAChE,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACnC,CAAC;IACH,CAAC;IAEO,wCAAc,GAAtB;;QACE,IAAM,sBAAsB,GAAG,IAAI,CAAC,OAAO,CAAC,YAAsC,CAAC;QAEnF,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;QACD,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,MAAK,MAAA,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,0CAAE,IAAI,CAAA,EAAE,CAAC;YACnG,MAAA,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,0CAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAExE,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;gBAC5B,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAC3D,CAAC;YACD,IAAI,sBAAsB,CAAC,YAAY,EAAE,CAAC;gBACxC,sBAAsB,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YAC5E,CAAC;QACH,CAAC;IACH,CAAC;IAEO,0CAAgB,GAAxB;QACE,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;IACH,CAAC;IAEO,0CAAgB,GAAxB;QACE,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;YACtD,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAE5D,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;gBAC5B,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;YAC9C,CAAC;YAED,IAAM,sBAAsB,GAAG,IAAI,CAAC,OAAO,CAAC,YAAsC,CAAC;YACnF,IAAI,sBAAsB,CAAC,YAAY,EAAE,CAAC;gBACxC,sBAAsB,CAAC,YAAY,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACzE,CAAC;QACH,CAAC;IACH,CAAC;IA9Ga,mCAAmB,GAAG,iBAAiB,AAApB,CAAqB;IACxC,2BAAW,GAAG,iBAAiB,AAApB,CAAqB;IAEhC,2BAAW,GAAG,wBAAwB,AAA3B,CAA4B;IAGtC,yBAAS,GAAG,cAAM,OAAA,WAAW,EAAE,EAAb,CAAa,AAAtB,CAAuB;IAC/C,sBAAsB;IACC,+BAAe,GAAG,IAAI,AAAP,CAAQ;IAuGhD,sBAAC;CAAA,AAhHD,CAAqC,KAAK,CAAC,SAAS,GAgHnD;SAhHY,eAAe","sourcesContent":["import React from 'react';\n\nimport { callChildRef } from '../../lib/callChildRef/callChildRef.js';\nimport { RenderEnvironmentContext } from '../../lib/renderEnvironment/index.js';\nimport type { RenderEnvironmentContextType } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode } from '../../lib/rootNode/rootNodeDecorator.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { getThemeSetTokens, getThemeVars, ThemeCarrierContext } from '../../lib/theming/themeVars.js';\nimport { Upgrade } from '../../lib/Upgrades.js';\nimport { getRandomID } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { RenderContainerProps } from './RenderContainerTypes.js';\nimport { RenderInnerContainer } from './RenderInnerContainer.js';\n\ninterface GlobalWithReactTesting {\n ReactTesting?: any;\n}\n\nexport const PORTAL_INLET_ATTR = 'data-render-container-id';\nexport const PORTAL_OUTLET_ATTR = 'data-rendered-container-id';\n\nexport class RenderContainer extends React.Component<RenderContainerProps> {\n public static __KONTUR_REACT_UI__ = 'RenderContainer';\n public static displayName = 'RenderContainer';\n\n public static contextType = RenderEnvironmentContext;\n public context!: RenderEnvironmentContextType;\n\n private static getRootId = () => getRandomID();\n // see #2873 and #2895\n public static readonly defaultRootNode = null;\n private domContainer: Nullable<HTMLElement> = RenderContainer.defaultRootNode;\n\n private readonly rootId: string = RenderContainer.getRootId();\n\n public getRootNode: TGetRootNode = (): Nullable<Element> => this.domContainer;\n\n public shouldComponentUpdate(nextProps: RenderContainerProps) {\n if (!this.props.children && nextProps.children) {\n this.mountContainer();\n }\n if (this.props.children && !nextProps.children) {\n this.unmountContainer();\n }\n return true;\n }\n\n public componentWillUnmount() {\n this.destroyContainer();\n }\n\n public render() {\n if (this.props.children) {\n this.mountContainer();\n }\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.applyThemeVars(getThemeVars(theme), getThemeSetTokens(theme));\n // портал живёт в body: переменные считаются от темы по умолчанию, для содержимого носитель — контейнер\n return (\n <ThemeCarrierContext.Provider value={theme}>\n <RenderInnerContainer {...this.props} domContainer={this.domContainer} rootId={this.rootId} />\n </ThemeCarrierContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private applyThemeVars(vars: React.CSSProperties, setTokens: string) {\n const container = this.domContainer;\n if (!container) {\n return;\n }\n container.removeAttribute('style');\n if (setTokens) {\n container.setAttribute('data-k-set', setTokens);\n } else {\n container.removeAttribute('data-k-set');\n }\n Object.entries(vars).forEach(([name, value]) => container.style.setProperty(name, String(value)));\n }\n\n private createContainer() {\n const domContainer = this.context.globalObject.document?.createElement('div');\n if (domContainer) {\n domContainer.setAttribute('class', Upgrade.getSpecificityClassName());\n domContainer.setAttribute(PORTAL_OUTLET_ATTR, `${this.rootId}`);\n this.domContainer = domContainer;\n }\n }\n\n private mountContainer() {\n const globalWithReactTesting = this.context.globalObject as GlobalWithReactTesting;\n\n if (!this.domContainer) {\n this.createContainer();\n }\n if (this.domContainer && this.domContainer.parentNode !== this.context.globalObject.document?.body) {\n this.context.globalObject.document?.body.appendChild(this.domContainer);\n\n if (this.props.containerRef) {\n callChildRef(this.props.containerRef, this.domContainer);\n }\n if (globalWithReactTesting.ReactTesting) {\n globalWithReactTesting.ReactTesting.addRenderContainer(this.rootId, this);\n }\n }\n }\n\n private destroyContainer() {\n if (this.domContainer) {\n this.unmountContainer();\n this.domContainer = null;\n }\n }\n\n private unmountContainer() {\n if (this.domContainer && this.domContainer.parentNode) {\n this.domContainer.parentNode.removeChild(this.domContainer);\n\n if (this.props.containerRef) {\n callChildRef(this.props.containerRef, null);\n }\n\n const globalWithReactTesting = this.context.globalObject as GlobalWithReactTesting;\n if (globalWithReactTesting.ReactTesting) {\n globalWithReactTesting.ReactTesting.removeRenderContainer(this.rootId);\n }\n }\n }\n}\n"]}

package/internal/RenderContainer/RenderInnerContainer.js CHANGED Viewed

@@ -15,7 +15,6 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { DeclaredThemeContext, RootDeclaredThemeContext } from '../../lib/theming/declaredTheme.js';
 import { PORTAL_INLET_ATTR } from './RenderContainer.js';
 var KONTUR_COLORS_ATTRIBUTES = ['data-k-brand', 'data-k-accent', 'data-k-theme'];
 // Заглушка нужна для корректной гидрации порталов после SSR,
@@ -75,9 +74,8 @@ var RenderInnerContainer = /** @class */ (function (_super) {
         if (children) {
             inner = (React.createElement(React.Fragment, null,
                 anchor,
-                React.createElement(Portal, { key: "portal-ref", rt_rootID: rootId, container: domContainer },
-                    React.createElement(RootDeclaredThemeContext.Consumer, null, function (root) { return React.createElement(DeclaredThemeContext.Provider, { value: root }, children); })),
-                React.createElement("span", { ref: this.kColorsCheckerRef, hidden: true })));
+                React.createElement(Portal, { key: "portal-ref", rt_rootID: rootId, container: domContainer }, children),
+                React.createElement("span", { ref: this.kColorsCheckerRef, style: { display: 'none' } })));
         }
         return inner;
     };

package/internal/RenderContainer/RenderInnerContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RenderInnerContainer.js","sourceRoot":"","sources":["RenderInnerContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,WAAW,CAAC;~~AAEjC~~,OAAO,EAAE,~~oBAAoB,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAEpG,OAAO,EAAE,~~iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,IAAM,wBAAwB,GAAG,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC,CAAC;AAOnF,6DAA6D;AAC7D,0CAA0C;AAC1C,sDAAsD;AACtD,kEAAkE;AAClE,EAAE;AACF,+DAA+D;AAC/D,2DAA2D;AAC3D,6DAA6D;AAC7D,iEAAiE;AACjE,mEAAmE;AACnE,kEAAkE;AAClE,EAAE;AACF,8DAA8D;AAC9D,4DAA4D;AAC5D,4DAA4D;AAC5D,yCAAyC;AACzC,4DAA4D;AAE5D,IAAM,cAAc,GAAG,cAAM,OAAA,2CAAgB,iBAAiB,GAAG,EAApC,CAAoC,CAAC;AAElE,MAAM,CAAC,IAAM,MAAM,GAAG,UAAC,EAA+C;;QAA7C,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA;IACrD,mCAAmC;IACnC,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ;QACZ,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,oBAAC,cAAc,OAAG;QAC3E,SAAS,CAAC,CAAC,CAAC,0CAAgB,GAAC,iBAAiB,IAAG,SAAS,MAAM,CAAC,CAAC,CAAC,oBAAC,cAAc,OAAG,CACvE,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF;IAA0C,wCAA0C;IAApF;;QAIU,uBAAiB,GAAG,KAAK,CAAC,SAAS,EAAmB,CAAC;;~~IA8DjE~~,CAAC;~~IA5DQ~~,gDAAiB,GAAxB;QACE,IAAI,CAAC,2BAA2B,EAAE,CAAC;IACrC,CAAC;IAEM,iDAAkB,GAAzB;QACE,IAAI,CAAC,2BAA2B,EAAE,CAAC;IACrC,CAAC;IAEO,0DAA2B,GAAnC;;QACU,IAAA,YAAY,GAAK,IAAI,CAAC,KAAK,aAAf,CAAgB;QACpC,IAAM,MAAM,GAAG,MAAA,IAAI,CAAC,iBAAiB,CAAC,OAAO,0CAAE,OAAO,CACpD,wBAAwB,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,WAAI,CAAC,MAAG,EAAR,CAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACxD,CAAC;QAEF,KAAwB,UAAwB,EAAxB,qDAAwB,EAAxB,sCAAwB,EAAxB,IAAwB,EAAE,CAAC;YAA9C,IAAM,SAAS,iCAAA;YAClB,IAAM,KAAK,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,YAAY,CAAC,SAAS,CAAC,CAAC;YAC9C,IAAI,KAAK,EAAE,CAAC;gBACV,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;YAC/C,CAAC;QACH,CAAC;IACH,CAAC;IAEM,qCAAM,GAAb;QACQ,IAAA,KAA6C,IAAI,CAAC,KAAK,EAArD,MAAM,YAAA,EAAE,QAAQ,cAAA,EAAE,YAAY,kBAAA,EAAE,MAAM,YAAe,CAAC;QAC9D,IAAI,KAAK,GAAG,MAAM,CAAC;QAEnB,IAAI,QAAQ,EAAE,CAAC;YACb,KAAK,GAAG,CACN,oBAAC,KAAK,CAAC,QAAQ;gBACZ,MAAM;gBACP,oBAAC,MAAM,IAAC,GAAG,EAAC,YAAY,EAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY~~;oBAcjE~~,~~oBAAC~~,~~wBAAwB~~,~~CAAC~~,~~QAAQ~~,~~QAC/B~~,~~UAAC~~,IAAI,~~IAAK,OAAA,oBAAC,oBAAoB,~~CAAC,~~QAAQ~~,~~IAAC~~,KAAK,EAAE,~~IAAI~~,~~IAAG~~,~~QAAQ,CAAiC,EAAtF,CAAsF,CAC/D,CAC7B;gBAMT,8BAAM,GAAG,~~EAAE,~~IAAI~~,~~CAAC,iBAAiB,~~EAAE,~~MAAM~~,~~SAAG~~,~~CAC7B,~~CAClB,CAAC;QACJ,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC;~~IAhEa~~,wCAAmB,GAAG,sBAAsB,AAAzB,CAA0B;IAC7C,gCAAW,GAAG,sBAAsB,AAAzB,CAA0B;~~IAgErD~~,2BAAC;CAAA,~~AAlED~~,CAA0C,KAAK,CAAC,SAAS,~~GAkExD~~;~~SAlEY~~,oBAAoB;~~AAoEjC~~,MAAM,CAAC,mBAAmB,GAAG,QAAQ,CAAC;AACtC,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport ~~{ DeclaredThemeContext, RootDeclaredThemeContext } from '../../lib/theming/declaredTheme.js';\nimport~~ type { Nullable } from '../../typings/utility-types.js';\nimport { PORTAL_INLET_ATTR } from './RenderContainer.js';\nimport type { PortalProps, RenderContainerProps } from './RenderContainerTypes.js';\n\nconst KONTUR_COLORS_ATTRIBUTES = ['data-k-brand', 'data-k-accent', 'data-k-theme'];\n\ninterface RenderInnerContainerProps extends RenderContainerProps {\n domContainer: Nullable<HTMLElement>;\n rootId: string;\n}\n\n// Заглушка нужна для корректной гидрации порталов после SSR,\n// которую реакт сам пока не поддерживает.\n// @see https://github.com/facebook/react/issues/13097\n// А также для вставки актуального render-container-id на клиенте.\n//\n// Дело в том, что во время гидрации, структура HTML на сервере\n// и на клиенте должна совпадать, иначе возможны артефакты.\n// Алгоритм там примерно такой. Клиент во время гидрации идет\n// по этим двум деревьям и сравнивает узлы. Элементы разных типов\n// он подменяет на свои. А те, что совпадают, он оставляет как есть\n// вместе со всеми атрибутами, навесив только обработчики событий.\n//\n// Поэтому, для портала, который рендерится только на клиенте,\n// нужно использовать серверную заглушку, чтобы при гидрации\n// он не испортил какой-то другой элемент. Null не подходит,\n// т.к. на сервере он тоже не рендерится.\n// А элемент с render-container-id нужно отрендерить с нуля.\n\nconst SSRPlaceholder = () => <script data-id=\"ssr-placeholder\" />;\n\nexport const Portal = ({ container, rt_rootID, children }: PortalProps) => {\n // container exists only in browser\n return (\n <React.Fragment>\n {container ? ReactDOM.createPortal(children, container) : <SSRPlaceholder />}\n {container ? <noscript {...{ [PORTAL_INLET_ATTR]: rt_rootID }} /> : <SSRPlaceholder />}\n </React.Fragment>\n );\n};\n\nexport class RenderInnerContainer extends React.Component<RenderInnerContainerProps> {\n public static __KONTUR_REACT_UI__ = 'RenderInnerContainer';\n public static displayName = 'RenderInnerContainer';\n\n private kColorsCheckerRef = React.createRef<HTMLSpanElement>();\n\n public componentDidMount() {\n this.applyKonturColorsAttributes();\n }\n\n public componentDidUpdate() {\n this.applyKonturColorsAttributes();\n }\n\n private applyKonturColorsAttributes() {\n const { domContainer } = this.props;\n const source = this.kColorsCheckerRef.current?.closest<HTMLElement>(\n KONTUR_COLORS_ATTRIBUTES.map((x) => `[${x}]`).join(','),\n );\n\n for (const attribute of KONTUR_COLORS_ATTRIBUTES) {\n const value = source?.getAttribute(attribute);\n if (value) {\n domContainer?.setAttribute(attribute, value);\n }\n }\n }\n\n public render() {\n const { anchor, children, domContainer, rootId } = this.props;\n let inner = anchor;\n\n if (children) {\n inner = (\n <React.Fragment>\n {anchor}\n <Portal key=\"portal-ref\" rt_rootID={rootId} container={domContainer}>\n {/\n Внутри портала действует КОРНЕВАЯ тема, а не тема предка: контейнер\n портала висит у `body`, то есть вне того места DOM, где стоял\n носитель переменных. Поэтому значение не переносится, а сбрасывается\n к корневому — иначе первый же `CommonWrapper` в поддереве решил бы,\n что его тема уже объявлена выше, и не напечатал бы носитель. Это\n ловушка 3 эпика: 33 скриншота из 36.\n\n Через React, а не через атрибуты DOM, как это делает\n `applyKonturColorsAttributes` для `data-k-`: тот работает в\n `componentDidMount`, то есть кадром позже, и на сервере не\n существует вовсе.\n /}\n ~~<RootDeclaredThemeContext.Consumer~~>\n ~~{(root) =>~~ <~~DeclaredThemeContext.Provider~~ ~~value~~={~~root}>{children}</DeclaredThemeContext~~.~~Provider>~~}~~\n </RootDeclaredThemeContext.Consumer>\n </Portal>\n~~ {~~/\n Щуп~~ ~~прячется атрибутом `hidden`, а не инлайновым `~~display: ~~none`:\n под `style-src-attr~~ 'none'` ~~объявление из серверной разметки не\n применяется, а `hidden` — часть HTML и работает всегда.\n */~~}~~\n <span ref={this.kColorsCheckerRef~~} ~~hidden~~ />\n </React.Fragment>\n );\n }\n\n return inner;\n }\n}\n\nPortal.__KONTUR_REACT_UI__ = 'Portal';\nPortal.displayName = 'Portal';\n"]}
1	+ {"version":3,"file":"RenderInnerContainer.js","sourceRoot":"","sources":["RenderInnerContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { PORTAL_INLET_ATTR } from './RenderContainer.js';\nimport type { PortalProps, RenderContainerProps } from './RenderContainerTypes.js';\n\nconst KONTUR_COLORS_ATTRIBUTES = ['data-k-brand', 'data-k-accent', 'data-k-theme'];\n\ninterface RenderInnerContainerProps extends RenderContainerProps {\n domContainer: Nullable<HTMLElement>;\n rootId: string;\n}\n\n// Заглушка нужна для корректной гидрации порталов после SSR,\n// которую реакт сам пока не поддерживает.\n// @see https://github.com/facebook/react/issues/13097\n// А также для вставки актуального render-container-id на клиенте.\n//\n// Дело в том, что во время гидрации, структура HTML на сервере\n// и на клиенте должна совпадать, иначе возможны артефакты.\n// Алгоритм там примерно такой. Клиент во время гидрации идет\n// по этим двум деревьям и сравнивает узлы. Элементы разных типов\n// он подменяет на свои. А те, что совпадают, он оставляет как есть\n// вместе со всеми атрибутами, навесив только обработчики событий.\n//\n// Поэтому, для портала, который рендерится только на клиенте,\n// нужно использовать серверную заглушку, чтобы при гидрации\n// он не испортил какой-то другой элемент. Null не подходит,\n// т.к. на сервере он тоже не рендерится.\n// А элемент с render-container-id нужно отрендерить с нуля.\n\nconst SSRPlaceholder = () => <script data-id=\"ssr-placeholder\" />;\n\nexport const Portal = ({ container, rt_rootID, children }: PortalProps) => {\n // container exists only in browser\n return (\n <React.Fragment>\n {container ? ReactDOM.createPortal(children, container) : <SSRPlaceholder />}\n {container ? <noscript {...{ [PORTAL_INLET_ATTR]: rt_rootID }} /> : <SSRPlaceholder />}\n </React.Fragment>\n );\n};\n\nexport class RenderInnerContainer extends React.Component<RenderInnerContainerProps> {\n public static __KONTUR_REACT_UI__ = 'RenderInnerContainer';\n public static displayName = 'RenderInnerContainer';\n\n private kColorsCheckerRef = React.createRef<HTMLSpanElement>();\n\n public componentDidMount() {\n this.applyKonturColorsAttributes();\n }\n\n public componentDidUpdate() {\n this.applyKonturColorsAttributes();\n }\n\n private applyKonturColorsAttributes() {\n const { domContainer } = this.props;\n const source = this.kColorsCheckerRef.current?.closest<HTMLElement>(\n KONTUR_COLORS_ATTRIBUTES.map((x) => `[${x}]`).join(','),\n );\n\n for (const attribute of KONTUR_COLORS_ATTRIBUTES) {\n const value = source?.getAttribute(attribute);\n if (value) {\n domContainer?.setAttribute(attribute, value);\n }\n }\n }\n\n public render() {\n const { anchor, children, domContainer, rootId } = this.props;\n let inner = anchor;\n\n if (children) {\n inner = (\n <React.Fragment>\n {anchor}\n <Portal key=\"portal-ref\" rt_rootID={rootId} container={domContainer}>\n {children}\n </Portal>\n <span ref={this.kColorsCheckerRef} style={{ display: 'none' }} />\n </React.Fragment>\n );\n }\n\n return inner;\n }\n}\n\nPortal.__KONTUR_REACT_UI__ = 'Portal';\nPortal.displayName = 'Portal';\n"]}

package/internal/ResizeDetector/ResizeDetector.css.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export declare const getStyles: import("../../lib/theming/StaticStyles.js").StylesGetter<{
+    root(): string;
+    iframe(): string;
+    content(): string;
+    fullHeight(): string;
+    flex(): string;
+}>;

package/internal/ResizeDetector/ResizeDetector.css.js ADDED Viewed

@@ -0,0 +1,3 @@
+import { bindStaticStyles as _b9cd9 } from '../../lib/theming/bindStaticStyles.js';
+export var getStyles = _b9cd9({root:'react-ui-ResizeDetector__root',iframe:'react-ui-ResizeDetector__iframe',content:'react-ui-ResizeDetector__content',fullHeight:'react-ui-ResizeDetector__fullHeight',flex:'react-ui-ResizeDetector__flex'});

package/internal/ResizeDetector/ResizeDetector.css.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ResizeDetector.css.js","sourceRoot":"","sources":["ResizeDetector.css.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE3F,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,2HAAA,wDAGT,KAAC;QACJ,CAAC;QAED,MAAM;YACJ,OAAO,GAAG,wRAAA,qNAWT,KAAC;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,sGAAA,mCAET,KAAC;QACJ,CAAC;QAED,UAAU;YACR,OAAO,GAAG,gGAAA,6BAET,KAAC;QACJ,CAAC;QAED,IAAI;YACF,OAAO,GAAG,iGAAA,8BAET,KAAC;QACJ,CAAC;KACF,CAAC;AAxC8D,CAwC9D,CAAC,CAAC;AAEJ,oBAAoB,EAAE,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { finalizeStaticStyles, memoizeGetStyles } from '../../lib/theming/StaticStyles.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root() {\n return css`\n position: relative;\n height: 100%;\n `;\n },\n\n iframe() {\n return css`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n border: 0;\n background: transparent;\n opacity: 0;\n `;\n },\n\n content() {\n return css`\n position: relative;\n `;\n },\n\n fullHeight() {\n return css`\n height: 100%;\n `;\n },\n\n flex() {\n return css`\n display: flex;\n `;\n },\n}));\n\nfinalizeStaticStyles();\n"]}

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

@@ -9,6 +9,7 @@ export declare class ResizeDetector extends React.Component<React.PropsWithChild
     static displayName: string;
     private iframeWindow;
     private styles;
+    private emotion;
     private cx;
     componentDidMount(): void;
     render(): React.JSX.Element;

package/internal/ResizeDetector/ResizeDetector.js CHANGED Viewed

@@ -21,7 +21,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import React from 'react';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
-import { getStyles } from './ResizeDetector.styles.js';
+import { getStyles } from './ResizeDetector.css.js';
 var ResizeDetector = /** @class */ (function (_super) {
     __extends(ResizeDetector, _super);
     function ResizeDetector() {
@@ -46,7 +46,7 @@ var ResizeDetector = /** @class */ (function (_super) {
     };
     ResizeDetector.prototype.render = function () {
         var _a;
-        this.styles = getStyles();
+        this.styles = getStyles(this.emotion);
         return (React.createElement("div", { className: this.styles.root() },
             React.createElement("iframe", { title: "resizeDetector", ref: this.iframeRef, className: this.styles.iframe(), tabIndex: -1 }),
             React.createElement("div", { className: this.cx((_a = {},

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ResizeDetector.js","sourceRoot":"","sources":["ResizeDetector.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;~~AAAA~~,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;~~AAE7E~~,OAAO,EAAE,SAAS,EAAE,MAAM,~~4BAA4B~~,CAAC;~~AASvD~~;IAAoC,kCAA6D;IAAjG;;QAIU,kBAAY,GAAkB,IAAI,CAAC;~~QA6BnC~~,kBAAY,GAAG,UAAC,KAAc;YACpC,IAAI,KAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACxB,KAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC,CAAC;QAEM,eAAS,GAAG,UAAC,MAAyB;YAC5C,IAAI,MAAM,IAAI,MAAM,CAAC,aAAa,EAAE,CAAC;gBACnC,KAAI,CAAC,YAAY,GAAG,MAAM,CAAC,aAAa,CAAC;YAC3C,CAAC;QACH,CAAC,CAAC;;IACJ,CAAC;IApCQ,0CAAiB,GAAxB;QACE,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAEM,+BAAM,GAAb;;QACE,IAAI,CAAC,MAAM,GAAG,SAAS,~~EAAE~~,CAAC;~~QAE1B~~,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAChC,gCAAQ,KAAK,EAAC,gBAAgB,EAAC,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,GAAI;YACrG,6BACE,SAAS,EAAE,IAAI,CAAC,EAAE;oBAChB,GAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAG,IAAI;oBAC7B,GAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,IAAG,IAAI,CAAC,KAAK,CAAC,UAAU;oBACjD,GAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAAG,IAAI,CAAC,KAAK,CAAC,aAAa;wBAC9C,IAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACF,CACP,CAAC;IACJ,CAAC;~~IA9Ba~~,kCAAmB,GAAG,gBAAgB,AAAnB,CAAoB;IACvC,0BAAW,GAAG,gBAAgB,AAAnB,CAAoB;IAFlC,cAAc;QAD1B,qBAAqB;OACT,cAAc,~~CA4C1B~~;IAAD,qBAAC;CAAA,~~AA5CD~~,CAAoC,KAAK,CAAC,SAAS,~~GA4ClD~~;~~SA5CY~~,cAAc","sourcesContent":["import ~~React~~ from '~~react~~';\n\nimport { ~~withRenderEnvironment }~~ from '~~../../lib/renderEnvironment/index.js~~';\nimport ~~type~~ { ~~ClassNames~~ } from '../../lib/~~theming~~/~~Emotion~~.js';\nimport { getStyles } from './ResizeDetector.~~styles~~.js';\n\nexport interface ResizeDetectorProps {\n onResize?: (event: UIEvent) => void;\n fullHeight?: boolean;\n alignBaseline?: boolean;\n}\n\n@withRenderEnvironment\nexport class ResizeDetector extends React.Component<React.PropsWithChildren<ResizeDetectorProps>> {\n public static __KONTUR_REACT_UI__ = 'ResizeDetector';\n public static displayName = 'ResizeDetector';\n\n private iframeWindow: Window \| null = null;\n private styles!: ReturnType<typeof getStyles>;\n private cx!: ~~ClassNames~~;\n\n public componentDidMount() {\n if (this.iframeWindow) {\n this.iframeWindow.addEventListener('resize', this.handleResize);\n }\n }\n\n public render() {\n this.styles = getStyles();\n\n return (\n <div className={this.styles.root()}>\n <iframe title=\"resizeDetector\" ref={this.iframeRef} className={this.styles.iframe()} tabIndex={-1} />\n <div\n className={this.cx({\n [this.styles.content()]: true,\n [this.styles.fullHeight()]: this.props.fullHeight,\n [this.styles.flex()]: this.props.alignBaseline,\n })}\n >\n {this.props.children}\n </div>\n </div>\n );\n }\n\n private handleResize = (event: UIEvent) => {\n if (this.props.onResize) {\n this.props.onResize(event);\n }\n };\n\n private iframeRef = (iframe: HTMLIFrameElement) => {\n if (iframe && iframe.contentWindow) {\n this.iframeWindow = iframe.contentWindow;\n }\n };\n}\n"]}
1	+ {"version":3,"file":"ResizeDetector.js","sourceRoot":"","sources":["ResizeDetector.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AASpD;IAAoC,kCAA6D;IAAjG;;QAIU,kBAAY,GAAkB,IAAI,CAAC;QA8BnC,kBAAY,GAAG,UAAC,KAAc;YACpC,IAAI,KAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACxB,KAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC,CAAC;QAEM,eAAS,GAAG,UAAC,MAAyB;YAC5C,IAAI,MAAM,IAAI,MAAM,CAAC,aAAa,EAAE,CAAC;gBACnC,KAAI,CAAC,YAAY,GAAG,MAAM,CAAC,aAAa,CAAC;YAC3C,CAAC;QACH,CAAC,CAAC;;IACJ,CAAC;IApCQ,0CAAiB,GAAxB;QACE,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAEM,+BAAM,GAAb;;QACE,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAChC,gCAAQ,KAAK,EAAC,gBAAgB,EAAC,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,GAAI;YACrG,6BACE,SAAS,EAAE,IAAI,CAAC,EAAE;oBAChB,GAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAG,IAAI;oBAC7B,GAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,IAAG,IAAI,CAAC,KAAK,CAAC,UAAU;oBACjD,GAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAAG,IAAI,CAAC,KAAK,CAAC,aAAa;wBAC9C,IAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACF,CACP,CAAC;IACJ,CAAC;IA/Ba,kCAAmB,GAAG,gBAAgB,AAAnB,CAAoB;IACvC,0BAAW,GAAG,gBAAgB,AAAnB,CAAoB;IAFlC,cAAc;QAD1B,qBAAqB;OACT,cAAc,CA6C1B;IAAD,qBAAC;CAAA,AA7CD,CAAoC,KAAK,CAAC,SAAS,GA6ClD;SA7CY,cAAc","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\n\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport { getStyles } from './ResizeDetector.css.js';\n\nexport interface ResizeDetectorProps {\n onResize?: (event: UIEvent) => void;\n fullHeight?: boolean;\n alignBaseline?: boolean;\n}\n\n@withRenderEnvironment\nexport class ResizeDetector extends React.Component<React.PropsWithChildren<ResizeDetectorProps>> {\n public static __KONTUR_REACT_UI__ = 'ResizeDetector';\n public static displayName = 'ResizeDetector';\n\n private iframeWindow: Window \| null = null;\n private styles!: ReturnType<typeof getStyles>;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n\n public componentDidMount() {\n if (this.iframeWindow) {\n this.iframeWindow.addEventListener('resize', this.handleResize);\n }\n }\n\n public render() {\n this.styles = getStyles(this.emotion);\n\n return (\n <div className={this.styles.root()}>\n <iframe title=\"resizeDetector\" ref={this.iframeRef} className={this.styles.iframe()} tabIndex={-1} />\n <div\n className={this.cx({\n [this.styles.content()]: true,\n [this.styles.fullHeight()]: this.props.fullHeight,\n [this.styles.flex()]: this.props.alignBaseline,\n })}\n >\n {this.props.children}\n </div>\n </div>\n );\n }\n\n private handleResize = (event: UIEvent) => {\n if (this.props.onResize) {\n this.props.onResize(event);\n }\n };\n\n private iframeRef = (iframe: HTMLIFrameElement) => {\n if (iframe && iframe.contentWindow) {\n this.iframeWindow = iframe.contentWindow;\n }\n };\n}\n"]}

package/internal/SpinnerIcon/SpinnerIcon.css.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export declare const getStyles: import("../../lib/theming/StaticStyles.js").StylesGetter<{
+    root(): string;
+    rootInline(): string;
+    icon(): string;
+    iconInline(): string;
+}>;

package/internal/SpinnerIcon/SpinnerIcon.css.js ADDED Viewed

@@ -0,0 +1,3 @@
+import { bindStaticStyles as _b9cd9 } from '../../lib/theming/bindStaticStyles.js';
+export var getStyles = _b9cd9({root:'react-ui-SpinnerIcon__root',rootInline:'react-ui-SpinnerIcon__rootInline',icon:'react-ui-SpinnerIcon__icon',iconInline:'react-ui-SpinnerIcon__iconInline'});

package/internal/SpinnerIcon/SpinnerIcon.css.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SpinnerIcon.css.js","sourceRoot":"","sources":["SpinnerIcon.css.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE3F,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,8JAAA,2FAIT,KAAC;QACJ,CAAC;QACD,UAAU;YACR,OAAO,GAAG,kKAAA,+FAGT,KAAC;QACJ,CAAC;QAED,IAAI;YACF,OAAO,GAAG,4JAAA,yFAIT,KAAC;QACJ,CAAC;QAED,UAAU;YACR,OAAO,GAAG,6OAAA,0KAKT,KAAC;QACJ,CAAC;KACF,CAAC;AA/B8D,CA+B9D,CAAC,CAAC;AAEJ,oBAAoB,EAAE,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { finalizeStaticStyles, memoizeGetStyles } from '../../lib/theming/StaticStyles.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root() {\n return css`\n display: inline-block;\n margin-left: -1px;\n margin-right: -1px;\n `;\n },\n rootInline() {\n return css`\n margin-left: -0.0714285714285714em;\n margin-right: -0.0714285714285714em;\n `;\n },\n\n icon() {\n return css`\n margin-bottom: -3px;\n border-radius: 50%;\n overflow: visible;\n `;\n },\n\n iconInline() {\n return css`\n height: 1.1428571428571428em;\n width: 1.1428571428571428em;\n margin-bottom: -0.2428571428571428em;\n stroke-width: 0.10714285714285714em;\n `;\n },\n}));\n\nfinalizeStaticStyles();\n"]}

package/internal/SpinnerIcon/SpinnerIcon.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import React from 'react';
-import { useStyles } from '../../lib/renderEnvironment/index.js';
-import { concatClassNames as cx } from '../../lib/theming/Emotion.js';
-import { getStyles } from './SpinnerIcon.styles.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { getStyles } from './SpinnerIcon.css.js';
 export var sizes = {
     large: {
         size: 96,
@@ -27,6 +26,7 @@ export var SpinnerIcon = function (_a) {
     var size = _a.size, className = _a.className, inline = _a.inline, width = _a.width, color = _a.color;
     var _size = isSizeAlias(size) ? sizes[size] : size;
     var currentSize = inline ? sizes.small : _size;
+    var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
     return (React.createElement("span", { className: cx(styles.root(), (_b = {}, _b[styles.rootInline()] = inline, _b)) },
         React.createElement("svg", { viewBox: "0 0 ".concat(currentSize.size, " ").concat(currentSize.size), className: cx(styles.icon(), className, (_c = {},

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SpinnerIcon.js","sourceRoot":"","sources":["SpinnerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,~~SAAS~~,EAAE,~~MAAM~~,~~sCAAsC,CAAC;AACjE,OAAO,~~EAAE,~~gBAAgB,IAAI,EAAE,EAAE,~~MAAM,~~8BAA8B~~,CAAC;~~AACtE~~,OAAO,EAAE,SAAS,EAAE,MAAM,~~yBAAyB~~,CAAC;~~AAgBpD~~,MAAM,CAAC,IAAM,KAAK,GAAG;IACnB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,EAAE;KACX;IACD,MAAM,EAAE;QACN,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,EAAE;KACX;IACD,KAAK,EAAE;QACL,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,CAAC;KACV;CACO,CAAC;AAEX,IAAM,WAAW,GAAG,UAAC,IAAa;IAChC,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC;AACnD,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAA2D;;QAAzD,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA;IACjE,IAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,IAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;~~IAEjD~~,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC,OAAO,CACL,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,YAAI,GAAC,MAAM,CAAC,UAAU,EAAE,IAAG,MAAM,MAAG;QACnE,6BACE,OAAO,EAAE,cAAO,WAAW,CAAC,IAAI,cAAI,WAAW,CAAC,IAAI,CAAE,EACtD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,SAAS;gBACpC,GAAC,MAAM,CAAC,UAAU,EAAE,IAAG,MAAM;oBAC7B,EACF,KAAK,EAAE,WAAW,CAAC,IAAI,EACvB,MAAM,EAAE,WAAW,CAAC,IAAI,EACxB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,KAAK,EACb,eAAe,EAAE,UAAG,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,eAAK,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAE,EACrF,gBAAgB,EAAC,GAAG,EACpB,WAAW,EAAE,KAAK,IAAI,WAAW,CAAC,KAAK,EACvC,SAAS,EAAC,OAAO,iBACL,MAAM;YAElB,gCAAQ,EAAE,EAAE,WAAW,CAAC,IAAI,GAAG,CAAC,EAAE,EAAE,EAAE,WAAW,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM,GAAI,CACjF,CACD,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ~~concatClassNames as cx } from '../../lib/theming/Emotion.js';\nimport {~~ getStyles } from './SpinnerIcon.~~styles~~.js';\n\ninterface SpinnerIconSize {\n size: number;\n width: number;\n radius: number;\n}\n\nexport interface SpinnerIconProps {\n className?: string;\n size: SpinnerIconSize \| keyof typeof sizes;\n inline?: boolean;\n width?: number;\n color?: React.CSSProperties['color'];\n}\n\nexport const sizes = {\n large: {\n size: 96,\n width: 4,\n radius: 32,\n },\n medium: {\n size: 48,\n width: 2,\n radius: 16,\n },\n small: {\n size: 16,\n width: 1.5,\n radius: 6,\n },\n} as const;\n\nconst isSizeAlias = (size: unknown): size is keyof typeof sizes => {\n return typeof size === 'string' && size in sizes;\n};\n\nexport const SpinnerIcon = ({ size, className, inline, width, color }: SpinnerIconProps) => {\n const _size = isSizeAlias(size) ? sizes[size] : size;\n const currentSize = inline ? sizes.small : _size;\n\n const styles = useStyles(getStyles);\n\n return (\n <span className={cx(styles.root(), { [styles.rootInline()]: inline })}>\n <svg\n viewBox={`0 0 ${currentSize.size} ${currentSize.size}`}\n className={cx(styles.icon(), className, {\n [styles.iconInline()]: inline,\n })}\n width={currentSize.size}\n height={currentSize.size}\n fill=\"none\"\n stroke={color}\n strokeDasharray={`${(10 * currentSize.radius) / 6}, ${(27 * currentSize.radius) / 6}`}\n strokeDashoffset=\"0\"\n strokeWidth={width \|\| currentSize.width}\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <circle cx={currentSize.size / 2} cy={currentSize.size / 2} r={currentSize.radius} />\n </svg>\n </span>\n );\n};\n"]}
1	+ {"version":3,"file":"SpinnerIcon.js","sourceRoot":"","sources":["SpinnerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAgBjD,MAAM,CAAC,IAAM,KAAK,GAAG;IACnB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,EAAE;KACX;IACD,MAAM,EAAE;QACN,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,EAAE;KACX;IACD,KAAK,EAAE;QACL,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,CAAC;KACV;CACO,CAAC;AAEX,IAAM,WAAW,GAAG,UAAC,IAAa;IAChC,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC;AACnD,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAA2D;;QAAzD,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA;IACjE,IAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,IAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC,OAAO,CACL,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,YAAI,GAAC,MAAM,CAAC,UAAU,EAAE,IAAG,MAAM,MAAG;QACnE,6BACE,OAAO,EAAE,cAAO,WAAW,CAAC,IAAI,cAAI,WAAW,CAAC,IAAI,CAAE,EACtD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,SAAS;gBACpC,GAAC,MAAM,CAAC,UAAU,EAAE,IAAG,MAAM;oBAC7B,EACF,KAAK,EAAE,WAAW,CAAC,IAAI,EACvB,MAAM,EAAE,WAAW,CAAC,IAAI,EACxB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,KAAK,EACb,eAAe,EAAE,UAAG,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,eAAK,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAE,EACrF,gBAAgB,EAAC,GAAG,EACpB,WAAW,EAAE,KAAK,IAAI,WAAW,CAAC,KAAK,EACvC,SAAS,EAAC,OAAO,iBACL,MAAM;YAElB,gCAAQ,EAAE,EAAE,WAAW,CAAC,IAAI,GAAG,CAAC,EAAE,EAAE,EAAE,WAAW,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM,GAAI,CACjF,CACD,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { getStyles } from './SpinnerIcon.css.js';\n\ninterface SpinnerIconSize {\n size: number;\n width: number;\n radius: number;\n}\n\nexport interface SpinnerIconProps {\n className?: string;\n size: SpinnerIconSize \| keyof typeof sizes;\n inline?: boolean;\n width?: number;\n color?: React.CSSProperties['color'];\n}\n\nexport const sizes = {\n large: {\n size: 96,\n width: 4,\n radius: 32,\n },\n medium: {\n size: 48,\n width: 2,\n radius: 16,\n },\n small: {\n size: 16,\n width: 1.5,\n radius: 6,\n },\n} as const;\n\nconst isSizeAlias = (size: unknown): size is keyof typeof sizes => {\n return typeof size === 'string' && size in sizes;\n};\n\nexport const SpinnerIcon = ({ size, className, inline, width, color }: SpinnerIconProps) => {\n const _size = isSizeAlias(size) ? sizes[size] : size;\n const currentSize = inline ? sizes.small : _size;\n\n const { cx } = useEmotion();\n const styles = useStyles(getStyles);\n\n return (\n <span className={cx(styles.root(), { [styles.rootInline()]: inline })}>\n <svg\n viewBox={`0 0 ${currentSize.size} ${currentSize.size}`}\n className={cx(styles.icon(), className, {\n [styles.iconInline()]: inline,\n })}\n width={currentSize.size}\n height={currentSize.size}\n fill=\"none\"\n stroke={color}\n strokeDasharray={`${(10 * currentSize.radius) / 6}, ${(27 * currentSize.radius) / 6}`}\n strokeDashoffset=\"0\"\n strokeWidth={width \|\| currentSize.width}\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <circle cx={currentSize.size / 2} cy={currentSize.size / 2} r={currentSize.radius} />\n </svg>\n </span>\n );\n};\n"]}

package/internal/TextWidthHelper/TextWidthHelper.css.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export declare const getJsStyles: import("../../lib/theming/StaticStyles.js").StylesGetter<{
+    root(): string;
+    textContainer(): string;
+}>;

package/internal/TextWidthHelper/TextWidthHelper.css.js ADDED Viewed

@@ -0,0 +1,3 @@
+import { bindStaticStyles as _b9cd9 } from '../../lib/theming/bindStaticStyles.js';
+export var getJsStyles = _b9cd9({root:'react-ui-TextWidthHelper__root',textContainer:'react-ui-TextWidthHelper__textContainer'});

package/internal/TextWidthHelper/TextWidthHelper.css.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TextWidthHelper.css.js","sourceRoot":"","sources":["TextWidthHelper.css.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE3F,MAAM,CAAC,IAAM,WAAW,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QACjE,IAAI;YACF,OAAO,GAAG,gOAAA,6JAQT,KAAC;QACJ,CAAC;QACD,aAAa;YACX,OAAO,GAAG,qIAAA,kEAGT,KAAC;QACJ,CAAC;KACF,CAAC;AAlBgE,CAkBhE,CAAC,CAAC;AAEJ,oBAAoB,EAAE,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { finalizeStaticStyles, memoizeGetStyles } from '../../lib/theming/StaticStyles.js';\n\nexport const getJsStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root() {\n return css`\n display: flex;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n visibility: hidden;\n overflow: hidden;\n `;\n },\n textContainer() {\n return css`\n word-break: break-all;\n white-space: nowrap;\n `;\n },\n}));\n\nfinalizeStaticStyles();\n"]}

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

@@ -7,6 +7,7 @@ interface TextWidthHelperProps {
  */
 export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
     private element;
+    private emotion;
     private jsStyles;
     render(): React.JSX.Element;
     getTextWidth(): number;

package/internal/TextWidthHelper/TextWidthHelper.js CHANGED Viewed

@@ -22,7 +22,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import React from 'react';
 import { getDOMRect } from '../../lib/dom/getDOMRect.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
-import { getJsStyles } from './TextWidthHelper.styles.js';
+import { getJsStyles } from './TextWidthHelper.css.js';
 var THIN_SPACE = '\u2009';
 /**
  * Херпер позволяет вычислить размеры блока с текстом
@@ -38,7 +38,7 @@ var TextWidthHelper = /** @class */ (function (_super) {
         return _this;
     }
     TextWidthHelper.prototype.render = function () {
-        this.jsStyles = getJsStyles();
+        this.jsStyles = getJsStyles(this.emotion);
         return (React.createElement("div", { className: this.jsStyles.root() },
             React.createElement("div", { className: this.jsStyles.textContainer(), ref: this.elementRef }, this.props.text || THIN_SPACE)));
     };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextWidthHelper.js","sourceRoot":"","sources":["TextWidthHelper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;~~AAAA~~,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,~~6BAA6B~~,CAAC;~~AAE1D~~,IAAM,UAAU,GAAG,QAAQ,CAAC;AAK5B;;GAEG;AAEH;IAAqC,mCAAqC;IAA1E;;QACU,aAAO,GAA0B,IAAI,CAAC;~~QAuBtC~~,gBAAU,GAAG,UAAC,IAAoB;YACxC,KAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;;IACJ,CAAC;IAvBQ,gCAAM,GAAb;QACE,IAAI,CAAC,QAAQ,GAAG,WAAW,~~EAAE~~,CAAC;~~QAE9B~~,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;YAClC,6BAAK,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,IAChE,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU,CAC1B,CACF,CACP,CAAC;IACJ,CAAC;IAEM,sCAAY,GAAnB;QACE,OAAO,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;IACxC,CAAC;IAEM,uCAAa,GAApB;QACE,OAAO,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;IACzC,CAAC;~~IAtBU~~,eAAe;QAD3B,qBAAqB;OACT,eAAe,~~CA2B3B~~;IAAD,sBAAC;CAAA,~~AA3BD~~,CAAqC,KAAK,CAAC,SAAS,~~GA2BnD~~;~~SA3BY~~,eAAe","sourcesContent":["import React from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport { getJsStyles } from './TextWidthHelper.~~styles~~.js';\n\nconst THIN_SPACE = '\\u2009';\n\ninterface TextWidthHelperProps {\n text?: string;\n}\n/*\n Херпер позволяет вычислить размеры блока с текстом\n */\n@withRenderEnvironment\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n private element: HTMLDivElement \| null = null;\n private jsStyles!: ReturnType<typeof getJsStyles>;\n\n public render() {\n this.jsStyles = getJsStyles();\n\n return (\n <div className={this.jsStyles.root()}>\n <div className={this.jsStyles.textContainer()} ref={this.elementRef}>\n {this.props.text \|\| THIN_SPACE}\n </div>\n </div>\n );\n }\n\n public getTextWidth(): number {\n return getDOMRect(this.element).width;\n }\n\n public getTextHeight(): number {\n return getDOMRect(this.element).height;\n }\n\n private elementRef = (node: HTMLDivElement) => {\n this.element = node;\n };\n}\n"]}
1	+ {"version":3,"file":"TextWidthHelper.js","sourceRoot":"","sources":["TextWidthHelper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,IAAM,UAAU,GAAG,QAAQ,CAAC;AAK5B;;GAEG;AAEH;IAAqC,mCAAqC;IAA1E;;QACU,aAAO,GAA0B,IAAI,CAAC;QAwBtC,gBAAU,GAAG,UAAC,IAAoB;YACxC,KAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;;IACJ,CAAC;IAvBQ,gCAAM,GAAb;QACE,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE1C,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;YAClC,6BAAK,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,IAChE,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU,CAC1B,CACF,CACP,CAAC;IACJ,CAAC;IAEM,sCAAY,GAAnB;QACE,OAAO,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;IACxC,CAAC;IAEM,uCAAa,GAApB;QACE,OAAO,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;IACzC,CAAC;IAvBU,eAAe;QAD3B,qBAAqB;OACT,eAAe,CA4B3B;IAAD,sBAAC;CAAA,AA5BD,CAAqC,KAAK,CAAC,SAAS,GA4BnD;SA5BY,eAAe","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport { getJsStyles } from './TextWidthHelper.css.js';\n\nconst THIN_SPACE = '\\u2009';\n\ninterface TextWidthHelperProps {\n text?: string;\n}\n/*\n Херпер позволяет вычислить размеры блока с текстом\n */\n@withRenderEnvironment\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n private element: HTMLDivElement \| null = null;\n private emotion!: Emotion;\n private jsStyles!: ReturnType<typeof getJsStyles>;\n\n public render() {\n this.jsStyles = getJsStyles(this.emotion);\n\n return (\n <div className={this.jsStyles.root()}>\n <div className={this.jsStyles.textContainer()} ref={this.elementRef}>\n {this.props.text \|\| THIN_SPACE}\n </div>\n </div>\n );\n }\n\n public getTextWidth(): number {\n return getDOMRect(this.element).width;\n }\n\n public getTextHeight(): number {\n return getDOMRect(this.element).height;\n }\n\n private elementRef = (node: HTMLDivElement) => {\n this.element = node;\n };\n}\n"]}

package/internal/TimeInput/TimeFragments.css.d.ts ADDED Viewed

@@ -0,0 +1,32 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/StaticStyles.js").StylesGetter<{
+    root(): string;
+    /**
+     * Резервируют место под время, когда значения нет: без этого поле с suffix
+     * сужается на ширину времени, а при вводе снова расширяется.
+     * Плейсхолдер уходит в псевдоэлемент — он занимает ту же ширину, что и время,
+     * но не попадает в текст поля и не читается скринридером.
+     * Отступы разделителей есть только у отрисованного времени, поэтому их добавляем сюда сами:
+     * по одному `letter-spacing` на каждый разделитель — один в формате `HH:mm` и два в `HH:mm:ss`.
+     */
+    emptyPlaceholderSmall(t: Theme): string;
+    emptyPlaceholderMedium(t: Theme): string;
+    emptyPlaceholderLarge(t: Theme): string;
+    emptyPlaceholderWithSecondsSmall(t: Theme): string;
+    emptyPlaceholderWithSecondsMedium(t: Theme): string;
+    emptyPlaceholderWithSecondsLarge(t: Theme): string;
+    selected(t: Theme): string;
+    mask(t: Theme): string;
+    segment(): string;
+    separator(): string;
+    /**
+     * Разделитель рисует псевдоэлемент, а сам текст только держит место и попадает в выделение.
+     * В задизейбленном поле `-webkit-text-fill-color` приходит по наследству и перебивает `color`,
+     * поэтому гасим и его — иначе двоеточие отрисуется дважды.
+     */
+    separatorText(): string;
+    separatorSmall(t: Theme): string;
+    separatorMedium(t: Theme): string;
+    separatorLarge(t: Theme): string;
+    separatorFilled(): string;
+}>;

package/internal/TimeInput/TimeFragments.css.js ADDED Viewed

@@ -0,0 +1,3 @@
+import { bindStaticStyles as _b9cd9 } from '../../lib/theming/bindStaticStyles.js';
+export var getStyles = _b9cd9({root:'react-ui-TimeFragments__root',emptyPlaceholderSmall:'react-ui-TimeFragments__emptyPlaceholderSmall',emptyPlaceholderMedium:'react-ui-TimeFragments__emptyPlaceholderMedium',emptyPlaceholderLarge:'react-ui-TimeFragments__emptyPlaceholderLarge',emptyPlaceholderWithSecondsSmall:'react-ui-TimeFragments__emptyPlaceholderWithSecondsSmall',emptyPlaceholderWithSecondsMedium:'react-ui-TimeFragments__emptyPlaceholderWithSecondsMedium',emptyPlaceholderWithSecondsLarge:'react-ui-TimeFragments__emptyPlaceholderWithSecondsLarge',mask:'react-ui-TimeFragments__mask',segment:'react-ui-TimeFragments__segment',separator:'react-ui-TimeFragments__separator',separatorText:'react-ui-TimeFragments__separatorText',separatorSmall:'react-ui-TimeFragments__separatorSmall',separatorMedium:'react-ui-TimeFragments__separatorMedium',separatorLarge:'react-ui-TimeFragments__separatorLarge',separatorFilled:'react-ui-TimeFragments__separatorFilled',selected:'react-ui-TimeFragments__selected'});

package/internal/TimeInput/TimeFragments.css.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TimeFragments.css.js","sourceRoot":"","sources":["TimeFragments.css.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { EMPTY_SEGMENT, TIME_SEPARATOR } from '../../components/TimePicker/helpers/TimePicker.constants.js';\nimport { finalizeStaticStyles, memoizeGetStyles } from '../../lib/theming/StaticStyles.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\n// как getEmptyDisplayValue, но без модуля значений: тот тянет компоненты, а этот файл исполняется при сборке\nconst getEmptyDisplayValue = (precision: 'HH:mm' | 'HH:mm:ss'): string =>\n precision\n .split(':')\n .map(() => EMPTY_SEGMENT)\n .join(TIME_SEPARATOR);\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root() {\n return css`\n cursor: text;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n `;\n },\n\n /**\n * Резервируют место под время, когда значения нет: без этого поле с suffix\n * сужается на ширину времени, а при вводе снова расширяется.\n * Плейсхолдер уходит в псевдоэлемент — он занимает ту же ширину, что и время,\n * но не попадает в текст поля и не читается скринридером.\n * Отступы разделителей есть только у отрисованного времени, поэтому их добавляем сюда сами:\n * по одному `letter-spacing` на каждый разделитель — один в формате `HH:mm` и два в `HH:mm:ss`.\n */\n emptyPlaceholderSmall(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm')}';\n visibility: hidden;\n padding-right: ${t.timePickerSeparatorPaddingXSmall};\n }\n `;\n },\n\n emptyPlaceholderMedium(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm')}';\n visibility: hidden;\n padding-right: ${t.timePickerSeparatorPaddingXMedium};\n }\n `;\n },\n\n emptyPlaceholderLarge(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm')}';\n visibility: hidden;\n padding-right: ${t.timePickerSeparatorPaddingXLarge};\n }\n `;\n },\n\n emptyPlaceholderWithSecondsSmall(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm:ss')}';\n visibility: hidden;\n padding-right: calc(${t.timePickerSeparatorPaddingXSmall} * 2);\n }\n `;\n },\n\n emptyPlaceholderWithSecondsMedium(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm:ss')}';\n visibility: hidden;\n padding-right: calc(${t.timePickerSeparatorPaddingXMedium} * 2);\n }\n `;\n },\n\n emptyPlaceholderWithSecondsLarge(t: Theme) {\n return css`\n &::before {\n content: '${getEmptyDisplayValue('HH:mm:ss')}';\n visibility: hidden;\n padding-right: calc(${t.timePickerSeparatorPaddingXLarge} * 2);\n }\n `;\n },\n\n selected(t: Theme) {\n const getSelection = (background: string, color: string) =>\n (background || color) &&\n `& ::selection {\n background: ${background};\n color: ${color};\n }`;\n\n return css`\n cursor: text;\n ${getSelection(t.timePickerSelectedBgColor, t.timePickerSelectedTextColor)}\n `;\n },\n\n mask(t: Theme) {\n return css`\n color: ${t.timePickerMaskColor};\n `;\n },\n\n segment() {\n return css`\n display: inline;\n white-space: pre;\n `;\n },\n\n separator() {\n return css`\n display: inline;\n position: relative;\n\n /*\n * Отрисованный разделитель центрируем по строке: у абсолютного псевдоэлемента\n * своя строка с полулидингом, поэтому от верхнего края он оказался бы ниже текста сегментов.\n */\n &::before {\n content: ':';\n content: ':' / '';\n position: absolute;\n left: 50%;\n top: 50%;\n width: 100%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n letter-spacing: normal;\n text-align: center;\n }\n `;\n },\n\n /**\n * Разделитель рисует псевдоэлемент, а сам текст только держит место и попадает в выделение.\n * В задизейбленном поле `-webkit-text-fill-color` приходит по наследству и перебивает `color`,\n * поэтому гасим и его — иначе двоеточие отрисуется дважды.\n */\n separatorText() {\n return css`\n color: transparent;\n -webkit-text-fill-color: transparent;\n `;\n },\n\n separatorSmall(t: Theme) {\n return css`\n letter-spacing: ${t.timePickerSeparatorPaddingXSmall};\n\n &::before {\n margin-top: ${t.timePickerSeparatorOffsetTopSmall};\n }\n `;\n },\n\n separatorMedium(t: Theme) {\n return css`\n letter-spacing: ${t.timePickerSeparatorPaddingXMedium};\n\n &::before {\n margin-top: ${t.timePickerSeparatorOffsetTopMedium};\n }\n `;\n },\n\n separatorLarge(t: Theme) {\n return css`\n letter-spacing: ${t.timePickerSeparatorPaddingXLarge};\n\n &::before {\n margin-top: ${t.timePickerSeparatorOffsetTopLarge};\n }\n `;\n },\n\n separatorFilled() {\n return css`\n color: inherit;\n `;\n },\n}));\n\n// порядок вызова в cx(...): модификаторы после базовых\nfinalizeStaticStyles(['selected']);\n"]}

package/internal/TimeInput/TimeFragments.js CHANGED Viewed

@@ -2,57 +2,53 @@ import React, { useCallback, useContext, useImperativeHandle, useRef } from 'rea
 import { TIME_PLACEHOLDER_CHAR, TIME_SEPARATOR } from '../../components/TimePicker/helpers/TimePicker.constants.js';
 import { getDisplaySegments, getTimeSegments } from '../../components/TimePicker/helpers/TimePicker.shared.js';
 import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
-import { useStyles } from '../../lib/renderEnvironment/index.js';
-import { concatClassNames as cx } from '../../lib/theming/Emotion.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
-import { getStyles } from './TimeFragments.styles.js';
+import { getStyles } from './TimeFragments.css.js';
 var getEmptyPlaceholderClassName = function (styles, theme, size, format) {
     if (format === 'HH:mm:ss') {
         switch (size) {
             case 'large':
-                return styles.emptyPlaceholderWithSecondsLarge();
+                return styles.emptyPlaceholderWithSecondsLarge(theme);
             case 'medium':
-                return styles.emptyPlaceholderWithSecondsMedium();
+                return styles.emptyPlaceholderWithSecondsMedium(theme);
             case 'small':
             default:
-                return styles.emptyPlaceholderWithSecondsSmall();
+                return styles.emptyPlaceholderWithSecondsSmall(theme);
         }
     }
     switch (size) {
         case 'large':
-            return styles.emptyPlaceholderLarge();
+            return styles.emptyPlaceholderLarge(theme);
         case 'medium':
-            return styles.emptyPlaceholderMedium();
+            return styles.emptyPlaceholderMedium(theme);
         case 'small':
         default:
-            return styles.emptyPlaceholderSmall();
+            return styles.emptyPlaceholderSmall(theme);
     }
 };
 var getSeparatorSizeClassName = function (styles, theme, size) {
     switch (size) {
         case 'large':
-            return styles.separatorLarge();
+            return styles.separatorLarge(theme);
         case 'medium':
-            return styles.separatorMedium();
+            return styles.separatorMedium(theme);
         case 'small':
         default:
-            return styles.separatorSmall();
+            return styles.separatorSmall(theme);
     }
 };
 export var TimeFragments = forwardRefAndName('TimeFragments', function (props, ref) {
     var _a;
     var value = props.value, format = props.format, size = props.size, onSelectSegment = props.onSelectSegment;
     var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
     var rootRef = useRef(null);
-    var rootClassName = cx(styles.root(), styles.selected(), (_a = {},
-        // Пустой токен отключает объявление целиком — см. пояснение в
-        // TimeFragments.styles.ts. Решение по значению остаётся в JS.
-        _a[styles.selectionBackground()] = Boolean(theme.timePickerSelectedBgColor),
-        _a[styles.selectionColor()] = Boolean(theme.timePickerSelectedTextColor),
+    var rootClassName = cx(styles.root(), styles.selected(theme), (_a = {},
         _a[getEmptyPlaceholderClassName(styles, theme, size, format)] = !value,
         _a));
-    var maskClassName = styles.mask();
+    var maskClassName = styles.mask(theme);
     var separatorSizeClassName = getSeparatorSizeClassName(styles, theme, size);
     var getSegment = useCallback(function (el) {
         var _a;
@@ -86,8 +82,8 @@ export var TimeFragments = forwardRefAndName('TimeFragments', function (props, r
                     React.createElement("span", { className: maskClassName }, Array(placeholderLength).fill(TIME_PLACEHOLDER_CHAR).join(''))),
             ];
             if (index < segments.length - 1) {
-                nodes.push(React.createElement("span", { key: "separator-".concat(index), "data-separator": '', className: cx(styles.separator(), separatorSizeClassName, (_a = {},
-                        _a[maskClassName] = segmentValue.includes(TIME_PLACEHOLDER_CHAR),
+                nodes.push(React.createElement("span", { key: "separator-".concat(index), "data-separator": '', className: cx(maskClassName, styles.separator(), separatorSizeClassName, (_a = {},
+                        _a[styles.separatorFilled()] = !segmentValue.includes(TIME_PLACEHOLDER_CHAR),
                         _a)) },
                     React.createElement("span", { "aria-hidden": true, className: styles.separatorText() }, TIME_SEPARATOR)));
             }