@skbkontur/react-ui 0.0.0-f50cd2db6e → 0.0.0-fed57d84fb

package/components/GlobalLoader/GlobalLoaderView.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/GlobalLoader/GlobalLoaderView.styles.js",
+  "module": "GlobalLoaderView.styles",
+  "types": "../GlobalLoaderView.styles.d.ts",
+  "sideEffects": false
+}

package/components/GlobalLoader/GlobalLoaderView.styles.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    outer(t: Theme): string;
+    inner(t: Theme): string;
+    standardWithoutAnimation(): string;
+    successWithoutAnimation(): string;
+    errorWithoutAnimation(): string;
+};
+export declare const animations: {
+    successAnimation(delayBeforeHide: number, width: number, left: number): string;
+    errorAnimation(t: Theme): string;
+    standardAnimation(t: Theme, expectedTime: number): string;
+    acceptAnimation(t: Theme, startWidth: number, expectedTime: number, width: number, left: number): string;
+    slowAcceptAnimation(t: Theme, startWidth: number, width: number, left: number): string;
+    acceptWithoutAnimation(startWidth: number): string;
+};

package/components/GlobalLoader/index/index.js

@@ -0,0 +1 @@
+export * from "../GlobalLoader";

package/components/GlobalLoader/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAd","sourcesContent":["export * from './GlobalLoader';\n"]}

package/components/GlobalLoader/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/GlobalLoader/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/components/GlobalLoader/index.d.ts

@@ -0,0 +1 @@
+export * from './GlobalLoader';

package/components/GlobalLoader/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/components/GlobalLoader/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/components/GlobalLoader/useParams/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/GlobalLoader/useParams.js",
+  "module": "useParams",
+  "types": "../useParams.d.ts",
+  "sideEffects": false
+}

package/components/GlobalLoader/useParams/useParams.js

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
+/**
+ * Вычисляет положение `GlobalLoader`
+ *
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает положение полоски `GlobalLoader`
+ */
+
+export var useGlobalLoaderPosition = function useGlobalLoaderPosition(ref) {
+  var _getDOMRect = getDOMRect(ref),
+      left = _getDOMRect.left;
+
+  return {
+    left: left
+  };
+};
+/**
+ * Вычисляет ширину `GlobalLoader`
+ *
+ * @param status - статус `GlobalLoader`
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает ширину полоски `GlobalLoader`
+ */
+
+export var useGlobalLoaderWidth = function useGlobalLoaderWidth(status, ref) {
+  var _ref$current, _ref$current$parentEl;
+
+  var _getDOMRect2 = getDOMRect(ref),
+      width = _getDOMRect2.width;
+
+  var _useState = useState(0),
+      startWidth = _useState[0],
+      setStartWidth = _useState[1];
+
+  var fullWidth = ((_ref$current = ref.current) == null ? void 0 : (_ref$current$parentEl = _ref$current.parentElement) == null ? void 0 : _ref$current$parentEl.offsetWidth) || 0;
+  useEffect(function () {
+    if (status === 'error') {
+      setStartWidth(width);
+    } else if (status === 'accept') {
+      setStartWidth(startWidth);
+    } else {
+      setStartWidth(0);
+    }
+  }, [status]);
+  return {
+    width: width,
+    startWidth: startWidth,
+    fullWidth: fullWidth
+  };
+};

