From 6bd809222c235687f2e780b54a47340af877783c Mon Sep 17 00:00:00 2001
From: Aleksandr Gumroian <aleksandr.gumroian@nic.cz>
Date: Tue, 23 Apr 2024 15:24:50 +0200
Subject: [PATCH] fixup! Update Bootstrap library to version 5.3.x

---
 src/bootstrap/Input.js                |  4 +--
 src/bootstrap/Modal.js                |  7 ++---
 src/bootstrap/NumberInput.js          | 44 +++++++++++++--------------
 src/bootstrap/PasswordInput.js        | 32 +++++++++----------
 src/bootstrap/RadioSet.js             | 14 ++++-----
 src/bootstrap/Spinner.js              |  2 +-
 src/bootstrap/Tooltip.js              |  0
 src/common/WiFiSettings/WiFiForm.js   | 10 +++---
 src/common/WiFiSettings/WiFiQRCode.js |  2 +-
 src/index.js                          |  2 +-
 src/utils/hooks.js                    | 21 ++++++++++++-
 11 files changed, 75 insertions(+), 63 deletions(-)
 create mode 100644 src/bootstrap/Tooltip.js

diff --git a/src/bootstrap/Input.js b/src/bootstrap/Input.js
index 4108c2b..32adc66 100644
--- a/src/bootstrap/Input.js
+++ b/src/bootstrap/Input.js
@@ -27,14 +27,14 @@ export const Input = forwardRef(
     ) => {
         const uid = useUID();
 
-        const inputClassName = `form-control ${className || ""} ${
+        const inputClassName = `${className || ""} ${
             error ? "is-invalid" : ""
         }`.trim();
 
         return (
             <div className="mb-3">
                 <label
-                    className={`form-label ${labelClassName}`.trim()}
+                    className={`form-label ${labelClassName || ""}`.trim()}
                     htmlFor={uid}
                 >
                     {label}
diff --git a/src/bootstrap/Modal.js b/src/bootstrap/Modal.js
index f105b8c..6ba1d7c 100644
--- a/src/bootstrap/Modal.js
+++ b/src/bootstrap/Modal.js
@@ -92,11 +92,10 @@ export function ModalHeader({ setShown, title }) {
             <h5 className="modal-title">{title}</h5>
             <button
                 type="button"
-                className="close"
+                className="btn-close"
                 onClick={() => setShown(false)}
-            >
-                <span aria-hidden="true">&times;</span>
-            </button>
+                aria-label={_("Close")}
+            />
         </div>
     );
 }
diff --git a/src/bootstrap/NumberInput.js b/src/bootstrap/NumberInput.js
index 2b4200d..9ba90da 100644
--- a/src/bootstrap/NumberInput.js
+++ b/src/bootstrap/NumberInput.js
@@ -23,7 +23,7 @@ NumberInput.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     /** Function called when value changes. */
     onChange: PropTypes.func.isRequired,
-    /** Additional description dispaled to the right of input value. */
+    /** Additional description displayed to the right of input value. */
     inlineText: PropTypes.string,
 };
 
@@ -49,27 +49,27 @@ export function NumberInput({ onChange, inlineText, value, ...props }) {
 
     return (
         <Input type="number" onChange={onChange} value={value} {...props}>
-            <div className="input-group-append">
-                {inlineText && <p className="input-group-text">{inlineText}</p>}
-                <button
-                    type="button"
-                    className="btn btn-outline-secondary"
-                    onMouseDown={() => enableIncrease(true)}
-                    onMouseUp={() => enableIncrease(false)}
-                    aria-label="Increase"
-                >
-                    <i className="fas fa-plus" />
-                </button>
-                <button
-                    type="button"
-                    className="btn btn-outline-secondary"
-                    onMouseDown={() => enableDecrease(true)}
-                    onMouseUp={() => enableDecrease(false)}
-                    aria-label="Decrease"
-                >
-                    <i className="fas fa-minus" />
-                </button>
-            </div>
+            {inlineText && (
+                <span className="input-group-text">{inlineText}</span>
+            )}
+            <button
+                type="button"
+                className="btn btn-outline-secondary"
+                onMouseDown={() => enableIncrease(true)}
+                onMouseUp={() => enableIncrease(false)}
+                aria-label="Increase"
+            >
+                <i className="fas fa-plus" />
+            </button>
+            <button
+                type="button"
+                className="btn btn-outline-secondary"
+                onMouseDown={() => enableDecrease(true)}
+                onMouseUp={() => enableDecrease(false)}
+                aria-label="Decrease"
+            >
+                <i className="fas fa-minus" />
+            </button>
         </Input>
     );
 }
diff --git a/src/bootstrap/PasswordInput.js b/src/bootstrap/PasswordInput.js
index 17cfbbd..81525f4 100644
--- a/src/bootstrap/PasswordInput.js
+++ b/src/bootstrap/PasswordInput.js
@@ -34,24 +34,20 @@ export function PasswordInput({ withEye, newPass, ...props }) {
             autoComplete={newPass ? "new-password" : "current-password"}
             {...props}
         >
-            {withEye ? (
-                <div className="input-group-append">
-                    <button
-                        type="button"
-                        className="input-group-text"
-                        onClick={(e) => {
-                            e.preventDefault();
-                            setHidden((shouldBeHidden) => !shouldBeHidden);
-                        }}
-                    >
-                        <i
-                            className={`fa ${
-                                isHidden ? "fa-eye" : "fa-eye-slash"
-                            }`}
-                        />
-                    </button>
-                </div>
-            ) : null}
+            {withEye && (
+                <button
+                    type="button"
+                    className="input-group-text"
+                    onClick={(e) => {
+                        e.preventDefault();
+                        setHidden((shouldBeHidden) => !shouldBeHidden);
+                    }}
+                >
+                    <i
+                        className={`fa ${isHidden ? "fa-eye" : "fa-eye-slash"}`}
+                    />
+                </button>
+            )}
         </Input>
     );
 }
diff --git a/src/bootstrap/RadioSet.js b/src/bootstrap/RadioSet.js
index 2e73b7b..e549ebc 100644
--- a/src/bootstrap/RadioSet.js
+++ b/src/bootstrap/RadioSet.js
@@ -96,24 +96,24 @@ export function Radio({ label, id, helpText, inline, ...props }) {
     return (
         <>
             <div
-                className={`${
+                className={`mb-2 ${
                     inline ? "form-check form-check-inline" : ""
                 }`.trim()}
             >
                 <input
                     id={id}
-                    className="form-check-input"
+                    className="form-check-input me-2"
                     type="radio"
                     {...props}
                 />
                 <label className="form-check-label" htmlFor={id}>
                     {label}
+                    {helpText && (
+                        <div className="form-text">
+                            <small>{helpText}</small>
+                        </div>
+                    )}
                 </label>
-                {helpText && (
-                    <div className="form-text">
-                        <small>{helpText}</small>
-                    </div>
-                )}
             </div>
         </>
     );
diff --git a/src/bootstrap/Spinner.js b/src/bootstrap/Spinner.js
index e9993ef..0042154 100644
--- a/src/bootstrap/Spinner.js
+++ b/src/bootstrap/Spinner.js
@@ -16,7 +16,7 @@ Spinner.propTypes = {
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node,
     ]),
