@mw-kit/mw-ui 1.10.4 → 1.10.6

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

@@ -1,3 +1,4 @@
+import type { FloatingPortalProps } from '@floating-ui/react';
 export type PopupProps<T extends React.ElementType = 'div'> = {
     content: React.FunctionComponent;
     position: PopupPosition;
@@ -14,5 +15,9 @@ export type PopupProps<T extends React.ElementType = 'div'> = {
     setOpen?: (open: boolean) => void;
     fallbackPlacements?: PopupPosition[];
     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/components/index.d.ts

@@ -15,6 +15,7 @@ export { default as MwLoader } from './Loader';
 export { default as MwMenu } from './Menu';
 export { default as MwModal } from './Modal';
 export { default as MwPlaceholder } from './Placeholder';
+export { default as MwPopup } from './Popup';
 export { default as MwProgressBar } from './ProgressBar';
 export { default as MwScrollContainer } from './ScrollContainer';
 export { default as MwSelect } from './Select';

package/dist/index.d.mts

@@ -4,8 +4,8 @@ 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 * as styled_components_dist_types from 'styled-components/dist/types';
 import { 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';
 import SignatureCanvas, { SignatureCanvasProps } from 'react-signature-canvas';
@@ -281,6 +281,10 @@ type PopupProps<T extends React.ElementType = 'div'> = {
     setOpen?: (open: boolean) => void;
     fallbackPlacements?: PopupPosition[];
     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';
 
@@ -3989,6 +3993,10 @@ interface PlaceholderProps {
 
 declare const Placeholder: (props: PlaceholderProps) => react_jsx_runtime.JSX.Element;
 
+declare const Popup: <T extends react__default.ElementType = "div">(props: PopupProps<T> & {
+    enabled?: boolean;
+}) => JSX.Element;
+
 interface ProgressBarProps {
     type: 'default' | 'info' | 'danger' | 'success' | 'warning';
     value: number | null;
@@ -4066,4 +4074,4 @@ declare const ThemeProvider: (props: React.PropsWithChildren<{
     assetBaseUrl: string;
 }>) => react_jsx_runtime.JSX.Element;
 
-export { Inflector, AbsoluteContainer as MwAbsoluteContainer, AppliedFilters as MwAppliedFilters, Button as MwButton, Calendar as MwCalendar, Card as MwCard, EllipsisContainer as MwEllipsisContainer, Filters as MwFilters, Form as MwForm, Grid as MwGrid, Icon as MwIcon, Indicator as MwIndicator, Input as MwInput, Link as MwLink, Loader as MwLoader, Menu as MwMenu, Modal as MwModal, Placeholder as MwPlaceholder, ProgressBar as MwProgressBar, ScrollContainer as MwScrollContainer, _default as MwSelect, SignatureInput as MwSignature, Tabs as MwTabs, TextArea as MwTextArea, Toast as MwToast, Transition as MwTransition, Zoom as MwZoom, ThemeProvider, theme, useTransition as useMwTransition };
+export { Inflector, AbsoluteContainer as MwAbsoluteContainer, AppliedFilters as MwAppliedFilters, Button as MwButton, Calendar as MwCalendar, Card as MwCard, EllipsisContainer as MwEllipsisContainer, Filters as MwFilters, Form as MwForm, Grid as MwGrid, Icon as MwIcon, Indicator as MwIndicator, Input as MwInput, Link as MwLink, Loader as MwLoader, Menu as MwMenu, Modal as MwModal, Placeholder as MwPlaceholder, Popup as MwPopup, ProgressBar as MwProgressBar, ScrollContainer as MwScrollContainer, _default as MwSelect, SignatureInput as MwSignature, Tabs as MwTabs, TextArea as MwTextArea, Toast as MwToast, Transition as MwTransition, Zoom as MwZoom, ThemeProvider, theme, useTransition as useMwTransition };

package/dist/index.js

@@ -48,6 +48,7 @@ __export(index_exports, {
   MwMenu: () => Menu_default2,
   MwModal: () => Modal_default,
   MwPlaceholder: () => Placeholder_default,
+  MwPopup: () => Popup_default,
   MwProgressBar: () => ProgressBar_default,
   MwScrollContainer: () => ScrollContainer_default,
   MwSelect: () => Select_default3,
@@ -10005,6 +10006,7 @@ var mergeRefs = (...refs) => {
     });
   };
 };
+var defaultDependencies = [];
 var PopupComponent = (props) => {
   const {
     content: Content5,
@@ -10016,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, {
@@ -10069,11 +10074,15 @@ var PopupComponent = (props) => {
   }, [floating.refs.setReference, interactions, triggerProps]);
   return /* @__PURE__ */ (0, import_jsx_runtime294.jsxs)(import_react11.default.Fragment, { children: [
     renderTrigger(referenceProps),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime294.jsx)(import_react12.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime294.jsxs)(
+    open ? /* @__PURE__ */ (0, import_jsx_runtime294.jsx)(import_react12.FloatingPortal, { root: props.portalRoot, children: /* @__PURE__ */ (0, import_jsx_runtime294.jsxs)(
       TooltipSurface,
       {
         ref: floating.refs.setFloating,
-        style: { ...floating.floatingStyles, zIndex },
+        style: {
+          ...floating.floatingStyles,
+          ...props.style || {},
+          zIndex
+        },
         $placement: floating.placement,
         $background: background,
         ...interactions.getFloatingProps(),
@@ -21623,6 +21632,7 @@ var Zoom_default = Zoom;
   MwMenu,
   MwModal,
   MwPlaceholder,
+  MwPopup,
   MwProgressBar,
   MwScrollContainer,
   MwSelect,

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, {
@@ -10022,11 +10026,15 @@ var PopupComponent = (props) => {
   }, [floating.refs.setReference, interactions, triggerProps]);
   return /* @__PURE__ */ jsxs143(React291.Fragment, { children: [
     renderTrigger(referenceProps),
-    open ? /* @__PURE__ */ jsx294(FloatingPortal, { children: /* @__PURE__ */ jsxs143(
+    open ? /* @__PURE__ */ jsx294(FloatingPortal, { root: props.portalRoot, children: /* @__PURE__ */ jsxs143(
       TooltipSurface,
       {
         ref: floating.refs.setFloating,
-        style: { ...floating.floatingStyles, zIndex },
+        style: {
+          ...floating.floatingStyles,
+          ...props.style || {},
+          zIndex
+        },
         $placement: floating.placement,
         $background: background,
         ...interactions.getFloatingProps(),
@@ -21583,6 +21591,7 @@ export {
   Menu_default2 as MwMenu,
   Modal_default as MwModal,
   Placeholder_default as MwPlaceholder,
+  Popup_default as MwPopup,
   ProgressBar_default as MwProgressBar,
   ScrollContainer_default as MwScrollContainer,
   Select_default3 as MwSelect,

package/dist/interfaces.d.ts

@@ -26,4 +26,5 @@ export type { AppliedFilter } from './components/Filters/interfaces';
 export type { Transition } from './components/Transition/interfaces';
 export type { TabComponent, TabComponents, TabProps, TabProvider, } from './components/Tabs/interfaces';
 export type * from './components/Select/types';
+export type * from './components/Popup/types';
 export type * from './functions/inflections';

package/package.json

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