@true-engineering/true-react-common-ui-kit 4.0.0-alpha2 → 4.0.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha2",
+  "version": "4.0.0-alpha3",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

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,14 @@ import {
   UseHoverProps,
   safePolygon,
   useFocus,
+  FloatingArrow,
+  arrow,
 } 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,
@@ -47,7 +50,9 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   hoverDelay?: UseHoverProps['delay'];
   /** @default 6 */
   popupOffset?: OffsetOptions;
-  /** @default true */
+  arrowProps?: IPopupArrowProps;
+  popupData?: IDataAttributes;
+  /** @default true, if eventType === click */
   shouldStopPropagation?: boolean;
   /** @default false */
   shouldHideOnScroll?: boolean;
@@ -60,6 +65,11 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   canBeFlipped?: boolean;
   /** @default false */
   isDisabled?: boolean;
+  /** @default false */
+  shouldShowArrow?: boolean;
+  /** Должна ли минимальная ширина попапа быть равна ширине триггера
+   * @default false */
+  isMinWidthSameAsTrigger?: boolean;
   onToggle?: (isActive: boolean, event?: IWithPopupToggleEvent) => void;
 }
 
@@ -71,12 +81,16 @@ 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,
   tweakStyles,
   data,
   testId,
@@ -86,6 +100,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 +119,9 @@ export const WithPopup: FC<IWithPopupProps> = ({
     middleware: [
       offset(popupOffset),
       canBeFlipped && flip({ fallbackAxisSideDirection: 'start' }),
+      isMinWidthSameAsTrigger && minWidthRelativeToTrigger,
       ...middlewares,
+      shouldShowArrow && arrow({ element: arrowRef }),
     ],
     whileElementsMounted: autoUpdate,
     placement,
@@ -155,8 +173,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
             [classes.active]: isOpen,
           })}
           {...referenceProps}
-          {...addDataTestId(testId)}
-          {...addDataAttributes(data)}
+          {...addDataAttributes(data, testId)}
         >
           {triggerElement}
         </div>
@@ -165,16 +182,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)}
           >
             <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;

package/src/components/WithTooltip/WithTooltip.tsx

@@ -4,7 +4,7 @@ import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ITooltipProps, Tooltip } from '../Tooltip';
 import { IWithPopupProps, WithPopup } from '../WithPopup';
-import { IWithTooltipStyles } from './WithTooltip.styles';
+import { IWithTooltipStyles, withPopupStyles } from './WithTooltip.styles';
 
 export interface IWithTooltipProps
   extends Omit<
@@ -32,17 +32,21 @@ export const WithTooltip: FC<IWithTooltipProps> = ({
   tooltipView = 'tooltip',
   tooltipType = 'info',
   isDisabled = false,
+  popupData,
   tweakStyles,
   ...restProps
 }) => {
   const tweakWithPopupStyles = useTweakStyles({
+    innerStyles: withPopupStyles,
     tweakStyles,
     className: 'tweakWithPopup',
+    currentComponentName: 'WithTooltip',
   });
 
   const tweakTooltipStyles = useTweakStyles({
     tweakStyles,
     className: 'tweakTooltip',
+    currentComponentName: 'WithTooltip',
   });
 
   return (
@@ -50,8 +54,9 @@ export const WithTooltip: FC<IWithTooltipProps> = ({
       trigger={children}
       placement={placement}
       eventType={eventType}
-      isTriggerWrapped
+      popupData={{ ...popupData, tooltipView }}
       isDisabled={isDisabled || !isReactNodeNotEmpty(tooltipText)}
+      isTriggerWrapped
       tweakStyles={tweakWithPopupStyles}
       {...restProps}
     >

package/src/theme/common.ts

@@ -91,9 +91,12 @@ export const helpers = {
 
     // Chromium
     '@supports selector(::-webkit-scrollbar)': {
+      '--webkit-scrollbar-width': '10px',
+      '--webkit-scrollbar-height': '10px',
+
       '&::-webkit-scrollbar': {
-        height: 10,
-        width: 10,
+        width: 'var(--webkit-scrollbar-width)',
+        height: 'var(--webkit-scrollbar-height)',
 
         '&-thumb': {
           width: 6,