@true-engineering/true-react-common-ui-kit 3.15.3 → 3.16.0

package/src/components/NewMoreMenu/NewMoreMenu.tsx

@@ -12,7 +12,12 @@ import { useStyles, INewMoreMenuStyles } from './NewMoreMenu.styles';
 export interface INewMoreMenuProps
   extends Pick<
       IWithPopupProps,
-      'middlewares' | 'shouldHideOnScroll' | 'shouldRenderInBody' | 'canBeFlipped'
+      | 'placement'
+      | 'middlewares'
+      | 'shouldHideOnScroll'
+      | 'shouldRenderInBody'
+      | 'canBeFlipped'
+      | 'onToggle'
     >,
     ICommonProps<INewMoreMenuStyles> {
   items: IListItem[];
@@ -20,8 +25,6 @@ export interface INewMoreMenuProps
   isDisabled?: boolean;
   /** @default true */
   hasDefaultStateBackground?: boolean;
-  /** @default 'bottom-end' */
-  placement?: IWithPopupProps['placement'];
 }
 
 export const NewMoreMenu: FC<INewMoreMenuProps> = ({
@@ -30,12 +33,8 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
   hasDefaultStateBackground = true,
   data,
   testId,
-  placement,
-  middlewares,
-  shouldHideOnScroll,
-  shouldRenderInBody,
-  canBeFlipped,
   tweakStyles,
+  ...props
 }) => {
   const classes = useStyles({ theme: tweakStyles });
 
@@ -55,13 +54,9 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
 
   return (
     <WithPopup
-      placement={placement}
-      middlewares={middlewares}
-      shouldHideOnScroll={shouldHideOnScroll}
-      shouldRenderInBody={shouldRenderInBody}
-      canBeFlipped={canBeFlipped}
       isDisabled={isButtonDisabled}
       tweakStyles={tweakWithPopupStyles}
+      {...props}
       trigger={({ isActive }) => (
         <button
           className={clsx(classes.button, {

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

@@ -32,7 +32,7 @@ export const useStyles = createThemedStyles('TextArea', {
     fontFamily: 'inherit',
     fontSize: 16,
     padding: [14, PADDING_X, 8],
-    scrollPadding: [14, 0, 8],
+    scrollPadding: '14px 0 8px',
     transition: animations.defaultTransition,
     transitionProperty: 'background-color',
     border: 'none',
@@ -79,7 +79,7 @@ export const useStyles = createThemedStyles('TextArea', {
   withFloatingLabel: {
     '& $textarea, &::after': {
       paddingTop: 24,
-      scrollPaddingTop: 24,
+      scrollPaddingTop: '24px',
     },
   },
 

package/src/components/WithPopup/WithPopup.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode, useState, MouseEvent, useMemo } from 'react';
+import { FC, ReactNode, useState, MouseEvent } from 'react';
 import clsx from 'clsx';
 import { addDataTestId, isFunction } from '@true-engineering/true-react-platform-helpers';
 import {
@@ -13,16 +13,19 @@ import {
   FloatingPortal,
   offset,
   flip,
+  useTransitionStatus,
+  OffsetOptions,
+  UseHoverProps,
 } from '@floating-ui/react';
 import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { DEFAULT_OFFSET } from './constants';
-import { IPopupEventType } from './types';
+import { IPopupEventType, ITransitionStatus } from './types';
 import { useStyles, IWithPopupStyles } from './WithPopup.styles';
 
 export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   trigger: ReactNode | FC<{ isActive: boolean }>;
-  children: ReactNode | FC<{ onClose: () => void }>;
+  children: ReactNode | FC<{ status: ITransitionStatus; onClose: () => void }>;
   middlewares?: Middleware[];
   /** @default eventType === 'click' ? 'bottom-end' : 'top' */
   placement?: Placement;
@@ -33,9 +36,9 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   /** @default 'click' */
   eventType?: IPopupEventType;
   /** @default 0 */
-  hoverDelay?: number;
+  hoverDelay?: UseHoverProps['delay'];
   /** @default 6 */
-  popupOffset?: number;
+  popupOffset?: OffsetOptions;
   /** @default false */
   canBeFlipped?: boolean;
   /** @default false */
@@ -46,7 +49,7 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
 export const WithPopup: FC<IWithPopupProps> = ({
   trigger,
   children,
-  middlewares: initialMiddlewares,
+  middlewares = [],
   eventType = 'click',
   placement = eventType === 'click' ? 'bottom-end' : 'top',
   shouldHideOnScroll = false,
@@ -64,14 +67,6 @@ export const WithPopup: FC<IWithPopupProps> = ({
 
   const [isOpen, setIsOpen] = useState(false);
 
-  const Trigger = trigger;
-  const Popup = children;
-
-  const middleware = useMemo(
-    () => [offset(popupOffset), ...(canBeFlipped ? [flip()] : []), ...(initialMiddlewares ?? [])],
-    [popupOffset, canBeFlipped, initialMiddlewares],
-  );
-
   const handleToggle = (isActive: boolean, event?: MouseEvent | Event) => {
     event?.stopPropagation();
     if (!isDisabled) {
@@ -86,16 +81,13 @@ export const WithPopup: FC<IWithPopupProps> = ({
 
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
-    middleware,
+    middleware: [offset(popupOffset), ...(canBeFlipped ? [flip()] : []), ...middlewares],
     whileElementsMounted: autoUpdate,
     placement,
     onOpenChange: handleToggle,
   });
 
-  const hover = useHover(context, {
-    enabled: eventType === 'hover',
-    delay: { open: hoverDelay },
-  });
+  const hover = useHover(context, { enabled: eventType === 'hover', delay: hoverDelay });
   const click = useClick(context, { enabled: eventType === 'click', toggle: false });
   const dismiss = useDismiss(context, {
     enabled: eventType === 'click',
@@ -104,6 +96,8 @@ export const WithPopup: FC<IWithPopupProps> = ({
 
   const { getFloatingProps } = useInteractions([hover, click, dismiss]);
 
+  const { isMounted, status } = useTransitionStatus(context);
+
   return (
     <div
       ref={refs.setReference}
@@ -116,10 +110,10 @@ export const WithPopup: FC<IWithPopupProps> = ({
         onClick={eventType === 'click' ? (e) => handleToggle(!isOpen, e) : undefined}
         {...addDataTestId(testId, 'trigger')}
       >
-        {isFunction(Trigger) ? <Trigger isActive={isOpen} /> : Trigger}
+        {isFunction(trigger) ? trigger({ isActive: isOpen }) : trigger}
       </div>
 
-      {isOpen && (
+      {isMounted && (
         <FloatingPortal
           root={!shouldRenderInBody ? (refs.reference.current as HTMLDivElement) : undefined}
         >
@@ -129,7 +123,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
             ref={refs.setFloating}
             {...getFloatingProps()}
           >
-            {isFunction(Popup) ? <Popup onClose={handleClose} /> : Popup}
+            {isFunction(children) ? children({ status, onClose: handleClose }) : children}
           </div>
         </FloatingPortal>
       )}

package/src/components/WithPopup/types.ts

@@ -1,3 +1,6 @@
-import { POPUP_EVENT_TYPES } from './constants';
+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'];