@true-engineering/true-react-common-ui-kit 3.17.0 → 3.18.0

package/package.json

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

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.styles.ts

@@ -1,4 +1,5 @@
 import { animations, colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+import { IWithPopupStyles } from '../../../WithPopup';
 import type { IFilterValueViewStyles } from '../FilterValueView';
 import { FILTER_HEIGHT } from '../../FiltersPane.styles';
 
@@ -86,20 +87,9 @@ export const useStyles = createThemedStyles('FilterWrapper', {
     display: 'flex',
     minWidth: 0,
   },
-
-  animationEnd: animations.slideUp['slide-up-exit'],
-
-  animationStart: animations.slideUp['slide-up-enter-active'],
-
-  'dropdown-initial': { extend: 'animationEnd' },
-  'dropdown-open': { extend: 'animationStart' },
-  'dropdown-close': { extend: 'animationEnd' },
-  'dropdown-unmounted': { extend: 'animationEnd' },
 });
 
 export type IFilterWrapperStyles = ITweakStyles<
   typeof useStyles,
-  {
-    tweakValueView: IFilterValueViewStyles;
-  }
+  { tweakWithPopup: IWithPopupStyles; tweakValueView: IFilterValueViewStyles }
 >;

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx

@@ -34,6 +34,12 @@ export function FilterWrapper<Values, Key extends keyof Values>({
 }: IFilterWrapperProps<Values, Key>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
+  const tweakWithPopupStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakWithPopup',
+    currentComponentName: 'FilterWrapper',
+  });
+
   const tweakFilterValueViewStyles = useTweakStyles({
     tweakStyles,
     className: 'tweakValueView',
@@ -68,6 +74,7 @@ export function FilterWrapper<Values, Key extends keyof Values>({
       placement="bottom-start"
       canBeFlipped
       isDisabled={isBoolean || isDisabled}
+      tweakStyles={tweakWithPopupStyles}
       trigger={({ isActive }) => (
         <div
           className={clsx(classes.root, {
@@ -107,18 +114,16 @@ export function FilterWrapper<Values, Key extends keyof Values>({
         </div>
       )}
     >
-      {({ onClose, status }) => (
-        <div className={classes[`dropdown-${status}`]}>
-          <Filter
-            value={value}
-            filter={filter}
-            localeKey={localeKey}
-            locale={locale}
-            onClose={onClose}
-            onChange={onChange}
-            testId={testId}
-          />
-        </div>
+      {({ onClose }) => (
+        <Filter
+          value={value}
+          filter={filter}
+          localeKey={localeKey}
+          locale={locale}
+          onClose={onClose}
+          onChange={onChange}
+          testId={testId}
+        />
       )}
     </WithPopup>
   );

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -217,7 +217,8 @@ export function FlexibleTable<Row extends ITableRow>({
                     maxWidth: itemConfig?.maxWidth,
                     textAlign: itemConfig?.titleAlign ?? 'left',
                   }}
-                  onClick={() => onHeadClick?.(key)}
+                  onClick={isNotEmpty(onHeadClick) ? () => onHeadClick(key) : undefined}
+                  {...addDataAttributes({ id: itemConfig?.shouldRenderDataId ? key : undefined })}
                 >
                   {isNotEmpty(TitleComponent) ? (
                     <TitleComponent value={headerContent?.[key]} />

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

@@ -16,6 +16,27 @@ export const useStyles = createThemedStyles('WithPopup', {
   popup: {
     zIndex: 5,
   },
+
+  animationEnd: {},
+
+  animationStart: {},
+
+  'dropdown-initial': {
+    extend: 'animationEnd',
+  },
+
+  'dropdown-open': {
+    extend: 'animationStart',
+  },
+
+  'dropdown-close': {
+    visibility: 'hidden',
+    extend: 'animationEnd',
+  },
+
+  'dropdown-unmounted': {
+    extend: 'animationEnd',
+  },
 });
 
 export type IWithPopupStyles = ITweakStyles<typeof useStyles>;

package/src/components/WithPopup/WithPopup.tsx

@@ -20,12 +20,12 @@ import {
 import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { DEFAULT_OFFSET } from './constants';
-import { IPopupEventType, ITransitionStatus } from './types';
+import { IPopupEventType } from './types';
 import { useStyles, IWithPopupStyles } from './WithPopup.styles';
 
 export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   trigger: ReactNode | FC<{ isActive: boolean }>;
-  children: ReactNode | FC<{ status: ITransitionStatus; onClose: () => void }>;
+  children: ReactNode | FC<{ onClose: () => void }>;
   middlewares?: Middleware[];
   /** @default eventType === 'click' ? 'bottom-end' : 'top' */
   placement?: Placement;
@@ -87,7 +87,10 @@ export const WithPopup: FC<IWithPopupProps> = ({
     onOpenChange: handleToggle,
   });
 
-  const hover = useHover(context, { enabled: eventType === 'hover', delay: hoverDelay });
+  const hover = useHover(context, {
+    enabled: eventType === 'hover',
+    delay: typeof hoverDelay === 'number' ? { open: hoverDelay, close: 0 } : hoverDelay,
+  });
   const click = useClick(context, { enabled: eventType === 'click', toggle: false });
   const dismiss = useDismiss(context, {
     enabled: eventType === 'click',
@@ -96,7 +99,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
 
   const { getFloatingProps } = useInteractions([hover, click, dismiss]);
 
-  const { isMounted, status } = useTransitionStatus(context);
+  const { isMounted, status } = useTransitionStatus(context, { duration: { close: 500 } });
 
   return (
     <div
@@ -123,7 +126,9 @@ export const WithPopup: FC<IWithPopupProps> = ({
             ref={refs.setFloating}
             {...getFloatingProps()}
           >
-            {isFunction(children) ? children({ status, onClose: handleClose }) : children}
+            <div className={classes[`dropdown-${status}`]}>
+              {isFunction(children) ? children({ onClose: handleClose }) : children}
+            </div>
           </div>
         </FloatingPortal>
       )}

package/src/components/WithPopup/types.ts

@@ -1,6 +1,3 @@
-import type { useTransitionStatus } from '@floating-ui/react';
 import type { POPUP_EVENT_TYPES } from './constants';
 
 export type IPopupEventType = (typeof POPUP_EVENT_TYPES)[number];
-
-export type ITransitionStatus = ReturnType<typeof useTransitionStatus>['status'];

package/src/theme/common.ts

@@ -114,6 +114,7 @@ export const helpers = {
   },
 } satisfies IUiKitHelpers;
 
+export const SLIDE_UP_ANIMATION_DURATION = 150;
 const SLIDE_UP_POSITION_START = 15;
 const SLIDE_UP_POSITION_END = 0;
 
@@ -129,7 +130,7 @@ export const animations = {
     'slide-up-enter-active': {
       opacity: 1,
       transform: `translateY(${SLIDE_UP_POSITION_END}px)`,
-      transition: '150ms ease-in-out',
+      transition: `${SLIDE_UP_ANIMATION_DURATION}ms ease-in-out`,
       transitionProperty: 'opacity, transform',
     },
 
@@ -141,7 +142,7 @@ export const animations = {
     'slide-up-exit': {
       opacity: 0,
       transform: `translateY(${SLIDE_UP_POSITION_START}px)`,
-      transition: '150ms ease-in-out',
+      transition: `${SLIDE_UP_ANIMATION_DURATION}ms ease-in-out`,
       transitionProperty: 'opacity, transform',
     },
   },