diff --git a/examples/js/autocomplete.css b/examples/js/autocomplete.css
index 94ccca054..9966477ae 100644
--- a/examples/js/autocomplete.css
+++ b/examples/js/autocomplete.css
@@ -43,16 +43,7 @@
-webkit-appearance: none;
}
-.aa-Completion {
- color: #999;
- left: 1px;
- position: absolute;
- transform: translateY(50%);
- z-index: 1;
-}
-
-.aa-Input,
-.aa-Completion {
+.aa-Input {
padding: 0 2.25rem;
}
@@ -77,7 +68,7 @@
z-index: 2;
}
-.aa-Dropdown {
+.aa-Panel {
background-color: #fff;
border: 1px solid rgba(150, 150, 150, 0.16);
border-radius: 3px;
@@ -89,25 +80,24 @@
width: 100%;
}
-.aa-Dropdown--stalled {
+.aa-Panel--stalled {
filter: grayscale(1);
opacity: 0.5;
transition: opacity 200ms ease-in;
}
-.aa-Dropdown a {
+.aa-Panel a {
color: inherit;
text-decoration: none;
}
-.aa-Dropdown ul {
+.aa-Panel ul {
list-style: none;
margin: 0;
padding: 0;
}
.aa-Item {
- align-items: center;
color: #23263b;
cursor: pointer;
display: flex;
diff --git a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
index 4b45a9dcb..55619c55b 100644
--- a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
+++ b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
@@ -47,7 +47,7 @@ describe('autocomplete-js', () => {
class="aa-InputWrapper"
>
{
diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
index eac64b92f..95bb876c9 100644
--- a/packages/autocomplete-js/src/autocomplete.ts
+++ b/packages/autocomplete-js/src/autocomplete.ts
@@ -36,7 +36,7 @@ export function autocomplete({
const form = document.createElement('form');
const label = document.createElement('label');
const resetButton = document.createElement('button');
- const dropdown = document.createElement('div');
+ const panel = document.createElement('div');
const autocomplete = createAutocomplete({
...props,
@@ -51,13 +51,13 @@ export function autocomplete({
});
const onResize = debounce(() => {
- if (!dropdown.hasAttribute('hidden')) {
+ if (!panel.hasAttribute('hidden')) {
setDropdownPosition();
}
}, 100);
function setDropdownPosition() {
- setProperties(dropdown, {
+ setProperties(panel, {
style: getDropdownPositionStyle({
dropdownPlacement,
container: root,
@@ -70,7 +70,7 @@ export function autocomplete({
setProperties(window as any, {
...autocomplete.getEnvironmentProps({
searchBoxElement: form,
- dropdownElement: dropdown,
+ dropdownElement: panel,
inputElement: input,
}),
onResize,
@@ -85,9 +85,7 @@ export function autocomplete({
class: concatClassNames(['aa-Form', classNames.form]),
});
setProperties(inputWrapper, {
- class: ['aa-InputWrapper', classNames.inputWrapper]
- .filter(Boolean)
- .join(' '),
+ class: concatClassNames(['aa-InputWrapper', classNames.inputWrapper]),
});
setProperties(input, {
...autocomplete.getInputProps({ inputElement: input }),
@@ -104,10 +102,10 @@ export function autocomplete({
class: concatClassNames(['aa-ResetButton', classNames.resetButton]),
innerHTML: resetIcon,
});
- setProperties(dropdown, {
+ setProperties(panel, {
...autocomplete.getDropdownProps(),
hidden: true,
- class: concatClassNames(['aa-Dropdown', classNames.dropdown]),
+ class: concatClassNames(['aa-Panel', classNames.panel]),
});
function render(state: AutocompleteCoreState) {
@@ -117,23 +115,23 @@ export function autocomplete({
autocomplete.getInputProps({ inputElement: input })
);
- dropdown.innerHTML = '';
+ panel.innerHTML = '';
if (state.isOpen) {
- setProperties(dropdown, {
+ setProperties(panel, {
hidden: false,
});
} else {
- setProperties(dropdown, {
+ setProperties(panel, {
hidden: true,
});
return;
}
if (state.status === 'stalled') {
- dropdown.classList.add('aa-Dropdown--stalled');
+ panel.classList.add('aa-panel--stalled');
} else {
- dropdown.classList.remove('aa-Dropdown--stalled');
+ panel.classList.remove('aa-panel--stalled');
}
const sections = state.collections.map((collection) => {
@@ -142,16 +140,13 @@ export function autocomplete({
const section = document.createElement('section');
setProperties(section, {
- class: concatClassNames(['aa-Section', classNames.section]),
+ class: concatClassNames(['aa-Source', classNames.source]),
});
if (source.templates.header) {
const header = document.createElement('div');
setProperties(header, {
- class: concatClassNames([
- 'aa-SectionHeader',
- classNames.sectionHeader,
- ]),
+ class: concatClassNames(['aa-SourceHeader', classNames.sourceHeader]),
});
renderTemplate(
source.templates.header({ root: header, state }),
@@ -164,14 +159,14 @@ export function autocomplete({
const menu = document.createElement('ul');
setProperties(menu, {
...autocomplete.getMenuProps(),
- class: concatClassNames(['aa-Menu', classNames.menu]),
+ class: concatClassNames(['aa-List', classNames.list]),
});
const menuItems = items.map((item) => {
const li = document.createElement('li');
setProperties(li, {
...autocomplete.getItemProps({ item, source }),
- class: concatClassNames(['aa-Item', classNames.item]),
+ class: concatClassNames(['aa-Item', classNames.Item]),
});
renderTemplate(source.templates.item({ root: li, item, state }), li);
@@ -188,10 +183,7 @@ export function autocomplete({
if (source.templates.footer) {
const footer = document.createElement('div');
setProperties(footer, {
- class: concatClassNames([
- 'aa-SectionFooter',
- classNames.sectionFooter,
- ]),
+ class: concatClassNames(['aa-SourceFooter', classNames.sourceFooter]),
});
renderTemplate(
source.templates.footer({ root: footer, state }),
@@ -203,7 +195,7 @@ export function autocomplete({
return section;
});
- renderDropdown({ root: dropdown, sections, state });
+ renderDropdown({ root: panel, sections, state });
}
inputWrapper.appendChild(input);
@@ -211,7 +203,7 @@ export function autocomplete({
inputWrapper.appendChild(resetButton);
form.appendChild(inputWrapper);
root.appendChild(form);
- root.appendChild(dropdown);
+ root.appendChild(panel);
containerElement.appendChild(root);
setDropdownPosition();
diff --git a/packages/autocomplete-js/src/types/index.ts b/packages/autocomplete-js/src/types/index.ts
index 43afdd89e..fe204e559 100644
--- a/packages/autocomplete-js/src/types/index.ts
+++ b/packages/autocomplete-js/src/types/index.ts
@@ -82,14 +82,13 @@ export interface AutocompleteOptions
label?: string;
inputWrapper?: string;
input?: string;
- completion?: string;
resetButton?: string;
- dropdown?: string;
- section?: string;
- sectionHeader?: string;
- menu?: string;
+ panel?: string;
+ source?: string;
+ sourceHeader?: string;
+ list?: string;
item?: string;
- sectionFooter?: string;
+ sourceFooter?: string;
};
/**
* Function called to render the autocomplete results. It is useful for rendering sections in different row or column layouts.
diff --git a/packages/website/docs/autocomplete-js.md b/packages/website/docs/autocomplete-js.md
index 76bac6a31..3e2b77cff 100644
--- a/packages/website/docs/autocomplete-js.md
+++ b/packages/website/docs/autocomplete-js.md
@@ -88,14 +88,13 @@ type ClassNames = {
label?: string;
inputWrapper?: string;
input?: string;
- completion?: string;
resetButton?: string;
- dropdown?: string;
- section?: string;
- sectionHeader?: string;
- menu?: string;
+ panel?: string;
+ source?: string;
+ sourceHeader?: string;
+ list?: string;
item?: string;
- sectionFooter?: string;
+ sourceFooter?: string;
};
```