foris 5.6.0 → 5.6.1-beta.39257567

package/bootstrap/Alert.js

@@ -38,16 +38,17 @@ Alert.defaultProps = {
 export function Alert({ type, onDismiss, children }) {
     return (
         <div
-            className={`alert ${
+            className={`alert alert-${type} ${
                 onDismiss ? "alert-dismissible" : ""
-            } alert-${type}`}
+            }`.trim()}
         >
-            {onDismiss ? (
-                <button type="button" className="close" onClick={onDismiss}>
-                    &times;
-                </button>
-            ) : (
-                false
+            {onDismiss && (
+                <button
+                    type="button"
+                    className="btn-close"
+                    onClick={onDismiss}
+                    aria-label={_("Close")}
+                />
             )}
             {children}
         </div>

package/bootstrap/Button.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2023 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -31,24 +31,25 @@ export function Button({
     children,
     ...props
 }) {
-    let buttonClass = className ? `btn ${className}` : "btn btn-primary ";
+    let buttonClass = className ? `btn ${className}` : "btn btn-primary";
     if (forisFormSize) {
-        buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`;
+        buttonClass = `${buttonClass} col-12 col-md-3 col-lg-2`;
     }
 
-    const span = loading ? (
-        <span
-            className="spinner-border spinner-border-sm"
-            role="status"
-            aria-hidden="true"
-        />
-    ) : null;
-
     return (
-        <button type="button" className={buttonClass} {...props}>
-            {span}
-            {span ? " " : null}
-            {children}
+        <button
+            type="button"
+            className={`${buttonClass} d-inline-flex justify-content-center align-items-center`}
+            {...props}
+        >
+            {loading && (
+                <span
+                    className="spinner-border spinner-border-sm me-1"
+                    role="status"
+                    aria-hidden="true"
+                />
+            )}
+            <span>{children}</span>
         </button>
     );
 }

package/bootstrap/CheckBox.js

@@ -24,25 +24,24 @@ CheckBox.defaultProps = {
 
 export function CheckBox({ label, helpText, disabled, ...props }) {
     const uid = useUID();
+
     return (
-        <div className="form-group">
-            <div className="custom-control custom-checkbox ">
-                <input
-                    className="custom-control-input"
-                    type="checkbox"
-                    id={uid}
-                    disabled={disabled}
-                    {...props}
-                />
-                <label className="custom-control-label" htmlFor={uid}>
-                    {label}
-                    {helpText && (
-                        <small className="form-text text-muted">
-                            {helpText}
-                        </small>
-                    )}
-                </label>
-            </div>
+        <div className="mb-3 form-check">
+            <input
+                className="form-check-input"
+                type="checkbox"
+                id={uid}
+                disabled={disabled}
+                {...props}
+            />
+            <label className="form-check-label" htmlFor={uid}>
+                {label}
+            </label>
+            {helpText && (
+                <div className="form-text">
+                    <small>{helpText}</small>
+                </div>
+            )}
         </div>
     );
 }

package/bootstrap/Input.js

@@ -27,18 +27,21 @@ export const Input = forwardRef(
     ) => {
         const uid = useUID();
 
-        const inputClassName = `form-control ${className || ""} ${
+        const inputClassName = `${className || ""} ${
             error ? "is-invalid" : ""
         }`.trim();
 
         return (
-            <div className="form-group">
-                <label className={labelClassName} htmlFor={uid}>
+            <div className="mb-3">
+                <label
+                    className={`form-label ${labelClassName || ""}`.trim()}
+                    htmlFor={uid}
+                >
                     {label}
                 </label>
                 <div className={`input-group ${groupClassName || ""}`.trim()}>
                     <input
-                        className={inputClassName}
+                        className={`form-control ${inputClassName}`.trim()}
                         type={type}
                         id={uid}
                         ref={ref}
@@ -46,10 +49,12 @@ export const Input = forwardRef(
                     />
                     {children}
                 </div>
-                {error ? <div className="invalid-feedback">{error}</div> : null}
-                {helpText ? (
-                    <small className="form-text text-muted">{helpText}</small>
-                ) : null}
+                {error && <div className="invalid-feedback">{error}</div>}
+                {helpText && (
+                    <div className="form-text">
+                        <small>{helpText}</small>
+                    </div>
+                )}
             </div>
         );
     }

package/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>
     );
 }

package/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>
     );
 }

package/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>
     );
 }

package/bootstrap/RadioSet.js

@@ -17,7 +17,7 @@ RadioSet.propTypes = {
     /** Choices . */
     choices: PropTypes.arrayOf(
         PropTypes.shape({
-            /** Choice lable . */
+            /** Choice label . */
             label: PropTypes.oneOfType([
                 PropTypes.string,
                 PropTypes.element,
@@ -64,7 +64,7 @@ export function RadioSet({
     });
 
     return (
-        <div className="form-group">
+        <div className="mb-3">
             {label && (
                 <label htmlFor={uid} className="d-block">
                     {label}
@@ -72,7 +72,9 @@ export function RadioSet({
             )}
             {radios}
             {helpText && (
-                <small className="form-text text-muted">{helpText}</small>
+                <div className="form-text">
+                    <small>{helpText}</small>
+                </div>
             )}
         </div>
     );
@@ -94,24 +96,24 @@ export function Radio({ label, id, helpText, inline, ...props }) {
     return (
         <>
             <div
-                className={`custom-control custom-radio ${
-                    inline ? "custom-control-inline" : ""
+                className={`mb-2 ${
+                    inline ? "form-check form-check-inline" : ""
                 }`.trim()}
             >
                 <input
                     id={id}
-                    className="custom-control-input"
+                    className="form-check-input me-2"
                     type="radio"
                     {...props}
                 />
-                <label className="custom-control-label" htmlFor={id}>
+                <label className="form-check-label" htmlFor={id}>
                     {label}
+                    {helpText && (
+                        <div className="form-text">
+                            <small>{helpText}</small>
+                        </div>
+                    )}
                 </label>
-                {helpText && (
-                    <small className="form-text text-muted mt-0 mb-3">
-                        {helpText}
-                    </small>
-                )}
             </div>
         </>
     );

package/bootstrap/Select.js

@@ -30,14 +30,18 @@ export function Select({ label, choices, helpText, ...props }) {
     ));
 
     return (
-        <div className="form-group">
-            <label htmlFor={uid}>{label}</label>
-            <select className="custom-select" id={uid} {...props}>
+        <div className="mb-3">
+            <label className="form-label" htmlFor={uid}>
+                {label}
+            </label>
+            <select className="form-select" id={uid} {...props}>
                 {options}
             </select>
-            {helpText ? (
-                <small className="form-text text-muted">{helpText}</small>
-            ) : null}
+            {helpText && (
+                <div className="form-text">
+                    <small>{helpText}</small>
+                </div>
+            )}
         </div>
     );
 }

package/bootstrap/Spinner.css

@@ -1,3 +1,11 @@
+.spinner-fs-wrapper {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1101; /* increase z-index by 1 to ensure it's on top of spinner-fs-background */
+}
+
 .spinner-wrapper .spinner-border {
     width: 4rem;
     height: 4rem;
@@ -7,10 +15,8 @@
 .spinner-fs-background {
     background-color: rgba(2, 2, 2, 0.5);
     color: rgb(230, 230, 230);
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
+    width: 100vw;
+    height: 100vh;
 
     display: flex;
     align-items: center;
@@ -31,3 +37,7 @@
 .spinner-fs-wrapper .spinner-text {
     margin: 1rem;
 }
+
+.spinner-border-sm {
+    min-width: 16px;
+}

package/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,
 };

package/bootstrap/Switch.js

@@ -22,28 +22,30 @@ Switch.propTypes = {
 
 export function Switch({ label, helpText, switchHeading, ...props }) {
     const uid = useUID();
+
     return (
-        <div className={`form-group ${switchHeading ? "switch" : ""}`.trim()}>
-            <div
-                className={`custom-control custom-switch ${
-                    !helpText ? "custom-control-inline" : ""
-                } ${switchHeading ? "switch-heading" : ""}`.trim()}
-            >
-                <input
-                    type="checkbox"
-                    className="custom-control-input"
-                    id={uid}
-                    {...props}
-                />
-                <label className="custom-control-label" htmlFor={uid}>
-                    {label}
-                </label>
-                {helpText && (
-                    <small className="form-text text-muted mt-0 mb-3">
-                        {helpText}
-                    </small>
-                )}
-            </div>
+        <div
+            className={`form-check form-switch mb-3 ${
+                switchHeading ? "d-flex align-items-center" : null
+            }`.trim()}
+        >
+            <input
+                type="checkbox"
+                className={`form-check-input ${
+                    switchHeading ? "me-2" : ""
+                }`.trim()}
+                role="switch"
+                id={uid}
+                {...props}
+            />
+            <label className="form-check-label" htmlFor={uid}>
+                {label}
+            </label>
+            {helpText && (
+                <div className="form-text">
+                    <small>{helpText}</small>
+                </div>
+            )}
         </div>
     );
 }

package/common/WiFiSettings/ResetWiFiSettings.js

@@ -58,7 +58,7 @@ export function ResetWiFiSettings({ ws, endpoint }) {
                     "If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the current Wi-Fi configuration and restore the default values."
                 )}
             </p>
-            <div className="text-right">
+            <div className="text-end">
                 <Button
                     className="btn-primary"
                     forisFormSize

package/common/WiFiSettings/WiFiForm.js

@@ -92,7 +92,7 @@ function DeviceForm({
     return (
         <>
             <Switch
-                label={<h2>{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
+                label={<h2 className="mb-0">{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
                 checked={formData.enabled}
                 onChange={setFormValue((value) => ({
                     devices: {
@@ -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

package/common/WiFiSettings/WiFiQRCode.js

@@ -87,7 +87,7 @@ function QRCodeModal({ shown, setShown, SSID, password }) {
                         createAndDownloadPdf(SSID, password);
                     }}
                 >
-                    <i className="fas fa-arrow-down mr-2" />
+                    <i className="fas fa-file-download me-2" />
                     {_("Download PDF")}
                 </Button>
             </ModalFooter>

package/form/components/ForisForm.js

@@ -190,7 +190,7 @@ export function ForisForm({
             <Prompt message={getMessageOnLeavingPage} />
             <form onSubmit={onSubmit} ref={formReference}>
                 {childrenWithFormProps}
-                <div className="text-right">
+                <div className="text-end">
                     <SubmitButton
                         state={getSubmitButtonState()}
                         disabled={submitButtonIsDisabled}

package/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";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "5.6.0",
+    "version": "5.6.1-beta.39257567",
     "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {
@@ -22,7 +22,7 @@
         "react-uid": "^2.2.0"
     },
     "peerDependencies": {
-        "bootstrap": "4.4.1",
+        "bootstrap": "^5.3.3",
         "prop-types": "15.8.1",
         "react": "16.9.0",
         "react-dom": "16.9.0",
@@ -34,11 +34,11 @@
         "@babel/plugin-transform-runtime": "^7.9.0",
         "@babel/preset-env": "^7.9.0",
         "@babel/preset-react": "^7.9.4",
-        "@fortawesome/fontawesome-free": "^5.13.0",
+        "@fortawesome/fontawesome-free": "^6.5.2",
         "@testing-library/react": "^8.0.9",
         "babel-loader": "^8.1.0",
         "babel-polyfill": "^6.26.0",
-        "bootstrap": "^4.5.0",
+        "bootstrap": "^5.3.3",
         "css-loader": "^5.2.4",
         "eslint": "^6.8.0",
         "eslint-config-prettier": "^6.11.0",