@squiz/formatted-text-editor 1.12.0-alpha.45 → 1.12.0-alpha.46

package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useCommands, useChainedCommands, useActive } from '@remirror/react';
-import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
+import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
 const HeadingButton = ({ level }) => {
     const { toggleHeading } = useCommands();
     const chain = useChainedCommands();

package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.js

@@ -1,17 +1,16 @@
 import React from 'react';
 import { useCommands, useChainedCommands, useActive } from '@remirror/react';
-import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
+import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
 const ParagraphButton = () => {
     const { convertParagraph } = useCommands();
     const chain = useChainedCommands();
     const active = useActive();
-    const enabled = convertParagraph.enabled();
     const handleSelect = () => {
         if (convertParagraph.enabled()) {
             chain.convertParagraph().focus().run();
         }
     };
-    return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.paragraph(), label: "Paragraph" },
+    return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled: false, isActive: active.paragraph(), label: "Paragraph" },
         React.createElement("p", null, "Paragraph")));
 };
 export default ParagraphButton;

package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useCommands, useActive } from '@remirror/react';
-import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
+import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
 const PreformattedButton = () => {
     const { togglePreformatted } = useCommands();
     const active = useActive();

package/lib/index.css

@@ -213,309 +213,6 @@ video {
 [hidden] {
   display: none;
 }
-[type=text],
-[type=email],
-[type=url],
-[type=password],
-[type=number],
-[type=date],
-[type=datetime-local],
-[type=month],
-[type=search],
-[type=tel],
-[type=time],
-[type=week],
-[multiple],
-textarea,
-select {
-  appearance: none;
-  background-color: #fff;
-  border-color: #949494;
-  border-width: 1px;
-  border-radius: 0px;
-  padding-top: 0.5rem;
-  padding-right: 0.75rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.75rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  --tw-shadow: 0 0 #0000;
-}
-[type=text]:focus,
-[type=email]:focus,
-[type=url]:focus,
-[type=password]:focus,
-[type=number]:focus,
-[type=date]:focus,
-[type=datetime-local]:focus,
-[type=month]:focus,
-[type=search]:focus,
-[type=tel]:focus,
-[type=time]:focus,
-[type=week]:focus,
-[multiple]:focus,
-textarea:focus,
-select:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --tw-ring-inset: var(--tw-empty, );
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: #1C64F2;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow),
-    var(--tw-ring-shadow),
-    var(--tw-shadow);
-  border-color: #1C64F2;
-}
-input::placeholder,
-textarea::placeholder {
-  color: #949494;
-  opacity: 1;
-}
-::-webkit-datetime-edit-fields-wrapper {
-  padding: 0;
-}
-::-webkit-date-and-time-value {
-  min-height: 1.5em;
-}
-select:not([size]) {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23949494' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 0.5rem center;
-  background-repeat: no-repeat;
-  background-size: 1.5em 1.5em;
-  padding-right: 2.5rem;
-  print-color-adjust: exact;
-}
-[multiple] {
-  background-image: initial;
-  background-position: initial;
-  background-repeat: unset;
-  background-size: initial;
-  padding-right: 0.75rem;
-  print-color-adjust: unset;
-}
-[type=checkbox],
-[type=radio] {
-  appearance: none;
-  padding: 0;
-  print-color-adjust: exact;
-  display: inline-block;
-  vertical-align: middle;
-  background-origin: border-box;
-  user-select: none;
-  flex-shrink: 0;
-  height: 1rem;
-  width: 1rem;
-  color: #1C64F2;
-  background-color: #fff;
-  border-color: #949494;
-  border-width: 1px;
-  --tw-shadow: 0 0 #0000;
-}
-[type=checkbox] {
-  border-radius: 0px;
-}
-[type=radio] {
-  border-radius: 100%;
-}
-[type=checkbox]:focus,
-[type=radio]:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --tw-ring-inset: var(--tw-empty, );
-  --tw-ring-offset-width: 2px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: #1C64F2;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow),
-    var(--tw-ring-shadow),
-    var(--tw-shadow);
-}
-[type=checkbox]:checked,
-[type=radio]:checked,
-.dark [type=checkbox]:checked,
-.dark [type=radio]:checked {
-  border-color: transparent;
-  background-color: currentColor;
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-[type=checkbox]:checked {
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-}
-[type=radio]:checked {
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-}
-[type=checkbox]:indeterminate {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
-  border-color: transparent;
-  background-color: currentColor;
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-[type=checkbox]:indeterminate:hover,
-[type=checkbox]:indeterminate:focus {
-  border-color: transparent;
-  background-color: currentColor;
-}
-[type=file] {
-  background: unset;
-  border-color: inherit;
-  border-width: 0;
-  border-radius: 0;
-  padding: 0;
-  font-size: unset;
-  line-height: inherit;
-}
-[type=file]:focus {
-  outline: 1px auto inherit;
-}
-input[type=file]::file-selector-button {
-  color: white;
-  background: #3D3D3D;
-  border: 0;
-  font-weight: 500;
-  font-size: 0.8125rem;
-  cursor: pointer;
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
-  padding-left: 2rem;
-  padding-right: 1rem;
-  margin-inline-start: -1rem;
-  margin-inline-end: 1rem;
-}
-input[type=file]::file-selector-button:hover {
-  background: #4F4F4F;
-}
-input[type=range]::-webkit-slider-thumb {
-  height: 1.25rem;
-  width: 1.25rem;
-  background: #1C64F2;
-  border-radius: 9999px;
-  border: 0;
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  cursor: pointer;
-}
-input[type=range]:disabled::-webkit-slider-thumb {
-  background: #BABABA;
-}
-input[type=range]:focus::-webkit-slider-thumb {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow),
-    var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
-  --tw-ring-opacity: 1px;
-  --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
-}
-input[type=range]::-moz-range-thumb {
-  height: 1.25rem;
-  width: 1.25rem;
-  background: #1C64F2;
-  border-radius: 9999px;
-  border: 0;
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  cursor: pointer;
-}
-input[type=range]:disabled::-moz-range-thumb {
-  background: #BABABA;
-}
-input[type=range]::-moz-range-progress {
-  background: #3F83F8;
-}
-input[type=range]::-ms-fill-lower {
-  background: #3F83F8;
-}
-[data-popper-arrow],
-[data-popper-arrow]:before {
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background: inherit;
-}
-[data-popper-arrow] {
-  visibility: hidden;
-}
-[data-popper-arrow]:before {
-  content: "";
-  visibility: visible;
-  transform: rotate(45deg);
-}
-[data-popper-arrow]:after {
-  content: "";
-  visibility: visible;
-  transform: rotate(45deg);
-  position: absolute;
-  width: 9px;
-  height: 9px;
-  background: inherit;
-}
-[role=tooltip] > [data-popper-arrow]:before {
-  border-style: solid;
-  border-color: #e5e7eb;
-}
-[role=tooltip] > [data-popper-arrow]:after {
-  border-style: solid;
-  border-color: #e5e7eb;
-}
-[data-popover][role=tooltip][data-popper-placement^=top] > [data-popper-arrow]:before {
-  border-bottom-width: 1px;
-  border-right-width: 1px;
-}
-[data-popover][role=tooltip][data-popper-placement^=top] > [data-popper-arrow]:after {
-  border-bottom-width: 1px;
-  border-right-width: 1px;
-}
-[data-popover][role=tooltip][data-popper-placement^=right] > [data-popper-arrow]:before {
-  border-bottom-width: 1px;
-  border-left-width: 1px;
-}
-[data-popover][role=tooltip][data-popper-placement^=right] > [data-popper-arrow]:after {
-  border-bottom-width: 1px;
-  border-left-width: 1px;
-}
-[data-popover][role=tooltip][data-popper-placement^=bottom] > [data-popper-arrow]:before {
-  border-top-width: 1px;
-  border-left-width: 1px;
-}
-[data-popover][role=tooltip][data-popper-placement^=bottom] > [data-popper-arrow]:after {
-  border-top-width: 1px;
-  border-left-width: 1px;
-}
-[data-popover][role=tooltip][data-popper-placement^=left] > [data-popper-arrow]:before {
-  border-top-width: 1px;
-  border-right-width: 1px;
-}
-[data-popover][role=tooltip][data-popper-placement^=left] > [data-popper-arrow]:after {
-  border-top-width: 1px;
-  border-right-width: 1px;
-}
-[data-popover][role=tooltip][data-popper-placement^=top] > [data-popper-arrow] {
-  bottom: -5px;
-}
-[data-popover][role=tooltip][data-popper-placement^=bottom] > [data-popper-arrow] {
-  top: -5px;
-}
-[data-popover][role=tooltip][data-popper-placement^=left] > [data-popper-arrow] {
-  right: -5px;
-}
-[data-popover][role=tooltip][data-popper-placement^=right] > [data-popper-arrow] {
-  left: -5px;
-}
 *,
 ::before,
 ::after {
@@ -540,7 +237,7 @@ input[type=range]::-ms-fill-lower {
   --tw-ring-inset: ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(63 131 248 / 0.5);
+  --tw-ring-color: rgb(59 130 246 / 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -586,7 +283,7 @@ input[type=range]::-ms-fill-lower {
   --tw-ring-inset: ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(63 131 248 / 0.5);
+  --tw-ring-color: rgb(59 130 246 / 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -719,10 +416,6 @@ input[type=range]::-ms-fill-lower {
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))) !important;
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse)) !important;
 }
-.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-opacity: 1 !important;
-  border-color: rgb(245 245 245 / var(--tw-divide-opacity)) !important;
-}
 .overflow-auto {
   overflow: auto !important;
 }
