@skbkontur/react-ui 0.0.0-95a1dbe516 → 0.0.0-9cd4422b72

package/components/Group/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Group.tsx"],"names":["React","PropTypes","isEdge","isIE11","isButton","CommonWrapper","EmotionConsumer","rootNode","isInputLike","isTheme2022","ThemeConsumer","getStyles","getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","Children","count","getButtonCorners","isFirstChild","isLastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCornersIfButton","child","firstChild","lastChild","isInputLikeToo","corners","cloneElement","props","GroupDataTids","root","Group","render","emotion","theme","renderMain","style","width","childrenArray","toArray","styles","setRootNode","map","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","cx","fixed","stretch","stretchFallback","item","itemFirst","Component","__KONTUR_REACT_UI__","displayName","propTypes","oneOfType","number","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { isEdge, isIE11 } from '../../lib/client';\nimport { isButton } from '../Button';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isInputLike } from '../../lib/utils';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { ThemeConsumer } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nexport const getButtonCorners = (isFirstChild: boolean, isLastChild: boolean): React.CSSProperties => {\n  if (isFirstChild && isLastChild) {\n    return {};\n  }\n\n  if (isFirstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (isLastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst passCornersIfButton = (\n  child: React.ReactNode,\n  firstChild: React.ReactNode,\n  lastChild: React.ReactNode,\n  isInputLikeToo = false,\n) => {\n  const corners = getButtonCorners(child === firstChild, child === lastChild);\n  if (isButton(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n  if (isInputLikeToo && isInputLike(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n\n  return child;\n};\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  public static displayName = 'Group';\n\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n  private emotion!: Emotion;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeConsumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeConsumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  public renderMain() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n    const styles = getStyles(this.emotion);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span data-tid={GroupDataTids.root} className={styles.root()} style={style}>\n          {React.Children.map(childrenArray, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n\n            const modifiedChild = passCornersIfButton(child, firstChild, lastChild, isTheme2022(this.theme));\n\n            const isFirstChild = child === firstChild;\n\n            return (\n              <div\n                className={this.emotion.cx({\n                  [styles.fixed()]: !isWidthInPercent,\n                  [styles.stretch()]: isWidthInPercent,\n                  [styles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\n                })}\n              >\n                <div\n                  className={this.emotion.cx({\n                    [styles.item()]: true,\n                    [styles.itemFirst()]: isFirstChild,\n                  })}\n                >\n                  {modifiedChild}\n                </div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["Group.tsx"],"names":["React","PropTypes","isIE11","isEdge","isButton","CommonWrapper","cx","rootNode","isInputLike","ThemeContext","isTheme2022","styles","getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","Children","count","getButtonCorners","isFirstChild","isLastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCornersIfButton","child","firstChild","lastChild","isInputLikeToo","corners","cloneElement","props","GroupDataTids","root","Group","render","theme","renderMain","style","width","childrenArray","toArray","setRootNode","map","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","fixed","stretch","stretchFallback","item","itemFirst","Component","__KONTUR_REACT_UI__","displayName","propTypes","oneOfType","number","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { isButton } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isInputLike } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { styles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nexport const getButtonCorners = (isFirstChild: boolean, isLastChild: boolean): React.CSSProperties => {\n  if (isFirstChild && isLastChild) {\n    return {};\n  }\n\n  if (isFirstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (isLastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst passCornersIfButton = (\n  child: React.ReactNode,\n  firstChild: React.ReactNode,\n  lastChild: React.ReactNode,\n  isInputLikeToo = false,\n) => {\n  const corners = getButtonCorners(child === firstChild, child === lastChild);\n  if (isButton(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n  if (isInputLikeToo && isInputLike(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n\n  return child;\n};\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  public static displayName = 'Group';\n\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span data-tid={GroupDataTids.root} className={styles.root()} style={style}>\n          {React.Children.map(childrenArray, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n\n            const modifiedChild = passCornersIfButton(child, firstChild, lastChild, isTheme2022(this.theme));\n\n            const isFirstChild = child === firstChild;\n\n            return (\n              <div\n                className={cx({\n                  [styles.fixed()]: !isWidthInPercent,\n                  [styles.stretch()]: isWidthInPercent,\n                  [styles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\n                })}\n              >\n                <div\n                  className={cx({\n                    [styles.item()]: true,\n                    [styles.itemFirst()]: isFirstChild,\n                  })}\n                >\n                  {modifiedChild}\n                </div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/components/Group/Group.d.ts

@@ -13,7 +13,6 @@ export declare class Group extends React.Component<GroupProps> {
     static displayName: string;
     private setRootNode;
     private theme;
-    private emotion;
     static propTypes: {
         width: PropTypes.Requireable<string | number>;
     };

package/components/Group/Group.styles/Group.styles.js

@@ -2,26 +2,24 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    root: function root() {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        display: inline-flex;\n        line-height: normal;\n      "])));
-    },
-    fixed: function fixed() {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        flex-shrink: 0;\n        display: inline-block;\n      "])));
-    },
-    stretch: function stretch() {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        flex-grow: 1;\n        flex-shrink: 1;\n      "])));
-    },
-    stretchFallback: function stretchFallback() {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        flex-basis: 100%;\n      "])));
-    },
-    item: function item() {
-      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        margin-left: -1px;\n      "])));
-    },
-    itemFirst: function itemFirst() {
-      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        margin-left: 0;\n      "])));
-    }
-  });
-};
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  root: function root() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      line-height: normal;\n    "])));
+  },
+  fixed: function fixed() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      flex-shrink: 0;\n      display: inline-block;\n    "])));
+  },
+  stretch: function stretch() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      flex-grow: 1;\n      flex-shrink: 1;\n    "])));
+  },
+  stretchFallback: function stretchFallback() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      flex-basis: 100%;\n    "])));
+  },
+  item: function item() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      margin-left: -1px;\n    "])));
+  },
+  itemFirst: function itemFirst() {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      margin-left: 0;\n    "])));
+  }
+});

package/components/Group/Group.styles/Group.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Group.styles.ts"],"names":["memoizeStyle","getStyles","emotion","root","css","fixed","stretch","stretchFallback","item","itemFirst"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,IADW,kBACJ;AACL,eAAOD,OAAO,CAACE,GAAf;;;;AAID,OANU;;AAQXC,MAAAA,KARW,mBAQH;AACN,eAAOH,OAAO,CAACE,GAAf;;;;AAID,OAbU;;AAeXE,MAAAA,OAfW,qBAeD;AACR,eAAOJ,OAAO,CAACE,GAAf;;;;AAID,OApBU;;AAsBXG,MAAAA,eAtBW,6BAsBO;AAChB,eAAOL,OAAO,CAACE,GAAf;;;AAGD,OA1BU;;AA4BXI,MAAAA,IA5BW,kBA4BJ;AACL,eAAON,OAAO,CAACE,GAAf;;;AAGD,OAhCU;;AAkCXK,MAAAA,SAlCW,uBAkCC;AACV,eAAOP,OAAO,CAACE,GAAf;;;AAGD,OAtCU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        display: inline-flex;\n        line-height: normal;\n      `;\n    },\n\n    fixed() {\n      return emotion.css`\n        flex-shrink: 0;\n        display: inline-block;\n      `;\n    },\n\n    stretch() {\n      return emotion.css`\n        flex-grow: 1;\n        flex-shrink: 1;\n      `;\n    },\n\n    stretchFallback() {\n      return emotion.css`\n        flex-basis: 100%;\n      `;\n    },\n\n    item() {\n      return emotion.css`\n        margin-left: -1px;\n      `;\n    },\n\n    itemFirst() {\n      return emotion.css`\n        margin-left: 0;\n      `;\n    },\n  });\n"]}
+{"version":3,"sources":["Group.styles.ts"],"names":["css","memoizeStyle","styles","root","fixed","stretch","stretchFallback","item","itemFirst"],"mappings":"8MAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;AAID,GANgC;;AAQjCI,EAAAA,KARiC,mBAQzB;AACN,WAAOJ,GAAP;;;;AAID,GAbgC;;AAejCK,EAAAA,OAfiC,qBAevB;AACR,WAAOL,GAAP;;;;AAID,GApBgC;;AAsBjCM,EAAAA,eAtBiC,6BAsBf;AAChB,WAAON,GAAP;;;AAGD,GA1BgC;;AA4BjCO,EAAAA,IA5BiC,kBA4B1B;AACL,WAAOP,GAAP;;;AAGD,GAhCgC;;AAkCjCQ,EAAAA,SAlCiC,uBAkCrB;AACV,WAAOR,GAAP;;;AAGD,GAtCgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-flex;\n      line-height: normal;\n    `;\n  },\n\n  fixed() {\n    return css`\n      flex-shrink: 0;\n      display: inline-block;\n    `;\n  },\n\n  stretch() {\n    return css`\n      flex-grow: 1;\n      flex-shrink: 1;\n    `;\n  },\n\n  stretchFallback() {\n    return css`\n      flex-basis: 100%;\n    `;\n  },\n\n  item() {\n    return css`\n      margin-left: -1px;\n    `;\n  },\n\n  itemFirst() {\n    return css`\n      margin-left: 0;\n    `;\n  },\n});\n"]}