package/components/GlobalLoader/useParams/useParams.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useParams.ts"],"names":["useEffect","useState","getDOMRect","useGlobalLoaderPosition","ref","left","useGlobalLoaderWidth","status","width","startWidth","setStartWidth","fullWidth","current","parentElement","offsetWidth"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,QAApB,QAAoC,OAApC;;AAEA,SAASC,UAAT,QAA2B,0BAA3B;;;;AAIA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,IAAMC,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACC,GAAD,EAA2C;AAChF,oBAAiBF,UAAU,CAACE,GAAD,CAA3B,CAAQC,IAAR,eAAQA,IAAR;AACA,SAAO,EAAEA,IAAI,EAAJA,IAAF,EAAP;AACD,CAHM;;AAKP;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB;AAClCC,MADkC;AAElCH,GAFkC;AAG/B;AACH,qBAAkBF,UAAU,CAACE,GAAD,CAA5B,CAAQI,KAAR,gBAAQA,KAAR;AACA,kBAAoCP,QAAQ,CAAC,CAAD,CAA5C,CAAOQ,UAAP,gBAAmBC,aAAnB;AACA,MAAMC,SAAS,GAAG,iBAAAP,GAAG,CAACQ,OAAJ,2DAAaC,aAAb,2CAA4BC,WAA5B,KAA2C,CAA7D;AACAd,EAAAA,SAAS,CAAC,YAAM;AACd,QAAIO,MAAM,KAAK,OAAf,EAAwB;AACtBG,MAAAA,aAAa,CAACF,KAAD,CAAb;AACD,KAFD,MAEO,IAAID,MAAM,KAAK,QAAf,EAAyB;AAC9BG,MAAAA,aAAa,CAACD,UAAD,CAAb;AACD,KAFM,MAEA;AACLC,MAAAA,aAAa,CAAC,CAAD,CAAb;AACD;AACF,GARQ,EAQN,CAACH,MAAD,CARM,CAAT;;AAUA,SAAO,EAAEC,KAAK,EAALA,KAAF,EAASC,UAAU,EAAVA,UAAT,EAAqBE,SAAS,EAATA,SAArB,EAAP;AACD,CAlBM","sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { GlobalLoaderViewProps, GlobalLoaderViewRef } from './GlobalLoaderView';\n\n/**\n * Вычисляет положение `GlobalLoader`\n *\n * @param ref - ref `GlobalLoader`\n * @returns - возвращает положение полоски `GlobalLoader`\n */\n\nexport const useGlobalLoaderPosition = (ref: GlobalLoaderViewRef['refObject']) => {\n  const { left } = getDOMRect(ref);\n  return { left };\n};\n\n/**\n * Вычисляет ширину `GlobalLoader`\n *\n * @param status - статус `GlobalLoader`\n * @param ref - ref `GlobalLoader`\n * @returns - возвращает ширину полоски `GlobalLoader`\n */\n\nexport const useGlobalLoaderWidth = (\n  status: GlobalLoaderViewProps['status'],\n  ref: GlobalLoaderViewRef['refObject'],\n) => {\n  const { width } = getDOMRect(ref);\n  const [startWidth, setStartWidth] = useState(0);\n  const fullWidth = ref.current?.parentElement?.offsetWidth || 0;\n  useEffect(() => {\n    if (status === 'error') {\n      setStartWidth(width);\n    } else if (status === 'accept') {\n      setStartWidth(startWidth);\n    } else {\n      setStartWidth(0);\n    }\n  }, [status]);\n\n  return { width, startWidth, fullWidth };\n};\n"]}

package/components/GlobalLoader/useParams.d.ts

@@ -0,0 +1,22 @@
+import { GlobalLoaderViewProps, GlobalLoaderViewRef } from './GlobalLoaderView';
+/**
+ * Вычисляет положение `GlobalLoader`
+ *
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает положение полоски `GlobalLoader`
+ */
+export declare const useGlobalLoaderPosition: (ref: GlobalLoaderViewRef['refObject']) => {
+    left: number;
+};
+/**
+ * Вычисляет ширину `GlobalLoader`
+ *
+ * @param status - статус `GlobalLoader`
+ * @param ref - ref `GlobalLoader`
+ * @returns - возвращает ширину полоски `GlobalLoader`
+ */
+export declare const useGlobalLoaderWidth: (status: GlobalLoaderViewProps['status'], ref: GlobalLoaderViewRef['refObject']) => {
+    width: number;
+    startWidth: number;
+    fullWidth: number;
+};

package/components/Group/Group/Group.js

@@ -6,12 +6,67 @@ var _class, _class2, _temp;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isIE11, isEdge } from "../../../lib/client";
-import { Corners } from "../../Button/Corners";
 import { isButton } from "../../Button";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { styles } from "../Group.styles";