@@ -734,9 +427,6 @@ input[type=range]::-ms-fill-lower {
 .rounded {
   border-radius: 4px !important;
 }
-.rounded-lg {
-  border-radius: 0.5rem !important;
-}
 .border-0 {
   border-width: 0px !important;
 }
@@ -839,18 +529,14 @@ input[type=range]::-ms-fill-lower {
 .opacity-25 {
   opacity: 0.25 !important;
 }
-.shadow {
-  --tw-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12) !important;
-  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 1px 12px 4px var(--tw-shadow-color) !important;
-  box-shadow:
-    var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow) !important;
-}
 .outline-none {
   outline: 2px solid transparent !important;
   outline-offset: 2px !important;
 }
+.blur {
+  --tw-blur: blur(8px) !important;
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
+}
 .squiz-fte-form-group {
   display: flex;
   flex-direction: column;
@@ -919,6 +605,7 @@ input[type=range]::-ms-fill-lower {
   font-family: "Open Sans" !important;
 }
 .formatted-text-editor.editor-wrapper {
+  margin: 0.5rem;
   border-radius: 4px;
   border-width: 2px;
   border-style: solid;
@@ -1065,6 +752,7 @@ a {
 }
 .toolbar-dropdown__button {
   display: flex;
+  align-items: center;
   font-family:
     Open Sans,
     Arial,
@@ -1074,7 +762,6 @@ a {
   --tw-text-opacity: 1;
   color: rgb(112 112 112 / var(--tw-text-opacity));
   align-self: center;
-  align-items: center;
   height: 2rem;
   padding-left: 0.5rem;
 }
@@ -1092,20 +779,35 @@ a {
   height: 1.5rem;
 }
 .toolbar-dropdown__menu {
-  inset: 0rem auto auto 1rem !important;
+  border-radius: 4px;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(224 224 224 / var(--tw-border-opacity));
+  --tw-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 4px 2px rgba(0,0,0,0.08);
+  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 1px 4px 2px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+  position: absolute;
+  margin-top: 0.75rem;
 }
 .dropdown-button {
-  height: 40px;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-  display: flex;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   --tw-text-opacity: 1;
   color: rgb(112 112 112 / var(--tw-text-opacity));
+  height: 40px;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+.dropdown-button:hover,
+.dropdown-button:focus {
+  background-color: rgba(0, 0, 0, 0.04);
 }
 .squiz-fte-modal {
   display: flex;
@@ -1207,7 +909,3 @@ a {
   outline: 2px solid transparent !important;
   outline-offset: 2px !important;
 }
-.dark .dark\:bg-gray-700 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(79 79 79 / var(--tw-bg-opacity)) !important;
-}

package/lib/ui/ToolbarDropdown/ToolbarDropdown.d.ts

@@ -1,4 +1,3 @@
-import 'flowbite';
 type ToolbarDropdownProps = {
     children: JSX.Element | JSX.Element[];
     label: string;

package/lib/ui/ToolbarDropdown/ToolbarDropdown.js

@@ -1,12 +1,20 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import 'flowbite';
 const ToolbarDropdown = ({ children, label }) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("button", { id: "dropdownHoverButton", "data-dropdown-toggle": "dropdown", className: "toolbar-dropdown__button", type: "button" },
+    const [isOpen, setOpen] = useState(false);
+    const handleDropDown = () => {
+        setOpen(!isOpen);
+    };
+    const handleBlur = (event) => {
+        if (event.relatedTarget?.id !== 'dropdownMenuButton' && !event.target?.className.includes('is-active')) {
+            isOpen && handleDropDown();
+        }
+    };
+    return (React.createElement("div", { className: "toolbar-dropdown", onBlur: handleBlur },
+        React.createElement("button", { id: "dropdownHoverButton", className: "toolbar-dropdown__button", onClick: handleDropDown },
             React.createElement("span", { className: "toolbar-dropdown__label" }, label),
             React.createElement(ExpandMoreIcon, { className: "toolbar-dropdown__icon", "aria-hidden": "true" })),
-        React.createElement("div", { id: "dropdown", className: "toolbar-dropdown__menu z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-169 dark:bg-gray-700" },
-            React.createElement("ul", { "aria-labelledby": "dropdownHoverButton" }, children))));
+        React.createElement("div", { id: "dropdown", className: `toolbar-dropdown__menu z-10 ${isOpen ? 'block' : 'hidden'} bg-white divide-y w-169` },
+            React.createElement("ul", { "aria-labelledby": "dropdownHoverButton", onClick: handleDropDown }, children))));
 };
 export default ToolbarDropdown;

package/lib/ui/{DropdownButton/DropdownButton.js → ToolbarDropdownButton/ToolbarDropdownButton.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 import CheckIcon from '@mui/icons-material/Check';
 const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }) => {
-    return (React.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `btn dropdown-button ${isActive ? 'is-active' : ''}` },
+    return (React.createElement("button", { "aria-label": label, id: "dropdownMenuButton", title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `btn dropdown-button ${isActive ? 'is-active' : ''}` },
         React.createElement("span", null, children || label),
         isActive && React.createElement(CheckIcon, { className: "dropdown-button-icon" })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.12.0-alpha.45",
+  "version": "1.12.0-alpha.46",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -20,7 +20,6 @@
     "@mui/icons-material": "5.11.0",
     "@remirror/react": "2.0.25",
     "clsx": "1.2.1",
-    "flowbite": "^1.6.3",
     "postcss-prefix-selector": "1.16.0"
   },
   "devDependencies": {
@@ -65,5 +64,5 @@
   "volta": {
     "node": "16.19.0"
   },
-  "gitHead": "d89e680e3a4435dc0befaa442ffb1a4eb8a1e4b1"
+  "gitHead": "047173c3a5a8d33be8d9becf6af6d5575d7ce914"
 }

package/src/Editor/_editor.scss

@@ -2,7 +2,7 @@
   font-family: 'Open Sans' !important;
 
   &.editor-wrapper {
-    @apply bg-white rounded border-gray-300 border-2 border-solid;
+    @apply bg-white rounded border-gray-300 border-2 border-solid m-2;
   }
 
   .remirror-editor-wrapper {

package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.spec.tsx

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+describe('Center align button', () => {
+  it('Renders the center align button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: 'Align center' })).toBeTruthy();
+  });
+
+  it('Applies active status after selecting center align button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const centerAlignButton = getByRole('button', { name: 'Align center' });
+    expect(centerAlignButton).toBeTruthy();
+    expect(centerAlignButton.classList.contains('is-active')).toBeFalsy();
+
+    fireEvent.click(centerAlignButton);
+
+    setTimeout(() => {
+      expect(centerAlignButton.classList.contains('is-active')).toBeTruthy();
+    }, 50);
+  });
+
+  it('Should apply center alignment to editor after clicking button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('p[data-node-text-align="center"]')).toBeFalsy();
+
+    const centerAlignButton = getByRole('button', { name: 'Align center' });
+    expect(centerAlignButton).toBeTruthy();
+    fireEvent.click(centerAlignButton);
+
+    expect(baseElement.querySelector('p[data-node-text-align="center"]')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.spec.tsx

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+describe('Justify align button', () => {
+  it('Renders the justify align button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: 'Justify' })).toBeTruthy();
+  });
+
+  it('Applies active status after selecting justify align button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const justifyAlignButton = getByRole('button', { name: 'Justify' });
+    expect(justifyAlignButton).toBeTruthy();
+    expect(justifyAlignButton.classList.contains('is-active')).toBeFalsy();
+
+    fireEvent.click(justifyAlignButton);
+
+    setTimeout(() => {
+      expect(justifyAlignButton.classList.contains('is-active')).toBeTruthy();
+    }, 50);
+  });
+
+  it('Should apply justify alignment to editor after clicking button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('p[data-node-text-align="justify"]')).toBeFalsy();
+
+    const justifyAlignButton = getByRole('button', { name: 'Justify' });
+    expect(justifyAlignButton).toBeTruthy();
+    fireEvent.click(justifyAlignButton);
+
+    expect(baseElement.querySelector('p[data-node-text-align="justify"]')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.spec.tsx

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+describe('Left align button', () => {
+  it('Renders the left align button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: 'Align left' })).toBeTruthy();
+  });
+
+  it('Applies active status after selecting left align button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const leftAlignButton = getByRole('button', { name: 'Align left' });
+    expect(leftAlignButton).toBeTruthy();
+    expect(leftAlignButton.classList.contains('is-active')).toBeFalsy();
+
+    fireEvent.click(leftAlignButton);
+
+    setTimeout(() => {
+      expect(leftAlignButton.classList.contains('is-active')).toBeTruthy();
+    }, 50);
+  });
+
+  it('Should apply left alignment to editor after clicking button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
+
+    const leftAlignButton = getByRole('button', { name: 'Align left' });
+    expect(leftAlignButton).toBeTruthy();
+    fireEvent.click(leftAlignButton);
+
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.spec.tsx

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+describe('Right align button', () => {
+  it('Renders the right align button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: 'Align right' })).toBeTruthy();
+  });
+
+  it('Applies active status after selecting right align button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const rightAlignButton = getByRole('button', { name: 'Align right' });
+    expect(rightAlignButton).toBeTruthy();
+    expect(rightAlignButton.classList.contains('is-active')).toBeFalsy();
+
+    fireEvent.click(rightAlignButton);
+
+    setTimeout(() => {
+      expect(rightAlignButton.classList.contains('is-active')).toBeTruthy();
+    }, 50);
+  });
+
+  it('Should apply right alignment to editor after clicking button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('p[data-node-text-align="right"]')).toBeFalsy();
+
+    const rightAlignButton = getByRole('button', { name: 'Align right' });
+    expect(rightAlignButton).toBeTruthy();
+    fireEvent.click(rightAlignButton);
+
+    expect(baseElement.querySelector('p[data-node-text-align="right"]')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.spec.tsx

@@ -0,0 +1,56 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+const headings = [
+  ['Heading 1', 'h1'],
+  ['Heading 2', 'h2'],
+  ['Heading 3', 'h3'],
+  ['Heading 4', 'h4'],
+  ['Heading 5', 'h5'],
+  ['Heading 6', 'h6'],
+];
+
+describe('Heading button', () => {
+  it.each(headings)('Renders the "%s" heading button', (label) => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: label })).toBeTruthy();
+  });
+
+  it.each(headings)('Applies active status after selecting "%s" heading button', (label) => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const headingButton = getByRole('button', { name: label });
+    expect(headingButton).toBeTruthy();
+    expect(headingButton.className).not.toContain('is-active');
+
+    fireEvent.click(headingButton);
+    expect(headingButton.className).toContain('is-active');
+  });
+
+  it.each(headings)('Should render a check icon if button is active', (label) => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const headingButton = getByRole('button', { name: label });
+    expect(headingButton.querySelector('svg[data-testid="CheckIcon"]')).toBeFalsy();
+
+    fireEvent.click(headingButton);
+    expect(headingButton.querySelector('svg[data-testid="CheckIcon"]')).toBeTruthy();
+  });
+
+  it.each(headings)('Should apply "%s" heading tag to editor after clicking button', (label, tag) => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('div.remirror-editor h1')).toBeFalsy();
+
+    const headingButton = baseElement.querySelector(`button[title="${label}"]`) as HTMLButtonElement;
+    expect(headingButton).toBeTruthy();
+    fireEvent.click(headingButton);
+
+    expect(baseElement.querySelector(`div.remirror-editor ${tag}`)).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useChainedCommands, useActive } from '@remirror/react';
 import { HeadingExtension } from '@remirror/extension-heading';
-import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
+import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
 
 type HeadingButtonProps = {
   level: number;

package/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.spec.tsx

@@ -0,0 +1,30 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+describe('Paragraph button', () => {
+  it('Renders paragraph button', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('button[title="Paragraph"]')).toBeTruthy();
+  });
+
+  it('Paragraph button active status should be set on as default', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const paragraphButton = baseElement.querySelector('button[title="Paragraph"]') as HTMLButtonElement;
+    expect(paragraphButton).toBeTruthy();
+    expect(paragraphButton.className).toContain('is-active');
+  });
+
+  it('Should render a check icon if button is active', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const paragraphButton = baseElement.querySelector('button[title="Paragraph"]') as HTMLButtonElement;
+    expect(paragraphButton).toBeTruthy();
+    expect(paragraphButton.querySelector('svg[data-testid="CheckIcon"]')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import { useCommands, useChainedCommands, useActive } from '@remirror/react';
 import { ParagraphExtension } from '@remirror/extension-paragraph';
-import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
+import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
 
 const ParagraphButton = () => {
   const { convertParagraph } = useCommands<ParagraphExtension>();
   const chain = useChainedCommands();
 
   const active = useActive<ParagraphExtension>();
-  const enabled = convertParagraph.enabled();
 
   const handleSelect = () => {
     if (convertParagraph.enabled()) {
@@ -17,7 +16,7 @@ const ParagraphButton = () => {
   };
 
   return (
-    <DropdownButton handleOnClick={handleSelect} isDisabled={!enabled} isActive={active.paragraph()} label="Paragraph">
+    <DropdownButton handleOnClick={handleSelect} isDisabled={false} isActive={active.paragraph()} label="Paragraph">
       <p>Paragraph</p>
     </DropdownButton>
   );

package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.spec.tsx

@@ -0,0 +1,47 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+describe('Preformatted button', () => {
+  it('Renders the preformatted button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: 'Preformatted' })).toBeTruthy();
+  });
+
+  it('Applies active status after selecting preformatted button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const preformattedButton = getByRole('button', { name: 'Preformatted' });
+    expect(preformattedButton).toBeTruthy();
+    expect(preformattedButton.className).not.toContain('is-active');
+
+    fireEvent.click(preformattedButton);
+    expect(preformattedButton.className).toContain('is-active');
+  });
+
+  it('Should render a check icon if button is active', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const preformattedButton = getByRole('button', { name: 'Preformatted' });
+    expect(preformattedButton.querySelector('svg[data-testid="CheckIcon"]')).toBeFalsy();
+
+    fireEvent.click(preformattedButton);
+    expect(preformattedButton.querySelector('svg[data-testid="CheckIcon"]')).toBeTruthy();
+  });
+
+  it('Should apply preformatted tag to editor after clicking button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('div.remirror-editor pre')).toBeFalsy();
+
+    const preformattedButton = getByRole('button', { name: 'Preformatted' });
+    expect(preformattedButton).toBeTruthy();
+    fireEvent.click(preformattedButton);
+
+    expect(baseElement.querySelector(`div.remirror-editor pre`)).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useActive } from '@remirror/react';
 import { PreformattedExtension } from '../../../../Extensions/PreformattedExtension/PreformattedExtension';
-import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
+import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
 
 const PreformattedButton = () => {
   const { togglePreformatted } = useCommands<PreformattedExtension>();

package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.spec.tsx

@@ -0,0 +1,51 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../Editor/Editor';
+import React from 'react';
+
+const dropdownButtons = [
+  'Paragraph',
+  'Heading 1',
+  'Heading 2',
+  'Heading 3',
+  'Heading 4',
+  'Heading 5',
+  'Heading 6',
+  'Preformatted',
+];
+
+const navigateKeys = ['Enter', 'Space'];
+
+describe('Text type dropdown', () => {
+  it('should render the text type dropdown component', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('button#dropdownHoverButton')).toBeTruthy();
+  });
+
+  it.each(dropdownButtons)('should render %s button in text type dropdown', (type) => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const dropdownButton = baseElement.querySelector('button#dropdownHoverButton') as HTMLButtonElement;
+    expect(dropdownButton).toBeTruthy();
+    fireEvent.click(dropdownButton);
+
+    expect(baseElement.querySelector(`button[title="${type}"]`)).toBeTruthy();
+  });
+
+  it.each(navigateKeys)(`should display dropdown if '%s' is pressed while component is in focus`, async (key) => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const dropdownMenu = baseElement.querySelector('div.toolbar-dropdown__menu') as HTMLDivElement;
+    expect(dropdownMenu.className).not.toContain('block'); // Hidden
+
+    const dropdownButton = baseElement.querySelector('button#dropdownHoverButton') as HTMLButtonElement;
+    fireEvent.keyDown(dropdownButton, { code: key });
+
+    setTimeout(() => {
+      expect(dropdownMenu.className).toContain('block'); // Visible
+    }, 50);
+  });
+});

package/src/index.scss

@@ -13,6 +13,6 @@
 
 @import './ui/ToolbarButton/toolbar-button';
 @import './ui/ToolbarDropdown/toolbar-dropdown';
-@import './ui/DropdownButton/dropdown-button';
+@import './ui/ToolbarDropdownButton/toolbar-dropdown-button';
 
 @import './ui/Modal/modal';

package/src/ui/ToolbarDropdown/ToolbarDropdown.spec.tsx

@@ -0,0 +1,78 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import ToolbarDropdown from './ToolbarDropdown';
+
+describe('Toolbar dropdown', () => {
+  const ToolbarDropdownComponent = () => {
+    return (
+      <ToolbarDropdown label="Test dropdown">
+        <button>Test button</button>
+        <button>Test button 2</button>
+      </ToolbarDropdown>
+    );
+  };
+
+  it('Renders the dropdown button', () => {
+    render(<ToolbarDropdownComponent />);
+    // Check that the supplied label renders
+    const dropdownButton = screen.getByRole('button', { name: 'Test dropdown' });
+    expect(dropdownButton).toBeInTheDocument();
+  });
+
+  it('Renders the child elements for the dropdown', () => {
+    render(<ToolbarDropdownComponent />);
+    // Check that default value supplied renders
+    expect(screen.getByRole('button', { name: 'Test button' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Test button 2' })).toBeInTheDocument();
+  });
+
+  it('Renders the dropdown menu after clicking the dropdown button', () => {
+    const { baseElement } = render(<ToolbarDropdownComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const dropdownButton = baseElement.querySelector('button#dropdownHoverButton') as HTMLButtonElement;
+    expect(dropdownButton).toBeTruthy();
+    fireEvent.click(dropdownButton);
+
+    const dropdownMenu = baseElement.querySelector('div.toolbar-dropdown__menu') as HTMLDivElement;
+    expect(dropdownMenu).toBeTruthy();
+    expect(dropdownMenu.classList).toContain('block');
+  });
+
+  it('Handles the onBlur call when focusing out of the menu', () => {
+    const { baseElement } = render(<ToolbarDropdownComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const dropdownButton = baseElement.querySelector('button#dropdownHoverButton') as HTMLButtonElement;
+    expect(dropdownButton).toBeTruthy();
+    fireEvent.click(dropdownButton);
+
+    const dropdownMenu = baseElement.querySelector('div.toolbar-dropdown__menu') as HTMLDivElement;
+    expect(dropdownMenu).toBeTruthy();
+    expect(dropdownMenu.classList).toContain('block');
+
+    fireEvent.blur(dropdownMenu);
+
+    expect(dropdownMenu.classList).toContain('hidden');
+  });
+
+  it('Closes the dropdown menu after clicking a child element', () => {
+    const { baseElement } = render(<ToolbarDropdownComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const dropdownButton = baseElement.querySelector('button#dropdownHoverButton') as HTMLButtonElement;
+    expect(dropdownButton).toBeTruthy();
+    fireEvent.click(dropdownButton);
+
+    const dropdownMenu = baseElement.querySelector('div.toolbar-dropdown__menu') as HTMLDivElement;
+    expect(dropdownMenu).toBeTruthy();
+    expect(dropdownMenu.classList).toContain('block');
+
+    const childElement = screen.getByRole('button', { name: 'Test button' });
+    expect(childElement).toBeTruthy();
+    fireEvent.click(childElement);
+
+    expect(dropdownMenu.classList).toContain('hidden');
+  });
+});

package/src/ui/ToolbarDropdown/ToolbarDropdown.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { FocusEventHandler, useState } from 'react';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import 'flowbite';
 
 type ToolbarDropdownProps = {
   children: JSX.Element | JSX.Element[];
@@ -8,24 +7,35 @@ type ToolbarDropdownProps = {
 };
 
 const ToolbarDropdown = ({ children, label }: ToolbarDropdownProps) => {
+  const [isOpen, setOpen] = useState<boolean>(false);
+
+  const handleDropDown = () => {
+    setOpen(!isOpen);
+  };
+
+  const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {
+    if (event.relatedTarget?.id !== 'dropdownMenuButton' && !event.target?.className.includes('is-active')) {
+      isOpen && handleDropDown();
+    }
+  };
+
   return (
-    <>
-      <button
-        id="dropdownHoverButton"
-        data-dropdown-toggle="dropdown"
-        className="toolbar-dropdown__button"
-        type="button"
-      >
+    <div className="toolbar-dropdown" onBlur={handleBlur}>
+      <button id="dropdownHoverButton" className="toolbar-dropdown__button" onClick={handleDropDown}>
         <span className="toolbar-dropdown__label">{label}</span>
         <ExpandMoreIcon className="toolbar-dropdown__icon" aria-hidden="true" />
       </button>
+
       <div
         id="dropdown"
-        className="toolbar-dropdown__menu z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-169 dark:bg-gray-700"
+        className={`toolbar-dropdown__menu z-10 ${isOpen ? 'block' : 'hidden'} bg-white divide-y w-169`}
       >
-        <ul aria-labelledby="dropdownHoverButton">{children}</ul>
+        {/* eslint-disable-next-line */}
+        <ul aria-labelledby="dropdownHoverButton" onClick={handleDropDown}>
+          {children}
+        </ul>
       </div>
-    </>
+    </div>
   );
 };
 

package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss

@@ -1,28 +1,32 @@
-.toolbar-dropdown__button {
-  @apply flex font-base text-md font-semibold text-gray-600;
-  align-self: center;
-  align-items: center;
+.toolbar-dropdown {
+  &__button {
+    @apply flex items-center font-base text-md font-semibold text-gray-600;
+    align-self: center;
 
-  height: 2rem;
-  padding-left: 0.5rem;
+    height: 2rem;
+    padding-left: 0.5rem;
 
-  &:active,
-  &:hover,
-  &:focus {
-    background-color: rgba(black, 0.04);
-  }
+    &:active,
+    &:hover,
+    &:focus {
+      background-color: rgba(black, 0.04);
+    }
 
-  .toolbar-dropdown__label {
-    display: inline-flex;
-    width: 7rem;
-  }
+    .toolbar-dropdown__label {
+      display: inline-flex;
+      width: 7rem;
+    }
 
-  .toolbar-dropdown__icon {
-    width: 1rem;
-    height: 1.5rem;
+    .toolbar-dropdown__icon {
+      width: 1rem;
+      height: 1.5rem;
+    }
   }
-}
 
-.toolbar-dropdown__menu {
-  inset: 0rem auto auto 1rem !important;
+  &__menu {
+    @apply rounded shadow-sm border border-gray-300;
+
+    position: absolute;
+    margin-top: 0.75rem;
+  }
 }

package/src/ui/ToolbarDropdownButton/ToolbarDropdownButton.spec.tsx

@@ -0,0 +1,48 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import React from 'react';
+import ToolbarDropdownButton from './ToolbarDropdownButton';
+
+describe('Toolbar dropdown', () => {
+  const handleSelect = jest.fn();
+
+  const ToolbarDropdownButtonComponent = () => {
+    return (
+      <ToolbarDropdownButton handleOnClick={handleSelect} isDisabled={false} isActive={true} label={'Test label'}>
+        <h1>Test heading 1</h1>
+      </ToolbarDropdownButton>
+    );
+  };
+
+  const EmptyToolbarDropdownButtonComponent = () => {
+    return (
+      <ToolbarDropdownButton handleOnClick={handleSelect} isDisabled={false} isActive={false} label={'Test label'} />
+    );
+  };
+
+  it('Renders the dropdown menu button', () => {
+    const { baseElement } = render(<ToolbarDropdownButtonComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const buttonElement = baseElement.querySelector('button#dropdownMenuButton') as HTMLButtonElement;
+    expect(buttonElement).toBeTruthy();
+    expect(buttonElement.textContent).toBe('Test heading 1');
+  });
+
+  it('Renders the dropdown menu button active icon', () => {
+    const { baseElement } = render(<ToolbarDropdownButtonComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const iconElement = baseElement.querySelector('svg.dropdown-button-icon') as SVGElement;
+    expect(iconElement).toBeTruthy();
+  });
+
+  it('Should render the label as button text if no children are provided', () => {
+    const { baseElement } = render(<EmptyToolbarDropdownButtonComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const buttonElement = baseElement.querySelector('button#dropdownMenuButton') as HTMLButtonElement;
+    expect(buttonElement).toBeTruthy();
+    expect(buttonElement.textContent).toBe('Test label');
+  });
+});

package/src/ui/{DropdownButton/DropdownButton.tsx → ToolbarDropdownButton/ToolbarDropdownButton.tsx}

@@ -13,6 +13,7 @@ const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }
   return (
     <button
       aria-label={label}
+      id="dropdownMenuButton"
       title={label}
       type="button"
       onClick={handleOnClick}

package/src/ui/{DropdownButton/_dropdown-button.scss → ToolbarDropdownButton/_toolbar-dropdown-button.scss}

@@ -1,8 +1,14 @@
 .dropdown-button {
+  @apply px-2 py-1 text-gray-600;
+
   height: 40px;
   width: 100%;
   justify-content: space-between;
   align-items: center;
   display: flex;
-  @apply px-2 py-1 text-gray-600;
+
+  &:hover,
+  &:focus {
+    background-color: rgba(black, 0.04);
+  }
 }

package/tailwind.config.cjs

@@ -78,6 +78,6 @@ module.exports = {
       },
     },
   },
-  plugins: [require('flowbite/plugin')],
+  plugins: [],
   important: true,
 };