@mw-kit/mw-ui 1.10.5 → 1.10.7

package/dist/components/Popup/types.d.ts

@@ -1,4 +1,4 @@
-import type { FloatingPortalProps } from '@floating-ui/react';
+import type { FloatingPortalProps, OffsetOptions } from '@floating-ui/react';
 export type PopupProps<T extends React.ElementType = 'div'> = {
     content: React.FunctionComponent;
     position: PopupPosition;
@@ -6,7 +6,7 @@ export type PopupProps<T extends React.ElementType = 'div'> = {
     triggerType?: T;
     triggerProps?: React.ComponentPropsWithRef<T>;
     renderTrigger: (props: React.ComponentPropsWithRef<T>) => React.ReactNode;
-    offset?: number;
+    offset?: OffsetOptions;
     shift?: number;
     background?: 'light' | 'dark';
     arrow?: 'flattened' | 'pointed' | 'none';
@@ -17,5 +17,7 @@ export type PopupProps<T extends React.ElementType = 'div'> = {
     zIndex?: number;
     portalRoot?: FloatingPortalProps['root'];
     style?: React.CSSProperties | undefined;
+    dependencies?: React.DependencyList;
+    pinned?: boolean;
 };
 export type PopupPosition = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';

package/dist/index.d.mts

@@ -4,7 +4,7 @@ import * as react from 'react';
 import react__default, { TextareaHTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
-import { FloatingPortalProps } from '@floating-ui/react';
+import { OffsetOptions, FloatingPortalProps } from '@floating-ui/react';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import { ReactVirtualizerOptions } from '@tanstack/react-virtual';
 import { Property } from 'csstype';
@@ -272,7 +272,7 @@ type PopupProps<T extends React.ElementType = 'div'> = {
     triggerType?: T;
     triggerProps?: React.ComponentPropsWithRef<T>;
     renderTrigger: (props: React.ComponentPropsWithRef<T>) => React.ReactNode;
-    offset?: number;
+    offset?: OffsetOptions;
     shift?: number;
     background?: 'light' | 'dark';
     arrow?: 'flattened' | 'pointed' | 'none';
@@ -283,6 +283,8 @@ type PopupProps<T extends React.ElementType = 'div'> = {
     zIndex?: number;
     portalRoot?: FloatingPortalProps['root'];
     style?: React.CSSProperties | undefined;
+    dependencies?: React.DependencyList;
+    pinned?: boolean;
 };
 type PopupPosition = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
 

package/dist/index.js

@@ -10006,6 +10006,7 @@ var mergeRefs = (...refs) => {
     });
   };
 };
+var defaultDependencies = [];
 var PopupComponent = (props) => {
   const {
     content: Content5,
@@ -10017,35 +10018,38 @@ var PopupComponent = (props) => {
     shift: shiftValue = 8,
     background = "dark",
     closeOnClip = false,
-    zIndex = 1e3
+    zIndex = 1e3,
+    pinned = false,
+    dependencies = defaultDependencies
   } = props;
   const arrowStyle = props.arrow || (background === "dark" ? "pointed" : "flattened");
   const withArrow = arrowStyle !== "none";
   const [open, setOpen] = open_default(props);
   const arrowRef = (0, import_react11.useRef)(null);
   const fallbackPlacements = fallbackPlacements_default(props);
+  const closeOnClipMiddleware = (0, import_react11.useMemo)(
+    () => ({
+      name: "closeOnClip",
+      fn(state) {
+        if (state.middlewareData.hide?.referenceHidden) {
+          setOpen(false);
+        }
+        return {};
+      }
+    }),
+    dependencies
+  );
   const floating = (0, import_react12.useFloating)({
     open,
     onOpenChange: setOpen,
     placement,
     whileElementsMounted: import_react12.autoUpdate,
     middleware: [
-      (0, import_react12.offset)(offsetValue),
-      (0, import_react12.flip)({ fallbackPlacements, padding: shiftValue }),
-      (0, import_react12.shift)({ padding: shiftValue }),
-      ...withArrow ? [(0, import_react12.arrow)({ element: arrowRef })] : [],
-      ...closeOnClip ? [
-        (0, import_react12.hide)(),
-        {
-          name: "closeOnClip",
-          fn(state) {
-            if (state.middlewareData.hide?.referenceHidden) {
-              setOpen(false);
-            }
-            return {};
-          }
-        }
-      ] : []
+      (0, import_react12.offset)(offsetValue, dependencies),
+      ...pinned ? [] : [(0, import_react12.flip)({ fallbackPlacements, padding: shiftValue }, dependencies)],
+      (0, import_react12.shift)({ padding: shiftValue }, dependencies),
+      ...withArrow ? [(0, import_react12.arrow)({ element: arrowRef }, dependencies)] : [],
+      ...closeOnClip ? [(0, import_react12.hide)(void 0, dependencies), closeOnClipMiddleware] : []
     ]
   });
   const hover = (0, import_react12.useHover)(floating.context, {

package/dist/index.mjs

@@ -9958,6 +9958,7 @@ var mergeRefs = (...refs) => {
     });
   };
 };
+var defaultDependencies = [];
 var PopupComponent = (props) => {
   const {
     content: Content5,
@@ -9969,35 +9970,38 @@ var PopupComponent = (props) => {
     shift: shiftValue = 8,
     background = "dark",
     closeOnClip = false,
-    zIndex = 1e3
+    zIndex = 1e3,
+    pinned = false,
+    dependencies = defaultDependencies
   } = props;
   const arrowStyle = props.arrow || (background === "dark" ? "pointed" : "flattened");
   const withArrow = arrowStyle !== "none";
   const [open, setOpen] = open_default(props);
   const arrowRef = useRef(null);
   const fallbackPlacements = fallbackPlacements_default(props);
+  const closeOnClipMiddleware = useMemo4(
+    () => ({
+      name: "closeOnClip",
+      fn(state) {
+        if (state.middlewareData.hide?.referenceHidden) {
+          setOpen(false);
+        }
+        return {};
+      }
+    }),
+    dependencies
+  );
   const floating = useFloating({
     open,
     onOpenChange: setOpen,
     placement,
     whileElementsMounted: autoUpdate,
     middleware: [
-      offset(offsetValue),
-      flip({ fallbackPlacements, padding: shiftValue }),
-      shift({ padding: shiftValue }),
-      ...withArrow ? [arrow({ element: arrowRef })] : [],
-      ...closeOnClip ? [
-        hide(),
-        {
-          name: "closeOnClip",
-          fn(state) {
-            if (state.middlewareData.hide?.referenceHidden) {
-              setOpen(false);
-            }
-            return {};
-          }
-        }
-      ] : []
+      offset(offsetValue, dependencies),
+      ...pinned ? [] : [flip({ fallbackPlacements, padding: shiftValue }, dependencies)],
+      shift({ padding: shiftValue }, dependencies),
+      ...withArrow ? [arrow({ element: arrowRef }, dependencies)] : [],
+      ...closeOnClip ? [hide(void 0, dependencies), closeOnClipMiddleware] : []
     ]
   });
   const hover = useHover(floating.context, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mw-kit/mw-ui",
-  "version": "1.10.5",
+  "version": "1.10.7",
   "description": "Made with create-react-library",
   "author": "fmgusmao",
   "license": "MIT",