+
+var getFirstChild = function getFirstChild(children) {
+  if (!Array.isArray(children)) {
+    return children;
+  }
+
+  return children == null ? void 0 : children[0];
+};
+
+var getLastChild = function getLastChild(children) {
+  if (!Array.isArray(children)) {
+    return children;
+  }
+
+  var numberOfChildren = React.Children.count(children);
+  return children == null ? void 0 : children[numberOfChildren - 1];
+};
+
+var getButtonCorners = function getButtonCorners(child, firstChild, lastChild) {
+  if (firstChild === lastChild) {
+    return {};
+  }
+
+  if (child === firstChild) {
+    return {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    };
+  }
+
+  if (child === lastChild) {
+    return {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    };
+  }
+
+  return {
+    borderRadius: 0
+  };
+};
+
+var passCornersIfButton = function passCornersIfButton(child, firstChild, lastChild) {
+  if (isButton(child)) {
+    var corners = getButtonCorners(child, firstChild, lastChild);
+    return /*#__PURE__*/React.cloneElement(child, {
+      corners: corners
+    });
+  }
+
+  return child;
+};
+
+export var GroupDataTids = {
+  root: 'Group__root'
+};
 export var Group = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Group, _React$Component);
 
@@ -27,20 +82,16 @@ export var Group = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     var style = {
       width: this.props.width
     };
