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

package/README.md

@@ -10,6 +10,19 @@
 
 # Release Notes
 
+## v3.14.0
+
+### Changes
+
+- **WithPopup**: добавлена пропса `canBeFlipped` для автоматического позиционирования
+- **NewMoreMenu**: добавлена пропса `canBeFlipped`
+
+## v3.13.1
+
+### Changes
+
+- Багфикс warning в стилях **IconButton**
+
 ## v3.13.0
 
 ### Changes

package/dist/components/NewMoreMenu/NewMoreMenu.d.ts

@@ -3,7 +3,7 @@ import { ICommonProps } from '../../types';
 import { IListItem } from '../List';
 import { IWithPopupProps } from '../WithPopup';
 import { INewMoreMenuStyles } from './NewMoreMenu.styles';
-export interface INewMoreMenuProps extends Pick<IWithPopupProps, 'middlewares' | 'shouldHideOnScroll' | 'shouldRenderInBody'>, ICommonProps<INewMoreMenuStyles> {
+export interface INewMoreMenuProps extends Pick<IWithPopupProps, 'middlewares' | 'shouldHideOnScroll' | 'shouldRenderInBody' | 'canBeFlipped'>, ICommonProps<INewMoreMenuStyles> {
     items: IListItem[];
     /** @default false */
     isDisabled?: boolean;

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

@@ -24,6 +24,8 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
     /** @default 6 */
     popupOffset?: number;
     /** @default false */
+    canBeFlipped?: boolean;
+    /** @default false */
     isDisabled?: boolean;
     onToggle?: (isActive: boolean) => void;
 }

package/dist/true-react-common-ui-kit.js

@@ -12,7 +12,7 @@ import scrollIntoViewIfNeeded from "scroll-into-view-if-needed";
 import ReactDatePicker from "react-datepicker";
 import { hasFlag } from "country-flag-icons";
 import { RemoveScroll } from "react-remove-scroll";
-import { useFloating, offset as offset$2, autoUpdate, useHover, useClick, useDismiss, useInteractions, FloatingPortal } from "@floating-ui/react";
+import { offset as offset$2, flip as flip$2, useFloating, autoUpdate, useHover, useClick, useDismiss, useInteractions, FloatingPortal } from "@floating-ui/react";
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /**
@@ -25295,9 +25295,6 @@ var useStyles$k = createThemedStyles("IconButton", {
     pointerEvents: "none"
   },
   loading: {
-    "& $content": {
-      visibility: "hidden"
-    },
     "& $loader": {
       display: "block"
     }
@@ -30235,13 +30232,24 @@ function _unsupported_iterable_to_array(o, minLen) {
     return _array_like_to_array(o, minLen);
 }
 var WithPopup = function(param) {
-  var trigger = param.trigger, children = param.children, middlewares = param.middlewares, _param_eventType = param.eventType, eventType = _param_eventType === void 0 ? "click" : _param_eventType, _param_placement = param.placement, placement = _param_placement === void 0 ? eventType === "click" ? "bottom-end" : "top" : _param_placement, _param_shouldHideOnScroll = param.shouldHideOnScroll, shouldHideOnScroll = _param_shouldHideOnScroll === void 0 ? false : _param_shouldHideOnScroll, _param_shouldRenderInBody = param.shouldRenderInBody, shouldRenderInBody = _param_shouldRenderInBody === void 0 ? false : _param_shouldRenderInBody, _param_hoverDelay = param.hoverDelay, hoverDelay = _param_hoverDelay === void 0 ? 0 : _param_hoverDelay, _param_popupOffset = param.popupOffset, popupOffset = _param_popupOffset === void 0 ? DEFAULT_OFFSET : _param_popupOffset, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, tweakStyles = param.tweakStyles, data = param.data, testId = param.testId, onToggle = param.onToggle;
+  var trigger = param.trigger, children = param.children, initialMiddlewares = param.middlewares, _param_eventType = param.eventType, eventType = _param_eventType === void 0 ? "click" : _param_eventType, _param_placement = param.placement, placement = _param_placement === void 0 ? eventType === "click" ? "bottom-end" : "top" : _param_placement, _param_shouldHideOnScroll = param.shouldHideOnScroll, shouldHideOnScroll = _param_shouldHideOnScroll === void 0 ? false : _param_shouldHideOnScroll, _param_shouldRenderInBody = param.shouldRenderInBody, shouldRenderInBody = _param_shouldRenderInBody === void 0 ? false : _param_shouldRenderInBody, _param_hoverDelay = param.hoverDelay, hoverDelay = _param_hoverDelay === void 0 ? 0 : _param_hoverDelay, _param_popupOffset = param.popupOffset, popupOffset = _param_popupOffset === void 0 ? DEFAULT_OFFSET : _param_popupOffset, _param_canBeFlipped = param.canBeFlipped, canBeFlipped = _param_canBeFlipped === void 0 ? false : _param_canBeFlipped, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, tweakStyles = param.tweakStyles, data = param.data, testId = param.testId, onToggle = param.onToggle;
   var classes = useStyles$1({
     theme: tweakStyles
   });
   var _useState = _sliced_to_array(useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
   var Trigger = trigger;
   var Popup = children;
+  var middleware = useMemo(function() {
+    return [
+      offset$2(popupOffset)
+    ].concat(_to_consumable_array(canBeFlipped ? [
+      flip$2()
+    ] : []), _to_consumable_array(initialMiddlewares !== null && initialMiddlewares !== void 0 ? initialMiddlewares : []));
+  }, [
+    popupOffset,
+    canBeFlipped,
+    initialMiddlewares
+  ]);
   var handleToggle = function(isActive, event) {
     event === null || event === void 0 ? void 0 : event.stopPropagation();
     if (!isDisabled) {
@@ -30254,9 +30262,7 @@ var WithPopup = function(param) {
   };
   var _useFloating = useFloating({
     open: isOpen,
-    middleware: [
-      offset$2(popupOffset)
-    ].concat(_to_consumable_array(middlewares !== null && middlewares !== void 0 ? middlewares : [])),
+    middleware,
     whileElementsMounted: autoUpdate,
     placement,
     onOpenChange: handleToggle
@@ -30282,7 +30288,7 @@ var WithPopup = function(param) {
   ]), getReferenceProps = _useInteractions.getReferenceProps, getFloatingProps = _useInteractions.getFloatingProps;
   return /* @__PURE__ */ jsxs("div", _object_spread_props$1(_object_spread$1(_object_spread_props$1(_object_spread$1({
     ref: refs.setReference
-  }, getReferenceProps), {
+  }, getReferenceProps()), {
     className: clsx(classes.root, _define_property$1({}, classes.disabled, isDisabled))
   }), addDataTestId(testId), addDataAttributes(data)), {
     children: [
@@ -30390,7 +30396,7 @@ function _object_spread_props(target, source) {
   return target;
 }
 var NewMoreMenu = function(param) {
-  var items = param.items, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_hasDefaultStateBackground = param.hasDefaultStateBackground, hasDefaultStateBackground = _param_hasDefaultStateBackground === void 0 ? true : _param_hasDefaultStateBackground, data = param.data, testId = param.testId, placement = param.placement, middlewares = param.middlewares, shouldHideOnScroll = param.shouldHideOnScroll, shouldRenderInBody = param.shouldRenderInBody, tweakStyles = param.tweakStyles;
+  var items = param.items, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_hasDefaultStateBackground = param.hasDefaultStateBackground, hasDefaultStateBackground = _param_hasDefaultStateBackground === void 0 ? true : _param_hasDefaultStateBackground, data = param.data, testId = param.testId, placement = param.placement, middlewares = param.middlewares, shouldHideOnScroll = param.shouldHideOnScroll, shouldRenderInBody = param.shouldRenderInBody, canBeFlipped = param.canBeFlipped, tweakStyles = param.tweakStyles;
   var classes = useStyles({
     theme: tweakStyles
   });
@@ -30410,6 +30416,7 @@ var NewMoreMenu = function(param) {
     middlewares,
     shouldHideOnScroll,
     shouldRenderInBody,
+    canBeFlipped,
     isDisabled: isButtonDisabled,
     tweakStyles: tweakWithPopupStyles,
     trigger: function(param2) {