Combobox using Ariakit

.nvmrc

@@ -1 +1 @@
-v16
+v20

package.json

@@ -20,6 +20,7 @@
     "url": "git+https://github.com/miljodir/component-library"
   },
   "devDependencies": {
+    "@ariakit/react": "^0.4.15",
     "@babel/core": "^7.23.6",
     "@babel/plugin-syntax-flow": "^7.26.0",
     "@babel/preset-env": "^7.23.6",
@@ -50,6 +51,7 @@
     "eslint-plugin-autofix": "^1.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-storybook": "^0.11.1",
+    "match-sorter": "^8.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^8.4.7",

packages/css/src/colors.css

@@ -3,6 +3,7 @@
   --mdPrimaryColor160: #003b3a;
   --mdPrimaryColor120: #005251;
   --mdPrimaryColor80: #337e7d;
+  --mdPrimaryColor40: #99bebe;
   --mdPrimaryColor30: #b2cece;
   --mdPrimaryColor20: #ccdfde;
   --mdPrimaryColor10: #e5eeee;
@@ -28,7 +29,7 @@
   --mdGreyColor10: #e8e8e8;
   --mdGreyColor20: #d2d2d2;
   --mdGreyColor40: #a6a6a6;
-  --mdGreyColor60: #808080;
+  --mdGreyColor60: #767676;
   --mdGreyColor80: #4e4e4e;
 
   --mdGreenColor60: #b3e8c2;

packages/css/src/formElements/combobox/combobox.css

@@ -0,0 +1,160 @@
+.md-combobox {
+  font-family: 'Open sans';
+  width: 100%;
+}
+
+/* Label */
+.md-combobox__label-wrapper {
+  margin-bottom: 0.5rem;
+}
+.md-combobox__label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.md-combobox__label label {
+  font-weight: 600;
+}
+
+.md-combobox__input-wrapper {
+  position: relative;
+}
+.md-combobox__input {
+  width: 100%;
+  font-size: 1rem;
+  line-height: 150%;
+  border: 1px solid var(--mdPrimaryColor);
+  padding: 0.75rem 4rem 0.75rem 2.5rem;
+}
+.md-combobox--large .md-combobox__input {
+  padding: 1rem 4rem 1rem 2.5rem;
+}
+.md-combobox--small .md-combobox__input {
+  padding: 0.5rem 4rem 0.5rem 2.5rem;
+}
+.md-combobox__input::placeholder {
+  color: var(--mdTextColor);
+  font-size: 1rem;
+}
+.md-combobox__input[data-focus-visible],
+.md-combobox__input[aria-expanded='true'] {
+  outline: 2px solid var(--mdPrimaryColor);
+  outline-offset: -2px;
+}
+
+.md-combobox__input[data-focus-visible]::placeholder,
+.md-combobox__input[aria-expanded='true']::placeholder {
+  color: var(--mdGreyColor60);
+}
+.md-combobox__input:disabled {
+  background-color: var(--mdGreyColor20);
+  border-color: var(--mdGreyColor60);
+}
+.md-combobox__input:disabled::placeholder {
+  color: var(--mdGreyColor60);
+}
+.md-combobox__input--before {
+  position: absolute;
+  display: flex;
+  top: 50%;
+  left: 0.75rem;
+  color: var(--mdPrimaryColor);
+  width: 1rem;
+  height: 1rem;
+  transform: translateY(-50%);
+}
+.md-combobox__input-wrapper--disabled .md-combobox__input--before {
+  color: var(--mdGreyColor60);
+}
+.md-combobox__input--after {
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--mdPrimaryColor);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+.md-combobox__input-wrapper--disabled .md-combobox__input--after {
+  color: var(--mdGreyColor60);
+}
+.md-combobox__input--after svg {
+  width: 1rem;
+  height: 1rem;
+  rotate: 90deg;
+  transition: rotate 0.2s ease-in;
+}
+.md-combobox__input[aria-expanded='true'] + .md-combobox__input--after svg {
+  rotate: -90deg;
+  transition: rotate 0.2s ease-in;
+}
+
+/* Popover */
+.md-combobox__popover {
+  background-color: #fff;
+  max-height: min(var(--popover-available-height, 300px), 300px);
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding-top: 0.25rem;
+  border: 2px solid var(--mdPrimaryColor);
+  border-top: 0;
+  opacity: 0;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-duration: 200ms;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateY(-5%);
+}
+.md-combobox__popover[data-enter] {
+  opacity: 1;
+  transform: translateY(0%);
+}
+
+/* Combobox item */
+.md-combobox__checkbox-item {
+  padding: 0.75rem;
+  cursor: pointer;
+}
+.md-combobox--large .md-combobox__checkbox-item {
+  padding: 1rem 0.75rem;
+}
+.md-combobox--small .md-combobox__checkbox-item {
+  padding: 0.5rem 0.75rem;
+}
+.md-combobox__checkbox-item[aria-selected='true'] {
+  background-color: var(--mdPrimaryColor20);
+}
+.md-combobox__checkbox-item[data-focus-visible],
+.md-combobox__checkbox-item[data-active-item] {
+  background-color: var(--mdPrimaryColor40);
+
+  .md-checkbox__label::before {
+    background-color: #fff;
+  }
+}
+
+/* Help text */
+.md-combobox__help-text {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.15s ease-out;
+}
+.md-combobox__help-text--open {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  max-height: 2000px;
+  transition: max-height 0.5s ease-in;
+}
+
+/* Error */
+.md-combobox__error {
+  color: var(--mdErrorColor);
+  font-size: 0.88em;
+}
+.md-combobox--has-error .md-combobox__input,
+.md-combobox--has-error .md-combobox__popover {
+  outline-color: var(--mdErrorColor);
+  border-color: var(--mdErrorColor);
+}

packages/css/src/index.css

@@ -26,6 +26,7 @@
 @import './formElements/multiselect/multiselect.css';
 @import './formElements/multiautocomplete/multiautocomplete.css';
 @import './formElements/fileupload/fileupload.css';
+@import './formElements/combobox/combobox.css';
 @import './utils.css';
 
 html {

packages/react/package.json

@@ -17,7 +17,9 @@
     "url": "git+https://github.com/miljodir/md-components"
   },
   "dependencies": {
-    "classnames": "^2.3.2"
+    "@ariakit/react": "^0.4.15",
+    "classnames": "^2.3.2",
+    "match-sorter": "^8.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.10.5",

packages/react/src/formElements/MdAutocomplete.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React, { useId, useRef, useState } from 'react';
+import React, { useEffect, useId, useRef, useState } from 'react';
 import MdHelpButton from '../help/MdHelpButton';
 import MdHelpText from '../help/MdHelpText';
 import useDropdown from '../hooks/useDropdown';
@@ -108,6 +108,11 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
       displayValue = '';
     }
 
+    useEffect(() => {
+      // eslint-disable-next-line no-console
+      console.warn('Notice: MdAutocomplete is deprecated and will be removed in a future version.');
+    }, []);
+
     const handleOptionClick = (option: MdAutocompleteOption) => {
       onSelectOption(option);
       setOpen(false);