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

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

@@ -47,6 +47,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 +74,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 +102,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: [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
+            })]
+          })
+        }))
       })
     })
   });

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

@@ -71,9 +71,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, {

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

@@ -47,6 +47,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 +74,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 +102,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: [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
+            })]
+          })
+        }))
       })
     })
   });

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

@@ -71,9 +71,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, {

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/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/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.20",
   "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.20",
     "@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": "b265afe1779c1654fc9cf8d9de6e7396b64515d3"
 }

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/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

@@ -140,6 +140,7 @@ export const Flyout = ({
   });
   const dismiss = useDismiss(context, {
     outsidePressEvent: "mousedown",
+    outsidePress: !hideMask,
     escapeKey: true,
   });
   const role = useRole(context);
@@ -173,9 +174,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 +212,66 @@ 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)}
+              >
+                {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"
+                )}
+                <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

@@ -163,9 +163,6 @@ export const Modal = ({
   useEffect(() => {
     setTimeout(() => {
       refs.floating.current && (refs.floating.current.dataset.show = "true");
-      refs.floating.current
-        ?.querySelector<HTMLElement>("[role='dialog']")
-        ?.focus();
     }, 50);
   }, []);
 

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;