@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-eab52adf66

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_propTypes","_client","_CommonWrapper","_Emotion","_rootNode","_utils","_Group2","_class","_Group","getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","React","Children","count","getButtonCorners","exports","isFirstChild","isLastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","tryPassCorners","child","firstChild","lastChild","corners","isButton","isInput","isFxInput","isAutocomplete","isPasswordInput","isCurrencyInput","isSelect","isDropdown","isDropdownMenu","cloneElement","_extends2","default","props","GroupDataTids","root","Group","rootNode","_React$Component","apply","arguments","_inheritsLoose2","_proto","prototype","render","_this","style","width","childrenArray","toArray","createElement","CommonWrapper","rootNodeRef","setRootNode","className","styles","map","_cx","_cx2","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","cx","fixed","stretch","stretchFallback","isIE11","isEdge","item","itemFirst","Component","__KONTUR_REACT_UI__","displayName","propTypes","PropTypes","oneOfType","number","string"],"sources":["Group.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport type { TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport {\n  isButton,\n  isAutocomplete,\n  isCurrencyInput,\n  isDropdown,\n  isDropdownMenu,\n  isFxInput,\n  isInput,\n  isPasswordInput,\n  isSelect,\n} from '../../lib/utils';\n\nimport { styles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  /** Задает длину компонента Group. */\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 tryPassCorners = (child: React.ReactNode, firstChild: React.ReactNode, lastChild: React.ReactNode) => {\n  const corners = getButtonCorners(child === firstChild, child === lastChild);\n\n  if (\n    isButton(child) ||\n    isInput(child) ||\n    isFxInput(child) ||\n    isAutocomplete(child) ||\n    isPasswordInput(child) ||\n    isCurrencyInput(child) ||\n    isSelect(child) ||\n    isDropdown(child) ||\n    isDropdownMenu(child)\n  ) {\n    return React.cloneElement<(typeof child)['props']>(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/**\n *  Компонент `Group` используется для создания логически сгруппированных элементов, выровненных по горизонтали.\n *\n *  Длина контейнера настраивается с помощью пропа `width`.\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\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 = tryPassCorners(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"],"mappings":"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","ignoreList":[]}

package/cjs/components/Group/Group.md

@@ -0,0 +1,19 @@
+### Базовый пример
+```jsx harmony
+import { MathFunctionIcon16Regular } from '@skbkontur/icons/icons/MathFunctionIcon/MathFunctionIcon16Regular';
+import { SearchLoupeIcon16Regular } from '@skbkontur/icons/icons/SearchLoupeIcon/SearchLoupeIcon16Regular';
+import { Button, Input } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState('Foo');
+
+<Group width={300}>
+  <Button>
+    <MathFunctionIcon16Regular />
+  </Button>
+  <Input value={value} width="100%" onValueChange={setValue} />
+  <Button>
+    <SearchLoupeIcon16Regular />
+  </Button>
+  <Button>Bar</Button>
+</Group>;
+```

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

@@ -0,0 +1,8 @@
+export declare const styles: {
+    root(): string;
+    fixed(): string;
+    stretch(): string;
+    stretchFallback(): string;
+    item(): string;
+    itemFirst(): string;
+};

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

@@ -0,0 +1,42 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var styles = exports.styles = (0, _Emotion.memoizeStyle)({
+  root: function root() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      line-height: normal;\n    "])));
+
+
+
+  },
+
+  fixed: function fixed() {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-shrink: 0;\n      display: inline-block;\n    "])));
+
+
+
+  },
+
+  stretch: function stretch() {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-grow: 1;\n      flex-shrink: 1;\n    "])));
+
+
+
+  },
+
+  stretchFallback: function stretchFallback() {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-basis: 100%;\n    "])));
+
+
+  },
+
+  item: function item() {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: -1px;\n    "])));
+
+
+  },
+
+  itemFirst: function itemFirst() {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: 0;\n    "])));
+
+
+  }
+});

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

@@ -0,0 +1 @@
+{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","styles","exports","memoizeStyle","root","css","_taggedTemplateLiteralLoose2","default","fixed","stretch","stretchFallback","item","itemFirst"],"sources":["Group.styles.ts"],"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"],"mappings":"oRAAA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAEvD,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,IAAI,WAAAA,KAAA,EAAG;IACL,WAAOC,YAAG,EAAAV,eAAA,KAAAA,eAAA,OAAAW,4BAAA,CAAAC,OAAA;;;;EAIZ,CAAC;;EAEDC,KAAK,WAAAA,MAAA,EAAG;IACN,WAAOH,YAAG,EAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;;;;EAIZ,CAAC;;EAEDE,OAAO,WAAAA,QAAA,EAAG;IACR,WAAOJ,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;;;;EAIZ,CAAC;;EAEDG,eAAe,WAAAA,gBAAA,EAAG;IAChB,WAAOL,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;;EAGZ,CAAC;;EAEDI,IAAI,WAAAA,KAAA,EAAG;IACL,WAAON,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;;EAGZ,CAAC;;EAEDK,SAAS,WAAAA,UAAA,EAAG;IACV,WAAOP,YAAG,EAAAL,gBAAA,KAAAA,gBAAA,OAAAM,4BAAA,CAAAC,OAAA;;;EAGZ;AACF,CAAC,CAAC","ignoreList":[]}

package/cjs/components/Group/__creevey__/Group.creevey.mts

@@ -0,0 +1,19 @@
+import { story, kind, test } from 'creevey';
+
+kind('Group', () => {
+  story('SimpleGroupWithInputAndButton', () => {
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('focused input', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'input' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'focused input');
+    });
+  });
+});

package/cjs/components/Group/__docs__/Group.mdx

@@ -0,0 +1,23 @@
+import * as GroupStories from './Group.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
+
+<Meta of={GroupStories} />
+
+<Header component="Group" />
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<PropsTable />
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/cjs/components/Group/index.d.ts

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

package/cjs/components/Group/index.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;var _Group = require("./Group");Object.keys(_Group).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Group[key]) return;exports[key] = _Group[key];});

package/cjs/components/Group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Group","require","Object","keys","forEach","key","exports"],"sources":["index.tsx"],"sourcesContent":["export * from './Group';\n"],"mappings":"uCAAA,IAAAA,MAAA,GAAAC,OAAA,YAAAC,MAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,OAAA,WAAAC,GAAA,OAAAA,GAAA,kBAAAA,GAAA,8BAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,MAAA,CAAAK,GAAA,UAAAC,OAAA,CAAAD,GAAA,IAAAL,MAAA,CAAAK,GAAA","ignoreList":[]}

package/cjs/components/Hint/Hint.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+import type { PopupPinnablePositionsType, ShortPopupPositionsType } from '../../internal/Popup';
+import type { Nullable } from '../../typings/utility-types';
+import type { MouseEventType } from '../../typings/event-types';
+import type { CommonProps } from '../../internal/CommonWrapper';
+import type { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';
+export interface HintProps extends CommonProps {
+    /** @ignore */
+    children?: React.ReactNode;
+    /** Переводит отображение подсказки в _"ручной режим"_.
+     В _"ручном режиме"_ подсказку можно активировать только задав значение пропу `opened`. */
+    manual?: boolean;
+    /** Задает максимальную ширину подсказки. */
+    maxWidth?: React.CSSProperties['maxWidth'];
+    /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). */
+    onMouseEnter?: (event: MouseEventType) => void;
+    /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */
+    onMouseLeave?: (event: MouseEventType) => void;
+    /** Открывает подсказку. Работает только при `manual=true`. */
+    opened?: boolean;
+    /** Задает приоритетное расположение подсказки относительно текста. */
+    pos?: ShortPopupPositionsType | PopupPinnablePositionsType;
+    /** Задает текст подсказки. */
+    text: React.ReactNode;
+    /** Задает список позиций, которые будет занимать хинт. Если положение хинта в определенной позиции будет выходить за край экрана, то будет выбрана следующая позиция. Обязательно должен включать позицию указанную в `pos`. */
+    allowedPositions?: PopupPinnablePositionsType[];
+    /** Отключает анимацию. */
+    disableAnimations?: boolean;
+    /** Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`.
+     * Используется для корректного позиционирования хинта при двух и более вложенных элементах.
+     * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически. */
+    useWrapper?: boolean;
+}
+export interface HintState {
+    opened: boolean;
+    position: PopupPinnablePositionsType;
+}
+type DefaultProps = Required<Pick<HintProps, 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>>;
+/**
+ * Всплывающая подсказка `Hint`.
+ * По умолчанию отображается при наведении на элемент, но можно задать другие условия отображения.
+ *
+ * Для подсказки, всплывающей по клику используйте Tooltip.
+ */
+export declare class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static defaultProps: DefaultProps;
+    private getProps;
+    state: HintState;
+    private timer;
+    private theme;
+    private setRootNode;
+    private popupRef;
+    getAllowedPositions(): string[] | undefined;
+    componentDidUpdate(prevProps: HintProps): void;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+    renderMain(): React.JSX.Element;
+    getAnchorElement: () => Nullable<Element>;
+    private renderContent;
+    private getPositions;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private open;
+}
+export {};

package/cjs/components/Hint/Hint.js

@@ -0,0 +1,228 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.Hint = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+var _globalObject = require("@skbkontur/global-object");
+
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+
+
+var _Popup = require("../../internal/Popup");
+
+
+var _currentEnvironment = require("../../lib/currentEnvironment");
+
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+
+var _rootNode = require("../../lib/rootNode");
+
+var _createPropsGetter = require("../../lib/createPropsGetter");
+
+var _Hint2 = require("./Hint.styles");var _class, _Hint;
+
+var HINT_BORDER_COLOR = 'transparent';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * Всплывающая подсказка `Hint`.
+ * По умолчанию отображается при наведении на элемент, но можно задать другие условия отображения.
+ *
+ * Для подсказки, всплывающей по клику используйте Tooltip.
+ */var
+
+Hint = exports.Hint = (0, _rootNode.rootNode)(_class = (_Hint = /*#__PURE__*/function (_React$PureComponent) {function Hint() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
+
+
+
+
+
+
+
+
+
+
+
+    getProps = (0, _createPropsGetter.createPropsGetter)(Hint.defaultProps);_this.
+
+    state = {
+      opened: _this.getProps().manual ? !!_this.getProps().opened : false,
+      position: _Popup.DUMMY_LOCATION.position
+    };_this.
+
+
+
+
+
+    popupRef = /*#__PURE__*/_react.default.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 _this.props.allowedPositions;
+    };_this.
+
+    handleMouseEnter = function (e) {
+      if (!_this.getProps().manual && !_this.timer) {
+        _this.timer = _globalObject.globalObject.setTimeout(_this.open, 400);
+      }
+
+      if (_this.props.onMouseEnter) {
+        _this.props.onMouseEnter(e);
+      }
+    };_this.
+
+    handleMouseLeave = function (e) {
+      if (!_this.getProps().manual && _this.timer) {
+        _globalObject.globalObject.clearTimeout(_this.timer);
+        _this.timer = null;
+        _this.setState({ opened: false });
+      }
+
+      if (_this.props.onMouseLeave) {
+        _this.props.onMouseLeave(e);
+      }
+    };_this.
+
+    open = function () {
+      _this.setState({ opened: true });
+    };return _this;}(0, _inheritsLoose2.default)(Hint, _React$PureComponent);var _proto = Hint.prototype;_proto.getAllowedPositions = function getAllowedPositions() {return this.props.allowedPositions;};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var _this$getProps = this.getProps(),opened = _this$getProps.opened,manual = _this$getProps.manual;if (!manual) {return;}if (this.timer) {_globalObject.globalObject.clearTimeout(this.timer);this.timer = null;}if (opened !== prevProps.opened) {this.setState({ opened: !!opened });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.timer) {_globalObject.globalObject.clearTimeout(this.timer);this.timer = null;}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupMargin: theme.hintMargin, popupBorder: theme.hintBorder, popupBorderRadius: theme.hintBorderRadius }, _this2.theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _this3 = this;var _this$getProps2 = this.getProps(),disableAnimations = _this$getProps2.disableAnimations,useWrapper = _this$getProps2.useWrapper;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_Popup.Popup, { hasPin: false, opened: this.state.opened, anchorElement: this.props.children, positions: this.getPositions(), pos: this.props.pos, backgroundColor: this.theme.hintBgColor, borderColor: HINT_BORDER_COLOR, onPositionChange: function onPositionChange(position) {return _this3.setState({ position: position });}, disableAnimations: disableAnimations, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper, ref: this.popupRef, withoutMobile: true }, this.renderContent()));};_proto.renderContent = function renderContent() {var _cx;if (!this.props.text) {return null;}var _this$getProps3 = this.getProps(),maxWidth = _this$getProps3.maxWidth;var centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];var className = (0, _Emotion.cx)((_cx = {}, _cx[_Hint2.styles.content(this.theme)] = true, _cx[_Hint2.styles.contentCenter(this.theme)] = centerAlignPositions.includes(this.state.position), _cx));return /*#__PURE__*/_react.default.createElement("div", { className: className, style: { maxWidth: maxWidth } }, this.props.text);};return Hint;}(_react.default.PureComponent), _Hint.__KONTUR_REACT_UI__ = 'Hint', _Hint.displayName = 'Hint', _Hint.defaultProps = { manual: false, opened: false, maxWidth: 200, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false }, _Hint)) || _class;

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_globalObject","_ThemeContext","_ThemeFactory","_Popup","_currentEnvironment","_CommonWrapper","_Emotion","_rootNode","_createPropsGetter","_Hint2","_class","_Hint","HINT_BORDER_COLOR","Hint","exports","rootNode","_React$PureComponent","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","state","opened","manual","position","DUMMY_LOCATION","popupRef","React","createRef","getAnchorElement","_this$popupRef$curren","current","anchorElement","getPositions","props","allowedPositions","handleMouseEnter","e","timer","globalObject","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","_inheritsLoose2","default","_proto","prototype","getAllowedPositions","componentDidUpdate","prevProps","_this$getProps","componentWillUnmount","render","_this2","createElement","ThemeContext","Consumer","theme","Provider","value","ThemeFactory","create","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","_this3","_this$getProps2","disableAnimations","useWrapper","CommonWrapper","_extends2","rootNodeRef","setRootNode","Popup","hasPin","children","positions","pos","backgroundColor","hintBgColor","borderColor","onPositionChange","ref","withoutMobile","renderContent","_cx","text","_this$getProps3","maxWidth","centerAlignPositions","className","cx","styles","content","contentCenter","includes","style","PureComponent","__KONTUR_REACT_UI__","displayName","isTestEnv"],"sources":["Hint.tsx"],"sourcesContent":["import React from 'react';\nimport type { SafeTimer } from '@skbkontur/global-object';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { PopupPinnablePositionsType, ShortPopupPositionsType } from '../../internal/Popup';\nimport { DUMMY_LOCATION, Popup } from '../../internal/Popup';\nimport type { Nullable } from '../../typings/utility-types';\nimport type { MouseEventType } from '../../typings/event-types';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport type { TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport type { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Hint.styles';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nexport interface HintProps extends CommonProps {\n  /** @ignore */\n  children?: React.ReactNode;\n\n  /** Переводит отображение подсказки в _\"ручной режим\"_.\n   В _\"ручном режиме\"_ подсказку можно активировать только задав значение пропу `opened`. */\n  manual?: boolean;\n\n  /** Задает максимальную ширину подсказки. */\n  maxWidth?: React.CSSProperties['maxWidth'];\n\n  /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). */\n  onMouseEnter?: (event: MouseEventType) => void;\n\n  /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */\n  onMouseLeave?: (event: MouseEventType) => void;\n\n  /** Открывает подсказку. Работает только при `manual=true`. */\n  opened?: boolean;\n\n  /** Задает приоритетное расположение подсказки относительно текста. */\n  pos?: ShortPopupPositionsType | PopupPinnablePositionsType;\n\n  /** Задает текст подсказки. */\n  text: React.ReactNode;\n\n  /** Задает список позиций, которые будет занимать хинт. Если положение хинта в определенной позиции будет выходить за край экрана, то будет выбрана следующая позиция. Обязательно должен включать позицию указанную в `pos`. */\n  allowedPositions?: PopupPinnablePositionsType[];\n\n  /** Отключает анимацию. */\n  disableAnimations?: boolean;\n\n  /** Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`.\n   * Используется для корректного позиционирования хинта при двух и более вложенных элементах.\n   * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически. */\n  useWrapper?: boolean;\n}\n\nexport interface HintState {\n  opened: boolean;\n  position: PopupPinnablePositionsType;\n}\n\ntype DefaultProps = Required<Pick<HintProps, 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>>;\n\n/**\n * Всплывающая подсказка `Hint`.\n * По умолчанию отображается при наведении на элемент, но можно задать другие условия отображения.\n *\n * Для подсказки, всплывающей по клику используйте Tooltip.\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    manual: false,\n    opened: false,\n    maxWidth: 200,\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 setRootNode!: TSetRootNode;\n\n  private popupRef = React.createRef<Popup>();\n\n  public getAllowedPositions() {\n    return this.props.allowedPositions;\n  }\n\n  public componentDidUpdate(prevProps: HintProps) {\n    const { opened, manual } = 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\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      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\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\n  public renderMain() {\n    const { disableAnimations, useWrapper } = this.getProps();\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <Popup\n          hasPin={false}\n          opened={this.state.opened}\n          anchorElement={this.props.children}\n          positions={this.getPositions()}\n          pos={this.props.pos}\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\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 = (): PopupPinnablePositionsType[] | undefined => {\n    return this.props.allowedPositions;\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"],"mappings":"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","ignoreList":[]}

package/cjs/components/Hint/Hint.md

@@ -0,0 +1,86 @@
+### Базовый пример
+
+```jsx harmony
+<Hint text="Подсказка">Базовая</Hint>
+```
+
+### Иконка
+
+```jsx harmony
+<Hint text="Редактирование">
+  <svg width="16" height="16" viewBox="0 0 16 16">
+    <path
+      fillRule="evenodd"
+      d="M13 12V12.998H8V12H13ZM3 13V11L9 4.99999L11 6.99999L5 13H3ZM13 5L11.5 6.5L9.5 4.5L11 3L13 5Z"
+      clipRule="evenodd"
+    />
+  </svg>
+</Hint>
+```
+
+### Сторона всплытия
+
+```jsx harmony
+<Hint pos={"left"} text="Подсказка слева">Всегда всплывает слева</Hint>
+```
+
+### Ограниченная ширина
+```jsx harmony
+<Hint
+  maxWidth="150px"
+  text="Очень много текста, рассказывающего про этот очень непонятный элемент"
+  >
+  Очень непонятный элемент
+</Hint>
+```
+
+### Открытие подсказки кнопкой
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+const [isOpen, setIsOpen] = React.useState(false);
+
+<Gapped>
+  <Hint opened={isOpen} manual text="Подсказка">Управляемая удалённо</Hint>
+  <Button onClick={() => setIsOpen(!isOpen)}>
+    {isOpen ? "Закрыть подсказку" : "Открыть подсказку"}
+  </Button>
+</Gapped>
+```
+
+### Всплытие без анимации
+
+```jsx harmony
+<Hint disableAnimations text={"Нет анимации :("}>Есть анимация?</Hint>
+```
+
+### Встроеная обёртка
+
+Подсказка должна отображаться даже на отключённых компонентах. Из коробки это работает только с контролами `react-ui`.
+
+Нативные элементы, поддерживающие атрибут `disabled`, отключают необходимые события мыши.
+В подобных случаях следуют использовать проп `useWrapper`:
+
+```jsx harmony
+<Hint useWrapper text="Подсказа всё равно отображается">
+  <button disabled>native button</button>
+</Hint>
+```
+
+### Кастомная обертка
+Т.к. встроённая обёртка это `<span>` без стилей, то она может работать некорректно в определённых ситуациях.
+В таких случаях стоит использовать собственную обётку:
+
+```jsx harmony
+<>
+  <Hint useWrapper text="Подсказа">
+    <button disabled style={{ height: 40 }}>useWrapper prop</button>
+  </Hint>
+  <Hint text="Подсказа">
+    <span style={{ display: 'inline-block' }}>
+      <button disabled style={{ height: 40 }}>custom wrapper</button>
+    </span>
+  </Hint>
+</>
+```

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

@@ -0,0 +1,5 @@
+import type { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    content(t: Theme): string;
+    contentCenter(t: Theme): string;
+};

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

@@ -0,0 +1,24 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
+
+var styles = exports.styles = (0, _Emotion.memoizeStyle)({
+  content: function content(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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 (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-align: ", ";\n    "])),
+    t.hintTextAlign);
+
+  }
+});

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

@@ -0,0 +1 @@
+{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","styles","exports","memoizeStyle","content","t","css","_taggedTemplateLiteralLoose2","default","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","contentCenter","hintTextAlign"],"sources":["Hint.styles.ts"],"sourcesContent":["import type { 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"],"mappings":";AACA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA;;AAEvD,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,OAAO,WAAAA,QAACC,CAAQ,EAAE;IAChB,WAAOC,YAAG,EAAAP,eAAA,KAAAA,eAAA,OAAAQ,4BAAA,CAAAC,OAAA;;IAECH,CAAC,CAACI,SAAS;IACPJ,CAAC,CAACK,YAAY;IACZL,CAAC,CAACM,cAAc;IAClBN,CAAC,CAACO,YAAY;;IAEhBP,CAAC,CAACQ,YAAY,EAAIR,CAAC,CAACS,YAAY;;;;EAI/C,CAAC;;EAEDC,aAAa,WAAAA,cAACV,CAAQ,EAAE;IACtB,WAAOC,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;IACMH,CAAC,CAACW,aAAa;;EAEjC;AACF,CAAC,CAAC","ignoreList":[]}