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

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');
@@ -116,13 +117,13 @@ var Flyout = function Flyout(_ref) {
             children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
               flex: true,
               className: classNames(Flyout_module.flyoutHeader, 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/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');
@@ -97,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/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';
@@ -116,13 +117,13 @@ var Flyout = function Flyout(_ref) {
             children: [/*#__PURE__*/jsxs(Header, {
               flex: true,
               className: classNames(classes.flyoutHeader, 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/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';
@@ -97,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/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/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,7 +1,7 @@
 import { type Placement } from "@floating-ui/react";
 import { type JSXElementConstructor, type Ref } from "react";
 export type ModalProps<P = unknown> = P & {
-    onClose?: (...args: AnyObject) => void;
+    onClose: (...args: AnyObject) => void;
 };
 export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
 export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.20",
+  "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.20",
+    "@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": "b265afe1779c1654fc9cf8d9de6e7396b64515d3"
+  "gitHead": "31c3d5c19bce7df519a62bd43efd1c9e6341be04"
 }

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/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
    */
@@ -238,7 +242,7 @@ export const Flyout = ({
                 flex
                 className={classNames(classes.flyoutHeader, headerClassName)}
               >
-                {icon && (
+                {isString(icon) && (
                   <Icon
                     icon={icon}
                     bg={iconBg}
@@ -247,6 +251,7 @@ export const Flyout = ({
                     rtlFlip={rtlFlip}
                   />
                 )}
+                {isValidElement(icon) && icon}
                 <label className="flex-1 truncate py-2 px-1">{title}</label>
                 {actions}
                 <Icon

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
    */
@@ -200,7 +207,7 @@ export const Modal = ({
                 flex
                 className={classNames(classes.modalHeader, headerClassName)}
               >
-                {icon && (
+                {isString(icon) && (
                   <Icon
                     icon={icon}
                     bg={iconBg}
@@ -209,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

@@ -26,7 +26,7 @@ import { type Placement } from "@floating-ui/react";
 import { type JSXElementConstructor, type Ref } from "react";
 
 export type ModalProps<P = unknown> = P & {
-  onClose?: (...args: AnyObject) => void;
+  onClose: (...args: AnyObject) => void;
 };
 
 export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";