Roll back styled components, see: styled-components/styled-components…

…#4071

package.json

@@ -28,7 +28,7 @@
         "react-dom": "^18.2.0",
         "react-i18next": "^13.0.1",
         "react-secure-storage": "^1.2.2",
-        "styled-components": "^6.0.2",
+        "styled-components": "^5.3.11",
         "typescript-eslint": "^0.0.1-alpha.0"
     },
     "devDependencies": {

src/App.tsx

@@ -30,7 +30,7 @@ import notify from "devextreme/ui/notify";
 import { exit } from "@tauri-apps/api/process";
 import { ask } from "@tauri-apps/api/dialog";
 import dxTreeList, { Node } from "devextreme/ui/tree_list";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import { Locales, setLocale, useLocalize } from "./i18n";
 import { DataEntry } from "./types/PasswordEntry";
 import { DialogButtons, DialogResult, FileQueryMode, ModifyType, PopupType } from "./types/Enums";

src/components/app/AppMenu.tsx

@@ -25,7 +25,7 @@ SOFTWARE.
 import * as React from "react";
 import Menu from "devextreme-react/menu";
 import classNames from "classnames";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import { ItemClickEvent } from "devextreme/ui/menu";
 import { useLocalize } from "../../i18n";
 import { DataEntry } from "../../types/PasswordEntry";

src/components/app/AppMenuToolbar.tsx

@@ -24,7 +24,7 @@ SOFTWARE.
 
 import * as React from "react";
 import classNames from "classnames";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import { ItemClickEvent } from "devextreme/ui/menu";
 import { AppToolbarProps, StyledAppToolbar } from "./AppToolbar";
 import { AppMenuProps, MenuData, StyledAppMenu } from "./AppMenu";

src/components/app/AppToolbar.tsx

@@ -25,7 +25,7 @@ SOFTWARE.
 import * as React from "react";
 import { Button, Toolbar } from "devextreme-react";
 import { Item as ToolbarItem } from "devextreme-react/toolbar";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import classNames from "classnames";
 import { DataEntry } from "../../types/PasswordEntry";
 import { useLocalize } from "../../i18n";

src/components/app/WindowTitle.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import { appWindow } from "@tauri-apps/api/window";
 import classNames from "classnames";
 import { useLocalize } from "../../i18n";

src/components/reusable/LockScreenOverlay.tsx

@@ -24,7 +24,7 @@ SOFTWARE.
 
 import * as React from "react";
 import classNames from "classnames";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import { CommonProps } from "../Types";
 
 /**

src/components/reusable/PasswordList.tsx

@@ -5,7 +5,7 @@ import { Column, RowDragging, Selection } from "devextreme-react/tree-list";
 import dxTreeList, { Node, RowDraggingChangeEvent, RowDraggingReorderEvent, SelectionChangedEvent, SavingEvent, InitializedEvent } from "devextreme/ui/tree_list";
 import { Template } from "devextreme-react/core/template";
 import classNames from "classnames";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import { useLocalize } from "../../i18n";
 import { DataEntry } from "../../types/PasswordEntry";
 import { CommonProps, DxFilter } from "../Types";
@@ -45,9 +45,9 @@ const PasswordList = ({
 
     // Order the data by setting the SortOrder and ParentId properties.
     const onReorder = React.useCallback(
-        (e: RowDraggingReorderEvent) => {
+        (e: unknown) => {
             if (dataSource) {
-                setDataSource(reorderData(e, dataSource));
+                setDataSource(reorderData(e as RowDraggingReorderEvent, dataSource));
             }
         },
         [dataSource, setDataSource]
@@ -165,7 +165,7 @@ const createFilterExpression = (value: SearchTextBoxValue) => {
     }
     result.pop();
 
-    return result.length === 0 ? undefined : result;
+    return result.length === 0 ? "" : (result as unknown as string);
 };
 
 /**
@@ -199,7 +199,8 @@ const isGroup = (entry: DataEntry) => {
  * Validate the drag change of the {@link TreeList} for the {@link PasswordList} component.
  * @param {RowDraggingChangeEvent} e The event data for the row dragging event.
  */
-const onDragChange = (e: RowDraggingChangeEvent) => {
+const onDragChange = (data: unknown) => {
+    const e = data as RowDraggingChangeEvent;
     const visibleRows = e.component.getVisibleRows();
 
     const sourceNode = visibleRows[e.fromIndex].node;

src/components/reusable/inputs/PasswordTextBox.tsx

@@ -27,7 +27,7 @@ import Button from "devextreme-react/button";
 import TextBox from "devextreme-react/text-box";
 import dxTextBox, { InitializedEvent, KeyDownEvent, ValueChangedEvent } from "devextreme/ui/text_box";
 import * as React from "react";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import notify from "devextreme/ui/notify";
 import { useLocalize } from "../../../i18n";
 import { CommonProps } from "../../Types";

src/components/reusable/inputs/SearchTextBox.tsx

@@ -27,7 +27,7 @@ import Button from "devextreme-react/button";
 import TextBox from "devextreme-react/text-box";
 import dxTextBox, { InitializedEvent, KeyDownEvent, ValueChangedEvent } from "devextreme/ui/text_box";
 import * as React from "react";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import { useLocalize } from "../../../i18n";
 import { CommonProps } from "../../Types";
 

src/components/software/EntryEditor.tsx

@@ -24,7 +24,7 @@ SOFTWARE.
 
 import * as React from "react";
 import classNames from "classnames";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import { TextArea, TextBox } from "devextreme-react";
 import { ValueChangedEvent } from "devextreme/ui/text_area";
 import dxTextBox, { InitializedEvent, ValueChangedEvent as TextBoxValueChangedEvent } from "devextreme/ui/text_box";

src/components/software/inputs/FileQueryTextBox.tsx

@@ -26,7 +26,7 @@ import classNames from "classnames";
 import Button from "devextreme-react/button";
 import TextBox from "devextreme-react/text-box";
 import * as React from "react";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import { InitializedEvent, KeyDownEvent } from "devextreme/ui/text_box";
 import { useLocalize } from "../../../i18n";
 import { selectFileToOpen, selectFileToSave } from "../../../utilities/app/Files";

src/components/software/popups/AboutPopup.tsx

@@ -26,7 +26,7 @@ import * as React from "react";
 import { Button, Popup, ScrollView } from "devextreme-react";
 import classNames from "classnames";
 import { getName, getVersion } from "@tauri-apps/api/app";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import { useLocalize } from "../../../i18n";
 import { CommonProps } from "../../Types";
 import { GithubLogo, LogoImage } from "../../../utilities/app/Images";

src/components/software/popups/ConfirmPopup.tsx

@@ -25,7 +25,7 @@ SOFTWARE.
 import * as React from "react";
 import { Button, Popup } from "devextreme-react";
 import classNames from "classnames";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import { DialogButtons, DialogResult, PopupType } from "../../../types/Enums";
 import { useLocalize } from "../../../i18n";
 import { CommonProps } from "../../Types";

src/components/software/popups/EditCategoryPopup.tsx

@@ -26,7 +26,7 @@ import * as React from "react";
 import { Button, Popup, TextBox } from "devextreme-react";
 import classNames from "classnames";
 import { KeyDownEvent, ValueChangedEvent } from "devextreme/ui/text_box";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import { ModifyType } from "../../../types/Enums";
 import { useLocalize } from "../../../i18n";
 import { DataEntry } from "../../../types/PasswordEntry";

src/components/software/popups/EditEntryPopup.tsx

@@ -24,7 +24,7 @@ SOFTWARE.
 
 import * as React from "react";
 import { Button, Popup } from "devextreme-react";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import classNames from "classnames";
 import dxTextBox from "devextreme/ui/text_box";
 import { ModifyType } from "../../../types/Enums";

src/components/software/popups/OpenSaveFilePopup.tsx

@@ -24,7 +24,7 @@ SOFTWARE.
 
 import * as React from "react";
 import { Button, Popup } from "devextreme-react";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import classNames from "classnames";
 import { KeyDownEvent, ValueChangedEvent } from "devextreme/ui/text_box";
 import { FileQueryMode } from "../../../types/Enums";

src/components/software/popups/PreferencesPopup.tsx

@@ -26,7 +26,7 @@ import * as React from "react";
 import { Button, Lookup, NumberBox, Popup } from "devextreme-react";
 import classNames from "classnames";
 import { ValueChangedEvent } from "devextreme/ui/lookup";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import { Locales, currentLocales, useLocalize } from "../../../i18n";
 import { Settings } from "../../../types/Settings";
 import { DxThemeNames, dxThemes } from "../../../utilities/ThemeUtils";

src/components/software/popups/QueryPasswordPopup.tsx

@@ -24,7 +24,7 @@ SOFTWARE.
 
 import * as React from "react";
 import { Button, Popup } from "devextreme-react";
-import { styled } from "styled-components";
+import styled from "styled-components";
 import classNames from "classnames";
 import { KeyDownEvent, ValueChangedEvent } from "devextreme/ui/text_box";
 import { InitializedEvent } from "devextreme/ui/popup";