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

package/src/components/WithPopup/WithPopup.tsx

@@ -1,6 +1,7 @@
-import { FC, useRef, useState } from 'react';
+import { FC, useState } from 'react';
 import clsx from 'clsx';
 import {
+  addDataTestId,
   applyAction,
   stopPropagation,
   addDataAttributes,
@@ -22,14 +23,10 @@ import {
   UseHoverProps,
   safePolygon,
   useFocus,
-  FloatingArrow,
-  arrow,
 } from '@floating-ui/react';
-import { ICommonProps, IDataAttributes, IRenderNode } from '../../types';
+import { ICommonProps, IRenderNode } from '../../types';
 import { DEFAULT_OFFSET } from './constants';
-import { minWidthRelativeToTrigger } from './helpers';
 import {
-  IPopupArrowProps,
   IPopupEventType,
   IReferenceProps,
   IWithPopupChildrenProps,
@@ -50,9 +47,7 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   hoverDelay?: UseHoverProps['delay'];
   /** @default 6 */
   popupOffset?: OffsetOptions;
-  arrowProps?: IPopupArrowProps;
-  popupData?: IDataAttributes;
-  /** @default true, if eventType === click */
+  /** @default true */
   shouldStopPropagation?: boolean;
   /** @default false */
   shouldHideOnScroll?: boolean;
@@ -65,11 +60,6 @@ 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;
 }
 
@@ -81,16 +71,12 @@ export const WithPopup: FC<IWithPopupProps> = ({
   placement = eventType === 'click' ? 'bottom-end' : 'top',
   hoverDelay = 0,
   popupOffset = DEFAULT_OFFSET,
-  arrowProps,
-  popupData,
-  shouldStopPropagation = eventType === 'click',
+  shouldStopPropagation = true,
   shouldHideOnScroll = false,
   shouldRenderInBody = true,
   canBeFlipped = true,
   isTriggerWrapped = eventType === 'hover',
   isDisabled = false,
-  shouldShowArrow = false,
-  isMinWidthSameAsTrigger = false,
   tweakStyles,
   data,
   testId,
@@ -100,8 +86,6 @@ 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) {
@@ -119,9 +103,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
     middleware: [
       offset(popupOffset),
       canBeFlipped && flip({ fallbackAxisSideDirection: 'start' }),
-      isMinWidthSameAsTrigger && minWidthRelativeToTrigger,
       ...middlewares,
-      shouldShowArrow && arrow({ element: arrowRef }),
     ],
     whileElementsMounted: autoUpdate,
     placement,
@@ -173,7 +155,8 @@ export const WithPopup: FC<IWithPopupProps> = ({
             [classes.active]: isOpen,
           })}
           {...referenceProps}
-          {...addDataAttributes(data, testId)}
+          {...addDataTestId(testId)}
+          {...addDataAttributes(data)}
         >
           {triggerElement}
         </div>
@@ -182,25 +165,16 @@ export const WithPopup: FC<IWithPopupProps> = ({
       )}
       {isMounted && (
         <FloatingPortal
-          root={shouldRenderInBody ? document.body : (refs.reference.current as HTMLElement)}
+          root={!shouldRenderInBody ? (refs.reference.current as HTMLDivElement) : undefined}
         >
           <div
-            ref={refs.setFloating}
             style={floatingStyles}
             className={classes.popup}
+            ref={refs.setFloating}
             {...getFloatingProps()}
-            {...addDataAttributes(popupData)}
           >
             <div className={classes[`dropdown-${status}`]}>
-              {shouldShowArrow && (
-                <FloatingArrow
-                  {...arrowProps}
-                  ref={arrowRef}
-                  context={context}
-                  className={classes.arrow}
-                />
-              )}
-              {applyAction(children, { floatingContext: context, onClose: handleClose })}
+              {applyAction(children, { onClose: handleClose })}
             </div>
           </div>
         </FloatingPortal>

package/src/components/WithPopup/types.ts

@@ -1,5 +1,4 @@
 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';
 
@@ -22,11 +21,5 @@ 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,12 +1,6 @@
 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, withPopupStyles } from './WithTooltip.styles';
+import { IWithTooltipStyles } from './WithTooltip.styles';
 
 export interface IWithTooltipProps
   extends Omit<
@@ -32,21 +32,17 @@ 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 (
@@ -54,9 +50,8 @@ export const WithTooltip: FC<IWithTooltipProps> = ({
       trigger={children}
       placement={placement}
       eventType={eventType}
-      popupData={{ ...popupData, tooltipView }}
-      isDisabled={isDisabled || !isReactNodeNotEmpty(tooltipText)}
       isTriggerWrapped
+      isDisabled={isDisabled || !isReactNodeNotEmpty(tooltipText)}
       tweakStyles={tweakWithPopupStyles}
       {...restProps}
     >

package/src/components/index.ts

@@ -44,3 +44,5 @@ export * from './Tooltip';
 export * from './NewMoreMenu';
 export * from './WithPopup';
 export * from './WithTooltip';
+export * from './ControlGroup';
+export * from './ControlWrapper';

package/src/theme/common.ts

@@ -33,7 +33,19 @@ export const dimensions = {
   BORDER_RADIUS_STD: 8,
   BORDER_RADIUS_SMALL: 6,
   BORDER_RADIUS_EXTRA_SMALL: 4,
-  CONTROL_HEIGHT: 48,
+
+  CONTROL: {
+    HEIGHT: 48,
+    PADDING: 16,
+    ICON_SIZE: 24,
+    ICON_INNER_SIZE: 24,
+    ICON_GAP: 8,
+  },
+
+  Z_INDEX: {
+    CONTROL_INVALID: 1,
+    CONTROL_FOCUS: 2,
+  },
 } as const;
 
 export const helpers = {
@@ -79,12 +91,9 @@ export const helpers = {
 
     // Chromium
     '@supports selector(::-webkit-scrollbar)': {
-      '--webkit-scrollbar-width': '10px',
-      '--webkit-scrollbar-height': '10px',
-
       '&::-webkit-scrollbar': {
-        width: 'var(--webkit-scrollbar-width)',
-        height: 'var(--webkit-scrollbar-height)',
+        height: 10,
+        width: 10,
 
         '&-thumb': {
           width: 6,

package/src/theme/types.ts

@@ -8,12 +8,16 @@ import type {
   ICloseButtonStyles,
   ICommonIcon,
   IComplexIcon,
+  IControlGroupStyles,
+  IControlWrapperStyles,
   ICssBaselineStyles,
   IDateInputStyles,
   IDatePickerHeaderStyles,
   IDatePickerStyles,
   IDescriptionStyles,
   IDotsPreloaderStyles,
+  IFileInputStyles,
+  IFileItemStyles,
   IFilterIntervalStyles,
   IFilterSelectStyles,
   IFiltersPaneSearchStyles,
@@ -37,6 +41,7 @@ import type {
   IMultiSelectInputStyles,
   IMultiSelectListStyles,
   IMultiSelectStyles,
+  INewMoreMenuStyles,
   INotificationStyles,
   IPhoneInputCountryListStyles,
   IPhoneInputStyles,
@@ -59,9 +64,6 @@ import type {
   IToasterStyles,
   ITooltipStyles,
   IWithPopupStyles,
-  INewMoreMenuStyles,
-  IFileInputStyles,
-  IFileItemStyles,
   IWithTooltipStyles,
 } from '../components';
 
@@ -136,6 +138,8 @@ export interface IComponentStyles {
   Toaster: IToasterStyles;
   WithPopup: IWithPopupStyles;
   NewMoreMenu: INewMoreMenuStyles;
+  ControlGroup: IControlGroupStyles;
+  ControlWrapper: IControlWrapperStyles;
   WithTooltip: IWithTooltipStyles;
 }
 
@@ -152,7 +156,7 @@ export interface IUiKitTheme {
   preloaders?: Partial<Record<IPreloaderSvgType, string>>; // TODO: заменить string
   animations?: IUiKitAnimations;
   colors?: Record<string, string>;
-  dimensions?: Record<string, number>;
+  dimensions?: Record<string, number | Record<string, number>>;
   boxShadows?: Record<string, JssValue>;
   helpers?: IUiKitHelpers;
 }

package/src/types.ts

@@ -1,6 +1,8 @@
 import {
   FocusEventHandler,
+  type KeyboardEvent,
   KeyboardEventHandler,
+  MouseEvent,
   MouseEventHandler,
   PointerEventHandler,
   ReactNode,
@@ -39,6 +41,7 @@ export interface IDropdownWithPopperOptions {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   flipOptions?: Record<string, any>; // только с shouldUsePopper
 }
+export type IClickHandlerEvent = MouseEvent | KeyboardEvent;
 
 export interface IDomElementInteractions<T> {
   onBlur?: FocusEventHandler<T>;

package/dist/components/Input/constants.d.ts

@@ -1 +0,0 @@
-export declare const DEFAULT_SIZE = 6;

package/dist/components/WithPopup/helpers.d.ts

@@ -1,2 +0,0 @@
-import { Middleware } from '@floating-ui/react';
-export declare const minWidthRelativeToTrigger: Middleware;

package/src/components/Input/constants.ts

@@ -1 +0,0 @@
-export const DEFAULT_SIZE = 6;

package/src/components/WithPopup/helpers.ts

@@ -1,9 +0,0 @@
-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`,
-    });
-  },
-});