@react-fabric/core 1.0.0-beta.61 → 1.0.0-beta.62

package/dist/esm/components/tabpanel/TabPanel.js

@@ -1,10 +1,10 @@
 'use client';
 
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { getValue } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useState, useMemo, Children, useEffect, useCallback, cloneElement } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@react-fabric/utilities';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 import { Tab } from './Tab.js';
 
@@ -73,7 +73,8 @@ var TabPanel = function TabPanel(_ref) {
     tabs = _useMemo2[0],
     rest = _useMemo2[1];
   useEffect(function () {
-    setActive(activeTab);
+    var _tabs$;
+    setActive(getValue(activeTab !== null && activeTab !== void 0 ? activeTab : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.props.id));
   }, [activeTab]);
   var activeTabPanel = useMemo(function () {
     var _tabs$find;

package/dist/esm/core/theme/ThemeProvider.js

@@ -59,7 +59,8 @@ var ThemeProvider = function ThemeProvider(_ref) {
     accentColor = _ref.accentColor,
     tintColor = _ref.tintColor,
     colorScheme = _ref.colorScheme,
-    rounding = _ref.rounding;
+    rounding = _ref.rounding,
+    className = _ref.className;
   var _useApplicationContex = useApplicationContext(),
     currentColorScheme = _useApplicationContex.currentColorScheme;
   var styles = useMemo(function () {
@@ -88,7 +89,7 @@ var ThemeProvider = function ThemeProvider(_ref) {
     style: styles,
     "data-color-scheme": colorScheme !== null && colorScheme !== void 0 ? colorScheme : currentColorScheme,
     "data-rounding": rounding,
-    className: classNames("fabric-themeProvider", "contents theme-base", branding),
+    className: classNames("fabric-themeProvider", "contents theme-base", branding, className),
     children: children
   });
 };

package/dist/esm/hooks/useNavigator.js

@@ -1,7 +1,7 @@
 'use client';
 
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useRef, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { jsxs } from 'react/jsx-runtime';
 
 var useNavigator = function useNavigator() {
@@ -11,15 +11,16 @@ var useNavigator = function useNavigator() {
     _useState2 = _slicedToArray(_useState, 2),
     currentIndex = _useState2[0],
     setCurrentIndex = _useState2[1];
-  var refCurrent = useRef(defaultIndex);
   var onNavigate = useCallback(function (dir) {
-    if (dir === -1) {
-      refCurrent.current = refCurrent.current > 0 ? refCurrent.current - 1 : totalCount - 1;
-    }
-    if (dir === 1) {
-      refCurrent.current = refCurrent.current + 1 < totalCount ? refCurrent.current + 1 : 0;
-    }
-    setCurrentIndex(refCurrent.current);
+    setCurrentIndex(function (prevValue) {
+      if (dir === -1) {
+        return prevValue > 0 ? prevValue - 1 : totalCount - 1;
+      }
+      if (dir === 1) {
+        return prevValue + 1 < totalCount ? prevValue + 1 : 0;
+      }
+      return prevValue;
+    });
   }, [totalCount]);
   var headLabel = useMemo(function () {
     return /*#__PURE__*/jsxs("span", {

package/dist/esm/hooks/useOverlayService.js

@@ -5,12 +5,19 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["onClose"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// return the blank function since state functionality will execute if the value is function
+var EMPTY_FC = function EMPTY_FC() {
+  return function () {
+    return null;
+  };
+};
+
 /**
  * Hook to manage overlay components like modals or flyouts.
  * It provides a way to open an overlay with specified properties and handle its closure.
@@ -21,7 +28,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * of the overlay when it is closed, allowing you to handle the result in a controlled manner.
  *
  * @param ModalOrFlyout - The component to be used as an overlay.
- * @returns An array containing the current overlay and a function to open it.
+ * @param toggleOpen - If true, calling `openOverlay` while an overlay is already open will close the existing one instead of opening a new one.
+ * @returns An array containing the current overlay, a function to open it, and a boolean indicating if the overlay is open.
  *
  * @example
  * ```jsx
@@ -36,34 +44,47 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * ```
  */
 var useOverlayService = function useOverlayService(ModalOrFlyout) {
-  var _useState = useState(null),
+  var _useState = useState(EMPTY_FC),
     _useState2 = _slicedToArray(_useState, 2),
     Overlay = _useState2[0],
     setOverlay = _useState2[1];
+  var existingOpenPromise = useRef(null);
   var openOverlay = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var _ref2,
         onClose,
-        props,
+        outerProps,
         _args = arguments;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            _ref2 = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, onClose = _ref2.onClose, props = _objectWithoutProperties(_ref2, _excluded);
-            _context.next = 3;
+            _ref2 = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, onClose = _ref2.onClose, outerProps = _objectWithoutProperties(_ref2, _excluded);
+            if (!existingOpenPromise.current) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
+            _context.next = 5;
             return new Promise(function (resolve) {
-              var handleClose = function handleClose(args) {
-                setOverlay(null);
+              existingOpenPromise.current = function (args) {
+                setOverlay(EMPTY_FC);
                 resolve(args);
                 onClose === null || onClose === void 0 || onClose(args);
+                existingOpenPromise.current = null;
               };
-              setOverlay( /*#__PURE__*/jsx(ModalOrFlyout, _objectSpread(_objectSpread({}, props), {}, {
-                onClose: handleClose
-              })));
+              // eslint-disable-next-line react/display-name
+              setOverlay(function () {
+                return function (overrideProps) {
+                  return /*#__PURE__*/jsx(ModalOrFlyout, _objectSpread(_objectSpread(_objectSpread({}, outerProps), overrideProps), {}, {
+                    onClose: existingOpenPromise.current
+                  }));
+                };
+              });
             });
-          case 3:
+          case 5:
             return _context.abrupt("return", _context.sent);
-          case 4:
+          case 6:
           case "end":
             return _context.stop();
         }
@@ -73,7 +94,7 @@ var useOverlayService = function useOverlayService(ModalOrFlyout) {
       return _ref.apply(this, arguments);
     };
   }();
-  return [Overlay, openOverlay];
+  return [Overlay, openOverlay, existingOpenPromise.current];
 };
 
 export { useOverlayService };

package/dist/esm/i18n/index.js

@@ -1,8 +1,8 @@
 'use client';
 
 import i18next from 'i18next';
-import ar from './ar.json.js';
-import en from './en.json.js';
+import ar from './ar/core.json.js';
+import en from './en/core.json.js';
 
 /*
  * React Fabric

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 'use client';
 
 export { ActionLabel } from './components/actionLabel/ActionLabel.js';
-export { AnimationIndicator, LoadingBars, LoadingLine, LoadingSpinner, Skeleton } from './components/animations/Animations.js';
+export { AnimationIndicator, AnimationLoader, LoadingBars, LoadingLine, LoadingSpinner, Skeleton } from './components/animations/Animations.js';
 export { Avatar } from './components/avatar/Avatar.js';
 export { AvatarGroup } from './components/avatar/AvatarGroup.js';
 export { Badge, getBadgeProps } from './components/badge/Badge.js';

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

@@ -1,5 +1,5 @@
 export { ActionLabel } from "./actionLabel/ActionLabel";
-export { LoadingBars, AnimationIndicator, LoadingSpinner, LoadingLine, Skeleton, } from "./animations/Animations";
+export { AnimationIndicator, AnimationLoader, LoadingBars, LoadingLine, LoadingSpinner, Skeleton, } from "./animations/Animations";
 export { Avatar } from "./avatar/Avatar";
 export { AvatarGroup } from "./avatar/AvatarGroup";
 export { Badge, getBadgeProps } from "./badge/Badge";
@@ -18,7 +18,7 @@ export { Divider } from "./divider/Divider";
 export { Dropdown, DropdownDismiss } from "./dropdown/Dropdown";
 export { DropdownTool } from "./dropdown/DropdownTool";
 export { EmptyContent } from "./empty/EmptyContent";
-export { Icon, getIconProps } from "./icon/Icon";
+export { getIconProps, Icon } from "./icon/Icon";
 export { Image, Video } from "./media/Media";
 export { ContextMenu } from "./menu/ContextMenu";
 export { Menu } from "./menu/Menu";

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

@@ -13,7 +13,7 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps {
     /**
      * append label badge text
      */
-    appendLabel?: string | false;
+    appendLabel?: JSX.Element | string | number | false;
     /**
      * menu color
      */
@@ -50,6 +50,10 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps {
 export interface MenuRootProps extends CssProp {
     label?: never;
     minimal?: boolean;
+    /**
+     * use this create a dropdown button within menu-item
+     */
+    forDropdown?: boolean;
     menuClassName?: never;
     onClick?: (id: string) => CallbackReturn;
 }
@@ -57,6 +61,7 @@ export interface MenuInnerProps extends MenuItemProps {
     label: string;
     minimal?: never;
     trigger?: "hover" | "click";
+    forDropdown?: boolean;
     /**
      * floating menu className
      */

package/dist/types/components/navigator/Navigator.d.ts

@@ -1,6 +1,12 @@
 import { type AriaProps, type ChildProp, type ColorType, type CssProp, type PaletteType, type TestProps } from "../../types";
 export interface NavigatorProps extends CssProp, AriaProps, TestProps, Partial<ChildProp> {
+    /**
+     * item list length (ignore to enable infinite navigation)
+     */
     length?: number;
+    /**
+     * current item index (ignore to enable infinite navigation)
+     */
     current?: number;
     disableKeyHandlers?: boolean;
     /**

package/dist/types/core/theme/ThemeProvider.d.ts

@@ -1,4 +1,4 @@
-import { type ChildrenProp } from "../../types";
+import { type ChildrenProp, type CssProp } from "../../types";
 export interface ThemeProps {
     /**
      * light/dark color scheme
@@ -54,4 +54,4 @@ export interface ThemeProps {
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-application--theme-provider} for more details.
  */
-export declare const ThemeProvider: ({ children, branding, primaryColor, accentColor, tintColor, colorScheme, rounding, }: ThemeProps & ChildrenProp) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeProvider: ({ children, branding, primaryColor, accentColor, tintColor, colorScheme, rounding, className, }: ThemeProps & ChildrenProp & CssProp) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,4 @@
-import { type ElementType } from "react";
 import { type ModalProps } from "../types";
-type OverlayComponent = ElementType<ModalProps<AnyObject>>;
 /**
  * Hook to manage overlay components like modals or flyouts.
  * It provides a way to open an overlay with specified properties and handle its closure.
@@ -11,7 +9,8 @@ type OverlayComponent = ElementType<ModalProps<AnyObject>>;
  * of the overlay when it is closed, allowing you to handle the result in a controlled manner.
  *
  * @param ModalOrFlyout - The component to be used as an overlay.
- * @returns An array containing the current overlay and a function to open it.
+ * @param toggleOpen - If true, calling `openOverlay` while an overlay is already open will close the existing one instead of opening a new one.
+ * @returns An array containing the current overlay, a function to open it, and a boolean indicating if the overlay is open.
  *
  * @example
  * ```jsx
@@ -25,5 +24,4 @@ type OverlayComponent = ElementType<ModalProps<AnyObject>>;
  * <Overlay />
  * ```
  */
-export declare const useOverlayService: (ModalOrFlyout: OverlayComponent) => [Overlay: React.ReactNode | null, openOverlay: (props?: KeyValue) => Promise<AnyObject>];
-export {};
+export declare const useOverlayService: <T extends AnyObject = AnyObject>(ModalOrFlyout: React.FunctionComponent<ModalProps<T>>) => [Overlay: React.FunctionComponent<Partial<T>>, openOverlay: (props?: Partial<T>) => Promise<AnyObject>, closeOverlay: ((args?: AnyObject) => void) | null];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.61",
+  "version": "1.0.0-beta.62",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "@iconify-json/mdi": "~1.2.3",
     "@iconify-json/svg-spinners": "~1.2.4",
     "@iconify/tailwind4": "~1.2.1",
-    "@react-fabric/utilities": "^1.0.0-beta.61",
+    "@react-fabric/utilities": "^1.0.0-beta.62",
     "@tailwindcss/postcss": "~4.1.16",
     "boring-avatars": "~1.11.2",
     "classnames": "~2.5.1",
@@ -57,5 +57,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "a0b0c571bf9c189fa3355bbc3b896ecc4b9d6a04"
+  "gitHead": "9dce2fd9bb753d67e3f8adbf50be257b4bc64242"
 }

package/src/components/button/Button.tsx

@@ -292,7 +292,9 @@ export const Button = <Tag extends React.ElementType = "button">({
       data-loading={busy || loading}
       data-disabled={disabled}
     >
-      {hotKey && <HotKey keyCombo={hotKey} handler={hotKeyHandler.current} />}
+      {!disabled && hotKey && (
+        <HotKey keyCombo={hotKey} handler={hotKeyHandler.current} />
+      )}
       <TooltipWrapper {...tooltipProps}>
         <E
           ref={mergeRefs(ref, refEl)}

package/src/components/dropdown/Dropdown.tsx

@@ -36,6 +36,7 @@ import {
   useClick,
   useDismiss,
   useFloating,
+  useFloatingNodeId,
   useFloatingTree,
   useHover,
   useInteractions,
@@ -116,6 +117,7 @@ const DropdownElement = ({
   const arrowRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const tree = useFloatingTree();
+  const nodeId = useFloatingNodeId();
 
   const [anchor, panel] = useMemo<AnyObject[]>(
     () => Children.toArray(children as AnyObject),
@@ -123,6 +125,7 @@ const DropdownElement = ({
   );
 
   const { refs, floatingStyles, context } = useFloating({
+    nodeId: `dropdown-${nodeId}`,
     open: isOpen,
     onOpenChange: (open, _, reason) => {
       if (reason === "reference-press") return;
@@ -148,6 +151,7 @@ const DropdownElement = ({
     enabled: !disabled,
     handleClose: safePolygon({ blockPointerEvents: true }),
   });
+
   const dismiss = useDismiss(context, {
     referencePress: true,
   });
@@ -168,6 +172,11 @@ const DropdownElement = ({
     return undefined;
   }, [refs, isOpen, fitToParent]);
 
+  const dismissDropdown = useCallback(() => {
+    setIsOpen(false);
+    onClose?.();
+  }, []);
+
   const tryClosing = useCallback(
     (e: React.MouseEvent) => {
       if (
@@ -259,7 +268,9 @@ const DropdownElement = ({
                 )}
                 onMouseUpCapture={tryClosing}
               >
-                {panel}
+                {cloneElement(panel, {
+                  dismiss: dismissDropdown,
+                })}
               </div>
               {showArrow && (
                 <FloatingArrow
@@ -308,11 +319,17 @@ const DropdownElement = ({
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-dropdown--docs} for more details.
  * @see {@link https://floating-ui.com/docs/react} for more details on Floating UI.
  */
-export const Dropdown = (props: DropdownProps) => (
-  <FloatingTree>
-    <DropdownElement {...props} />
-  </FloatingTree>
-);
+export const Dropdown = (props: DropdownProps) => {
+  const tree = useFloatingTree();
+  if (tree) {
+    return <DropdownElement {...props} />;
+  }
+  return (
+    <FloatingTree>
+      <DropdownElement {...props} />
+    </FloatingTree>
+  );
+};
 
 /**
  * A component that allows dismissing the dropdown when clicked.

package/src/components/icon/Icon.tsx

@@ -191,29 +191,29 @@ export const Icon = ({
   /** ***************** render icon *******************/
   const iconEl = useMemo(() => {
     if (isValidElement(icon)) return icon;
-    if (!isString(icon)) {
-      throw Error("Invalid icon expected string");
+    if (isString(icon)) {
+      return isSvg ? (
+        <svg viewBox={viewBox}>
+          <path fill="currentColor" d={icon.toString()} />
+        </svg>
+      ) : icon?.toString().length <= 4 ? (
+        <svg role="img">
+          <text
+            x="50%"
+            y="50%"
+            dy=".1em"
+            dominantBaseline="middle"
+            textAnchor="middle"
+            style={{ fontSize: SvgTextSize[icon.length] }}
+          >
+            {icon}
+          </text>
+        </svg>
+      ) : (
+        <i className={`${icon}`} />
+      );
     }
-    return isSvg ? (
-      <svg viewBox={viewBox}>
-        <path fill="currentColor" d={icon.toString()} />
-      </svg>
-    ) : icon?.toString().length <= 4 ? (
-      <svg role="img">
-        <text
-          x="50%"
-          y="50%"
-          dy=".1em"
-          dominantBaseline="middle"
-          textAnchor="middle"
-          style={{ fontSize: SvgTextSize[icon.length] }}
-        >
-          {icon}
-        </text>
-      </svg>
-    ) : (
-      <i className={`${icon}`} />
-    );
+    throw Error("Invalid icon expected string");
   }, [icon, isSvg, viewBox]);
 
   return (

package/src/components/index.ts

@@ -23,10 +23,11 @@
 
 export { ActionLabel } from "./actionLabel/ActionLabel";
 export {
-  LoadingBars,
   AnimationIndicator,
-  LoadingSpinner,
+  AnimationLoader,
+  LoadingBars,
   LoadingLine,
+  LoadingSpinner,
   Skeleton,
 } from "./animations/Animations";
 export { Avatar } from "./avatar/Avatar";
@@ -47,7 +48,7 @@ export { Divider } from "./divider/Divider";
 export { Dropdown, DropdownDismiss } from "./dropdown/Dropdown";
 export { DropdownTool } from "./dropdown/DropdownTool";
 export { EmptyContent } from "./empty/EmptyContent";
-export { Icon, getIconProps } from "./icon/Icon";
+export { getIconProps, Icon } from "./icon/Icon";
 export { Image, Video } from "./media/Media";
 export { ContextMenu } from "./menu/ContextMenu";
 export { Menu } from "./menu/Menu";

package/src/components/menu/Menu.tsx

@@ -71,6 +71,7 @@ const MenuComponent = ({
   trigger = "hover",
   // @ts-expect-error ignore
   ref,
+  forDropdown,
   ...rest
 }: Partial<MenuProps>) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -83,10 +84,10 @@ const MenuComponent = ({
   const nodeId = useFloatingNodeId();
   const parentId = useFloatingParentNodeId();
 
-  const isNested = parentId !== null;
+  const isNested = parentId !== null && !forDropdown;
 
   const { floatingStyles, refs, context } = useFloating<HTMLButtonElement>({
-    nodeId,
+    nodeId: `menu-${nodeId}`,
     open: !isNested || isOpen,
     onOpenChange(open, event, reason) {
       isNested && setIsOpen(open);

package/src/components/menu/MenuItem.tsx

@@ -177,7 +177,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
         }}
         {...(minimal ? {} : aria)}
       >
-        {hotKey && (
+        {!disabled && hotKey && (
           <HotKey keyCombo={hotKey} handler={() => elRef.current?.click?.()} />
         )}
         {menuLabel}

package/src/components/menu/types.ts

@@ -45,7 +45,7 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps {
   /**
    * append label badge text
    */
-  appendLabel?: string | false;
+  appendLabel?: JSX.Element | string | number | false;
   /**
    * menu color
    */
@@ -83,6 +83,10 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps {
 export interface MenuRootProps extends CssProp {
   label?: never;
   minimal?: boolean;
+  /**
+   * use this create a dropdown button within menu-item
+   */
+  forDropdown?: boolean;
   menuClassName?: never;
   onClick?: (id: string) => CallbackReturn;
 }
@@ -91,6 +95,7 @@ export interface MenuInnerProps extends MenuItemProps {
   label: string;
   minimal?: never;
   trigger?: "hover" | "click";
+  forDropdown?: boolean;
   /**
    * floating menu className
    */

package/src/components/navigator/Navigator.tsx

@@ -21,6 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { isEmpty } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useCallback } from "react";
 import { HotKey } from "../../hotkeys/HotKey";
@@ -33,15 +34,21 @@ import {
   type TestProps,
 } from "../../types";
 import { Icon } from "../icon/Icon";
-import { isEmpty } from "@react-fabric/utilities";
 
 export interface NavigatorProps
   extends CssProp,
     AriaProps,
     TestProps,
     Partial<ChildProp> {
+  /**
+   * item list length (ignore to enable infinite navigation)
+   */
   length?: number;
+  /**
+   * current item index (ignore to enable infinite navigation)
+   */
   current?: number;
+
   disableKeyHandlers?: boolean;
   /**
    * navigator button color
@@ -87,7 +94,7 @@ export const Navigator = ({
 }: NavigatorProps) => {
   const navPrev = useCallback(
     () => (isEmpty(current) || current !== 0) && onNavigate(-1),
-    [onNavigate, current],
+    [onNavigate, current, length],
   );
   const navNext = useCallback(
     () => (isEmpty(current) || current + 1 < (length ?? 0)) && onNavigate(+1),

package/src/components/tabpanel/TabPanel.tsx

@@ -21,6 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { getValue } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   Children,
@@ -153,7 +154,7 @@ export const TabPanel = ({
   }, [children]);
 
   useEffect(() => {
-    setActive(activeTab);
+    setActive(getValue(activeTab ?? tabs[0]?.props.id));
   }, [activeTab]);
 
   const activeTabPanel = useMemo(() => {

package/src/core/theme/ThemeProvider.tsx

@@ -24,8 +24,8 @@
 import { isColor } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemo } from "react";
-import { type ChildrenProp } from "../../types";
 import { useApplicationContext } from "../../context/Global";
+import { type ChildrenProp, type CssProp } from "../../types";
 
 export interface ThemeProps {
   /**
@@ -91,7 +91,8 @@ export const ThemeProvider = ({
   tintColor,
   colorScheme,
   rounding,
-}: ThemeProps & ChildrenProp) => {
+  className,
+}: ThemeProps & ChildrenProp & CssProp) => {
   const { currentColorScheme } = useApplicationContext();
   const styles = useMemo(() => {
     const ret: KeyValue = {};
@@ -125,6 +126,7 @@ export const ThemeProvider = ({
         "fabric-themeProvider",
         "contents theme-base",
         branding,
+        className,
       )}
     >
       {children}