package/components/Group/Group.styles.d.ts

@@ -1,5 +1,4 @@
-import type { Emotion } from '@emotion/css/create-instance';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(): string;
     fixed(): string;
     stretch(): string;

package/components/Hint/Hint/Hint.js

@@ -6,17 +6,17 @@ var _class, _class2, _temp;
 import React from 'react';
 import { globalObject } from '@skbkontur/global-object';
 import isEqual from 'lodash.isequal';
-import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
+import { ReactUIFeatureFlagsContext, getFullReactUIFlagsContext } from "../../../lib/featureFlagsContext";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { DUMMY_LOCATION, Popup } from "../../../internal/Popup";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
-import { ThemeConsumer, ThemeProvider } from "../../../lib/theming/ThemeContext";
-import { getStyles } from "../Hint.styles";
+import { styles } from "../Hint.styles";
 var HINT_BORDER_COLOR = 'transparent';
 var Positions = ['top center', 'top left', 'top right', 'bottom center', 'bottom left', 'bottom right', 'left middle', 'left top', 'left bottom', 'right middle', 'right top', 'right bottom'];
 export
@@ -175,19 +175,16 @@ var Hint = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Pu
 
     return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
       _this2.featureFlags = getFullReactUIFlagsContext(flags);
-      return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
-        _this2.emotion = emotion;
-        return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
-          _this2.theme = theme;
-          return /*#__PURE__*/React.createElement(ThemeProvider, {
-            value: ThemeFactory.create({
-              popupPinOffset: theme.hintPinOffset,
-              popupMargin: theme.hintMargin,
-              popupBorder: theme.hintBorder,
-              popupBorderRadius: theme.hintBorderRadius
-            }, _this2.theme)
-          }, _this2.renderMain());
-        });
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this2.theme = theme;
+        return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+          value: ThemeFactory.create({
+            popupPinOffset: theme.hintPinOffset,
+            popupMargin: theme.hintMargin,
+            popupBorder: theme.hintBorder,
+            popupBorderRadius: theme.hintBorderRadius
+          }, _this2.theme)
+        }, _this2.renderMain());
       });
     });
   };
