@vkontakte/vkui 4.22.2 → 4.23.0

package/src/components/PanelHeader/Readme.md

@@ -8,6 +8,10 @@
 
 В таких случаях передавайте в `PanelHeader` свойство `separator={false}`.
 
+>**Важно**
+>
+> Правая часть шапки будет скрыта, если в [`ConfigProvider`](#/ConfigProvider) передан `webviewType={WebviewType.VKAPPS}`.
+
 ```jsx
 class Example extends React.Component {
   constructor(props) {

package/src/components/Popper/Popper.css

@@ -0,0 +1,39 @@
+.PopperPortal {
+  position: relative;
+  z-index: 1;
+}
+
+.Popper__arrow-in {
+  content: '';
+  display: block;
+  width: 20px;
+  height: 8px;
+}
+
+[data-popper-placement^="bottom"] .Popper__arrow {
+  bottom: 100%;
+}
+
+[data-popper-placement^="top"] .Popper__arrow {
+  top: 100%;
+}
+
+[data-popper-placement^="top"] .Popper__arrow-in {
+  transform: rotate(180deg);
+}
+
+[data-popper-placement^="left"] .Popper__arrow {
+  left: calc(100% - 6px);
+}
+
+[data-popper-placement^="left"] .Popper__arrow-in {
+  transform: rotate(90deg);
+}
+
+[data-popper-placement^="right"] .Popper__arrow {
+  right: calc(100% - 6px);
+}
+
+[data-popper-placement^="right"] .Popper__arrow-in {
+  transform: rotate(270deg);
+}

package/src/components/Popper/Popper.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react';
+import { usePopper } from 'react-popper';
+import { AppRootPortal } from '../AppRoot/AppRootPortal';
+import { HasRef } from '../../types';
+import { usePlatform } from '../../hooks/usePlatform';
+import { getClassName } from '../../helpers/getClassName';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import './Popper.css';
+
+export type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' |
+'right-start' | 'right-end' | 'left-start' | 'left-end' | 'top' | 'bottom' | 'left' | 'right';
+
+type Modifier = {
+  name: string;
+  options?: {
+    [index: string]: any;
+  };
+};
+
+export interface PopperCommonProps extends React.HTMLAttributes<HTMLElement>, HasRef<HTMLElement> {
+  /**
+   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
+   */
+  placement?: Placement;
+  /**
+   * Отступ по вспомогательной оси
+   */
+  offsetSkidding?: number;
+  /**
+   * Отступ по главной оси
+   */
+  offsetDistance?: number;
+  arrow?: boolean;
+  arrowClassName?: string;
+  onPlacementChange?: (data: { placement?: Placement }) => void;
+}
+
+export interface PopperProps extends PopperCommonProps {
+  targetRef?: React.RefObject<HTMLElement>;
+}
+
+const ARROW_PADDING = 8;
+const ARROW_WIDTH = 20;
+const ARROW_HEIGHT = 8;
+
+export const Popper: React.FC<PopperProps> = ({
+  targetRef,
+  children,
+  getRef,
+  placement = 'bottom-start',
+  onPlacementChange,
+  arrow,
+  arrowClassName,
+  offsetDistance = 8,
+  offsetSkidding = 0,
+  style: compStyles,
+  ...restProps
+}: PopperProps) => {
+  const [popperNode, setPopperNode] = React.useState(null);
+  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] = React.useState(0);
+  const platform = usePlatform();
+
+  const setExternalRef = useExternRef(getRef, setPopperNode);
+
+  const modifiers: Modifier[] = [{
+    name: 'preventOverflow',
+  }, {
+    name: 'offset',
+    options: {
+      offset: [
+        arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,
+        arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,
+      ],
+    },
+  }, {
+    name: 'flip',
+  }];
+
+  if (arrow) {
+    modifiers.push({
+      name: 'arrow',
+      options: {
+        padding: ARROW_PADDING,
+      },
+    });
+  }
+
+  const { styles, state, attributes } = usePopper(targetRef.current, popperNode, {
+    placement,
+    modifiers,
+  });
+
+  const resolvedPlacement = state?.placement;
+  const isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes('-'); // true, если поппер отрисован скраю
+
+  // Если поппер рисуется скраю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до
+  // таргета из-за маленьких размеров последнего
+  useIsomorphicLayoutEffect(() => {
+    if (arrow && isEdgePlacement) {
+      const placementDirection = resolvedPlacement.startsWith('bottom') || resolvedPlacement.startsWith('top') ? 'vertical' : 'horizontal';
+
+      const arrowSize = placementDirection === 'vertical' ? ARROW_WIDTH : ARROW_HEIGHT;
+      const targetSize = placementDirection === 'vertical' ? targetRef.current.offsetWidth : targetRef.current.offsetHeight;
+
+      if (targetSize < arrowSize + 2 * ARROW_PADDING) {
+        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);
+      }
+    } else {
+      setSmallTargetOffsetSkidding(0);
+    }
+  }, [arrow, isEdgePlacement]);
+
+  React.useEffect(() => {
+    if (resolvedPlacement) {
+      onPlacementChange && onPlacementChange({ placement: resolvedPlacement });
+    }
+  }, [resolvedPlacement]);
+
+  const dropdown = (
+    <div
+      {...restProps}
+      {...attributes.popper}
+      vkuiClass={getClassName('Popper', platform)}
+      ref={setExternalRef}
+      style={{ ...compStyles, ...styles.popper }}
+    >
+      {arrow && (
+        <div
+          {...attributes.arrow}
+          vkuiClass="Popper__arrow"
+          data-popper-arrow={true}
+          style={styles.arrow}
+        >
+          <svg vkuiClass="Popper__arrow-in" className={arrowClassName} width="20" height="8" viewBox="0 0 20 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fillRule="evenodd" clipRule="evenodd" d="M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z" fill="currentColor" />
+          </svg>
+        </div>
+      )}
+      <div vkuiClass="Popper__content">
+        {children}
+      </div>
+    </div>
+  );
+
+  return <AppRootPortal forcePortal vkuiClass="PopperPortal">{dropdown}</AppRootPortal>;
+};

package/src/components/Popper/Readme.md

@@ -0,0 +1,23 @@
+>**Важно**
+>
+>Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+
+Низкоуровневый компонент для отрисовки выпадающего блока. Единственная его задача — корректно позициионироваться
+рядом с целевым элементом. На основе этого компонента сделаны [ClickPopper](#/ClickPopper) и [HoverPopper](#/HoverPopper),
+реализующие логику скрытия и показа по клику и по ховеру соответственно.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+const [shown, setShown] = React.useState(false);
+const buttonRef = React.useRef();
+
+return (
+  <React.Fragment>
+    <Button getRootRef={buttonRef} onClick={() => setShown(!shown)} style={{ margin: 50 }}>{shown ? 'Закрыть' : 'Открыть'}</Button>
+    {shown &&
+      <Popper offsetDistance={8} style={{ padding: '9px 12px' }} targetRef={buttonRef}>
+        Привет
+      </Popper> 
+    }
+  </React.Fragment>
+)
+```

package/src/components/RichTooltip/Readme.md

@@ -0,0 +1,55 @@
+Тултип, открывающийся при наведеннии мыши на `children`. В отличие от [TextTooltip](#/TextTooltip), имеет меньше ограничений 
+по содержимому. Компонент всё ещё предназначен для информирования пользователей, но внутри допускаются кнопки, ссылки, картинки.
+
+```jsx { "props": { "layout": false, "iframe": true } }
+<Checkbox>
+  Специальные возможности
+  <RichTooltip style={{maxWidth: 320}} content={
+    <Subhead weight="regular" style={{padding: '8px 12px', color: 'var(--text_primary)'}}>
+      Если включить эту настройку, элементы управления на сайте будут определены и озвучены синтезатором речи.
+      <br/><br/>
+      Настройка повышает доступность сайта и подходит для пользователей с ограниченными возможностями.
+    </Subhead>
+  }>
+    <Icon16HelpOutline style={{
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      position: 'relative',
+      top: -1,
+      color: 'var(--icon_secondary)'
+    }}/>
+  </RichTooltip>
+</Checkbox>
+
+<RichTooltip style={{maxWidth: 320}} content={
+  <RichCell
+    disabled
+    after={
+      <TextTooltip text="Добавить">
+        <Icon28UserAddOutline/>
+      </TextTooltip>
+    }
+    before={<Avatar size={72} src={getAvatarUrl('user_ilyagrshn')}/>}
+    caption="Команда ВКонтакте, Санкт-Петербург"
+    bottom={
+      <UsersStack
+        photos={[
+          getAvatarUrl('user_ox'),
+          getAvatarUrl('user_vitalyavolyn'),
+          getAvatarUrl('user_eee'),
+        ]}
+      >73 общих друга</UsersStack>
+    }
+    actions={
+      <React.Fragment>
+        <Button>Добавить</Button>
+        <Button mode="secondary">Скрыть</Button>
+      </React.Fragment>
+    }
+  >
+    Илья Гришин
+  </RichCell>
+}>
+  <Link style={{display: 'inline-block', margin: 20}}>Илья Гришин</Link>
+</RichTooltip>
+```

package/src/components/RichTooltip/RichTooltip.css

@@ -0,0 +1,10 @@
+.RichTooltip {
+  box-shadow: 0 0 4px rgba(0, 0, 0, .04), 0 4px 32px rgba(0, 0, 0, .16);
+  border-radius: 8px;
+  background: var(--background_content);
+  animation: vkui-popper-fadein .2s ease;
+}
+
+.RichTooltip__arrow {
+  color: var(--background_content);
+}

package/src/components/RichTooltip/RichTooltip.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { HoverPopper } from '../HoverPopper/HoverPopper';
+import { getClassName } from '../../helpers/getClassName';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useAppearance } from '../../hooks/useAppearance';
+import { classNames } from '../../lib/classNames';
+import { prefixClass } from '../../lib/prefixClass';
+import { Placement } from '../Popper/Popper';
+import './RichTooltip.css';
+
+// Приходится избегать экстендов от HoverPopperProps и PopperProps, потому что react-docgen не умеет в Omit.
+// Ждём либо фикса react-docgen (что вряд ли), либо переезда на react-docgen-typescript, где такой проблемы нет.
+export interface RichTooltipProps {
+  /**
+   * Содержимое тултипа
+   */
+  content?: React.ReactNode;
+  /**
+   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства
+   */
+  shown?: boolean;
+  /**
+   * Вызывается при каждом изменении видимости тултипа
+   */
+  onShownChange?: (shown: boolean) => void;
+  /**
+   * Количество миллисекунд, после которых произойдет показ дропдауна
+   */
+  showDelay?: number;
+  /**
+   * Количество миллисекунд, после которых произойдет скрытие дропдауна
+   */
+  hideDelay?: number;
+  /**
+   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента
+   */
+  children?: React.ReactElement;
+  /**
+   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
+   */
+  placement?: Placement;
+  /**
+   * Отступ по вспомогательной оси
+   */
+  offsetSkidding?: number;
+  /**
+   * Отступ по главной оси
+   */
+  offsetDistance?: number;
+  onPlacementChange?: (data: { placement?: Placement }) => void;
+  arrow?: boolean;
+}
+
+export const RichTooltip: React.FC<RichTooltipProps> = ({ children, arrow = true, ...popperProps }: RichTooltipProps) => {
+  const platform = usePlatform();
+  const appearance = useAppearance();
+
+  return (
+    <HoverPopper
+      vkuiClass={classNames(getClassName('RichTooltip', platform), {
+        [`RichTooltip--${appearance}`]: !!appearance,
+      })}
+      arrow={arrow}
+      arrowClassName={prefixClass('RichTooltip__arrow')}
+      {...popperProps}
+    >
+      {children}
+    </HoverPopper>
+  );
+};

package/src/components/Tappable/Tappable.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import mitt from 'mitt';
-import { hasHover as deviceHasHover, noop } from '@vkontakte/vkjs';
+import { noop } from '@vkontakte/vkjs';
 import { Touch, TouchEvent, TouchProps } from '../Touch/Touch';
 import TouchRootContext from '../Touch/TouchContext';
 import { classNames } from '../../lib/classNames';
@@ -128,7 +128,8 @@ const Tappable: React.FC<TappableProps> = ({
   getRootRef,
   sizeX,
   hasMouse,
-  hasHover: _hasHover = deviceHasHover,
+  deviceHasHover,
+  hasHover: _hasHover = true,
   hoverMode = 'background',
   hasActive: _hasActive = true,
   activeMode = 'background',
@@ -147,7 +148,7 @@ const Tappable: React.FC<TappableProps> = ({
 
   const hovered = _hovered && !props.disabled;
   const hasActive = _hasActive && !childHover && !props.disabled;
-  const hasHover = _hasHover && !childHover;
+  const hasHover = deviceHasHover && _hasHover && !childHover;
   const isCustomElement = Component !== 'a' && Component !== 'button' && !props.contentEditable;
   const isPresetHoverMode = ['opacity', 'background'].includes(hoverMode);
   const isPresetActiveMode = ['opacity', 'background'].includes(activeMode);
@@ -270,7 +271,7 @@ const Tappable: React.FC<TappableProps> = ({
   );
 };
 
-export default withAdaptivity(Tappable, { sizeX: true, hasMouse: true });
+export default withAdaptivity(Tappable, { sizeX: true, hasMouse: true, deviceHasHover: true });
 
 function Wave({ x, y, onClear }: Wave & { onClear: VoidFunction }) {
   const timeout = useTimeout(onClear, 225);

package/src/components/TextTooltip/Readme.md

@@ -0,0 +1,7 @@
+Тултип, открывающийся при наведеннии мыши на `children`. В качестве содержимого тултипа рекомендуется использовать только текст.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+  <TextTooltip text="Привет">
+    <Button style={{ margin: 20 }}>Наведи</Button>
+  </TextTooltip>
+```

package/src/components/TextTooltip/TextTooltip.css

@@ -0,0 +1,12 @@
+.TextTooltip {
+  border-radius: 8px;
+  background: rgba(44, 45, 46, .88); /*TODO узнать у дизайнеров название токена*/
+  padding: 8px 12px 9px;
+  color: var(--white);
+  box-shadow: 0 0 4px rgba(0, 0, 0, .04), 0 4px 32px rgba(0, 0, 0, .16);
+  animation: vkui-popper-fadein .2s ease;
+}
+
+.TextTooltip__arrow {
+  color: rgba(44, 45, 46, .88);
+}

package/src/components/TextTooltip/TextTooltip.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { HoverPopper } from '../HoverPopper/HoverPopper';
+import { getClassName } from '../../helpers/getClassName';
+import { usePlatform } from '../../hooks/usePlatform';
+import { hasReactNode } from '../../lib/utils';
+import { Placement } from '../Popper/Popper';
+import Subhead from '../Typography/Subhead/Subhead';
+import { prefixClass } from '../../lib/prefixClass';
+import './TextTooltip.css';
+
+// Приходится избегать экстендов от HoverPopperProps и PopperProps, потому что react-docgen не умеет в Omit.
+// Ждём либо фикса react-docgen (что вряд ли), либо переезда на react-docgen-typescript, где такой проблемы нет.
+export interface TextTooltipProps {
+  /**
+   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства
+   */
+  shown?: boolean;
+  /**
+   * Вызывается при каждом изменении видимости тултипа
+   */
+  onShownChange?: (shown: boolean) => void;
+  /**
+   * Количество миллисекунд, после которых произойдет показ дропдауна
+   */
+  showDelay?: number;
+  /**
+   * Количество миллисекунд, после которых произойдет скрытие дропдауна
+   */
+  hideDelay?: number;
+  /**
+   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента
+   */
+  children?: React.ReactElement;
+  /**
+   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
+   */
+  placement?: Placement;
+  /**
+   * Отступ по вспомогательной оси
+   */
+  offsetSkidding?: number;
+  /**
+   * Отступ по главной оси
+   */
+  offsetDistance?: number;
+  onPlacementChange?: (data: { placement?: Placement }) => void;
+  /**
+   * Текст тултипа
+   */
+  text?: React.ReactNode;
+  /**
+   * Заголовок тултипа
+   */
+  header?: React.ReactNode;
+}
+
+export const TextTooltip: React.FC<TextTooltipProps> = ({ children, text, header, ...popperProps }: TextTooltipProps) => {
+  const platform = usePlatform();
+
+  return (
+    <HoverPopper
+      vkuiClass={getClassName('TextTooltip', platform)}
+      arrow
+      arrowClassName={prefixClass('TextTooltip__arrow')}
+      content={
+        <React.Fragment>
+          {hasReactNode(header) && <Subhead Component="span" weight="medium" vkuiClass="TextTooltip__header">{header}</Subhead>}
+          {hasReactNode(text) && <Subhead Component="span" weight="regular" vkuiClass="TextTooltip__text">{text}</Subhead>}
+        </React.Fragment>
+      }
+      {...popperProps}
+    >
+      {children}
+    </HoverPopper>
+  );
+};

package/src/components/Tooltip/Readme.md

@@ -2,6 +2,8 @@
 хочется представить новый функционал. Это достаточно сложный с точки зрения управления компонент, поэтому он
 требует подробной документации.
 
+Для показа тултипа по ховеру, воспользуйтесь [`RichTooltip`](#/RichTooltip) или [`TextTooltip`](#/TextTooltip).
+
 ### Концепция
 Этот тултип служит для ознакомительных целей. То есть показывать его надо один раз, запоминая факт показа между
 сессиями. Рекомендуется показывать тултип сразу после того, как нуждающийся в нем элемент появился в зоне видимости.

package/src/hoc/withAdaptivity.tsx

@@ -16,6 +16,7 @@ interface Config {
   viewWidth?: boolean;
   viewHeight?: boolean;
   hasMouse?: boolean;
+  deviceHasHover?: boolean;
 }
 
 export function withAdaptivity<T>(TargetComponent: T, config: Config): T {
@@ -32,6 +33,7 @@ export function withAdaptivity<T>(TargetComponent: T, config: Config): T {
     const viewWidth = context.viewWidth;
     const viewHeight = context.viewHeight;
     const hasMouse = context.hasMouse;
+    const deviceHasHover = context.deviceHasHover;
 
     const adaptivityProps: {
       sizeX?: SizeType;
@@ -39,18 +41,20 @@ export function withAdaptivity<T>(TargetComponent: T, config: Config): T {
       viewWidth?: ViewWidth;
       viewHeight?: ViewHeight;
       hasMouse?: boolean;
+      deviceHasHover?: boolean;
     } = {};
     config.sizeX ? adaptivityProps.sizeX = sizeX : undefined;
     config.sizeY ? adaptivityProps.sizeY = sizeY : undefined;
     config.viewWidth ? adaptivityProps.viewWidth = viewWidth : undefined;
     config.viewHeight ? adaptivityProps.viewHeight = viewHeight : undefined;
     config.hasMouse ? adaptivityProps.hasMouse = hasMouse : undefined;
+    config.deviceHasHover ? adaptivityProps.deviceHasHover = deviceHasHover : undefined;
 
     // @ts-ignore
     const target = <TargetComponent {...props} {...adaptivityProps} />;
 
     if (update) {
-      return <AdaptivityContext.Provider value={{ sizeX, sizeY, viewWidth, viewHeight, hasMouse }}>
+      return <AdaptivityContext.Provider value={{ sizeX, sizeY, viewWidth, viewHeight, hasMouse, deviceHasHover }}>
         {target}
       </AdaptivityContext.Provider>;
     }

package/src/hooks/usePatchChildrenRef.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { useExternRef } from './useExternRef';
+import { warnOnce } from '../lib/warnOnce';
+
+type ChildrenElement<T> = React.ReactElement<{ getRootRef?: React.Ref<T> }>;
+
+const isDOMTypeElement = (element: React.ReactElement): element is React.DOMElement<any, any> => {
+  return typeof element.type === 'string';
+};
+
+const warn = warnOnce('usePatchChildrenRef');
+export const usePatchChildrenRef = <T = HTMLElement>(children: ChildrenElement<T>): [React.MutableRefObject<T>, ChildrenElement<T>] => {
+  const childRef = React.isValidElement(children) && (isDOMTypeElement(children) ? children.ref as React.Ref<T> : children.props.getRootRef);
+  const patchedRef = useExternRef<T>(childRef);
+  React.useEffect(() => {
+    if (!patchedRef.current && process.env.NODE_ENV === 'development') {
+      warn('Кажется, в `children` передан компонент, который не поддерживает свойство `getRootRef`. Мы не можем' +
+        'получить ссылку на корневой dom-элемент этого компонента');
+    }
+  }, [children.type]);
+  return [patchedRef, React.isValidElement(children) ? React.cloneElement(children, {
+    [isDOMTypeElement(children) ? 'ref' : 'getRootRef']: patchedRef,
+  }) : children];
+};

package/src/index.ts

@@ -102,7 +102,8 @@ export { default as SimpleCell } from './components/SimpleCell/SimpleCell';
 export type { SimpleCellProps } from './components/SimpleCell/SimpleCell';
 export { HorizontalCell } from './components/HorizontalCell/HorizontalCell';
 export type { HorizontalCellProps } from './components/HorizontalCell/HorizontalCell';
-export { default as Footer } from './components/Footer/Footer';
+export { Footer } from './components/Footer/Footer';
+export type { FooterProps } from './components/Footer/Footer';
 export { default as InfoRow } from './components/InfoRow/InfoRow';
 export type { InfoRowProps } from './components/InfoRow/InfoRow';
 export { default as Gallery } from './components/Gallery/Gallery';

package/src/styles/animations.css

@@ -7,3 +7,8 @@
     transform: rotate(360deg);
   }
 }
+
+@keyframes vkui-popper-fadein {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

package/src/styles/common.css

@@ -25,10 +25,15 @@
 .vkui__root input,
 .vkui__root textarea,
 .vkui__root select,
-.vkui__root button {
+.vkui__root button,
+.vkui__portal-root input,
+.vkui__portal-root textarea,
+.vkui__portal-root select,
+.vkui__portal-root button {
   font-family: inherit;
 }
 
-.vkui__root *:focus {
+.vkui__root *:focus,
+.vkui__portal-root *:focus {
   outline: none;
 }

package/src/styles/unstable.css

@@ -1,3 +1,7 @@
 /* Forms */
 @import '../components/ChipsSelect/ChipsSelect.css';
 @import '../components/SimpleCheckbox/SimpleCheckbox.css';
+@import '../components/Dropdown/Dropdown.css';
+@import '../components/Popper/Popper.css';
+@import '../components/TextTooltip/TextTooltip.css';
+@import '../components/RichTooltip/RichTooltip.css';

package/src/unstable/index.ts

@@ -4,6 +4,18 @@
 export { default as ChipsSelect } from './../components/ChipsSelect/ChipsSelect';
 export type { ChipsSelectProps } from './../components/ChipsSelect/ChipsSelect';
 
+export { Dropdown } from '../components/Dropdown/Dropdown';
+export type { DropdownProps } from '../components/Dropdown/Dropdown';
+
+export { TextTooltip } from '../components/TextTooltip/TextTooltip';
+export type { TextTooltipProps } from '../components/TextTooltip/TextTooltip';
+
+export { RichTooltip } from '../components/RichTooltip/RichTooltip';
+export type { RichTooltipProps } from '../components/RichTooltip/RichTooltip';
+
+export { Popper } from '../components/Popper/Popper';
+export type { PopperProps } from '../components/Popper/Popper';
+
 export { default as ViewInfinite } from './../components/View/ViewInfinite';
 export type { ViewInfiniteProps } from './../components/View/ViewInfinite';