@true-engineering/true-react-common-ui-kit 3.13.0 → 3.14.0

package/package.json

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

package/src/components/IconButton/IconButton.styles.ts

@@ -47,10 +47,6 @@ export const useStyles = createThemedStyles('IconButton', {
   },
 
   loading: {
-    '& $content': {
-      visibility: 'hidden',
-    },
-
     '& $loader': {
       display: 'block',
     },

package/src/components/NewMoreMenu/NewMoreMenu.stories.tsx

@@ -59,6 +59,7 @@ const Template: ComponentStory<typeof NewMoreMenu> = (args) => (
 export const Default = Template.bind({});
 
 Default.args = {
+  canBeFlipped: false,
   isDisabled: false,
   hasDefaultStateBackground: true,
   placement: 'bottom-end',

package/src/components/NewMoreMenu/NewMoreMenu.tsx

@@ -10,7 +10,10 @@ import { IWithPopupProps, WithPopup } from '../WithPopup';
 import { useStyles, INewMoreMenuStyles } from './NewMoreMenu.styles';
 
 export interface INewMoreMenuProps
-  extends Pick<IWithPopupProps, 'middlewares' | 'shouldHideOnScroll' | 'shouldRenderInBody'>,
+  extends Pick<
+      IWithPopupProps,
+      'middlewares' | 'shouldHideOnScroll' | 'shouldRenderInBody' | 'canBeFlipped'
+    >,
     ICommonProps<INewMoreMenuStyles> {
   items: IListItem[];
   /** @default false */
@@ -31,6 +34,7 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
   middlewares,
   shouldHideOnScroll,
   shouldRenderInBody,
+  canBeFlipped,
   tweakStyles,
 }) => {
   const classes = useStyles({ theme: tweakStyles });
@@ -55,6 +59,7 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
       middlewares={middlewares}
       shouldHideOnScroll={shouldHideOnScroll}
       shouldRenderInBody={shouldRenderInBody}
+      canBeFlipped={canBeFlipped}
       isDisabled={isButtonDisabled}
       tweakStyles={tweakWithPopupStyles}
       trigger={({ isActive }) => (

package/src/components/WithPopup/WithPopup.stories.tsx

@@ -65,6 +65,7 @@ const Template: ComponentStory<typeof WithPopup> = (args) => (
 export const Default = Template.bind({});
 
 Default.args = {
+  canBeFlipped: false,
   isDisabled: false,
   shouldRenderInBody: true,
   shouldHideOnScroll: false,

package/src/components/WithPopup/WithPopup.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode, useState, MouseEvent } from 'react';
+import { FC, ReactNode, useState, MouseEvent, useMemo } from 'react';
 import clsx from 'clsx';
 import { addDataTestId, isFunction } from '@true-engineering/true-react-platform-helpers';
 import {
@@ -12,6 +12,7 @@ import {
   Middleware,
   FloatingPortal,
   offset,
+  flip,
 } from '@floating-ui/react';
 import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
@@ -36,6 +37,8 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   /** @default 6 */
   popupOffset?: number;
   /** @default false */
+  canBeFlipped?: boolean;
+  /** @default false */
   isDisabled?: boolean;
   onToggle?: (isActive: boolean) => void;
 }
@@ -43,13 +46,14 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
 export const WithPopup: FC<IWithPopupProps> = ({
   trigger,
   children,
-  middlewares,
+  middlewares: initialMiddlewares,
   eventType = 'click',
   placement = eventType === 'click' ? 'bottom-end' : 'top',
   shouldHideOnScroll = false,
   shouldRenderInBody = false,
   hoverDelay = 0,
   popupOffset = DEFAULT_OFFSET,
+  canBeFlipped = false,
   isDisabled = false,
   tweakStyles,
   data,
@@ -63,6 +67,11 @@ export const WithPopup: FC<IWithPopupProps> = ({
   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) {
@@ -77,7 +86,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
 
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
-    middleware: [offset(popupOffset), ...(middlewares ?? [])],
+    middleware,
     whileElementsMounted: autoUpdate,
     placement,
     onOpenChange: handleToggle,
@@ -98,7 +107,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
   return (
     <div
       ref={refs.setReference}
-      {...getReferenceProps}
+      {...getReferenceProps()}
       className={clsx(classes.root, { [classes.disabled]: isDisabled })}
       {...addDataTestId(testId)}
       {...addDataAttributes(data)}