-    /** Render component with full-screen mode (using apropriate `.css` styles) */
+    /** Render component with full-screen mode (using appropriate `.css` styles) */
     fullScreen: PropTypes.bool.isRequired,
     className: PropTypes.string,
 };
diff --git a/src/bootstrap/Tooltip.js b/src/bootstrap/Tooltip.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/common/WiFiSettings/WiFiForm.js b/src/common/WiFiSettings/WiFiForm.js
index 6dc5d96..8445c7f 100644
--- a/src/common/WiFiSettings/WiFiForm.js
+++ b/src/common/WiFiSettings/WiFiForm.js
@@ -119,12 +119,10 @@ function DeviceForm({
                         }))}
                         {...props}
                     >
-                        <div className="input-group-append">
-                            <WiFiQRCode
-                                SSID={formData.SSID}
-                                password={formData.password}
-                            />
-                        </div>
+                        <WiFiQRCode
+                            SSID={formData.SSID}
+                            password={formData.password}
+                        />
                     </TextInput>
 
                     <PasswordInput
diff --git a/src/common/WiFiSettings/WiFiQRCode.js b/src/common/WiFiSettings/WiFiQRCode.js
index 5bd5f63..24519c4 100644
--- a/src/common/WiFiSettings/WiFiQRCode.js
+++ b/src/common/WiFiSettings/WiFiQRCode.js
@@ -87,7 +87,7 @@ function QRCodeModal({ shown, setShown, SSID, password }) {
                         createAndDownloadPdf(SSID, password);
                     }}
                 >
-                    <i className="fas fa-arrow-down me-2" />
+                    <i className="fas fa-file-download me-2" />
                     {_("Download PDF")}
                 </Button>
             </ModalFooter>
diff --git a/src/index.js b/src/index.js
index 33daf12..ab37566 100644
--- a/src/index.js
+++ b/src/index.js
@@ -69,7 +69,7 @@ export {
     withErrorMessage,
 } from "./utils/conditionalHOCs";
 export { ErrorMessage } from "./utils/ErrorMessage";
-export { useClickOutside } from "./utils/hooks";
+export { useClickOutside, useTooltip } from "./utils/hooks";
 export { toLocaleDateString } from "./utils/datetime";
 export { displayCard } from "./utils/displayCard";
 export { isPluginInstalled } from "./utils/isPluginInstalled";
diff --git a/src/utils/hooks.js b/src/utils/hooks.js
index e554a9d..6a37875 100644
--- a/src/utils/hooks.js
+++ b/src/utils/hooks.js
@@ -5,7 +5,8 @@
  * See /LICENSE for more information.
  */
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
+import { Tooltip } from "bootstrap/dist/js/bootstrap.bundle.min.js";
 
 /** Execute callback when condition is set to true. */
 export function useConditionalTimeout(
@@ -40,3 +41,21 @@ export function useClickOutside(element, callback) {
         };
     });
 }
+
+export function useTooltip(description, placement = "top", trigger = "hover") {
+    const tooltipRef = useRef();
+
+    useEffect(() => {
+        const tooltip = new Tooltip(tooltipRef.current, {
+            title: description,
+            placement: placement,
+            trigger: trigger,
+        });
+
+        return () => {
+            tooltip.dispose();
+        };
+    });
+
+    return tooltipRef;
+}