chore(Popup, Hint, Tooltip): unify positioning

packages/react-ui/components/Hint/Hint.tsx

@@ -10,7 +10,7 @@ import {
 import { ThemeContext } from '../../lib/theming/ThemeContext';
 import { ThemeFactory } from '../../lib/theming/ThemeFactory';
 import { Theme } from '../../lib/theming/Theme';
-import { DUMMY_LOCATION, Popup, PopupPositionsType } from '../../internal/Popup';
+import { DUMMY_LOCATION, Popup, PopupPositionsType, ShortPopupPositionsType } from '../../internal/Popup';
 import { Nullable } from '../../typings/utility-types';
 import { MouseEventType } from '../../typings/event-types';
 import { isTestEnv } from '../../lib/currentEnvironment';
@@ -56,7 +56,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' | PopupPositionsType;
+  pos?: ShortPopupPositionsType | PopupPositionsType;
   /**
    * Текст подсказки.
    */
@@ -84,7 +84,7 @@ export interface HintState {
   position: PopupPositionsType;
 }
 
-const Positions: PopupPositionsType[] = [
+const OldPositions: PopupPositionsType[] = [
   'top center',
   'top left',
   'top right',
@@ -99,9 +99,7 @@ const Positions: PopupPositionsType[] = [
   'right bottom',
 ];
 
-type DefaultProps = Required<
-  Pick<HintProps, 'pos' | 'allowedPositions' | 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>
->;
+type DefaultProps = Required<Pick<HintProps, 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>>;
 
 /**
  * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
@@ -112,11 +110,9 @@ export class Hint extends React.PureComponent<HintProps, HintState> implements I
   public static displayName = 'Hint';
 
   public static defaultProps: DefaultProps = {
-    pos: 'top',
     manual: false,
     opened: false,
     maxWidth: 200,
-    allowedPositions: Positions,
     disableAnimations: isTestEnv,
     useWrapper: false,
   };
@@ -137,7 +133,7 @@ export class Hint extends React.PureComponent<HintProps, HintState> implements I
   private popupRef = React.createRef<Popup>();
 
   public componentDidUpdate(prevProps: HintProps) {
-    const { opened, manual, pos, allowedPositions } = this.getProps();
+    const { opened, manual } = this.getProps();
     if (!manual) {
       return;
     }
@@ -149,7 +145,9 @@ export class Hint extends React.PureComponent<HintProps, HintState> implements I
       this.setState({ opened: !!opened });
     }
 
-    if (this.featureFlags.hintAddDynamicPositioning) {
+    if (!this.featureFlags.popupUnifyPositioning) {
+      const pos = this.props.pos ? this.props.pos : 'top';
+      const allowedPositions = this.props.allowedPositions ? this.props.allowedPositions : OldPositions;
       const posChanged = prevProps.pos !== pos;
       const allowedChanged = !isEqual(prevProps.allowedPositions, allowedPositions);
 
@@ -200,34 +198,29 @@ export class Hint extends React.PureComponent<HintProps, HintState> implements I
 
   public renderMain() {
     const { disableAnimations, useWrapper } = this.getProps();
+    const hasPin = !this.featureFlags.kebabHintRemovePin || !isTheme2022(this.theme);
 
     return (
-      <ReactUIFeatureFlagsContext.Consumer>
-        {(flags) => {
-          const hasPin = !getFullReactUIFlagsContext(flags).kebabHintRemovePin || !isTheme2022(this.theme);
-          return (
-            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-              <Popup
-                hasPin={hasPin}
-                opened={this.state.opened}
-                anchorElement={this.props.children}
-                positions={this.getPositions()}
-                backgroundColor={this.theme.hintBgColor}
-                borderColor={HINT_BORDER_COLOR}
-                onPositionChange={(position) => this.setState({ position })}
-                disableAnimations={disableAnimations}
-                onMouseEnter={this.handleMouseEnter}
-                onMouseLeave={this.handleMouseLeave}
-                useWrapper={useWrapper}
-                ref={this.popupRef}
-                withoutMobile
-              >
-                {this.renderContent()}
-              </Popup>
-            </CommonWrapper>
-          );
-        }}
-      </ReactUIFeatureFlagsContext.Consumer>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+        <Popup
+          hasPin={hasPin}
+          opened={this.state.opened}
+          anchorElement={this.props.children}
+          positions={this.featureFlags.popupUnifyPositioning ? this.props.allowedPositions : this.getPositions()}
+          pos={this.props.pos}
+          backgroundColor={this.theme.hintBgColor}
+          borderColor={HINT_BORDER_COLOR}
+          onPositionChange={(position) => this.setState({ position })}
+          disableAnimations={disableAnimations}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+          useWrapper={useWrapper}
+          ref={this.popupRef}
+          withoutMobile
+        >
+          {this.renderContent()}
+        </Popup>
+      </CommonWrapper>
     );
   }
 
@@ -254,9 +247,10 @@ export class Hint extends React.PureComponent<HintProps, HintState> implements I
   }
 
   private getPositions = (): PopupPositionsType[] => {
+    const pos = this.props.pos ? this.props.pos : 'top';
+    const allowedPositions = this.props.allowedPositions ? this.props.allowedPositions : OldPositions;
     if (this.featureFlags.hintAddDynamicPositioning) {
       if (!this.positions) {
-        const { allowedPositions, pos } = this.getProps();
         let priorityPosition: PopupPositionsType;
         switch (pos) {
           case 'top':
@@ -282,7 +276,7 @@ export class Hint extends React.PureComponent<HintProps, HintState> implements I
       }
       return this.positions;
     }
-    return Positions.filter((x) => x.startsWith(this.getProps().pos));
+    return OldPositions.filter((x) => x.startsWith(pos));
   };
 
   private handleMouseEnter = (e: MouseEventType) => {

packages/react-ui/components/Hint/__stories__/Hint.stories.tsx

@@ -343,7 +343,7 @@ export const HintNearScreenEdge = () => (
       </div>
     </div>
 
-    <ReactUIFeatureFlagsContext.Provider value={{ hintAddDynamicPositioning: true }}>
+    <ReactUIFeatureFlagsContext.Provider value={{ hintAddDynamicPositioning: true, popupUnifyPositioning: true }}>
       <div style={{ position: 'absolute', bottom: '-10px', right: '50px', display: 'flex', flexDirection: 'row' }}>
         <Hint text={'Hey there!'} pos="bottom center" maxWidth={295} manual opened>
           <Button use="success" size="medium" width={135} disabled>
@@ -363,7 +363,7 @@ export const HintNearScreenEdge = () => (
             Пригласить
           </Button>
         </Hint>
-        <Tooltip render={() => <div>Hey there!</div>} pos="bottom center" trigger="opened">
+        <Tooltip render={() => <div>Hey there!</div>} pos="top center" trigger="opened">
           <Button use="success" size="medium" width={135} disabled>
             Пригласить
           </Button>