@true-engineering/true-react-common-ui-kit 4.0.0-alpha0 → 4.0.0-alpha10

package/src/components/Select/Select.tsx

@@ -5,6 +5,7 @@ import {
   KeyboardEvent,
   MouseEvent,
   ReactNode,
+  Ref,
   SyntheticEvent,
   useCallback,
   useEffect,
@@ -18,7 +19,6 @@ import { debounce } from 'ts-debounce';
 import {
   createFilter,
   getTestId,
-  isEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
   isStringNotEmpty,
@@ -26,10 +26,10 @@ import {
 import { hasExactParent } from '../../helpers';
 import { useDropdown, useIsMounted, useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
 import { ICommonProps, IDropdownWithPopperOptions } from '../../types';
-import { ControlGroup } from '../ControlGroup';
 import { IIcon, renderIcon } from '../Icon';
 import { IChangeInputEvent, IInputProps, InputBase } from '../Input';
 import { ISearchInputProps, SearchInput } from '../SearchInput';
+import { WithMessages } from '../WithMessages';
 import { SelectList } from './components';
 import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from './constants';
 import {
@@ -64,7 +64,11 @@ export interface ISelectProps<Value>
   /** @default true */
   shouldScrollToList?: boolean;
   isMultiSelect?: false;
-  searchInput?: { shouldRenderInList: true } & Pick<ISearchInputProps, 'placeholder'>;
+  searchInput?: {
+    /** @default false */
+    shouldRenderInList?: boolean;
+    ref?: Ref<HTMLInputElement>;
+  } & Pick<ISearchInputProps, 'placeholder' | 'shouldFocusOnMount'>;
   isOptionDisabled?: (option: Value) => boolean;
   onChange: (value: Value | undefined, event: IChangeSelectEvent) => void; // подумать как возвращать индекс
   onBlur?: (event: Event | SyntheticEvent) => void;
@@ -142,9 +146,9 @@ export function Select<Value>(
   const hasSearchInputInList = optionsMode !== 'normal' && shouldRenderSearchInputInList;
   const hasReadonlyInput = isReadonly || optionsMode === 'normal' || shouldRenderSearchInputInList;
 
-  const tweakControlGroupStyles = useTweakStyles({
+  const tweakWithMessagesStyles = useTweakStyles({
     tweakStyles,
-    className: 'tweakControlGroup',
+    className: 'tweakWithMessages',
     currentComponentName: 'Select',
   });
 
@@ -241,44 +245,27 @@ export function Select<Value>(
     [convertValueToId, convertValueToString],
   );
 
-  const getDropdownOffset = () => {
-    if (isEmpty(input.current)) {
-      return 0;
-    }
-
-    // Высота элемента inputWrapper у компонента Input
-    return input.current.parentElement?.offsetHeight ?? 0;
-  };
-
   const closeList = useCallback(() => {
     setIsListOpen(false);
     setSearchValue('');
     setShouldShowDefaultOption(true);
-
-    if (!dropdownOptions?.shouldUsePopper) {
-      root.current?.style.removeProperty('--dropdown-offset');
-    }
   }, [dropdownOptions?.shouldUsePopper]);
 
   const handleListClose = useCallback(
     (event: Event | SyntheticEvent) => {
+      if (!isListOpen) {
+        return;
+      }
+
       closeList();
       onBlur?.(event);
     },
-    [closeList, onBlur],
+    [isListOpen, closeList, onBlur],
   );
 
   const handleListOpen = () => {
-    if (isReadonly) {
-      return;
-    }
-
-    if (!isListOpen) {
+    if (!isReadonly && !isListOpen) {
       setIsListOpen(true);
-
-      if (!dropdownOptions?.shouldUsePopper) {
-        root.current?.style.setProperty('--dropdown-offset', `${getDropdownOffset()}px`);
-      }
     }
   };
 
@@ -599,10 +586,11 @@ export function Select<Value>(
     ) : undefined;
 
   return (
-    <ControlGroup
+    <WithMessages
       errorMessage={errorMessage}
       infoMessage={infoMessage}
-      tweakStyles={tweakControlGroupStyles}
+      tweakStyles={tweakWithMessagesStyles}
+      testId={getTestId(testId, 'wrapper')}
     >
       <div className={classes.root} onKeyDown={handleKeyDown} ref={root}>
         <div
@@ -645,6 +633,6 @@ export function Select<Value>(
           <>{isOpen && listEl}</>
         )}
       </div>
-    </ControlGroup>
+    </WithMessages>
   );
 }

package/src/components/Select/components/SelectList/SelectList.tsx

@@ -84,7 +84,7 @@ export function SelectList<Value>({
       })}
     >
       {isHeaderNotEmpty && <div className={classes.listHeader}>{customListHeader}</div>}
-      <div className={classes.list} {...addDataTestId(testId)}>
+      <div className={classes.list} {...addDataTestId(testId)} tabIndex={-1}>
         {isLoading ? (
           <div className={clsx(classes.cell, classes.loading)}>{loadingLabel}</div>
         ) : (

package/src/components/Select/index.ts

@@ -1,4 +1,4 @@
 export * from './Select';
 export * from './types';
 export type { ISelectStyles } from './Select.styles';
-export type { ISelectListStyles } from './components';
+export { type ISelectListStyles, SelectList } from './components';

package/src/components/TextArea/TextArea.styles.ts

@@ -1,6 +1,6 @@
 import { animations, createThemedStyles, helpers, ITweakStyles } from '../../theme';
-import { IControlGroupStyles } from '../ControlGroup';
 import { IControlWrapperStyles } from '../ControlWrapper';
+import { IWithMessagesStyles } from '../WithMessages';
 
 export const useStyles = createThemedStyles('TextArea', {
   textarea: {
@@ -32,12 +32,16 @@ export const useStyles = createThemedStyles('TextArea', {
     },
   },
 
+  wrapper: {
+    width: '100%',
+  },
+
   autoSized: {
     display: 'grid',
     gridTemplateRows: 'minmax(0, 100%)',
 
     '& > $textarea, &::after': {
-      gridArea: '1 / 2',
+      gridArea: '1 / 1',
     },
 
     '&::after': {
@@ -72,7 +76,7 @@ export const controlWrapperStyles: IControlWrapperStyles = {
 export type ITextAreaStyles = ITweakStyles<
   typeof useStyles,
   {
-    tweakControlGroup: IControlGroupStyles;
+    tweakWithMessages: IWithMessagesStyles;
     tweakControlWrapper: IControlWrapperStyles;
   }
 >;

package/src/components/TextArea/TextArea.tsx

@@ -2,21 +2,22 @@ import { ChangeEvent, FocusEvent, FormEvent, forwardRef, useState } from 'react'
 import clsx from 'clsx';
 import {
   addDataAttributes,
+  getTestId,
   isNotEmpty,
   isReactNodeNotEmpty,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { ControlGroup, IControlGroupProps } from '../ControlGroup';
 import { ControlWrapper, IControlWrapperProps } from '../ControlWrapper';
+import { IWithMessagesProps, WithMessages } from '../WithMessages';
 import { ITextAreaHTMLBaseProps } from './types';
 import { controlWrapperStyles, ITextAreaStyles, useStyles } from './TextArea.styles';
 
 export interface ITextAreaProps
   extends ICommonProps<ITextAreaStyles>,
     Pick<IControlWrapperProps, 'label' | 'isInvalid' | 'isRequired' | 'isDisabled'>,
-    Pick<IControlGroupProps, 'infoMessage' | 'errorMessage'>,
+    Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'>,
     Pick<ITextAreaHTMLBaseProps, 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'> {
   value?: string;
   placeholder?: string;
@@ -73,9 +74,9 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
   ) => {
     const classes = useStyles({ theme: tweakStyles });
 
-    const tweakControlGroupStyles = useTweakStyles({
+    const tweakWithMessagesStyles = useTweakStyles({
       tweakStyles,
-      className: 'tweakControlGroup',
+      className: 'tweakWithMessages',
       currentComponentName: 'TextArea',
     });
 
@@ -92,7 +93,8 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
     // в hasValue нельзя использовать isStringNotEmpty из-за того что isStringNotEmpty делает trim
     const hasValue = value !== undefined && value !== '';
     const hasLabel = isReactNodeNotEmpty(label);
-    const hasPlaceholder = (!hasLabel || hasFocus || shouldAlwaysShowPlaceholder) && isStringNotEmpty(placeholder);
+    const hasPlaceholder =
+      (!hasLabel || hasFocus || shouldAlwaysShowPlaceholder) && isStringNotEmpty(placeholder);
 
     const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
       onChange(event.currentTarget.value, event);
@@ -109,10 +111,11 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
     };
 
     return (
-      <ControlGroup
+      <WithMessages
         errorMessage={errorMessage}
         infoMessage={infoMessage}
-        tweakStyles={tweakControlGroupStyles}
+        tweakStyles={tweakWithMessagesStyles}
+        testId={getTestId(testId, 'wrapper')}
       >
         <ControlWrapper
           label={label}
@@ -121,10 +124,12 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
           isDisabled={isDisabled}
           hasValue={hasValue}
           isFullWidth
-          testId={testId}
           {...controlProps}
         >
-          <div {...(isAutoSized && { className: classes.autoSized, 'data-value': value })}>
+          <div
+            className={clsx(classes.wrapper, { [classes.autoSized]: isAutoSized })}
+            {...(isAutoSized && { 'data-value': value })}
+          >
             <textarea
               ref={ref}
               className={classes.textarea}
@@ -138,7 +143,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
               onFocus={handleFocus}
               onBlur={handleBlur}
               onChange={handleChange}
-              {...addDataAttributes(data, testId, 'control')}
+              {...addDataAttributes(data, testId)}
             />
           </div>
         </ControlWrapper>
@@ -151,7 +156,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
             {value.length} / {maxLength}
           </span>
         )}
-      </ControlGroup>
+      </WithMessages>
     );
   },
 );

package/src/components/Tooltip/Tooltip.styles.ts

@@ -32,6 +32,8 @@ export const useStyles = createThemedStyles('Tooltip', {
     letterSpacing: 0.2,
   },
 
+  custom: {},
+
   info: {},
 
   error: {

package/src/components/Tooltip/Tooltip.tsx

@@ -8,7 +8,7 @@ import { useStyles, ITooltipStyles } from './Tooltip.styles';
 export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
   text: ReactNode;
   /** @default 'tooltip' */
-  view?: 'tooltip' | 'hint';
+  view?: 'tooltip' | 'hint' | 'custom';
   /** @default 'info' */
   type?: 'info' | 'error';
 }

package/src/components/{ControlGroup/ControlGroup.stories.tsx → WithMessages/WithMessages.stories.tsx}

@@ -1,26 +1,26 @@
 import { doNothing } from '@true-engineering/true-react-platform-helpers';
 import { ComponentStory } from '@storybook/react';
 import { IInputProps, Input } from '../Input';
-import { ControlGroup } from './ControlGroup';
+import { WithMessages } from './WithMessages';
 
 export default {
-  title: 'ControlGroup',
-  component: ControlGroup,
+  title: 'WithMessages',
+  component: WithMessages,
 };
 
-const Template: ComponentStory<typeof ControlGroup> = ({ direction, ...args }) => {
+const Template: ComponentStory<typeof WithMessages> = ({ controlsDirection, ...args }) => {
   let groupPlacement: Array<IInputProps['groupPlacement']> = [];
-  if (direction === 'horizontal') {
+  if (controlsDirection === 'horizontal') {
     groupPlacement = ['left', 'right'];
   }
-  if (direction === 'vertical') {
+  if (controlsDirection === 'vertical') {
     groupPlacement = ['top', 'bottom'];
   }
   return (
-    <ControlGroup {...args} direction={direction}>
+    <WithMessages {...args} controlsDirection={controlsDirection}>
       <Input value="value" groupPlacement={groupPlacement[0]} onChange={doNothing} />
       <Input value="value" groupPlacement={groupPlacement[1]} onChange={doNothing} />
-    </ControlGroup>
+    </WithMessages>
   );
 };
 
@@ -29,11 +29,11 @@ export const Default = Template.bind({});
 Default.args = {
   infoMessage: 'Message Info',
   errorMessage: 'Error Text',
-  direction: undefined,
+  controlsDirection: undefined,
 };
 
 Default.argTypes = {
-  direction: {
+  controlsDirection: {
     options: [undefined, 'horizontal', 'vertical'],
     control: 'radio',
   },

package/src/components/{ControlGroup/ControlGroup.styles.ts → WithMessages/WithMessages.styles.ts}

@@ -1,10 +1,11 @@
 import { createThemedStyles, ITweakStyles } from '../../theme';
 
-export const useStyles = createThemedStyles('ControlGroup', {
-  root: {
+export const useStyles = createThemedStyles('WithMessages', {
+  withMessages: {
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
+    position: 'relative',
   },
 
   error: {
@@ -43,4 +44,4 @@ export const useStyles = createThemedStyles('ControlGroup', {
   children: {},
 });
 
-export type IControlGroupStyles = ITweakStyles<typeof useStyles>;
+export type IWithMessagesStyles = ITweakStyles<typeof useStyles>;

package/src/components/{ControlGroup/ControlGroup.tsx → WithMessages/WithMessages.tsx}

@@ -1,18 +1,22 @@
 import { forwardRef, ReactNode } from 'react';
 import clsx from 'clsx';
-import { addDataAttributes, addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import {
+  addDataAttributes,
+  addDataTestId,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
-import { IControlGroupStyles, useStyles } from './ControlGroup.styles';
+import { IWithMessagesStyles, useStyles } from './WithMessages.styles';
 
-export interface IControlGroupProps extends ICommonProps<IControlGroupStyles> {
+export interface IWithMessagesProps extends ICommonProps<IWithMessagesStyles> {
   children: ReactNode;
   infoMessage?: ReactNode;
   errorMessage?: ReactNode;
-  direction?: 'horizontal' | 'vertical';
+  controlsDirection?: 'horizontal' | 'vertical';
 }
 
-export const ControlGroup = forwardRef<HTMLDivElement, IControlGroupProps>(
-  ({ children, infoMessage, errorMessage, direction, tweakStyles, testId, data }, ref) => {
+export const WithMessages = forwardRef<HTMLDivElement, IWithMessagesProps>(
+  ({ children, infoMessage, errorMessage, controlsDirection, tweakStyles, testId, data }, ref) => {
     const classes = useStyles({ theme: tweakStyles });
 
     const shouldShowError = isReactNodeNotEmpty(errorMessage);
@@ -21,15 +25,15 @@ export const ControlGroup = forwardRef<HTMLDivElement, IControlGroupProps>(
     return (
       <div
         ref={ref}
-        className={classes.root}
+        className={classes.withMessages}
         data-invalid={shouldShowError ? true : undefined}
         {...addDataAttributes(data, testId)}
       >
         {isReactNodeNotEmpty(children) && (
           <div
             className={clsx(classes.children, {
-              [classes.horizontal]: direction === 'horizontal',
-              [classes.vertical]: direction === 'vertical',
+              [classes.horizontal]: controlsDirection === 'horizontal',
+              [classes.vertical]: controlsDirection === 'vertical',
             })}
           >
             {children}

package/src/components/WithMessages/index.ts

@@ -0,0 +1,2 @@
+export * from './WithMessages';
+export type { IWithMessagesStyles } from './WithMessages.styles';

package/src/components/WithPopup/WithPopup.stories.tsx

@@ -91,6 +91,7 @@ Default.args = {
   shouldRenderInBody: true,
   shouldHideOnScroll: false,
   shouldStopPropagation: true,
+  shouldShowArrow: false,
 };
 
 Default.parameters = {

package/src/components/WithPopup/WithPopup.styles.ts

@@ -20,6 +20,8 @@ export const useStyles = createThemedStyles('WithPopup', {
     outline: 'none',
   },
 
+  arrow: {},
+
   animationEnd: {},
 
   animationStart: {},

package/src/components/WithPopup/WithPopup.tsx

@@ -1,7 +1,6 @@
-import { FC, useState } from 'react';
+import { FC, useRef, useState } from 'react';
 import clsx from 'clsx';
 import {
-  addDataTestId,
   applyAction,
   stopPropagation,
   addDataAttributes,
@@ -23,10 +22,18 @@ import {
   UseHoverProps,
   safePolygon,
   useFocus,
+  FloatingArrow,
+  arrow,
+  UseClickProps,
+  UseFocusProps,
+  UseDismissProps,
+  UseTransitionStatusProps,
 } from '@floating-ui/react';
-import { ICommonProps, IRenderNode } from '../../types';
+import { ICommonProps, IDataAttributes, IRenderNode } from '../../types';
 import { DEFAULT_OFFSET } from './constants';
+import { minWidthRelativeToTrigger } from './helpers';
 import {
+  IPopupArrowProps,
   IPopupEventType,
   IReferenceProps,
   IWithPopupChildrenProps,
@@ -43,11 +50,16 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   placement?: Placement;
   /** @default 'click' */
   eventType?: IPopupEventType;
-  /** @default 0 */
-  hoverDelay?: UseHoverProps['delay'];
+  /**
+   * @deprecated Используйте hoverOptions
+   * @default 0
+   */
+  hoverDelay?: number;
   /** @default 6 */
   popupOffset?: OffsetOptions;
-  /** @default true */
+  arrowProps?: IPopupArrowProps;
+  popupData?: IDataAttributes;
+  /** @default true, if eventType === click */
   shouldStopPropagation?: boolean;
   /** @default false */
   shouldHideOnScroll?: boolean;
@@ -60,6 +72,16 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   canBeFlipped?: boolean;
   /** @default false */
   isDisabled?: boolean;
+  /** @default false */
+  shouldShowArrow?: boolean;
+  /** Должна ли минимальная ширина попапа быть равна ширине триггера
+   * @default false */
+  isMinWidthSameAsTrigger?: boolean;
+  hoverOptions?: UseHoverProps;
+  clickOptions?: UseClickProps;
+  focusOptions?: UseFocusProps;
+  dismissOptions?: UseDismissProps;
+  transitionOptions?: UseTransitionStatusProps;
   onToggle?: (isActive: boolean, event?: IWithPopupToggleEvent) => void;
 }
 
@@ -71,12 +93,21 @@ export const WithPopup: FC<IWithPopupProps> = ({
   placement = eventType === 'click' ? 'bottom-end' : 'top',
   hoverDelay = 0,
   popupOffset = DEFAULT_OFFSET,
-  shouldStopPropagation = true,
+  arrowProps,
+  popupData,
+  shouldStopPropagation = eventType === 'click',
   shouldHideOnScroll = false,
   shouldRenderInBody = true,
   canBeFlipped = true,
   isTriggerWrapped = eventType === 'hover',
   isDisabled = false,
+  shouldShowArrow = false,
+  isMinWidthSameAsTrigger = false,
+  hoverOptions,
+  clickOptions,
+  focusOptions,
+  dismissOptions,
+  transitionOptions,
   tweakStyles,
   data,
   testId,
@@ -86,6 +117,8 @@ export const WithPopup: FC<IWithPopupProps> = ({
 
   const [isOpen, setIsOpen] = useState(false);
 
+  const arrowRef = useRef<SVGSVGElement>(null);
+
   const handleToggle = (isActive: boolean, event?: IWithPopupToggleEvent) => {
     event?.stopPropagation();
     if (!isDisabled) {
@@ -103,7 +136,9 @@ export const WithPopup: FC<IWithPopupProps> = ({
     middleware: [
       offset(popupOffset),
       canBeFlipped && flip({ fallbackAxisSideDirection: 'start' }),
+      isMinWidthSameAsTrigger && minWidthRelativeToTrigger,
       ...middlewares,
+      shouldShowArrow && arrow({ element: arrowRef }),
     ],
     whileElementsMounted: autoUpdate,
     placement,
@@ -112,22 +147,27 @@ export const WithPopup: FC<IWithPopupProps> = ({
 
   const hover = useHover(context, {
     enabled: eventType === 'hover',
-    delay: typeof hoverDelay === 'number' ? { open: hoverDelay, close: 0 } : hoverDelay,
+    delay: { open: hoverDelay, close: 0 },
     handleClose: safePolygon(),
+    ...hoverOptions,
   });
 
-  const focus = useFocus(context, { enabled: eventType === 'hover' });
+  const focus = useFocus(context, { enabled: eventType === 'hover', ...focusOptions });
 
-  const click = useClick(context, { enabled: eventType === 'click' });
+  const click = useClick(context, { enabled: eventType === 'click', ...clickOptions });
 
   const dismiss = useDismiss(context, {
     enabled: eventType === 'click',
     ancestorScroll: shouldHideOnScroll,
+    ...dismissOptions,
   });
 
   const { getFloatingProps, getReferenceProps } = useInteractions([hover, click, focus, dismiss]);
 
-  const { isMounted, status } = useTransitionStatus(context, { duration: { close: 500 } });
+  const { isMounted, status } = useTransitionStatus(context, {
+    duration: { close: 500 },
+    ...transitionOptions,
+  });
 
   const referenceProps: IReferenceProps = getReferenceProps({
     ref: refs.setReference,
@@ -155,8 +195,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
             [classes.active]: isOpen,
           })}
           {...referenceProps}
-          {...addDataTestId(testId)}
-          {...addDataAttributes(data)}
+          {...addDataAttributes(data, testId)}
         >
           {triggerElement}
         </div>
@@ -165,16 +204,25 @@ export const WithPopup: FC<IWithPopupProps> = ({
       )}
       {isMounted && (
         <FloatingPortal
-          root={!shouldRenderInBody ? (refs.reference.current as HTMLDivElement) : undefined}
+          root={shouldRenderInBody ? document.body : (refs.reference.current as HTMLElement)}
         >
           <div
+            ref={refs.setFloating}
             style={floatingStyles}
             className={classes.popup}
-            ref={refs.setFloating}
             {...getFloatingProps()}
+            {...addDataAttributes(popupData, testId, 'popup')}
           >
             <div className={classes[`dropdown-${status}`]}>
-              {applyAction(children, { onClose: handleClose })}
+              {shouldShowArrow && (
+                <FloatingArrow
+                  {...arrowProps}
+                  ref={arrowRef}
+                  context={context}
+                  className={classes.arrow}
+                />
+              )}
+              {applyAction(children, { floatingContext: context, onClose: handleClose })}
             </div>
           </div>
         </FloatingPortal>

package/src/components/WithPopup/helpers.ts

@@ -0,0 +1,9 @@
+import { Middleware, size } from '@floating-ui/react';
+
+export const minWidthRelativeToTrigger: Middleware = size({
+  apply({ rects, elements }) {
+    Object.assign(elements.floating.style, {
+      minWidth: `${rects.reference.width}px`,
+    });
+  },
+});

package/src/components/WithPopup/types.ts

@@ -1,4 +1,5 @@
 import type { MouseEvent, KeyboardEvent } from 'react';
+import type { FloatingArrowProps, UseFloatingReturn } from '@floating-ui/react';
 import type { IDataAttributesProps, IDomElementInteractions } from '../../types';
 import type { POPUP_EVENT_TYPES } from './constants';
 
@@ -21,5 +22,11 @@ export interface IWithPopupTriggerProps {
 }
 
 export interface IWithPopupChildrenProps {
+  floatingContext: UseFloatingReturn['context'];
   onClose: (event?: IWithPopupToggleEvent) => void;
 }
+
+export type IPopupArrowProps = Pick<
+  FloatingArrowProps,
+  'width' | 'height' | 'tipRadius' | 'staticOffset' | 'd' | 'stroke' | 'strokeWidth'
+>;

package/src/components/WithTooltip/WithTooltip.styles.ts

@@ -1,6 +1,12 @@
 import { ITooltipStyles } from '../Tooltip';
 import { IWithPopupStyles } from '../WithPopup';
 
+export const withPopupStyles: IWithPopupStyles = {
+  popup: {
+    zIndex: 9999,
+  },
+};
+
 export interface IWithTooltipStyles {
   tweakWithPopup?: IWithPopupStyles;
   tweakTooltip?: ITooltipStyles;