@@ -226,7 +223,7 @@ var Hint = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Pu
   };
 
   _proto.renderContent = function renderContent() {
-    var _this$emotion$cx;
+    var _cx;
 
     if (!this.props.text) {
       return null;
@@ -236,8 +233,7 @@ var Hint = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Pu
         maxWidth = _this$getProps4.maxWidth;
 
     var centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];
-    var styles = getStyles(this.emotion);
-    var className = this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.content(this.theme)] = true, _this$emotion$cx[styles.contentCenter(this.theme)] = centerAlignPositions.includes(this.state.position), _this$emotion$cx));
+    var className = cx((_cx = {}, _cx[styles.content(this.theme)] = true, _cx[styles.contentCenter(this.theme)] = centerAlignPositions.includes(this.state.position), _cx));
     return /*#__PURE__*/React.createElement("div", {
       className: className,
       style: {

package/components/Hint/Hint/Hint.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Hint.tsx"],"names":["React","globalObject","isEqual","getFullReactUIFlagsContext","ReactUIFeatureFlagsContext","ThemeFactory","DUMMY_LOCATION","Popup","isTestEnv","CommonWrapper","EmotionConsumer","rootNode","createPropsGetter","isTheme2022","ThemeConsumer","ThemeProvider","getStyles","HINT_BORDER_COLOR","Positions","Hint","getProps","defaultProps","state","opened","manual","position","positions","popupRef","createRef","getAnchorElement","current","anchorElement","getPositions","featureFlags","hintAddDynamicPositioning","allowedPositions","pos","priorityPosition","index","indexOf","Error","join","slice","filter","x","startsWith","handleMouseEnter","e","timer","setTimeout","open","props","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","componentDidUpdate","prevProps","posChanged","allowedChanged","componentWillUnmount","render","flags","emotion","theme","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","disableAnimations","useWrapper","hasPin","kebabHintRemovePin","setRootNode","children","hintBgColor","renderContent","text","maxWidth","centerAlignPositions","styles","className","cx","content","contentCenter","includes","PureComponent","__KONTUR_REACT_UI__","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\nimport isEqual from 'lodash.isequal';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport {\n  getFullReactUIFlagsContext,\n  ReactUIFeatureFlags,\n  ReactUIFeatureFlagsContext,\n} from '../../lib/featureFlagsContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { DUMMY_LOCATION, Popup, PopupPositionsType } from '../../internal/Popup';\nimport { Nullable } from '../../typings/utility-types';\nimport { MouseEventType } from '../../typings/event-types';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { ThemeConsumer, ThemeProvider } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './Hint.styles';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nexport interface HintProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Переводит отображение подсказки в _\"ручной режим\"_.\n   *\n   * В _\"ручном режиме\"_ подсказку можно активировать только задав значение пропу `opened`.\n   */\n  manual?: boolean;\n  /**\n   * Задаёт максимальную ширину подсказки.\n   */\n  maxWidth?: React.CSSProperties['maxWidth'];\n  /**\n   * HTML-событие `mouseenter`.\n   */\n  onMouseEnter?: (event: MouseEventType) => void;\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: (event: MouseEventType) => void;\n  /**\n   * Если `true` - подсказка будет открыта.\n   *\n   * _Примечание_: работает только при `manual=true`.\n   */\n  opened?: boolean;\n  /**\n   * Расположение подсказки относительно текста.\n   *\n   * **Допустимые значения**: `\"top\"`, `\"right\"`, `\"bottom\"`, `\"left\"`, `\"top left\"`, `\"top center\"`, `\"top right\"`, `\"right top\"`, `\"right middle\"`, `\"right bottom\"`, `\"bottom left\"`, `\"bottom center\"`, `\"bottom right\"`, `\"left top\"`, `\"left middle\"`, `\"left bottom\"`.\n   */\n  pos?: 'top' | 'right' | 'bottom' | 'left' | PopupPositionsType;\n  /**\n   * Текст подсказки.\n   */\n  text: React.ReactNode;\n  /**\n   * Список позиций, которые хинт будет занимать. Если положение хинт в определенной позиции будет выходить\n   * за край экрана, то будет выбрана следующая позиция. Обязательно должен включать позицию указанную в `pos`.\n   * Для применения этого пропа необходимо включить фиче-флаг hintAddDynamicPositioning.\n   */\n  allowedPositions?: PopupPositionsType[];\n  /**\n   * Отключает анимацию.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования хинта при двух и более вложенных элементах.\n   *\n   * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.\n   */\n  useWrapper?: boolean;\n}\n\nexport interface HintState {\n  opened: boolean;\n  position: PopupPositionsType;\n}\n\nconst Positions: PopupPositionsType[] = [\n  'top center',\n  'top left',\n  'top right',\n  'bottom center',\n  'bottom left',\n  'bottom right',\n  'left middle',\n  'left top',\n  'left bottom',\n  'right middle',\n  'right top',\n  'right bottom',\n];\n\ntype DefaultProps = Required<\n  Pick<HintProps, 'pos' | 'allowedPositions' | 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>\n>;\n\n/**\n * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n  public static __KONTUR_REACT_UI__ = 'Hint';\n  public static displayName = 'Hint';\n\n  public static defaultProps: DefaultProps = {\n    pos: 'top',\n    manual: false,\n    opened: false,\n    maxWidth: 200,\n    allowedPositions: Positions,\n    disableAnimations: isTestEnv,\n    useWrapper: false,\n  };\n\n  private getProps = createPropsGetter(Hint.defaultProps);\n\n  public state: HintState = {\n    opened: this.getProps().manual ? !!this.getProps().opened : false,\n    position: DUMMY_LOCATION.position,\n  };\n\n  private timer: SafeTimer;\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private featureFlags!: ReactUIFeatureFlags;\n  private setRootNode!: TSetRootNode;\n  private positions: Nullable<PopupPositionsType[]> = null;\n\n  private popupRef = React.createRef<Popup>();\n\n  public componentDidUpdate(prevProps: HintProps) {\n    const { opened, manual, pos, allowedPositions } = this.getProps();\n    if (!manual) {\n      return;\n    }\n    if (this.timer) {\n      globalObject.clearTimeout(this.timer);\n      this.timer = null;\n    }\n    if (opened !== prevProps.opened) {\n      this.setState({ opened: !!opened });\n    }\n\n    if (this.featureFlags.hintAddDynamicPositioning) {\n      const posChanged = prevProps.pos !== pos;\n      const allowedChanged = !isEqual(prevProps.allowedPositions, allowedPositions);\n\n      if (posChanged || allowedChanged) {\n        this.positions = null;\n      }\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.timer) {\n      globalObject.clearTimeout(this.timer);\n      this.timer = null;\n    }\n  }\n\n  public render() {\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          this.featureFlags = getFullReactUIFlagsContext(flags);\n          return (\n            <EmotionConsumer>\n              {(emotion) => {\n                this.emotion = emotion;\n                return (\n                  <ThemeConsumer>\n                    {(theme) => {\n                      this.theme = theme;\n                      return (\n                        <ThemeProvider\n                          value={ThemeFactory.create(\n                            {\n                              popupPinOffset: theme.hintPinOffset,\n                              popupMargin: theme.hintMargin,\n                              popupBorder: theme.hintBorder,\n                              popupBorderRadius: theme.hintBorderRadius,\n                            },\n                            this.theme,\n                          )}\n                        >\n                          {this.renderMain()}\n                        </ThemeProvider>\n                      );\n                    }}\n                  </ThemeConsumer>\n                );\n              }}\n            </EmotionConsumer>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const { disableAnimations, useWrapper } = this.getProps();\n\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          const hasPin = !getFullReactUIFlagsContext(flags).kebabHintRemovePin || !isTheme2022(this.theme);\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <Popup\n                hasPin={hasPin}\n                opened={this.state.opened}\n                anchorElement={this.props.children}\n                positions={this.getPositions()}\n                backgroundColor={this.theme.hintBgColor}\n                borderColor={HINT_BORDER_COLOR}\n                onPositionChange={(position) => this.setState({ position })}\n                disableAnimations={disableAnimations}\n                onMouseEnter={this.handleMouseEnter}\n                onMouseLeave={this.handleMouseLeave}\n                useWrapper={useWrapper}\n                ref={this.popupRef}\n                withoutMobile\n              >\n                {this.renderContent()}\n              </Popup>\n            </CommonWrapper>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  public getAnchorElement = (): Nullable<Element> => {\n    return this.popupRef.current?.anchorElement;\n  };\n\n  private renderContent() {\n    if (!this.props.text) {\n      return null;\n    }\n\n    const { maxWidth } = this.getProps();\n    const centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];\n    const styles = getStyles(this.emotion);\n    const className = this.emotion.cx({\n      [styles.content(this.theme)]: true,\n      [styles.contentCenter(this.theme)]: centerAlignPositions.includes(this.state.position),\n    });\n    return (\n      <div className={className} style={{ maxWidth }}>\n        {this.props.text}\n      </div>\n    );\n  }\n\n  private getPositions = (): PopupPositionsType[] => {\n    if (this.featureFlags.hintAddDynamicPositioning) {\n      if (!this.positions) {\n        const { allowedPositions, pos } = this.getProps();\n        let priorityPosition: PopupPositionsType;\n        switch (pos) {\n          case 'top':\n            priorityPosition = 'top center';\n            break;\n          case 'bottom':\n            priorityPosition = 'bottom center';\n            break;\n          case 'left':\n            priorityPosition = 'left middle';\n            break;\n          case 'right':\n            priorityPosition = 'right middle';\n            break;\n          default:\n            priorityPosition = pos;\n        }\n        const index = allowedPositions.indexOf(priorityPosition);\n        if (index === -1) {\n          throw new Error('Unexpected position passed to Hint. Expected one of: ' + allowedPositions.join(', '));\n        }\n        this.positions = [...allowedPositions.slice(index), ...allowedPositions.slice(0, index)];\n      }\n      return this.positions;\n    }\n    return Positions.filter((x) => x.startsWith(this.getProps().pos));\n  };\n\n  private handleMouseEnter = (e: MouseEventType) => {\n    if (!this.getProps().manual && !this.timer) {\n      this.timer = globalObject.setTimeout(this.open, 400);\n    }\n\n    if (this.props.onMouseEnter) {\n      this.props.onMouseEnter(e);\n    }\n  };\n\n  private handleMouseLeave = (e: MouseEventType) => {\n    if (!this.getProps().manual && this.timer) {\n      globalObject.clearTimeout(this.timer);\n      this.timer = null;\n      this.setState({ opened: false });\n    }\n\n    if (this.props.onMouseLeave) {\n      this.props.onMouseLeave(e);\n    }\n  };\n\n  private open = () => {\n    this.setState({ opened: true });\n  };\n}\n"]}
+{"version":3,"sources":["Hint.tsx"],"names":["React","globalObject","isEqual","ReactUIFeatureFlagsContext","getFullReactUIFlagsContext","ThemeContext","ThemeFactory","DUMMY_LOCATION","Popup","isTestEnv","CommonWrapper","cx","rootNode","createPropsGetter","isTheme2022","styles","HINT_BORDER_COLOR","Positions","Hint","getProps","defaultProps","state","opened","manual","position","positions","popupRef","createRef","getAnchorElement","current","anchorElement","getPositions","featureFlags","hintAddDynamicPositioning","allowedPositions","pos","priorityPosition","index","indexOf","Error","join","slice","filter","x","startsWith","handleMouseEnter","e","timer","setTimeout","open","props","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","componentDidUpdate","prevProps","posChanged","allowedChanged","componentWillUnmount","render","flags","theme","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","disableAnimations","useWrapper","hasPin","kebabHintRemovePin","setRootNode","children","hintBgColor","renderContent","text","maxWidth","centerAlignPositions","className","content","contentCenter","includes","PureComponent","__KONTUR_REACT_UI__","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\nimport isEqual from 'lodash.isequal';\n\nimport {\n  ReactUIFeatureFlags,\n  ReactUIFeatureFlagsContext,\n  getFullReactUIFlagsContext,\n} from '../../lib/featureFlagsContext';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { DUMMY_LOCATION, Popup, PopupPositionsType } from '../../internal/Popup';\nimport { Nullable } from '../../typings/utility-types';\nimport { MouseEventType } from '../../typings/event-types';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { styles } from './Hint.styles';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nexport interface HintProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Переводит отображение подсказки в _\"ручной режим\"_.\n   *\n   * В _\"ручном режиме\"_ подсказку можно активировать только задав значение пропу `opened`.\n   */\n  manual?: boolean;\n  /**\n   * Задаёт максимальную ширину подсказки.\n   */\n  maxWidth?: React.CSSProperties['maxWidth'];\n  /**\n   * HTML-событие `mouseenter`.\n   */\n  onMouseEnter?: (event: MouseEventType) => void;\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: (event: MouseEventType) => void;\n  /**\n   * Если `true` - подсказка будет открыта.\n   *\n   * _Примечание_: работает только при `manual=true`.\n   */\n  opened?: boolean;\n  /**\n   * Расположение подсказки относительно текста.\n   *\n   * **Допустимые значения**: `\"top\"`, `\"right\"`, `\"bottom\"`, `\"left\"`, `\"top left\"`, `\"top center\"`, `\"top right\"`, `\"right top\"`, `\"right middle\"`, `\"right bottom\"`, `\"bottom left\"`, `\"bottom center\"`, `\"bottom right\"`, `\"left top\"`, `\"left middle\"`, `\"left bottom\"`.\n   */\n  pos?: 'top' | 'right' | 'bottom' | 'left' | PopupPositionsType;\n  /**\n   * Текст подсказки.\n   */\n  text: React.ReactNode;\n  /**\n   * Список позиций, которые хинт будет занимать. Если положение хинт в определенной позиции будет выходить\n   * за край экрана, то будет выбрана следующая позиция. Обязательно должен включать позицию указанную в `pos`.\n   * Для применения этого пропа необходимо включить фиче-флаг hintAddDynamicPositioning.\n   */\n  allowedPositions?: PopupPositionsType[];\n  /**\n   * Отключает анимацию.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования хинта при двух и более вложенных элементах.\n   *\n   * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.\n   */\n  useWrapper?: boolean;\n}\n\nexport interface HintState {\n  opened: boolean;\n  position: PopupPositionsType;\n}\n\nconst Positions: PopupPositionsType[] = [\n  'top center',\n  'top left',\n  'top right',\n  'bottom center',\n  'bottom left',\n  'bottom right',\n  'left middle',\n  'left top',\n  'left bottom',\n  'right middle',\n  'right top',\n  'right bottom',\n];\n\ntype DefaultProps = Required<\n  Pick<HintProps, 'pos' | 'allowedPositions' | 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>\n>;\n\n/**\n * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n  public static __KONTUR_REACT_UI__ = 'Hint';\n  public static displayName = 'Hint';\n\n  public static defaultProps: DefaultProps = {\n    pos: 'top',\n    manual: false,\n    opened: false,\n    maxWidth: 200,\n    allowedPositions: Positions,\n    disableAnimations: isTestEnv,\n    useWrapper: false,\n  };\n\n  private getProps = createPropsGetter(Hint.defaultProps);\n\n  public state: HintState = {\n    opened: this.getProps().manual ? !!this.getProps().opened : false,\n    position: DUMMY_LOCATION.position,\n  };\n\n  private timer: SafeTimer;\n  private theme!: Theme;\n  private featureFlags!: ReactUIFeatureFlags;\n  private setRootNode!: TSetRootNode;\n  private positions: Nullable<PopupPositionsType[]> = null;\n\n  private popupRef = React.createRef<Popup>();\n\n  public componentDidUpdate(prevProps: HintProps) {\n    const { opened, manual, pos, allowedPositions } = this.getProps();\n    if (!manual) {\n      return;\n    }\n    if (this.timer) {\n      globalObject.clearTimeout(this.timer);\n      this.timer = null;\n    }\n    if (opened !== prevProps.opened) {\n      this.setState({ opened: !!opened });\n    }\n\n    if (this.featureFlags.hintAddDynamicPositioning) {\n      const posChanged = prevProps.pos !== pos;\n      const allowedChanged = !isEqual(prevProps.allowedPositions, allowedPositions);\n\n      if (posChanged || allowedChanged) {\n        this.positions = null;\n      }\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.timer) {\n      globalObject.clearTimeout(this.timer);\n      this.timer = null;\n    }\n  }\n\n  public render() {\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          this.featureFlags = getFullReactUIFlagsContext(flags);\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return (\n                  <ThemeContext.Provider\n                    value={ThemeFactory.create(\n                      {\n                        popupPinOffset: theme.hintPinOffset,\n                        popupMargin: theme.hintMargin,\n                        popupBorder: theme.hintBorder,\n                        popupBorderRadius: theme.hintBorderRadius,\n                      },\n                      this.theme,\n                    )}\n                  >\n                    {this.renderMain()}\n                  </ThemeContext.Provider>\n                );\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const { disableAnimations, useWrapper } = this.getProps();\n\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          const hasPin = !getFullReactUIFlagsContext(flags).kebabHintRemovePin || !isTheme2022(this.theme);\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <Popup\n                hasPin={hasPin}\n                opened={this.state.opened}\n                anchorElement={this.props.children}\n                positions={this.getPositions()}\n                backgroundColor={this.theme.hintBgColor}\n                borderColor={HINT_BORDER_COLOR}\n                onPositionChange={(position) => this.setState({ position })}\n                disableAnimations={disableAnimations}\n                onMouseEnter={this.handleMouseEnter}\n                onMouseLeave={this.handleMouseLeave}\n                useWrapper={useWrapper}\n                ref={this.popupRef}\n                withoutMobile\n              >\n                {this.renderContent()}\n              </Popup>\n            </CommonWrapper>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  public getAnchorElement = (): Nullable<Element> => {\n    return this.popupRef.current?.anchorElement;\n  };\n\n  private renderContent() {\n    if (!this.props.text) {\n      return null;\n    }\n\n    const { maxWidth } = this.getProps();\n    const centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];\n    const className = cx({\n      [styles.content(this.theme)]: true,\n      [styles.contentCenter(this.theme)]: centerAlignPositions.includes(this.state.position),\n    });\n    return (\n      <div className={className} style={{ maxWidth }}>\n        {this.props.text}\n      </div>\n    );\n  }\n\n  private getPositions = (): PopupPositionsType[] => {\n    if (this.featureFlags.hintAddDynamicPositioning) {\n      if (!this.positions) {\n        const { allowedPositions, pos } = this.getProps();\n        let priorityPosition: PopupPositionsType;\n        switch (pos) {\n          case 'top':\n            priorityPosition = 'top center';\n            break;\n          case 'bottom':\n            priorityPosition = 'bottom center';\n            break;\n          case 'left':\n            priorityPosition = 'left middle';\n            break;\n          case 'right':\n            priorityPosition = 'right middle';\n            break;\n          default:\n            priorityPosition = pos;\n        }\n        const index = allowedPositions.indexOf(priorityPosition);\n        if (index === -1) {\n          throw new Error('Unexpected position passed to Hint. Expected one of: ' + allowedPositions.join(', '));\n        }\n        this.positions = [...allowedPositions.slice(index), ...allowedPositions.slice(0, index)];\n      }\n      return this.positions;\n    }\n    return Positions.filter((x) => x.startsWith(this.getProps().pos));\n  };\n\n  private handleMouseEnter = (e: MouseEventType) => {\n    if (!this.getProps().manual && !this.timer) {\n      this.timer = globalObject.setTimeout(this.open, 400);\n    }\n\n    if (this.props.onMouseEnter) {\n      this.props.onMouseEnter(e);\n    }\n  };\n\n  private handleMouseLeave = (e: MouseEventType) => {\n    if (!this.getProps().manual && this.timer) {\n      globalObject.clearTimeout(this.timer);\n      this.timer = null;\n      this.setState({ opened: false });\n    }\n\n    if (this.props.onMouseLeave) {\n      this.props.onMouseLeave(e);\n    }\n  };\n\n  private open = () => {\n    this.setState({ opened: true });\n  };\n}\n"]}

package/components/Hint/Hint.d.ts

@@ -73,7 +73,6 @@ export declare class Hint extends React.PureComponent<HintProps, HintState> impl
     state: HintState;
     private timer;
     private theme;
-    private emotion;
     private featureFlags;
     private setRootNode;
     private positions;

package/components/Hint/Hint.styles/Hint.styles.js

@@ -2,14 +2,12 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 var _templateObject, _templateObject2;
 
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    content: function content(t) {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        box-sizing: border-box;\n        color: ", ";\n        font-size: ", ";\n        line-height: ", ";\n        max-width: ", ";\n        overflow-wrap: break-word;\n        padding: ", " ", ";\n        word-break: break-word;\n        word-wrap: break-word;\n      "])), t.hintColor, t.hintFontSize, t.hintLineHeight, t.hintMaxWidth, t.hintPaddingY, t.hintPaddingX);
-    },
-    contentCenter: function contentCenter(t) {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        text-align: ", ";\n      "])), t.hintTextAlign);
-    }
-  });
-};
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  content: function content(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      color: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      max-width: ", ";\n      overflow-wrap: break-word;\n      padding: ", " ", ";\n      word-break: break-word;\n      word-wrap: break-word;\n    "])), t.hintColor, t.hintFontSize, t.hintLineHeight, t.hintMaxWidth, t.hintPaddingY, t.hintPaddingX);
+  },
+  contentCenter: function contentCenter(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "])), t.hintTextAlign);
+  }
+});

