@react-fabric/core 1.0.0-beta.19 → 1.0.0-beta.21

package/dist/cjs/components/panel/Panel.js

@@ -91,7 +91,7 @@ var Panel = function Panel(_ref) {
         className: classNames(titleClassName, "flex-1 select-none truncate", title && "py-1 first:px-2"),
         children: title
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "px-1",
+        className: "px-1 leading-none",
         children: actions
       }), hasTools && /*#__PURE__*/jsxRuntime.jsxs("div", {
         role: "none",

package/dist/cjs/overlays/flyout/Flyout.js

@@ -3,6 +3,7 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var react = require('@floating-ui/react');
+var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react$1 = require('react');
 var Animations = require('../../components/animations/Animations.js');
@@ -47,6 +48,7 @@ var Flyout = function Flyout(_ref) {
     context = _useFloating.context;
   var dismiss = react.useDismiss(context, {
     outsidePressEvent: "mousedown",
+    outsidePress: !hideMask,
     escapeKey: true
   });
   var role = react.useRole(context);
@@ -73,9 +75,7 @@ var Flyout = function Flyout(_ref) {
   }, [onBeforeClose, onClose]);
   react$1.useEffect(function () {
     setTimeout(function () {
-      var _refs$floating$curren2;
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      (_refs$floating$curren2 = refs.floating.current) === null || _refs$floating$curren2 === void 0 || (_refs$floating$curren2 = _refs$floating$curren2.querySelector('[role="dialog"]')) === null || _refs$floating$curren2 === void 0 || _refs$floating$curren2.focus();
     }, 50);
   }, []);
   var tryClosing = react$1.useCallback(function (e) {
@@ -103,47 +103,45 @@ var Flyout = function Flyout(_ref) {
     children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
       children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
         context: context,
-        children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
-          children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-            "data-align": align,
-            className: classNames(Flyout_module.flyout, "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", align === "start" ? "start-0" : "end-0", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
-            style: {
-              width: width,
-              minWidth: minWidth
-            },
-            onMouseUpCapture: tryClosing,
-            ref: refs.setFloating
-          }, getFloatingProps()), aria), aria), {}, {
-            children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
-              children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
-                flex: true,
-                className: classNames(Flyout_module.flyoutHeader, headerClassName),
-                children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-                  icon: icon,
-                  bg: iconBg,
-                  color: iconColor,
-                  className: classNames(iconClassName, "p-1"),
-                  rtlFlip: rtlFlip
-                }), /*#__PURE__*/jsxRuntime.jsx("label", {
-                  className: "flex-1 truncate py-2 px-1",
-                  children: title
-                }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-                  "data-ref": "panelClose",
-                  className: classNames(Flyout_module.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
-                  icon: icons.CoreIcons.close,
-                  onClick: function onClick() {
-                    return handleClose(false);
-                  }
-                })]
-              }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-                role: "dialog",
-                className: classNames(Flyout_module.flyoutBody, "flex-1 grid overflow-hidden"),
-                tabIndex: 0,
-                children: children
+        children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+          "data-align": align,
+          className: classNames(Flyout_module.flyout, "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", align === "start" ? "start-0" : "end-0", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
+          style: {
+            width: width,
+            minWidth: minWidth
+          },
+          onMouseUpCapture: tryClosing,
+          ref: refs.setFloating
+        }, getFloatingProps()), aria), aria), {}, {
+          children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
+            children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
+              flex: true,
+              className: classNames(Flyout_module.flyoutHeader, headerClassName),
+              children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+                icon: icon,
+                bg: iconBg,
+                color: iconColor,
+                className: classNames(iconClassName, "p-1"),
+                rtlFlip: rtlFlip
+              }), /*#__PURE__*/react$1.isValidElement(icon) && icon, /*#__PURE__*/jsxRuntime.jsx("label", {
+                className: "flex-1 truncate py-2 px-1",
+                children: title
+              }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+                "data-ref": "panelClose",
+                className: classNames(Flyout_module.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
+                icon: icons.CoreIcons.close,
+                onClick: function onClick() {
+                  return handleClose(false);
+                }
               })]
