feat: sync changes from v2 to v2-develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.62.0",
+  "version": "2.63.0",
   "engines": {
     "node": "20.5.0"
   },
@@ -45,6 +45,7 @@
     "antd": "5.13.1",
     "buffer": "^6.0.3",
     "file-type-buffer-browser": "git+ssh://[email protected]/mguellsegarra/file-type-buffer-browser.git",
+    "focus-trap-react": "^11.0.3",
     "framer-motion": "^11.5.5",
     "interweave": "^13.0.0",
     "md5": "^2.3.0",

src/ui/FloatingDrawer.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Typography, Button, Layout, theme } from "antd";
 import { CloseOutlined } from "@ant-design/icons";
+import FocusTrap from "focus-trap-react";
 
 const { useToken } = theme;
 const { Title } = Typography;
@@ -97,58 +98,68 @@ export const FloatingDrawer: React.FC<FloatingDrawerProps> = ({
             }}
             onClick={handleOverlayClick}
           />
-          <motion.div
-            ref={drawerRef}
-            initial={{ x: "100%" }}
-            animate={{ x: 0 }}
-            exit={{ x: "100%" }}
-            transition={{ type: "spring", stiffness: 300, damping: 30 }}
-            onAnimationComplete={handleAnimationComplete}
-            style={{
-              position: "fixed",
-              top: 0,
-              right: 0,
-              bottom: 0,
-              width: "500px",
-              backgroundColor: "white",
-              boxShadow: "-2px 0 5px rgba(0, 0, 0, 0.1)",
-              zIndex: 1000,
-              display: "flex",
-              flexDirection: "column",
+          <FocusTrap
+            active={isOpen}
+            focusTrapOptions={{
+              initialFocus: "#floating-drawer-overlay input",
+              allowOutsideClick: true,
+              returnFocusOnDeactivate: true,
             }}
           >
-            <Header style={headerFooterStyle}>
-              <Title level={3} style={{ margin: 0, flex: 1 }}>
-                {title}
-              </Title>
-              <Button
-                type="text"
-                icon={<CloseOutlined />}
-                onClick={onClose}
-                aria-label="Close"
-              />
-            </Header>
-            <Content
+            <motion.div
+              ref={drawerRef}
+              initial={{ x: "100%" }}
+              animate={{ x: 0 }}
+              exit={{ x: "100%" }}
+              transition={{ type: "spring", stiffness: 300, damping: 30 }}
+              onAnimationComplete={handleAnimationComplete}
+              id="floating-drawer-overlay"
               style={{
-                flex: 1,
-                overflowY: "auto",
+                position: "fixed",
+                top: 0,
+                right: 0,
+                bottom: 0,
+                width: "500px",
+                backgroundColor: "white",
+                boxShadow: "-2px 0 5px rgba(0, 0, 0, 0.1)",
+                zIndex: 1000,
+                display: "flex",
+                flexDirection: "column",
               }}
             >
-              {children}
-            </Content>
-            {footer && (
-              <Footer
+              <Header style={headerFooterStyle}>
+                <Title level={3} style={{ margin: 0, flex: 1 }}>
+                  {title}
+                </Title>
+                <Button
+                  type="text"
+                  icon={<CloseOutlined />}
+                  onClick={onClose}
+                  aria-label="Close"
+                />
+              </Header>
+              <Content
                 style={{
-                  ...headerFooterStyle,
-                  borderTop: "1px solid #f0f0f0",
-                  borderBottom: "none",
-                  height: "72px",
+                  flex: 1,
+                  overflowY: "auto",
                 }}
               >
-                {footer}
-              </Footer>
-            )}
-          </motion.div>
+                {children}
+              </Content>
+              {footer && (
+                <Footer
+                  style={{
+                    ...headerFooterStyle,
+                    borderTop: "1px solid #f0f0f0",
+                    borderBottom: "none",
+                    height: "72px",
+                  }}
+                >
+                  {footer}
+                </Footer>
+              )}
+            </motion.div>
+          </FocusTrap>
         </>
       )}
     </AnimatePresence>

src/widgets/base/LinkInput.tsx

@@ -45,7 +45,7 @@ export const LinkInput = (props: LinkInputProps) => {
   return (
     <Row gutter={8} wrap={false} align="middle">
       {!readOnly ? (
-        <Col flex="none">
+        <Col flex="none" style={{ paddingRight: 0 }}>
           {editMode ? (
             <Button
               icon={<CheckOutlined />}
@@ -65,13 +65,13 @@ export const LinkInput = (props: LinkInputProps) => {
                 setEditMode(true);
                 setShowInput(true);
               }}
-              style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
+              style={{ border: "none" }}
               tabIndex={-1}
             />
           )}
         </Col>
       ) : null}
-      <Col flex="auto">
+      <Col flex="auto" style={{ paddingLeft: 0 }}>
         {showInput ? (
           <Input
             style={{
@@ -93,7 +93,7 @@ export const LinkInput = (props: LinkInputProps) => {
         ) : (
           <a
             href={`${linkPrefix}${value}`}
-            style={{ color: token.colorPrimary, paddingRight: 15 }}
+            style={{ color: token.colorPrimary, paddingLeft: 8 }}
             target="_blank"
             rel="noreferrer"
           >

src/widgets/views/searchFilter/SideSearchFilter.tsx

@@ -7,7 +7,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { Form, Alert, Button, FormInstance } from "antd";
+import { Form, Button, FormInstance } from "antd";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import { SearchOutlined, ClearOutlined } from "@ant-design/icons";
 
@@ -83,7 +83,7 @@ export const SideSearchFilterComponent = forwardRef<any, SideSearchFilterProps>(
               }}
             >
               <div style={{ paddingLeft: 18, paddingRight: 18 }}>
-                <SearchField key={j} field={item as Field} />
+                <SearchField key={`sf-${i}-${j}`} field={item as Field} />
               </div>
             </div>
           );
@@ -136,6 +136,15 @@ export const SideSearchFilter = (props: SideSearchFilterContainerProps) => {
       return;
     }
     setSearchParams(undefined);
+    // Focus the first input after the drawer animation completes
+    setTimeout(() => {
+      const firstInput = document.querySelector(
+        "#floating-drawer-overlay input",
+      );
+      if (firstInput instanceof HTMLElement) {
+        firstInput.focus();
+      }
+    }, 300);
   }, [isOpen]);
 
   useDeepCompareEffect(() => {