@true-engineering/true-react-common-ui-kit 3.55.0 → 3.56.1

package/package.json

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

package/src/components/FlexibleTable/FlexibleTable.styles.ts

@@ -1,10 +1,12 @@
 import { rgba } from '../../helpers';
-import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
+import { colors, ITweakStyles, createThemedStyles, animations, helpers } from '../../theme';
 import type { IFlexibleTableRowStyles } from './components';
 
 export const STICKY_SHADOW_PADDING = 12;
 
 export const useStyles = createThemedStyles('FlexibleTable', {
+  flexibleTableWrapper: {},
+
   root: {
     width: '100%',
     position: 'relative',
@@ -13,7 +15,7 @@ export const useStyles = createThemedStyles('FlexibleTable', {
   },
 
   scroll: {
-    overflow: 'auto',
+    ...helpers.withScrollBar,
     /*
       Чтобы сделать таблицу на всю высоту проставьте
       height у родителя таблицы у себя в проекте.

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -221,7 +221,10 @@ export function FlexibleTable<
   const Table = TableRenders[renderMode];
 
   return (
-    <div ref={ref} className={clsx({ [classes.scroll]: isHorizontallyScrollable })}>
+    <div
+      ref={ref}
+      className={clsx(classes.flexibleTableWrapper, { [classes.scroll]: isHorizontallyScrollable })}
+    >
       <Table.Root
         className={classes.root}
         {...addDataTestId(testId)}

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/WithPopup/WithPopup.tsx

@@ -24,6 +24,10 @@ import {
   useFocus,
   FloatingArrow,
   arrow,
+  UseClickProps,
+  UseFocusProps,
+  UseDismissProps,
+  UseTransitionStatusProps,
 } from '@floating-ui/react';
 import { ICommonProps, IDataAttributes, IRenderNode } from '../../types';
 import { DEFAULT_OFFSET } from './constants';
@@ -46,8 +50,11 @@ 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;
   arrowProps?: IPopupArrowProps;
@@ -70,6 +77,11 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   /** Должна ли минимальная ширина попапа быть равна ширине триггера
    * @default false */
   isMinWidthSameAsTrigger?: boolean;
+  hoverOptions?: UseHoverProps;
+  clickOptions?: UseClickProps;
+  focusOptions?: UseFocusProps;
+  dismissOptions?: UseDismissProps;
+  transitionOptions?: UseTransitionStatusProps;
   onToggle?: (isActive: boolean, event?: IWithPopupToggleEvent) => void;
 }
 
@@ -91,6 +103,11 @@ export const WithPopup: FC<IWithPopupProps> = ({
   isDisabled = false,
   shouldShowArrow = false,
   isMinWidthSameAsTrigger = false,
+  hoverOptions,
+  clickOptions,
+  focusOptions,
+  dismissOptions,
+  transitionOptions,
   tweakStyles,
   data,
   testId,
@@ -130,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,
@@ -189,7 +211,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
             style={floatingStyles}
             className={classes.popup}
             {...getFloatingProps()}
-            {...addDataAttributes(popupData)}
+            {...addDataAttributes(popupData, testId, 'popup')}
           >
             <div className={classes[`dropdown-${status}`]}>
               {shouldShowArrow && (