package/components/Hint/Hint.styles/Hint.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Hint.styles.ts"],"names":["memoizeStyle","getStyles","emotion","content","t","css","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","contentCenter","hintTextAlign"],"mappings":";;;AAGA,SAASA,YAAT,QAA6B,2BAA7B;;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,OADW,mBACHC,CADG,EACO;AAChB,eAAOF,OAAO,CAACG,GAAf;;AAEWD,QAAAA,CAAC,CAACE,SAFb;AAGeF,QAAAA,CAAC,CAACG,YAHjB;AAIiBH,QAAAA,CAAC,CAACI,cAJnB;AAKeJ,QAAAA,CAAC,CAACK,YALjB;;AAOaL,QAAAA,CAAC,CAACM,YAPf,EAO+BN,CAAC,CAACO,YAPjC;;;;AAWD,OAbU;;AAeXC,MAAAA,aAfW,yBAeGR,CAfH,EAea;AACtB,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACS,aADlB;;AAGD,OAnBU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    content(t: Theme) {\n      return emotion.css`\n        box-sizing: border-box;\n        color: ${t.hintColor};\n        font-size: ${t.hintFontSize};\n        line-height: ${t.hintLineHeight};\n        max-width: ${t.hintMaxWidth};\n        overflow-wrap: break-word;\n        padding: ${t.hintPaddingY} ${t.hintPaddingX};\n        word-break: break-word;\n        word-wrap: break-word;\n      `;\n    },\n\n    contentCenter(t: Theme) {\n      return emotion.css`\n        text-align: ${t.hintTextAlign};\n      `;\n    },\n  });\n"]}
+{"version":3,"sources":["Hint.styles.ts"],"names":["css","memoizeStyle","styles","content","t","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","contentCenter","hintTextAlign"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,OADiC,mBACzBC,CADyB,EACf;AAChB,WAAOJ,GAAP;;AAEWI,IAAAA,CAAC,CAACC,SAFb;AAGeD,IAAAA,CAAC,CAACE,YAHjB;AAIiBF,IAAAA,CAAC,CAACG,cAJnB;AAKeH,IAAAA,CAAC,CAACI,YALjB;;AAOaJ,IAAAA,CAAC,CAACK,YAPf,EAO+BL,CAAC,CAACM,YAPjC;;;;AAWD,GAbgC;;AAejCC,EAAAA,aAfiC,yBAenBP,CAfmB,EAeT;AACtB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACQ,aADlB;;AAGD,GAnBgC,EAAD,CAA3B","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  content(t: Theme) {\n    return css`\n      box-sizing: border-box;\n      color: ${t.hintColor};\n      font-size: ${t.hintFontSize};\n      line-height: ${t.hintLineHeight};\n      max-width: ${t.hintMaxWidth};\n      overflow-wrap: break-word;\n      padding: ${t.hintPaddingY} ${t.hintPaddingX};\n      word-break: break-word;\n      word-wrap: break-word;\n    `;\n  },\n\n  contentCenter(t: Theme) {\n    return css`\n      text-align: ${t.hintTextAlign};\n    `;\n  },\n});\n"]}