-    var first = null;
-    var last = null;
-    React.Children.forEach(this.props.children, function (child) {
-      if (child && /*#__PURE__*/React.isValidElement(child)) {
-        first = first || child;
-        last = child;
-      }
-    });
+    var childrenArray = React.Children.toArray(this.props.children);
+    var firstChild = getFirstChild(childrenArray);
+    var lastChild = getLastChild(childrenArray);
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement("span", {
+      "data-tid": GroupDataTids.root,
       className: styles.root(),
       style: style
-    }, React.Children.map(this.props.children, function (child) {
+    }, React.Children.map(childrenArray, function (child) {
       var _cx, _cx2;
 
       if (!child || ! /*#__PURE__*/React.isValidElement(child)) {
@@ -48,28 +99,13 @@ export var Group = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       }
 
       var isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));
-      var itemCss = cx((_cx = {}, _cx[styles.item()] = true, _cx[styles.itemFirst()] = child === first, _cx));
-      var corners = 0;
-
-      if (child !== first) {
-        corners |= Corners.TOP_LEFT | Corners.BOTTOM_LEFT;
-      }
-
-      if (child !== last) {
-        corners |= Corners.TOP_RIGHT | Corners.BOTTOM_RIGHT;
-      }
-
-      if (isButton(child)) {
-        child = /*#__PURE__*/React.cloneElement(child, {
-          corners: corners
-        });
-      }
-
+      var modifiedChild = passCornersIfButton(child, firstChild, lastChild);
+      var isFirstChild = child === firstChild;
       return /*#__PURE__*/React.createElement("div", {
-        className: cx((_cx2 = {}, _cx2[styles.fixed()] = !isWidthInPercent, _cx2[styles.stretch()] = isWidthInPercent, _cx2[styles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (isIE11 || isEdge)), _cx2))
+        className: cx((_cx = {}, _cx[styles.fixed()] = !isWidthInPercent, _cx[styles.stretch()] = isWidthInPercent, _cx[styles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (isIE11 || isEdge)), _cx))
       }, /*#__PURE__*/React.createElement("div", {
-        className: itemCss
-      }, child));
+        className: cx((_cx2 = {}, _cx2[styles.item()] = true, _cx2[styles.itemFirst()] = isFirstChild, _cx2))
+      }, modifiedChild));
     })));
   };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["Group.tsx"],"names":["React","PropTypes","isIE11","isEdge","Corners","isButton","CommonWrapper","cx","rootNode","styles","Group","render","style","width","props","first","last","Children","forEach","children","child","isValidElement","setRootNode","root","map","isWidthInPercent","Boolean","toString","includes","itemCss","item","itemFirst","corners","TOP_LEFT","BOTTOM_LEFT","TOP_RIGHT","BOTTOM_RIGHT","cloneElement","fixed","stretch","stretchFallback","Component","__KONTUR_REACT_UI__","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 { Corners } from '../Button/Corners';\nimport { Nullable } from '../../typings/utility-types';\nimport { isButton } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\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\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  private setRootNode!: TSetRootNode;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    let first: Nullable<React.ReactElement<any>> = null;\n    let last: Nullable<React.ReactElement<any>> = null;\n\n    React.Children.forEach(this.props.children, (child) => {\n      if (child && React.isValidElement(child)) {\n        first = first || child;\n        last = child;\n      }\n    });\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span className={styles.root()} style={style}>\n          {React.Children.map(this.props.children, (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            const itemCss = cx({\n              [styles.item()]: true,\n              [styles.itemFirst()]: child === first,\n            });\n\n            let corners = 0;\n            if (child !== first) {\n              corners |= Corners.TOP_LEFT | Corners.BOTTOM_LEFT;\n            }\n            if (child !== last) {\n              corners |= Corners.TOP_RIGHT | Corners.BOTTOM_RIGHT;\n            }\n\n            if (isButton(child)) {\n              child = React.cloneElement(child, { corners });\n            }\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 className={itemCss}>{child}</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","styles","getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","Children","count","getButtonCorners","child","firstChild","lastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCornersIfButton","corners","cloneElement","GroupDataTids","root","Group","render","style","width","props","childrenArray","toArray","setRootNode","map","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","isFirstChild","fixed","stretch","stretchFallback","item","itemFirst","Component","__KONTUR_REACT_UI__","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';\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\nconst getButtonCorners = (\n  child: React.ReactNode,\n  firstChild: React.ReactNode,\n  lastChild: React.ReactNode,\n): React.CSSProperties => {\n  if (firstChild === lastChild) {\n    return {};\n  }\n\n  if (child === firstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (child === lastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst passCornersIfButton = (child: React.ReactNode, firstChild: React.ReactNode, lastChild: React.ReactNode) => {\n  if (isButton(child)) {\n    const corners = getButtonCorners(child, firstChild, lastChild);\n\n    return React.cloneElement(child, { 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  private setRootNode!: TSetRootNode;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\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);\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

@@ -4,6 +4,9 @@ import { CommonProps } from '../../internal/CommonWrapper';
 export interface GroupProps extends CommonProps {
     width?: React.CSSProperties['width'];
 }
+export declare const GroupDataTids: {
+    readonly root: "Group__root";
+};
 export declare class Group extends React.Component<GroupProps> {
     static __KONTUR_REACT_UI__: string;
     private setRootNode;

package/components/Hint/Hint/Hint.js

@@ -34,6 +34,13 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
       opened: _this.props.manual ? !!_this.props.opened : false
     };
     _this.timer = null;
+    _this.popupRef = /*#__PURE__*/React.createRef();
+
+    _this.getAnchorElement = function () {
+      var _this$popupRef$curren;
+
+      return (_this$popupRef$curren = _this.popupRef.current) == null ? void 0 : _this$popupRef$curren.anchorElement;
+    };
 
     _this.getPositions = function () {
       return Positions.filter(function (x) {
@@ -146,7 +153,8 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
       disableAnimations: this.props.disableAnimations,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
-      useWrapper: this.props.useWrapper
+      useWrapper: this.props.useWrapper,
+      ref: this.popupRef
     }, this.renderContent()));
   };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["Hint.tsx"],"names":["React","ThemeContext","ThemeFactory","Popup","isTestEnv","CommonWrapper","cx","responsiveLayout","rootNode","styles","HINT_BORDER_COLOR","Positions","Hint","state","opened","props","manual","timer","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","close","componentDidUpdate","prevProps","componentWillUnmount","render","theme","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","isMobileLayout","renderMobile","renderMain","children","undefined","renderContent","setRootNode","hintBgColor","disableAnimations","useWrapper","text","maxWidth","className","content","contentCenter","mobileContent","PureComponent","__KONTUR_REACT_UI__","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Popup, PopupPosition } 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 { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\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   * В _\"ручном режиме\"_ подcказку можно активировать только задав значение пропу `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:\n    | 'top'\n    | 'right'\n    | 'bottom'\n    | 'left'\n    | 'top left'\n    | 'top center'\n    | 'top right'\n    | 'bottom left'\n    | 'bottom center'\n    | 'bottom right'\n    | 'left top'\n    | 'left middle'\n    | 'left bottom'\n    | 'right top'\n    | 'right middle'\n    | 'right bottom';\n  /**\n   * Текст подсказки.\n   */\n  text: React.ReactNode;\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}\n\nconst Positions: PopupPosition[] = [\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\n/**\n * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@responsiveLayout\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> {\n  public static __KONTUR_REACT_UI__ = 'Hint';\n\n  private isMobileLayout!: boolean;\n\n  public static defaultProps = {\n    pos: 'top',\n    manual: false,\n    opened: false,\n    maxWidth: 200,\n    disableAnimations: isTestEnv,\n    useWrapper: false,\n  };\n\n  public state: HintState = {\n    opened: this.props.manual ? !!this.props.opened : false,\n  };\n\n  private timer: Nullable<number> = null;\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidUpdate(prevProps: HintProps) {\n    if (!this.props.manual) {\n      return;\n    }\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n    if (this.props.opened !== prevProps.opened) {\n      this.setState({ opened: !!this.props.opened });\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n  }\n\n  public render() {\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.isMobileLayout ? this.renderMobile() : this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMobile() {\n    return (\n      <CommonWrapper {...this.props}>\n        <Popup\n          opened={this.state.opened}\n          anchorElement={this.props.children}\n          positions={[]}\n          onClick={!this.props.manual ? this.open : undefined}\n          mobileOnCloseRequest={!this.props.manual ? this.close : undefined}\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  public renderMain() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <Popup\n          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          disableAnimations={this.props.disableAnimations}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          useWrapper={this.props.useWrapper}\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  private renderContent() {\n    if (!this.props.text) {\n      return null;\n    }\n\n    const { pos, maxWidth } = this.props;\n    const className = cx({\n      [styles.content(this.theme)]: true,\n      [styles.contentCenter(this.theme)]: pos === 'top' || pos === 'bottom',\n      [styles.mobileContent(this.theme)]: this.isMobileLayout,\n    });\n    return (\n      <div className={className} style={{ maxWidth: this.isMobileLayout ? '100%' : maxWidth }}>\n        {this.props.text}\n      </div>\n    );\n  }\n\n  private getPositions = (): PopupPosition[] => {\n    return Positions.filter((x) => x.startsWith(this.props.pos));\n  };\n\n  private handleMouseEnter = (e: MouseEventType) => {\n    if (!this.props.manual && !this.timer) {\n      this.timer = window.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.props.manual && this.timer) {\n      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 close = () => {\n    this.setState({ opened: false });\n  };\n\n  private open = () => {\n    this.setState({ opened: true });\n  };\n}\n"]}