-            })
-          }))
-        })
+            }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
+              role: "dialog",
+              className: classNames(Flyout_module.flyoutBody, "flex-1 grid overflow-hidden"),
+              tabIndex: 0,
+              children: children
+            })]
+          })
+        }))
       })
     })
   });

package/dist/cjs/overlays/modal/Modal.js

@@ -3,6 +3,7 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var react = require('@floating-ui/react');
+var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react$1 = require('react');
 var Animations = require('../../components/animations/Animations.js');
@@ -71,9 +72,7 @@ var Modal = function Modal(_ref) {
   }, [onBeforeClose, onClose]);
   react$1.useEffect(function () {
     setTimeout(function () {
-      var _refs$floating$curren2;
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      (_refs$floating$curren2 = refs.floating.current) === null || _refs$floating$curren2 === void 0 || (_refs$floating$curren2 = _refs$floating$curren2.querySelector("[role='dialog']")) === null || _refs$floating$curren2 === void 0 || _refs$floating$curren2.focus();
     }, 50);
   }, []);
   return /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
@@ -99,13 +98,13 @@ var Modal = function Modal(_ref) {
             children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
               flex: true,
               className: classNames(Modal_module.modalHeader, headerClassName),
-              children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+              children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
                 icon: icon,
                 bg: iconBg,
                 color: iconColor,
                 className: classNames(iconClassName, "p-1"),
                 rtlFlip: rtlFlip
-              }), /*#__PURE__*/jsxRuntime.jsx("label", {
+              }), /*#__PURE__*/react$1.isValidElement(icon) && icon, /*#__PURE__*/jsxRuntime.jsx("label", {
                 className: "flex-1 truncate py-2 px-1",
                 children: title
               }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {

package/dist/esm/components/panel/Panel.js

@@ -91,7 +91,7 @@ var Panel = function Panel(_ref) {
         className: classNames(titleClassName, "flex-1 select-none truncate", title && "py-1 first:px-2"),
         children: title
       }), /*#__PURE__*/jsx("div", {
-        className: "px-1",
+        className: "px-1 leading-none",
         children: actions
       }), hasTools && /*#__PURE__*/jsxs("div", {
         role: "none",

package/dist/esm/overlays/flyout/Flyout.js

@@ -3,8 +3,9 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingOverlay, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useCallback, useEffect, Fragment } from 'react';
+import { useCallback, useEffect, Fragment, isValidElement } from 'react';
 import { Loading } from '../../components/animations/Animations.js';
 import { Icon } from '../../components/icon/Icon.js';
 import { Header } from '../../core/headfoot/HeadFoot.js';
@@ -47,6 +48,7 @@ var Flyout = function Flyout(_ref) {
     context = _useFloating.context;
   var dismiss = useDismiss(context, {
     outsidePressEvent: "mousedown",
+    outsidePress: !hideMask,
     escapeKey: true
   });
   var role = useRole(context);
@@ -73,9 +75,7 @@ var Flyout = function Flyout(_ref) {
   }, [onBeforeClose, onClose]);
   useEffect(function () {
     setTimeout(function () {
-      var _refs$floating$curren2;
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      (_refs$floating$curren2 = refs.floating.current) === null || _refs$floating$curren2 === void 0 || (_refs$floating$curren2 = _refs$floating$curren2.querySelector('[role="dialog"]')) === null || _refs$floating$curren2 === void 0 || _refs$floating$curren2.focus();
     }, 50);
   }, []);
   var tryClosing = useCallback(function (e) {
@@ -103,47 +103,45 @@ var Flyout = function Flyout(_ref) {
     children: /*#__PURE__*/jsx(Wrapper, {
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
-        children: /*#__PURE__*/jsx(Wrapper, {
-          children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-            "data-align": align,
-            className: classNames(classes.flyout, "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", align === "start" ? "start-0" : "end-0", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
-            style: {
-              width: width,
-              minWidth: minWidth
-            },
-            onMouseUpCapture: tryClosing,
-            ref: refs.setFloating
-          }, getFloatingProps()), aria), aria), {}, {
-            children: /*#__PURE__*/jsxs(HotKeyWrapper, {
-              children: [/*#__PURE__*/jsxs(Header, {
-                flex: true,
-                className: classNames(classes.flyoutHeader, headerClassName),
-                children: [icon && /*#__PURE__*/jsx(Icon, {
-                  icon: icon,
-                  bg: iconBg,
-                  color: iconColor,
-                  className: classNames(iconClassName, "p-1"),
-                  rtlFlip: rtlFlip
-                }), /*#__PURE__*/jsx("label", {
-                  className: "flex-1 truncate py-2 px-1",
-                  children: title
-                }), actions, /*#__PURE__*/jsx(Icon, {
-                  "data-ref": "panelClose",
-                  className: classNames(classes.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
-                  icon: CoreIcons.close,
-                  onClick: function onClick() {
-                    return handleClose(false);
-                  }
-                })]
-              }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
-                role: "dialog",
-                className: classNames(classes.flyoutBody, "flex-1 grid overflow-hidden"),
-                tabIndex: 0,
-                children: children
+        children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+          "data-align": align,
+          className: classNames(classes.flyout, "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", align === "start" ? "start-0" : "end-0", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
+          style: {
+            width: width,
+            minWidth: minWidth
+          },
+          onMouseUpCapture: tryClosing,
+          ref: refs.setFloating
+        }, getFloatingProps()), aria), aria), {}, {
+          children: /*#__PURE__*/jsxs(HotKeyWrapper, {
+            children: [/*#__PURE__*/jsxs(Header, {
+              flex: true,
+              className: classNames(classes.flyoutHeader, headerClassName),
+              children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
+                icon: icon,
+                bg: iconBg,
+                color: iconColor,
+                className: classNames(iconClassName, "p-1"),
+                rtlFlip: rtlFlip
+              }), /*#__PURE__*/isValidElement(icon) && icon, /*#__PURE__*/jsx("label", {
+                className: "flex-1 truncate py-2 px-1",
+                children: title
+              }), actions, /*#__PURE__*/jsx(Icon, {
+                "data-ref": "panelClose",
+                className: classNames(classes.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
+                icon: CoreIcons.close,
+                onClick: function onClick() {
+                  return handleClose(false);
+                }
               })]
-            })
-          }))
-        })
+            }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
+              role: "dialog",
+              className: classNames(classes.flyoutBody, "flex-1 grid overflow-hidden"),
+              tabIndex: 0,
+              children: children
+            })]
+          })
+        }))
       })
     })
   });