package/components/Hint/Hint.styles.d.ts

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     content(t: Theme): string;
     contentCenter(t: Theme): string;
 };

package/components/Input/Input/Input.js

@@ -17,17 +17,17 @@ import { isEdge, isIE11 } from "../../../lib/client";
 import { isKeyBackspace, isKeyDelete, someKeys } from "../../../lib/events/keyboard/identifiers";
 import { needsPolyfillPlaceholder } from "../../../lib/needsPolyfillPlaceholder";
 import { InternalMaskedInput } from "../../../internal/InternalMaskedInput";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
 import { isFunction } from "../../../lib/utils";
 import { FocusControlWrapper } from "../../../internal/FocusControlWrapper";
-import { EmotionConsumer } from "../../../lib/theming/Emotion";
-import { ThemeConsumer } from "../../../lib/theming/ThemeContext";
+import { styles } from "../Input.styles";
 import { InputLayout } from "../InputLayout/InputLayout";
 import { PolyfillPlaceholder } from "../InputLayout/PolyfillPlaceholder";
-import { getStyles } from "../Input.styles";
 export var inputTypes = ['password', 'text', 'number', 'tel', 'search', 'time', 'date', 'url', 'email'];
 /**
  * @deprecated use SizeProp
@@ -131,7 +131,7 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
     };
 
     _this.renderMain = function (props) {
-      var _this$emotion$cx, _this$emotion$cx2;
+      var _cx, _cx2;
 
       var onMouseEnter = props.onMouseEnter,
           onMouseLeave = props.onMouseLeave,
@@ -170,9 +170,8 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
       var _this$state = _this.state,
           blinking = _this$state.blinking,
           focused = _this$state.focused;
-      var styles = getStyles(_this.emotion);
       var labelProps = {
-        className: _this.emotion.cx(styles.root(_this.theme), _this.getSizeClassName(), (_this$emotion$cx = {}, _this$emotion$cx[styles.focus(_this.theme)] = focused && !warning && !error, _this$emotion$cx[styles.hovering(_this.theme)] = !focused && !disabled && !warning && !error && !borderless, _this$emotion$cx[styles.blink(_this.theme)] = blinking, _this$emotion$cx[styles.borderless()] = borderless && !focused, _this$emotion$cx[styles.disabled(_this.theme)] = disabled, _this$emotion$cx[styles.warning(_this.theme)] = warning, _this$emotion$cx[styles.error(_this.theme)] = error, _this$emotion$cx[styles.focusFallback(_this.theme)] = focused && (isIE11 || isEdge), _this$emotion$cx[styles.warningFallback(_this.theme)] = warning && (isIE11 || isEdge), _this$emotion$cx[styles.errorFallback(_this.theme)] = error && (isIE11 || isEdge), _this$emotion$cx)),
+        className: cx(styles.root(_this.theme), _this.getSizeClassName(), (_cx = {}, _cx[styles.focus(_this.theme)] = focused && !warning && !error, _cx[styles.hovering(_this.theme)] = !focused && !disabled && !warning && !error && !borderless, _cx[styles.blink(_this.theme)] = blinking, _cx[styles.borderless()] = borderless && !focused, _cx[styles.disabled(_this.theme)] = disabled, _cx[styles.warning(_this.theme)] = warning, _cx[styles.error(_this.theme)] = error, _cx[styles.focusFallback(_this.theme)] = focused && (isIE11 || isEdge), _cx[styles.warningFallback(_this.theme)] = warning && (isIE11 || isEdge), _cx[styles.errorFallback(_this.theme)] = error && (isIE11 || isEdge), _cx)),
         'aria-controls': ariaControls,
         style: _extends({
           width: width
@@ -183,7 +182,7 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
       };
 
       var inputProps = _extends({}, rest, {
-        className: _this.emotion.cx(styles.input(_this.theme), (_this$emotion$cx2 = {}, _this$emotion$cx2[styles.inputFocus(_this.theme)] = focused, _this$emotion$cx2[styles.inputDisabled(_this.theme)] = disabled, _this$emotion$cx2)),
+        className: cx(styles.input(_this.theme), (_cx2 = {}, _cx2[styles.inputFocus(_this.theme)] = focused, _cx2[styles.inputDisabled(_this.theme)] = disabled, _cx2)),
         value: value,
         role: role,
         onChange: _this.handleChange,
@@ -233,7 +232,7 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
       }, _this.renderLeftIcon(), _this.renderPrefix()), /*#__PURE__*/React.createElement("span", {
         className: styles.wrapper()
       }, input, _this.renderPlaceholder()), /*#__PURE__*/React.createElement("span", {
-        className: _this.emotion.cx(styles.sideContainer(), styles.rightContainer())
+        className: cx(styles.sideContainer(), styles.rightContainer())
       }, _this.renderSuffix(), _this.renderRightIcon()));
     };
 
