From 7189f1ebae6bab266c145ee12746e33ba2239461 Mon Sep 17 00:00:00 2001
From: Eduard Carreras <ecarreras@gisce.net>
Date: Thu, 13 Feb 2025 16:59:02 +0100
Subject: [PATCH 1/3] fix(email): space between button and input (#885) [skip
 ci]

---
 src/widgets/base/LinkInput.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/widgets/base/LinkInput.tsx b/src/widgets/base/LinkInput.tsx
index a951ba77c..47275fc06 100644
--- a/src/widgets/base/LinkInput.tsx
+++ b/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"
           >

From cbc275c69c9001d34ea86c763a31326283cf1558 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc=20G=C3=BCell=20Segarra?= <marc@ondori.dev>
Date: Thu, 13 Feb 2025 17:00:23 +0100
Subject: [PATCH 2/3] feat: improve focus and tab control in side search (#888)

https://github.com/gisce/webclient/issues/1789
---
 package-lock.json                             | 30 +++++-
 package.json                                  |  1 +
 src/ui/FloatingDrawer.tsx                     | 99 ++++++++++---------
 .../views/searchFilter/SideSearchFilter.tsx   | 13 ++-
 4 files changed, 96 insertions(+), 47 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c4a7f3607..2364e5a0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "antd": "5.13.1",
         "buffer": "^6.0.3",
         "file-type-buffer-browser": "git+ssh://git@github.com/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",
@@ -9445,7 +9446,6 @@
       "version": "18.2.7",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz",
       "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==",
-      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -14307,6 +14307,29 @@
         "uglify-js": "^2.6.2"
       }
     },
+    "node_modules/focus-trap": {
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.4.tgz",
+      "integrity": "sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==",
+      "dependencies": {
+        "tabbable": "^6.2.0"
+      }
+    },
+    "node_modules/focus-trap-react": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-11.0.3.tgz",
+      "integrity": "sha512-tS1+enWS/gwCHk2WIF3KpM2oz7Y3HsnRImzHZNRgCBLWXzNG4XQVlJgbqdLr4lBKRXGdDBjQYitSh1bf2xe4Ag==",
+      "dependencies": {
+        "focus-trap": "^7.6.4",
+        "tabbable": "^6.2.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -26671,6 +26694,11 @@
       "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==",
       "dev": true
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "node_modules/tape": {
       "version": "4.17.0",
       "resolved": "https://registry.npmjs.org/tape/-/tape-4.17.0.tgz",
diff --git a/package.json b/package.json
index 8757ddb7d..4ae98706f 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "antd": "5.13.1",
     "buffer": "^6.0.3",
     "file-type-buffer-browser": "git+ssh://git@github.com/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",
diff --git a/src/ui/FloatingDrawer.tsx b/src/ui/FloatingDrawer.tsx
index 301e8e04c..eeb576e1c 100644
--- a/src/ui/FloatingDrawer.tsx
+++ b/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>
diff --git a/src/widgets/views/searchFilter/SideSearchFilter.tsx b/src/widgets/views/searchFilter/SideSearchFilter.tsx
index 94660dbdb..f09a40b70 100644
--- a/src/widgets/views/searchFilter/SideSearchFilter.tsx
+++ b/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(() => {

From 3778b5c9c275ebd9c162eb900000532f21aaa58d Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Thu, 13 Feb 2025 16:01:55 +0000
Subject: [PATCH 3/3] chore(release): 2.63.0 [skip ci]

# [2.63.0](https://github.com/gisce/react-ooui/compare/v2.62.0...v2.63.0) (2025-02-13)

### Bug Fixes

* **email:** space between button and input ([#885](https://github.com/gisce/react-ooui/issues/885)) [skip ci] ([7189f1e](https://github.com/gisce/react-ooui/commit/7189f1ebae6bab266c145ee12746e33ba2239461))

### Features

* improve focus and tab control in side search ([#888](https://github.com/gisce/react-ooui/issues/888)) ([cbc275c](https://github.com/gisce/react-ooui/commit/cbc275c69c9001d34ea86c763a31326283cf1558))
---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2364e5a0c..67606de52 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.62.0",
+  "version": "2.63.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gisce/react-ooui",
-      "version": "2.62.0",
+      "version": "2.63.0",
       "dependencies": {
         "@ant-design/colors": "^7.2.0",
         "@ant-design/plots": "^1.0.9",
diff --git a/package.json b/package.json
index 4ae98706f..b59ccec12 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.62.0",
+  "version": "2.63.0",
   "engines": {
     "node": "20.5.0"
   },