+{"version":3,"sources":["Hint.tsx"],"names":["React","ThemeContext","ThemeFactory","Popup","isTestEnv","CommonWrapper","cx","responsiveLayout","rootNode","styles","HINT_BORDER_COLOR","Positions","Hint","state","opened","props","manual","timer","popupRef","createRef","getAnchorElement","current","anchorElement","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","close","componentDidUpdate","prevProps","componentWillUnmount","render","theme","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","isMobileLayout","renderMobile","renderMain","children","undefined","renderContent","setRootNode","hintBgColor","disableAnimations","useWrapper","text","maxWidth","className","content","contentCenter","mobileContent","PureComponent","__KONTUR_REACT_UI__","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { 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 { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';\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   */\n  disableAnimations: boolean;\n  /**\n   * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.\n   *\n   * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.\n   */\n  useWrapper: boolean;\n}\n\nexport interface HintState {\n  opened: boolean;\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\n/**\n * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@responsiveLayout\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n  public static __KONTUR_REACT_UI__ = 'Hint';\n\n  private isMobileLayout!: boolean;\n\n  public static defaultProps = {\n    pos: 'top',\n    manual: false,\n    opened: false,\n    maxWidth: 200,\n    disableAnimations: isTestEnv,\n    useWrapper: false,\n  };\n\n  public state: HintState = {\n    opened: this.props.manual ? !!this.props.opened : false,\n  };\n\n  private timer: Nullable<number> = null;\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  private popupRef = React.createRef<Popup>();\n\n  public componentDidUpdate(prevProps: HintProps) {\n    if (!this.props.manual) {\n      return;\n    }\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n    if (this.props.opened !== prevProps.opened) {\n      this.setState({ opened: !!this.props.opened });\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n  }\n\n  public render() {\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.isMobileLayout ? this.renderMobile() : this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMobile() {\n    return (\n      <CommonWrapper {...this.props}>\n        <Popup\n          opened={this.state.opened}\n          anchorElement={this.props.children}\n          positions={[]}\n          onClick={!this.props.manual ? this.open : undefined}\n          mobileOnCloseRequest={!this.props.manual ? this.close : undefined}\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  public renderMain() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <Popup\n          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          disableAnimations={this.props.disableAnimations}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          useWrapper={this.props.useWrapper}\n          ref={this.popupRef}\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  public getAnchorElement = (): Nullable<HTMLElement> => {\n    return this.popupRef.current?.anchorElement;\n  };\n\n  private renderContent() {\n    if (!this.props.text) {\n      return null;\n    }\n\n    const { pos, maxWidth } = this.props;\n    const className = cx({\n      [styles.content(this.theme)]: true,\n      [styles.contentCenter(this.theme)]: pos === 'top' || pos === 'bottom',\n      [styles.mobileContent(this.theme)]: this.isMobileLayout,\n    });\n    return (\n      <div className={className} style={{ maxWidth: this.isMobileLayout ? '100%' : maxWidth }}>\n        {this.props.text}\n      </div>\n    );\n  }\n\n  private getPositions = (): PopupPositionsType[] => {\n    return Positions.filter((x) => x.startsWith(this.props.pos));\n  };\n\n  private handleMouseEnter = (e: MouseEventType) => {\n    if (!this.props.manual && !this.timer) {\n      this.timer = window.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.props.manual && this.timer) {\n      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 close = () => {\n    this.setState({ opened: false });\n  };\n\n  private open = () => {\n    this.setState({ opened: true });\n  };\n}\n"]}