@@ -332,7 +331,7 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
     };
 
     _this.renderPrefix = function () {
-      var _this$emotion$cx3;
+      var _cx3;
 
       var _this$props = _this.props,
           prefix = _this$props.prefix,
@@ -342,14 +341,13 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
         return null;
       }
 
-      var styles = getStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
-        className: _this.emotion.cx(styles.prefix(_this.theme), (_this$emotion$cx3 = {}, _this$emotion$cx3[styles.prefixDisabled(_this.theme)] = disabled, _this$emotion$cx3))
+        className: cx(styles.prefix(_this.theme), (_cx3 = {}, _cx3[styles.prefixDisabled(_this.theme)] = disabled, _cx3))
       }, prefix);
     };
 
     _this.renderSuffix = function () {
-      var _this$emotion$cx4;
+      var _cx4;
 
       var _this$props2 = _this.props,
           suffix = _this$props2.suffix,
@@ -359,9 +357,8 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
         return null;
       }
 
-      var styles = getStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
-        className: _this.emotion.cx(styles.suffix(_this.theme), (_this$emotion$cx4 = {}, _this$emotion$cx4[styles.suffixDisabled(_this.theme)] = disabled, _this$emotion$cx4))
+        className: cx(styles.suffix(_this.theme), (_cx4 = {}, _cx4[styles.suffixDisabled(_this.theme)] = disabled, _cx4))
       }, suffix);
     };
 