package/dist/esm/overlays/modal/Modal.js

@@ -3,8 +3,9 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
+import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, isValidElement } from 'react';
 import { Loading } from '../../components/animations/Animations.js';
 import { Icon } from '../../components/icon/Icon.js';
 import { Header } from '../../core/headfoot/HeadFoot.js';
@@ -71,9 +72,7 @@ var Modal = function Modal(_ref) {
   }, [onBeforeClose, onClose]);
   useEffect(function () {
     setTimeout(function () {
-      var _refs$floating$curren2;
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      (_refs$floating$curren2 = refs.floating.current) === null || _refs$floating$curren2 === void 0 || (_refs$floating$curren2 = _refs$floating$curren2.querySelector("[role='dialog']")) === null || _refs$floating$curren2 === void 0 || _refs$floating$curren2.focus();
     }, 50);
   }, []);
   return /*#__PURE__*/jsx(FloatingPortal, {
@@ -99,13 +98,13 @@ var Modal = function Modal(_ref) {
             children: [/*#__PURE__*/jsxs(Header, {
               flex: true,
               className: classNames(classes.modalHeader, headerClassName),
-              children: [icon && /*#__PURE__*/jsx(Icon, {
+              children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
                 icon: icon,
                 bg: iconBg,
                 color: iconColor,
                 className: classNames(iconClassName, "p-1"),
                 rtlFlip: rtlFlip
-              }), /*#__PURE__*/jsx("label", {
+              }), /*#__PURE__*/isValidElement(icon) && icon, /*#__PURE__*/jsx("label", {
                 className: "flex-1 truncate py-2 px-1",
                 children: title
               }), actions, /*#__PURE__*/jsx(Icon, {

package/dist/types/components/tabpanel/TabPanel.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement } from "react";
+import { type ReactNode } from "react";
 import { type CallbackReturn, type ChildrenProp } from "../../types";
 import { Tab } from "./Tab";
 export interface TabPanelProps extends ChildrenProp<typeof Tab> {
@@ -33,11 +33,11 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
     /**
      * append element
      */
-    append?: ReactElement;
+    append?: ReactNode;
     /**
      * prepend element
      */
-    prepend?: ReactElement;
+    prepend?: ReactNode;
     /**
      * change handler
      */

package/dist/types/hooks/useOverlayService.d.ts

@@ -1,6 +1,6 @@
-import { type FC, type ReactNode } from "react";
-type OverlayComponent = FC<{
-    onClose: (args?: AnyObject) => void;
+import { type ElementType, type ReactNode } from "react";
+type OverlayComponent = ElementType<{
+    onClose: (...args: AnyObject) => void;
     [key: string]: AnyObject;
 }>;
 export declare const useOverlayService: (ModalOrFlyout: OverlayComponent) => [

package/dist/types/index.d.ts

@@ -15,5 +15,6 @@ export * from "./hooks/useResizeObserver";
 export * from "./hooks/useStorage";
 export { HotKey } from "./hotkeys/HotKey";
 export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
+export { type ModalProps } from "./types";
 export { CoreIcons } from "./types/icons";
 export { ApplicationProvider, useApplicationContext, useGlobals, useNotificationService, } from "./context/Global";

package/dist/types/overlays/flyout/Flyout.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
+import { type ElementType } from "react";
 import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type IconProps, type TestProps } from "../../types";
-export interface FlyoutProps extends AriaProps, TestProps, IconProps, ChildrenProp {
+export interface FlyoutProps extends AriaProps, TestProps, Omit<IconProps, "icon">, ChildrenProp {
+    icon?: string | ElementType<IconProps>;
     /**
      * flyout alignment
      */

package/dist/types/overlays/modal/Modal.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
+import { type ElementType } from "react";
 import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type IconProps, type TestProps } from "../../types";
-export interface ModalProps extends AriaProps, TestProps, IconProps, ChildrenProp {
+export interface ModalProps extends AriaProps, TestProps, Omit<IconProps, "icon">, ChildrenProp {
+    icon?: string | ElementType<IconProps>;
     /**
      * header className
      */

package/dist/types/types/index.d.ts

@@ -1,5 +1,8 @@
 import { type Placement } from "@floating-ui/react";
 import { type JSXElementConstructor, type Ref } from "react";
+export type ModalProps<P = unknown> = P & {
+    onClose: (...args: AnyObject) => void;
+};
 export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
 export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
 export type ColorType = "primary" | "accent" | "info" | "danger" | "success" | "warning";
@@ -54,7 +57,7 @@ export interface TestProps {
      */
     "data-test-value"?: AnyObject;
 }
-export type Elements<T> = React.ReactElement<T> | React.ReactPortal | React.ReactNode | string | number | boolean | null | undefined;
+export type Elements<T> = React.ReactElement<T> | React.ReactNode;
 export type AriaProps = React.AriaAttributes;
 /**
  * For wrapping components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.19",
+  "version": "1.0.0-beta.21",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.19",
+    "@react-fabric/utilities": "^1.0.0-beta.21",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
@@ -56,5 +56,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "1757660f7f30590d1bf5c7f2bd3526f6052dccd5"
+  "gitHead": "31c3d5c19bce7df519a62bd43efd1c9e6341be04"
 }

package/src/components/panel/Panel.tsx

@@ -205,7 +205,7 @@ export const Panel = ({
         >
           {title}
         </div>
-        <div className="px-1">{actions}</div>
+        <div className="px-1 leading-none">{actions}</div>
         {hasTools && (
           <div
             role="none"

package/src/components/tabpanel/TabPanel.tsx

@@ -25,7 +25,7 @@ import classNames from "classnames";
 import {
   Children,
   cloneElement,
-  type ReactElement,
+  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -68,11 +68,11 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
   /**
    * append element
    */
-  append?: ReactElement;
+  append?: ReactNode;
   /**
    * prepend element
    */
-  prepend?: ReactElement;
+  prepend?: ReactNode;
   /**
    * change handler
    */

package/src/hooks/useOverlayService.tsx

@@ -21,10 +21,15 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useState, type FC, type ReactNode } from "react";
+import {
+  useState,
+  type ComponentProps,
+  type ElementType,
+  type ReactNode,
+} from "react";
 
-type OverlayComponent = FC<{
-  onClose: (args?: AnyObject) => void;
+type OverlayComponent = ElementType<{
+  onClose: (...args: AnyObject) => void;
   [key: string]: AnyObject;
 }>;
 
@@ -36,7 +41,10 @@ export const useOverlayService = (
 ] => {
   const [Overlay, setOverlay] = useState<ReactNode | null>(null);
 
-  const openOverlay = async ({ onClose, ...props }: KeyValue = {}) => {
+  const openOverlay = async ({
+    onClose,
+    ...props
+  }: ComponentProps<typeof ModalOrFlyout> = {}) => {
     return await new Promise((resolve) => {
       const handleClose = (args: AnyObject) => {
         setOverlay(null);

package/src/index.ts

@@ -41,6 +41,7 @@ export * from "./hooks/useStorage";
 export { HotKey } from "./hotkeys/HotKey";
 export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
 
+export { type ModalProps } from "./types";
 export { CoreIcons } from "./types/icons";
 
 export {

package/src/overlays/flyout/Flyout.tsx

@@ -30,11 +30,14 @@ import {
   useInteractions,
   useRole,
 } from "@floating-ui/react";
+import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   Fragment,
+  isValidElement,
   useCallback,
   useEffect,
+  type ElementType,
   type PropsWithChildren,
 } from "react";
 import { Loading } from "../../components/animations/Animations";
@@ -55,8 +58,9 @@ import classes from "./Flyout.module.css";
 export interface FlyoutProps
   extends AriaProps,
     TestProps,
-    IconProps,
+    Omit<IconProps, "icon">,
     ChildrenProp {
+  icon?: string | ElementType<IconProps>;
   /**
    * flyout alignment
    */
@@ -140,6 +144,7 @@ export const Flyout = ({
   });
   const dismiss = useDismiss(context, {
     outsidePressEvent: "mousedown",
+    outsidePress: !hideMask,
     escapeKey: true,
   });
   const role = useRole(context);
@@ -173,9 +178,6 @@ export const Flyout = ({
   useEffect(() => {
     setTimeout(() => {
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      refs.floating.current
-        ?.querySelector<HTMLElement>('[role="dialog"]')
-        ?.focus();
     }, 50);
   }, []);
 
@@ -214,68 +216,67 @@ export const Flyout = ({
     <FloatingPortal>
       <Wrapper>
         <FloatingFocusManager context={context}>
-          <Wrapper>
-            <div
-              data-align={align}
-              className={classNames(
-                classes.flyout,
-                "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl",
-                align === "start" ? "start-0" : "end-0",
-                size === "sm" && "w-[20rem]",
-                size === "md" && "w-[40rem]",
-                size === "lg" && "w-[60vw]",
-                size === "xl" && "w-[80vw]",
-              )}
-              style={{
-                width,
-                minWidth,
-              }}
-              onMouseUpCapture={tryClosing}
-              ref={refs.setFloating}
-              {...getFloatingProps()}
-              {...aria}
-              {...aria}
-            >
-              <HotKeyWrapper>
-                <Header
-                  flex
-                  className={classNames(classes.flyoutHeader, headerClassName)}
-                >
-                  {icon && (
-                    <Icon
-                      icon={icon}
-                      bg={iconBg}
-                      color={iconColor}
-                      className={classNames(iconClassName, "p-1")}
-                      rtlFlip={rtlFlip}
-                    />
-                  )}
-                  <label className="flex-1 truncate py-2 px-1">{title}</label>
-                  {actions}
+          <div
+            data-align={align}
+            className={classNames(
+              classes.flyout,
+              "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl",
+              align === "start" ? "start-0" : "end-0",
+              size === "sm" && "w-[20rem]",
+              size === "md" && "w-[40rem]",
+              size === "lg" && "w-[60vw]",
+              size === "xl" && "w-[80vw]",
+            )}
+            style={{
+              width,
+              minWidth,
+            }}
+            onMouseUpCapture={tryClosing}
+            ref={refs.setFloating}
+            {...getFloatingProps()}
+            {...aria}
+            {...aria}
+          >
+            <HotKeyWrapper>
+              <Header
+                flex
+                className={classNames(classes.flyoutHeader, headerClassName)}
+              >
+                {isString(icon) && (
                   <Icon
-                    data-ref="panelClose"
-                    className={classNames(
-                      classes.panelAction,
-                      "cursor-pointer p-1 text-xl self-stretch",
-                    )}
-                    icon={CoreIcons.close}
-                    onClick={() => handleClose(false)}
+                    icon={icon}
+                    bg={iconBg}
+                    color={iconColor}
+                    className={classNames(iconClassName, "p-1")}
+                    rtlFlip={rtlFlip}
                   />
-                </Header>
-                {loading && <Loading />}
-                <div
-                  role="dialog"
+                )}
+                {isValidElement(icon) && icon}
+                <label className="flex-1 truncate py-2 px-1">{title}</label>
+                {actions}
+                <Icon
+                  data-ref="panelClose"
                   className={classNames(
-                    classes.flyoutBody,
-                    "flex-1 grid overflow-hidden",
+                    classes.panelAction,
+                    "cursor-pointer p-1 text-xl self-stretch",
                   )}
-                  {...({ tabIndex: 0 } as AnyObject)}
-                >
-                  {children}
-                </div>
-              </HotKeyWrapper>
-            </div>
-          </Wrapper>
+                  icon={CoreIcons.close}
+                  onClick={() => handleClose(false)}
+                />
+              </Header>
+              {loading && <Loading />}
+              <div
+                role="dialog"
+                className={classNames(
+                  classes.flyoutBody,
+                  "flex-1 grid overflow-hidden",
+                )}
+                {...({ tabIndex: 0 } as AnyObject)}
+              >
+                {children}
+              </div>
+            </HotKeyWrapper>
+          </div>
         </FloatingFocusManager>
       </Wrapper>
     </FloatingPortal>

package/src/overlays/modal/Modal.tsx

@@ -30,8 +30,14 @@ import {
   useInteractions,
   useRole,
 } from "@floating-ui/react";
+import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useCallback, useEffect } from "react";
+import {
+  type ElementType,
+  isValidElement,
+  useCallback,
+  useEffect,
+} from "react";
 import { Loading } from "../../components/animations/Animations";
 import { Icon } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
@@ -50,8 +56,9 @@ import classes from "./Modal.module.css";
 export interface ModalProps
   extends AriaProps,
     TestProps,
-    IconProps,
+    Omit<IconProps, "icon">,
     ChildrenProp {
+  icon?: string | ElementType<IconProps>;
   /**
    * header className
    */
@@ -163,9 +170,6 @@ export const Modal = ({
   useEffect(() => {
     setTimeout(() => {
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      refs.floating.current
-        ?.querySelector<HTMLElement>("[role='dialog']")
-        ?.focus();
     }, 50);
   }, []);
 
@@ -203,7 +207,7 @@ export const Modal = ({
                 flex
                 className={classNames(classes.modalHeader, headerClassName)}
               >
-                {icon && (
+                {isString(icon) && (
                   <Icon
                     icon={icon}
                     bg={iconBg}
@@ -212,6 +216,7 @@ export const Modal = ({
                     rtlFlip={rtlFlip}
                   />
                 )}
+                {isValidElement(icon) && icon}
                 <label className="flex-1 truncate py-2 px-1">{title}</label>
                 {actions}
                 <Icon

package/src/types/index.ts

@@ -25,6 +25,10 @@
 import { type Placement } from "@floating-ui/react";
 import { type JSXElementConstructor, type Ref } from "react";
 
+export type ModalProps<P = unknown> = P & {
+  onClose: (...args: AnyObject) => void;
+};
+
 export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
 
 export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
@@ -122,15 +126,7 @@ export interface TestProps {
   "data-test-value"?: AnyObject;
 }
 
-export type Elements<T> =
-  | React.ReactElement<T>
-  | React.ReactPortal
-  | React.ReactNode
-  | string
-  | number
-  | boolean
-  | null
-  | undefined;
+export type Elements<T> = React.ReactElement<T> | React.ReactNode;
 
 export type AriaProps = React.AriaAttributes;