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

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