@@ -485,14 +482,11 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
   _proto.render = function render() {
     var _this4 = this;
 
-    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
-      _this4.emotion = emotion;
-      return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
-        _this4.theme = theme;
-        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-          rootNodeRef: _this4.setRootNode
-        }, _this4.props), _this4.renderMain);
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this4.theme = theme;
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this4.setRootNode
+      }, _this4.props), _this4.renderMain);
     });
   };
 
@@ -513,8 +507,6 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
       right = false;
     }
 
-    var styles = getStyles(this.emotion);
-
     switch (this.getProps().size) {
       case 'large':
         return right ? styles.rightIconLarge(this.theme) : styles.leftIconLarge(this.theme);
@@ -537,7 +529,7 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
   };
 
   _proto.renderIcon = function renderIcon(icon, sizeClassName) {
-    var _this$emotion$cx5;
+    var _cx5;
 
     if (!icon) {
       return null;
@@ -545,9 +537,8 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
 
     var disabled = this.props.disabled;
     var iconNode = isFunction(icon) ? icon() : icon;
-    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement("span", {
-      className: this.emotion.cx(styles.icon(), sizeClassName, styles.useDefaultColor(this.theme), (_this$emotion$cx5 = {}, _this$emotion$cx5[styles.iconFocus(this.theme)] = this.state.focused, _this$emotion$cx5[styles.iconDisabled()] = disabled, _this$emotion$cx5))
+      className: cx(styles.icon(), sizeClassName, styles.useDefaultColor(this.theme), (_cx5 = {}, _cx5[styles.iconFocus(this.theme)] = this.state.focused, _cx5[styles.iconDisabled()] = disabled, _cx5))
     }, iconNode);
   };
 
@@ -557,11 +548,10 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
     var placeholder = null;
 
     if (this.state.needsPolyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value && !this.props.defaultValue) {
-      var _this$emotion$cx6;
+      var _cx6;
 
-      var styles = getStyles(this.emotion);
       placeholder = /*#__PURE__*/React.createElement("div", {
-        className: this.emotion.cx(styles.placeholder(this.theme), (_this$emotion$cx6 = {}, _this$emotion$cx6[styles.placeholderDisabled(this.theme)] = disabled, _this$emotion$cx6[styles.placeholderFocus(this.theme)] = focused, _this$emotion$cx6)),
+        className: cx(styles.placeholder(this.theme), (_cx6 = {}, _cx6[styles.placeholderDisabled(this.theme)] = disabled, _cx6[styles.placeholderFocus(this.theme)] = focused, _cx6)),
         style: {
           textAlign: this.props.align || 'inherit'
         }
@@ -572,20 +562,18 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
   };
 
   _proto.getSizeClassName = function getSizeClassName() {
-    var _this$emotion$cx7, _this$emotion$cx8, _this$emotion$cx9;
-
-    var styles = getStyles(this.emotion);
+    var _cx7, _cx8, _cx9;
 
     switch (this.getProps().size) {
       case 'large':
-        return this.emotion.cx((_this$emotion$cx7 = {}, _this$emotion$cx7[styles.sizeLarge(this.theme)] = true, _this$emotion$cx7[styles.sizeLargeFallback(this.theme)] = isIE11 || isEdge, _this$emotion$cx7));
+        return cx((_cx7 = {}, _cx7[styles.sizeLarge(this.theme)] = true, _cx7[styles.sizeLargeFallback(this.theme)] = isIE11 || isEdge, _cx7));
 
       case 'medium':
-        return this.emotion.cx((_this$emotion$cx8 = {}, _this$emotion$cx8[styles.sizeMedium(this.theme)] = true, _this$emotion$cx8[styles.sizeMediumFallback(this.theme)] = isIE11 || isEdge, _this$emotion$cx8));
+        return cx((_cx8 = {}, _cx8[styles.sizeMedium(this.theme)] = true, _cx8[styles.sizeMediumFallback(this.theme)] = isIE11 || isEdge, _cx8));
 
       case 'small':
       default:
-        return this.emotion.cx((_this$emotion$cx9 = {}, _this$emotion$cx9[styles.sizeSmall(this.theme)] = true, _this$emotion$cx9[styles.sizeSmallFallback(this.theme)] = isIE11 || isEdge, _this$emotion$cx9));
+        return cx((_cx9 = {}, _cx9[styles.sizeSmall(this.theme)] = true, _cx9[styles.sizeSmallFallback(this.theme)] = isIE11 || isEdge, _cx9));
     }
   };