package/components/Hint/Hint.d.ts

@@ -1,12 +1,15 @@
 import React from 'react';
+import { PopupPositionsType } from '../../internal/Popup';
+import { Nullable } from '../../typings/utility-types';
 import { MouseEventType } from '../../typings/event-types';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';
 export interface HintProps extends CommonProps {
     children?: React.ReactNode;
     /**
      * Переводит отображение подсказки в _"ручной режим"_.
      *
-     * В _"ручном режиме"_ подcказку можно активировать только задав значение пропу `opened`.
+     * В _"ручном режиме"_ подсказку можно активировать только задав значение пропу `opened`.
      */
     manual?: boolean;
     /**
@@ -32,7 +35,7 @@ export interface HintProps extends CommonProps {
      *
      * **Допустимые значения**: `"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"`.
      */
-    pos: 'top' | 'right' | 'bottom' | 'left' | 'top left' | 'top center' | 'top right' | 'bottom left' | 'bottom center' | 'bottom right' | 'left top' | 'left middle' | 'left bottom' | 'right top' | 'right middle' | 'right bottom';
+    pos: 'top' | 'right' | 'bottom' | 'left' | PopupPositionsType;
     /**
      * Текст подсказки.
      */
@@ -54,7 +57,7 @@ export interface HintState {
 /**
  * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
  */
-export declare class Hint extends React.PureComponent<HintProps, HintState> {
+export declare class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {
     static __KONTUR_REACT_UI__: string;
     private isMobileLayout;
     static defaultProps: {
@@ -69,11 +72,13 @@ export declare class Hint extends React.PureComponent<HintProps, HintState> {
     private timer;
     private theme;
     private setRootNode;
+    private popupRef;
     componentDidUpdate(prevProps: HintProps): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
     renderMobile(): JSX.Element;
     renderMain(): JSX.Element;
+    getAnchorElement: () => Nullable<HTMLElement>;
     private renderContent;
     private getPositions;
     private handleMouseEnter;

package/components/Input/Input/Input.js

@@ -11,19 +11,22 @@ import React from 'react';
 import raf from 'raf';
 import { isIE11, isEdge } from "../../../lib/client";
 import { isKeyBackspace, isKeyDelete, someKeys } from "../../../lib/events/keyboard/identifiers";
-import { polyfillPlaceholder } from "../../../lib/polyfillPlaceholder";
+import { needsPolyfillPlaceholder } from "../../../lib/needsPolyfillPlaceholder";
 import { MaskedInput } from "../../../internal/MaskedInput";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { styles } from "../Input.styles";
-export
+export var InputDataTids = {
+  root: 'Input__root'
+};
 /**
-* Интерфес пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
-*  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
-*/
-var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+ * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
+ *  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
+ */
+
+export var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Input, _React$Component);
 
   function Input() {
@@ -35,7 +38,7 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.state = {
-      polyfillPlaceholder: false,
+      needsPolyfillPlaceholder: needsPolyfillPlaceholder,
       blinking: false,
       focused: false
     };
@@ -136,7 +139,7 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
         },
         ref: _this.refInput,
         type: 'text',
-        placeholder: !_this.isMaskVisible && !polyfillPlaceholder ? placeholder : undefined,
+        placeholder: !_this.isMaskVisible && !needsPolyfillPlaceholder ? placeholder : undefined,
         disabled: disabled
       });
 
@@ -145,7 +148,9 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
       }
 
       var input = mask ? _this.renderMaskedInput(inputProps, mask) : /*#__PURE__*/React.createElement('input', inputProps);
-      return /*#__PURE__*/React.createElement("label", labelProps, /*#__PURE__*/React.createElement("span", {
+      return /*#__PURE__*/React.createElement("label", _extends({
+        "data-tid": InputDataTids.root
+      }, labelProps), /*#__PURE__*/React.createElement("span", {
         className: styles.sideContainer()
       }, _this.renderLeftIcon(), _this.renderPrefix()), /*#__PURE__*/React.createElement("span", {
         className: styles.wrapper()
@@ -163,12 +168,12 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
     };
 
     _this.handleChange = function (event) {
-      if (polyfillPlaceholder) {
+      if (needsPolyfillPlaceholder) {
         var fieldIsEmpty = event.target.value === '';
 
-        if (_this.state.polyfillPlaceholder !== fieldIsEmpty) {
+        if (_this.state.needsPolyfillPlaceholder !== fieldIsEmpty) {
           _this.setState({
-            polyfillPlaceholder: fieldIsEmpty
+            needsPolyfillPlaceholder: fieldIsEmpty
           });
         }
       }
@@ -284,30 +289,12 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
 
   var _proto = Input.prototype;
 
-  _proto.componentDidMount = function componentDidMount() {
-    if (polyfillPlaceholder) {
-      this.setState({
-        polyfillPlaceholder: true
-      });
-    }
-  };
-
   _proto.componentWillUnmount = function componentWillUnmount() {
     if (this.blinkTimeout) {
       clearTimeout(this.blinkTimeout);
     }
 
     this.cancelDelayedSelectAll();
-  };
-
-  Input.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
-    if (polyfillPlaceholder && !props.value) {
-      return {
-        polyfillPlaceholder: true
-      };
-    }
-
-    return state;
   }
   /**
   * @public
@@ -451,7 +438,7 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
     var focused = this.state.focused;
     var placeholder = null;
 
-    if (this.state.polyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value) {
+    if (this.state.needsPolyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value && !this.props.defaultValue) {
       var _cx6;
 
       placeholder = /*#__PURE__*/React.createElement("div", {