@oliasoft-open-source/react-ui-library 4.1.8 → 4.1.9

package/dist/index.d.ts

@@ -808,6 +808,8 @@ export declare interface IModalProps {
     visible?: boolean;
     centered?: boolean;
     width?: TStringOrNumber;
+    onEnter?: () => void;
+    onEscape?: () => void;
 }
 
 export declare interface INativeSelectProps {
@@ -1501,7 +1503,7 @@ export declare enum MessageType {
     ERROR = "Error"
 }
 
-export declare const Modal: ({ children, visible, centered, width, }: IModalProps) => JSX_2.Element;
+export declare const Modal: ({ children, visible, centered, width, onEnter, onEscape, }: IModalProps) => JSX_2.Element;
 
 export declare const NativeSelect: ({ disabled, error, warning, tooltip, options, onChange, onFocus, onBlur, right, small, tabIndex, selectedOption, width, groupOrder, testId, isInTable, clearable, placeholder, hasNonExistentValue, maxTooltipWidth, borderRadius, }: INativeSelectProps) => JSX_2.Element;
 

package/dist/index.js

@@ -19445,6 +19445,19 @@ const Message = ({ message: message2 }) => {
     }
   ) : null });
 };
+const useKeyboardEvent = (key2, fn, dependencyList = []) => {
+  useEffect(() => {
+    const handler = (evt) => {
+      if (evt.key === key2) {
+        fn();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => {
+      window.removeEventListener("keydown", handler);
+    };
+  }, dependencyList);
+};
 const Portal = ({ id: id2, children }) => {
   const parent = document.querySelector(`#${id2}`);
   const [mounted, setMounted] = useState(false);
@@ -19464,7 +19477,22 @@ const styles$q = {
   centered,
   newLine
 };
-const Wrapper = ({ children }) => /* @__PURE__ */ jsx("div", { className: cx$2(styles$q.wrapper), children });
+const Wrapper = ({ children }) => {
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    if (wrapperRef.current) {
+      const firstFocusableElement = wrapperRef.current.querySelector(
+        '[tabindex="0"]'
+      );
+      if (firstFocusableElement) {
+        firstFocusableElement.focus();
+      } else {
+        wrapperRef.current.focus();
+      }
+    }
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, tabIndex: -1, className: cx$2(styles$q.wrapper), children });
+};
 const Content$2 = ({ children, width: width2, centered: centered2 }) => /* @__PURE__ */ jsx(
   "div",
   {
@@ -19477,11 +19505,33 @@ const Modal = ({
   children,
   visible = false,
   centered: centered2 = false,
-  width: width2 = "100%"
-}) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-  /* @__PURE__ */ jsx(Portal, { id: "modalContainer", children: visible ? /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(Content$2, { width: width2, centered: centered2, children }) }) : null }),
-  /* @__PURE__ */ jsx("div", { id: "modalContainer" })
-] });
+  width: width2 = "100%",
+  onEnter,
+  onEscape
+}) => {
+  useKeyboardEvent(
+    "Enter",
+    () => {
+      if (visible && onEnter) {
+        onEnter();
+      }
+    },
+    [visible, onEnter]
+  );
+  useKeyboardEvent(
+    "Escape",
+    () => {
+      if (visible && onEscape) {
+        onEscape();
+      }
+    },
+    [visible, onEscape]
+  );
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(Portal, { id: "modalContainer", children: visible ? /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(Content$2, { width: width2, centered: centered2, children }) }) : null }),
+    /* @__PURE__ */ jsx("div", { id: "modalContainer" })
+  ] });
+};
 const menu$1 = "_menu_12x4u_1";
 const header = "_header_12x4u_11";
 const item$3 = "_item_12x4u_27";
@@ -19994,19 +20044,6 @@ var reactKeyboardEventHandler = { exports: {} };
 })(reactKeyboardEventHandler);
 var reactKeyboardEventHandlerExports = reactKeyboardEventHandler.exports;
 const KeyboardEventHandler = /* @__PURE__ */ getDefaultExportFromCjs(reactKeyboardEventHandlerExports);
-const useKeyboardEvent = (key2, fn, dependencyList = []) => {
-  useEffect(() => {
-    const handler = (evt) => {
-      if (evt.key === key2) {
-        fn();
-      }
-    };
-    window.addEventListener("keydown", handler);
-    return () => {
-      window.removeEventListener("keydown", handler);
-    };
-  }, dependencyList);
-};
 const useFocus = () => {
   const ref2 = useRef(null);
   const setFocus = () => {