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

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";
@@ -32,17 +33,22 @@ import {
   type PaletteType,
   type TestProps,
 } from "../../types";
-import { CoreIcons } from "../../types/icons";
 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
@@ -88,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),
@@ -108,7 +114,7 @@ export const Navigator = ({
         className="text-[1em] p-1"
         aria-label="previous"
         data-ref="previous"
-        icon={CoreIcons.chevronLeft}
+        icon="icon-[mdi--chevron-left]"
         disabled={!isEmpty(current) && current === 0}
         onClick={(e) => [e.stopPropagation(), navPrev()]}
       />
@@ -119,7 +125,7 @@ export const Navigator = ({
         color={color}
         aria-label="next"
         data-ref="next"
-        icon={CoreIcons.chevronRight}
+        icon="icon-[mdi--chevron-right]"
         disabled={!isEmpty(current) && current + 1 === length}
         onClick={(e) => [e.stopPropagation(), navNext()]}
       />

package/src/components/panel/Panel.tsx

@@ -35,8 +35,7 @@ import {
   type ExpandProps,
   type TestProps,
 } from "../../types";
-import { CoreIcons } from "../../types/icons";
-import { Loading } from "../animations/Animations";
+import { LoadingLine } from "../animations/Animations";
 import { getIconProps, Icon, type IconProps } from "../icon/Icon";
 
 export interface PanelProps
@@ -119,7 +118,7 @@ export interface PanelProps
  * ```jsx
  * <Panel
  *   title="Panel Title"
- *   icon={CoreIcons.info}
+ *   icon="icon-[mdi--info]"
  *   actions={<button>Action</button>}
  *   expandable
  *   collapsable
@@ -216,9 +215,10 @@ export const Panel = ({
       >
         {onBack && (
           <Icon
+            rtlFlip
             data-ref="panelBack"
             className={classNames("fabric-panelAction", "cursor-pointer")}
-            icon={CoreIcons.chevronLeft}
+            icon="icon-[mdi--chevron-left]"
             onClick={onBack}
           />
         )}
@@ -248,7 +248,11 @@ export const Panel = ({
               <Icon
                 data-ref="panelExpand"
                 className={classNames("fabric-panelAction", "cursor-pointer")}
-                icon={expanded ? CoreIcons.minimize : CoreIcons.maximize}
+                icon={
+                  expanded
+                    ? "icon-[mdi--fullscreen-exit]"
+                    : "icon-[mdi--fullscreen]"
+                }
                 onClick={toggleExpand}
               />
             )}
@@ -256,7 +260,9 @@ export const Panel = ({
               <Icon
                 data-ref="panelCollapse"
                 className={classNames("fabric-panelAction", "cursor-pointer")}
-                icon={collapsed ? CoreIcons.expand : CoreIcons.collapse}
+                icon={
+                  collapsed ? "icon-[mdi--plus-box]" : "icon-[mdi--minus-box]"
+                }
                 onClick={toggleCollapse}
               />
             )}
@@ -264,7 +270,7 @@ export const Panel = ({
               <Icon
                 data-ref="panelClose"
                 className={classNames("fabric-panelAction", "cursor-pointer")}
-                icon={CoreIcons.close}
+                icon="icon-[mdi--close]"
                 onClick={onClose}
               />
             )}
@@ -279,7 +285,7 @@ export const Panel = ({
             "area-content grid overflow-hidden",
           )}
         >
-          {loading && <Loading />}
+          {loading && <LoadingLine />}
           {children}
         </div>
       )}

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/aside/Aside.tsx

@@ -23,7 +23,7 @@
 
 import classNames from "classnames";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Loading } from "../../components/animations/Animations";
+import { LoadingLine } from "../../components/animations/Animations";
 import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
 import { useLayoutEffectDebugger } from "../../hooks/useEffectDebugger";
 import { usePropToggle } from "../../hooks/usePropToggle";
@@ -35,7 +35,6 @@ import {
   type Elements,
   type TestProps,
 } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
 
 export interface AsideProps
@@ -111,7 +110,7 @@ export interface AsideProps
  * ```jsx
  * <Aside
  *   title="Sidebar Title"
- *   icon={CoreIcons.menu}
+ *   icon=icon-[mdi--menu]
  *   rtlFlip={true}
  *   className="custom-aside"
  *   bodyClassName="custom-aside-body"
@@ -254,7 +253,7 @@ export const Aside = ({
           <Icon
             aria-label={isCollapsed ? "expand" : "collapse"}
             className={classNames("fabric-asideCollapse", "p-2 select-none")}
-            icon={CoreIcons.chevronLeft}
+            icon="icon-[mdi--chevron-left]"
             rtlFlip
             onClick={toggleCollapse}
             data-ref="asideToggle"
@@ -271,7 +270,7 @@ export const Aside = ({
         )}
         {actions && <div className={"fabric-asideActions"}>{actions}</div>}
       </header>
-      {loading && <Loading />}
+      {loading && <LoadingLine />}
       {isCollapsed && (
         <div
           role="none"

package/src/core/page/Page.tsx

@@ -22,7 +22,7 @@
  */
 
 import classNames from "classnames";
-import { Loading } from "../../components/animations/Animations";
+import { LoadingLine } from "../../components/animations/Animations";
 import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
 import { type ChildrenProp, type RefProp, type TestProps } from "../../types";
 
@@ -116,7 +116,7 @@ export const Page = ({
           {title}
         </div>
       )}
-      {loading && <Loading />}
+      {loading && <LoadingLine />}
       {children}
     </div>
   );

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}

package/src/hooks/useNavigator.tsx

@@ -21,7 +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 { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 /**
  * Custom hook to manage navigation through a list of items.
@@ -43,19 +43,18 @@ import { useCallback, useMemo, useRef, useState } from "react";
  */
 export const useNavigator = (totalCount = 0, defaultIndex = 0) => {
   const [currentIndex, setCurrentIndex] = useState(defaultIndex);
-  const refCurrent = useRef(defaultIndex);
 
   const onNavigate = useCallback(
     (dir: 1 | -1) => {
-      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((prevValue) => {
+        if (dir === -1) {
+          return prevValue > 0 ? prevValue - 1 : totalCount - 1;
+        }
+        if (dir === 1) {
+          return prevValue + 1 < totalCount ? prevValue + 1 : 0;
+        }
+        return prevValue;
+      });
     },
     [totalCount],
   );

package/src/hooks/useOverlayService.tsx

@@ -21,10 +21,11 @@
  * 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 ComponentProps, type ElementType } from "react";
+import { useRef, useState } from "react";
 import { type ModalProps } from "../types";
 
-type OverlayComponent = ElementType<ModalProps<AnyObject>>;
+// return the blank function since state functionality will execute if the value is function
+const EMPTY_FC = () => () => null;
 
 /**
  * Hook to manage overlay components like modals or flyouts.
@@ -36,7 +37,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
@@ -50,27 +52,38 @@ type OverlayComponent = ElementType<ModalProps<AnyObject>>;
  * <Overlay />
  * ```
  */
-export const useOverlayService = (
-  ModalOrFlyout: OverlayComponent,
+export const useOverlayService = <T extends AnyObject = AnyObject>(
+  ModalOrFlyout: React.FunctionComponent<ModalProps<T>>,
 ): [
-  Overlay: React.ReactNode | null,
-  openOverlay: (props?: KeyValue) => Promise<AnyObject>,
+  Overlay: React.FunctionComponent<Partial<T>>,
+  openOverlay: (props?: Partial<T>) => Promise<AnyObject>,
+  closeOverlay: ((args?: AnyObject) => void) | null,
 ] => {
-  const [Overlay, setOverlay] = useState<React.ReactNode | null>(null);
+  const [Overlay, setOverlay] =
+    useState<React.FunctionComponent<Partial<T>>>(EMPTY_FC);
 
-  const openOverlay = async ({
-    onClose,
-    ...props
-  }: ComponentProps<typeof ModalOrFlyout> = {}) => {
+  const existingOpenPromise = useRef<AnyObject | null>(null);
+  const openOverlay = async ({ onClose, ...outerProps }: AnyObject = {}) => {
+    if (existingOpenPromise.current) {
+      return;
+    }
     return await new Promise((resolve) => {
-      const handleClose = (args: AnyObject) => {
-        setOverlay(null);
+      existingOpenPromise.current = (args: AnyObject) => {
+        setOverlay(EMPTY_FC);
         resolve(args);
         onClose?.(args);
+        existingOpenPromise.current = null;
       };
-      setOverlay(<ModalOrFlyout {...props} onClose={handleClose} />);
+      // eslint-disable-next-line react/display-name
+      setOverlay(() => (overrideProps: Partial<T>) => (
+        <ModalOrFlyout
+          {...outerProps}
+          {...(overrideProps as any)}
+          onClose={existingOpenPromise.current}
+        />
+      ));
     });
   };
 
-  return [Overlay, openOverlay];
+  return [Overlay, openOverlay, existingOpenPromise.current];
 };

package/src/i18n/index.ts

@@ -23,8 +23,8 @@
 /* istanbul ignore file */
 
 import i18n from "i18next";
-import ar from "./ar.json";
-import en from "./en.json";
+import ar from "./ar/core.json";
+import en from "./en/core.json";
 
 /**
  * add language bundles using bundle keys as namespaces

package/src/index.ts

@@ -44,7 +44,6 @@ export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
 export { HotKeyWrapper } from "./hotkeys/HotKeyWrapper";
 
 export { type ModalProps } from "./types";
-export { CoreIcons } from "./types/icons";
 
 export { cloneChildren } from "./utils";
 

package/src/overlays/alert/Alert.tsx

@@ -37,7 +37,6 @@ import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
 import { Icon } from "../../components/icon/Icon";
 import { type ColorState, type Elements } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { Title } from "../../typography/Title";
 import { getColor } from "../../utils";
 
@@ -256,7 +255,7 @@ export const Alert = ({
                 className="m-0"
                 color={color}
                 onClick={() => handleClose(false)}
-                icon={CoreIcons.close}
+                icon="icon-[mdi--close]"
                 aria-label="close"
               />
             </div>

package/src/overlays/flyout/Flyout.tsx

@@ -33,7 +33,7 @@ import {
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { isValidElement, useCallback, useEffect } from "react";
-import { Loading } from "../../components/animations/Animations";
+import { LoadingLine } from "../../components/animations/Animations";
 import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
@@ -44,7 +44,6 @@ import {
   type Elements,
   type TestProps,
 } from "../../types";
-import { CoreIcons } from "../../types/icons";
 
 export interface FlyoutProps extends AriaProps, TestProps, ChildrenProp {
   icon?: IconProps;
@@ -236,11 +235,11 @@ export const Flyout = ({
                   "fabric-panelAction",
                   "cursor-pointer p-1 text-xl self-center",
                 )}
-                icon={CoreIcons.close}
+                icon="icon-[mdi--close]"
                 onClick={() => handleClose(false)}
               />
             </Header>
-            {loading && <Loading />}
+            {loading && <LoadingLine />}
             <div
               role="dialog"
               className={classNames(

package/src/overlays/modal/Modal.tsx

@@ -33,7 +33,7 @@ import {
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { isValidElement, useCallback, useEffect } from "react";
-import { Loading } from "../../components/animations/Animations";
+import { LoadingLine } from "../../components/animations/Animations";
 import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
@@ -44,7 +44,6 @@ import {
   type Elements,
   type TestProps,
 } from "../../types";
-import { CoreIcons } from "../../types/icons";
 
 export interface ModalProps extends AriaProps, TestProps, ChildrenProp {
   icon?: IconProps;
@@ -226,11 +225,11 @@ export const Modal = ({
                     "fabric-panelAction",
                     "cursor-pointer p-1 text-xl self-center",
                   )}
-                  icon={CoreIcons.close}
+                  icon="icon-[mdi--close]"
                   onClick={() => handleClose(false)}
                 />
               </Header>
-              {loading && <Loading />}
+              {loading && <LoadingLine />}
               <div
                 role="dialog"
                 className={classNames(

package/src/overlays/toast/Toast.tsx

@@ -28,7 +28,6 @@ import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
 import { Icon } from "../../components/icon/Icon";
 import { type ColorState, type Elements } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { getColor } from "../../utils";
 
 export interface ToastProps {
@@ -175,7 +174,7 @@ export const Toast = ({
               variant="link"
               className="m-0"
               color={color}
-              icon={CoreIcons.closeAll}
+              icon="icon-[mdi--close-box-multiple-outline]"
               aria-label="close-all"
               onClick={onCloseAll}
             />
@@ -184,7 +183,7 @@ export const Toast = ({
               variant="link"
               className="m-0"
               color={color}
-              icon={CoreIcons.close}
+              icon="icon-[mdi--close]"
               aria-label="close"
               onClick={() => handleClose(false)}
             />

package/src/overlays/tooltip/Tooltip.tsx

@@ -51,7 +51,6 @@ import {
 import { Icon } from "../../components/icon/Icon";
 import { useIsRtl } from "../../hooks/useIsRtl";
 import { type RefProp, type TooltipType } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { getColor } from "../../utils";
 
 export interface TooltipProps extends TooltipType, RefProp {
@@ -159,7 +158,7 @@ export const Tooltip = ({
           className="ms-2 cursor-pointer text-dimmed flex-content opacity-75 hover:opacity-90 active:opacity-60"
           onClick={handler}
         >
-          <Icon icon={CoreIcons.copy} />
+          <Icon icon="icon-[mdi--content-copy]" />
         </span>
       );
     }

package/src/types/index.ts

@@ -34,8 +34,10 @@ export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
 export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
 
 export type ColorState =
+  | "default"
   | "primary"
   | "accent"
+  | "muted"
   | "info"
   | "danger"
   | "success"
@@ -425,11 +427,22 @@ export interface TooltipProp {
   tooltip?: string | TooltipType;
 }
 
-export interface ChildProp<T = JSX.Element> {
+export type ReactElement =
+  | React.ReactElement
+  | string
+  | number
+  | bigint
+  | Iterable<React.ReactNode>
+  | React.ReactPortal
+  | boolean
+  | null
+  | undefined;
+
+export interface ChildProp<T = ReactElement> {
   children: Elements<T>;
 }
 
-export interface ChildrenProp<T = JSX.Element> {
+export interface ChildrenProp<T = ReactElement> {
   children: Elements<T> | Array<Elements<T>>;
 }
 
@@ -460,3 +473,20 @@ export type Complete<T> = {
     ? T[P]
     : T[P] | undefined;
 };
+
+export type NestedKeys<T> = T extends object
+  ? {
+      [K in keyof T]: K extends string | number
+        ? T[K] extends object
+          ? // Check for array type explicitly and handle it
+            T[K] extends readonly any[]
+            ? T[K][number] extends object
+              ? // Array of objects/items: return key with array index notation and recurse
+                `${K}.${NestedKeys<T[K][number]>}` | `${K}`
+              : `${K}`
+            : // Standard object: return key with dot notation and recurse
+              `${K}.${NestedKeys<T[K]>}` | `${K}`
+          : `${K}`
+        : never;
+    }[keyof T]
+  : "";

package/src/typography/Copy.tsx

@@ -27,7 +27,6 @@ import { useTranslation } from "react-i18next";
 import { Button } from "../components/button/Button";
 import { Tooltip } from "../overlays/tooltip/Tooltip";
 import { type CssProp, type SizeType } from "../types";
-import { CoreIcons } from "../types/icons";
 
 /**
  * A component that provides a button to copy text to the clipboard.
@@ -63,7 +62,7 @@ export const Copy = ({ text, size, className }: CopyProps) => {
   return (
     <Tooltip content={t("action.copy")}>
       <Button
-        icon={CoreIcons.copy}
+        icon="icon-[mdi--content-copy]"
         aria-label="Copy text"
         actionMessage={t("action.copied")}
         variant="link"