feat(js): rename detachedMediaQuery

packages/autocomplete-js/src/__tests__/detachedMediaQuery.test.ts

@@ -0,0 +1,3 @@
+describe('detachedMediaQuery', () => {
+  test.todo('tests');
+});

packages/autocomplete-js/src/autocomplete.ts

@@ -36,8 +36,8 @@ export function autocomplete<TItem extends BaseItem>(
     AutocompleteOptions<TItem>['onStateChange']
   >(undefined);
   const props = reactive(() => getDefaultOptions(optionsRef.current));
-  const isTouch = reactive(
-    () => window.matchMedia(props.value.renderer.touchMediaQuery).matches
+  const isDetached = reactive(
+    () => window.matchMedia(props.value.renderer.detachedMediaQuery).matches
   );
   const shouldPanelOpen =
     optionsRef.current.shouldPanelOpen ||
@@ -65,7 +65,7 @@ export function autocomplete<TItem extends BaseItem>(
         onStateChangeRef.current?.(options as any);
         props.value.core.onStateChange?.(options as any);
       },
-      shouldPanelOpen: isTouch ? () => true : shouldPanelOpen,
+      shouldPanelOpen: isDetached ? () => true : shouldPanelOpen,
     })
   );
   const lastStateRef = createRef<AutocompleteState<TItem>>({
@@ -104,7 +104,7 @@ export function autocomplete<TItem extends BaseItem>(
       autocomplete: autocomplete.value,
       autocompleteScopeApi,
       classNames: props.value.renderer.classNames,
-      isTouch: isTouch.value,
+      isDetached: isDetached.value,
       placeholder: props.value.core.placeholder,
       propGetters,
       state: lastStateRef.current,
@@ -113,7 +113,7 @@ export function autocomplete<TItem extends BaseItem>(
 
   function setPanelPosition() {
     setProperties(dom.value.panel, {
-      style: isTouch.value
+      style: isDetached.value
         ? {}
         : getPanelPlacementStyle({
             panelPlacement: props.value.renderer.panelPlacement,
@@ -135,9 +135,8 @@ export function autocomplete<TItem extends BaseItem>(
       createElement: props.value.renderer.renderer.createElement,
       dom: dom.value,
       Fragment: props.value.renderer.renderer.Fragment,
-      isTouch: isTouch.value,
-      panelContainer: isTouch.value
-        ? dom.value.touchOverlay
+      panelContainer: isDetached.value
+        ? dom.value.detachedOverlay
         : props.value.renderer.panelContainer,
       propGetters,
       state: lastStateRef.current,
@@ -176,15 +175,15 @@ export function autocomplete<TItem extends BaseItem>(
   });
 
   runEffect(() => {
-    const panelContainerElement = isTouch.value
+    const panelContainerElement = isDetached.value
       ? document.body
       : props.value.renderer.panelContainer;
-    const panelElement = isTouch.value
-      ? dom.value.touchOverlay
+    const panelElement = isDetached.value
+      ? dom.value.detachedOverlay
       : dom.value.panel;
 
-    if (isTouch.value && lastStateRef.current.isOpen) {
-      dom.value.openTouchOverlay();
+    if (isDetached.value && lastStateRef.current.isOpen) {
+      dom.value.openDetachedOverlay();
     }
 
     scheduleRender(lastStateRef.current);
@@ -231,12 +230,12 @@ export function autocomplete<TItem extends BaseItem>(
 
   runEffect(() => {
     const onResize = debounce<Event>(() => {
-      const previousIsTouch = isTouch.value;
-      isTouch.value = window.matchMedia(
-        props.value.renderer.touchMediaQuery
+      const previousisDetached = isDetached.value;
+      isDetached.value = window.matchMedia(
+        props.value.renderer.detachedMediaQuery
       ).matches;
 
-      if (previousIsTouch !== isTouch.value) {
+      if (previousisDetached !== isDetached.value) {
         update({});
       } else {
         requestAnimationFrame(setPanelPosition);

packages/autocomplete-js/src/components/Input.ts

@@ -12,7 +12,7 @@ type InputProps = {
   autocompleteScopeApi: AutocompleteScopeApi<any>;
   getInputProps: AutocompletePropGetters<any>['getInputProps'];
   getInputPropsCore: AutocompleteCoreApi<any>['getInputProps'];
-  onTouchEscape?(): void;
+  onDetachedEscape?(): void;
   state: AutocompleteState<any>;
 };
 
@@ -21,7 +21,7 @@ export const Input: Component<InputProps, HTMLInputElement> = ({
   classNames,
   getInputProps,
   getInputPropsCore,
-  onTouchEscape,
+  onDetachedEscape,
   state,
   ...props
 }) => {
@@ -36,8 +36,8 @@ export const Input: Component<InputProps, HTMLInputElement> = ({
   setProperties(element, {
     ...inputProps,
     onKeyDown(event: KeyboardEvent) {
-      if (onTouchEscape && event.key === 'Escape') {
-        onTouchEscape();
+      if (onDetachedEscape && event.key === 'Escape') {
+        onDetachedEscape();
         return;
       }
 

packages/autocomplete-js/src/createAutocompleteDom.ts

@@ -18,26 +18,26 @@ type CreateDomProps<TItem extends BaseItem> = {
   autocomplete: AutocompleteCoreApi<TItem>;
   autocompleteScopeApi: AutocompleteScopeApi<TItem>;
   classNames: AutocompleteClassNames;
-  isTouch: boolean;
+  isDetached: boolean;
   placeholder?: string;
   propGetters: AutocompletePropGetters<TItem>;
   state: AutocompleteState<TItem>;
 };
 
 type CreateAutocompleteDomReturn = AutocompleteDom & {
-  openTouchOverlay(): void;
+  openDetachedOverlay(): void;
 };
 
 export function createAutocompleteDom<TItem extends BaseItem>({
   autocomplete,
   autocompleteScopeApi,
   classNames,
-  isTouch,
+  isDetached,
   placeholder = 'Search',
   propGetters,
   state,
 }: CreateDomProps<TItem>): CreateAutocompleteDomReturn {
-  function onTouchOverlayClose() {
+  function onDetachedOverlayClose() {
     autocomplete.setQuery('');
     autocomplete.setIsOpen(false);
     autocomplete.refresh();
@@ -52,8 +52,8 @@ export function createAutocompleteDom<TItem extends BaseItem>({
     class: classNames.root,
     ...rootProps,
   });
-  const touchOverlay = createDomElement('div', {
-    class: classNames.touchOverlay,
+  const detachedOverlay = createDomElement('div', {
+    class: classNames.detachedOverlay,
   });
 
   const labelProps = propGetters.getLabelProps({
@@ -87,10 +87,10 @@ export function createAutocompleteDom<TItem extends BaseItem>({
     getInputProps: propGetters.getInputProps,
     getInputPropsCore: autocomplete.getInputProps,
     autocompleteScopeApi,
-    onTouchEscape: isTouch
+    onDetachedEscape: isDetached
       ? () => {
-          document.body.removeChild(touchOverlay);
-          onTouchOverlayClose();
+          document.body.removeChild(detachedOverlay);
+          onDetachedOverlayClose();
         }
       : undefined,
   });
@@ -134,51 +134,50 @@ export function createAutocompleteDom<TItem extends BaseItem>({
     });
   }
 
-  function openTouchOverlay() {
-    document.body.appendChild(touchOverlay);
+  function openDetachedOverlay() {
+    document.body.appendChild(detachedOverlay);
     input.focus();
   }
 
-  if (isTouch) {
-    const touchSearchButtonIcon = createDomElement('div', {
-      class: classNames.touchSearchButtonIcon,
+  if (isDetached) {
+    const detachedSearchButtonIcon = createDomElement('div', {
+      class: classNames.detachedSearchButtonIcon,
       children: [SearchIcon({})],
     });
-    const touchSearchButtonPlaceholder = createDomElement('div', {
-      class: classNames.touchSearchButtonPlaceholder,
+    const detachedSearchButtonPlaceholder = createDomElement('div', {
+      class: classNames.detachedSearchButtonPlaceholder,
       textContent: placeholder,
     });
-    const touchSearchButton = createDomElement('button', {
-      class: classNames.touchSearchButton,
+    const detachedSearchButton = createDomElement('button', {
+      class: classNames.detachedSearchButton,
       onClick(event: MouseEvent) {
         event.preventDefault();
-        document.body.appendChild(touchOverlay);
-        input.focus();
+        openDetachedOverlay();
       },
-      children: [touchSearchButtonIcon, touchSearchButtonPlaceholder],
+      children: [detachedSearchButtonIcon, detachedSearchButtonPlaceholder],
     });
-    const touchCancelButton = createDomElement('button', {
-      class: classNames.touchCancelButton,
+    const detachedCancelButton = createDomElement('button', {
+      class: classNames.detachedCancelButton,
       textContent: 'Cancel',
       onClick() {
-        document.body.removeChild(touchOverlay);
-        onTouchOverlayClose();
+        document.body.removeChild(detachedOverlay);
+        onDetachedOverlayClose();
       },
     });
-    const touchFormContainer = createDomElement('div', {
-      class: classNames.touchFormContainer,
-      children: [form, touchCancelButton],
+    const detachedFormContainer = createDomElement('div', {
+      class: classNames.detachedFormContainer,
+      children: [form, detachedCancelButton],
     });
 
-    touchOverlay.appendChild(touchFormContainer);
-    root.appendChild(touchSearchButton);
+    detachedOverlay.appendChild(detachedFormContainer);
+    root.appendChild(detachedSearchButton);
   } else {
     root.appendChild(form);
   }
 
   return {
-    openTouchOverlay,
-    touchOverlay,
+    openDetachedOverlay,
+    detachedOverlay,
     inputWrapper,
     input,
     root,

packages/autocomplete-js/src/getDefaultOptions.ts

@@ -15,6 +15,12 @@ import {
 import { getHTMLElement, mergeClassNames } from './utils';
 
 const defaultClassNames: AutocompleteClassNames = {
+  detachedCancelButton: 'aa-TouchCancelButton',
+  detachedFormContainer: 'aa-TouchFormContainer',
+  detachedOverlay: 'aa-TouchOverlay',
+  detachedSearchButton: 'aa-TouchSearchButton',
+  detachedSearchButtonIcon: 'aa-TouchSearchButtonIcon',
+  detachedSearchButtonPlaceholder: 'aa-TouchSearchButtonPlaceholder',
   form: 'aa-Form',
   input: 'aa-Input',
   inputWrapper: 'aa-InputWrapper',
@@ -33,12 +39,6 @@ const defaultClassNames: AutocompleteClassNames = {
   sourceHeader: 'aa-SourceHeader',
   sourceEmpty: 'aa-SourceEmpty',
   submitButton: 'aa-SubmitButton',
-  touchCancelButton: 'aa-TouchCancelButton',
-  touchFormContainer: 'aa-TouchFormContainer',
-  touchOverlay: 'aa-TouchOverlay',
-  touchSearchButton: 'aa-TouchSearchButton',
-  touchSearchButtonIcon: 'aa-TouchSearchButtonIcon',
-  touchSearchButtonPlaceholder: 'aa-TouchSearchButtonPlaceholder',
 };
 
 const defaultRender: AutocompleteRender<any> = ({ children }, root) => {
@@ -69,7 +69,7 @@ export function getDefaultOptions<TItem extends BaseItem>(
     render,
     renderEmpty,
     renderer,
-    touchMediaQuery,
+    detachedMediaQuery,
     ...core
   } = options;
 
@@ -102,7 +102,8 @@ export function getDefaultOptions<TItem extends BaseItem>(
       render: render ?? defaultRender,
       renderEmpty,
       renderer: renderer ?? defaultRenderer,
-      touchMediaQuery: touchMediaQuery ?? '(hover: none) and (pointer: coarse)',
+      detachedMediaQuery:
+        detachedMediaQuery ?? '(hover: none) and (pointer: coarse)',
     },
     core,
   };

packages/autocomplete-js/src/render.tsx

@@ -23,7 +23,6 @@ type RenderProps<TItem extends BaseItem> = {
   createElement: Pragma;
   dom: AutocompleteDom;
   Fragment: PragmaFrag;
-  isTouch: boolean;
   panelContainer: HTMLElement;
   propGetters: AutocompletePropGetters<TItem>;
   state: AutocompleteState<TItem>;
@@ -67,7 +66,6 @@ export function renderPanel<TItem extends BaseItem>(
     createElement,
     dom,
     Fragment,
-    isTouch,
     panelContainer,
     propGetters,
     state,
@@ -87,8 +85,6 @@ export function renderPanel<TItem extends BaseItem>(
     panelContainer.appendChild(dom.panel);
   }
 
-  dom.panel.classList.toggle('aa-Panel--desktop', !isTouch);
-  dom.panel.classList.toggle('aa-Panel--touch', isTouch);
   dom.panel.classList.toggle('aa-Panel--stalled', state.status === 'stalled');
 
   const sections = state.collections.map(({ source, items }, sourceIndex) => (

packages/autocomplete-js/src/types/AutocompleteClassNames.ts

@@ -1,4 +1,10 @@
 export type AutocompleteClassNames = {
+  detachedCancelButton: string;
+  detachedFormContainer: string;
+  detachedOverlay: string;
+  detachedSearchButton: string;
+  detachedSearchButtonIcon: string;
+  detachedSearchButtonPlaceholder: string;
   form: string;
   input: string;
   inputWrapper: string;
@@ -13,14 +19,8 @@ export type AutocompleteClassNames = {
   resetButton: string;
   root: string;
   source: string;
+  sourceEmpty: string;
   sourceFooter: string;
   sourceHeader: string;
-  sourceEmpty: string;
   submitButton: string;
-  touchCancelButton: string;
-  touchFormContainer: string;
-  touchOverlay: string;
-  touchSearchButton: string;
-  touchSearchButtonIcon: string;
-  touchSearchButtonPlaceholder: string;
 };

packages/autocomplete-js/src/types/AutocompleteDom.ts

@@ -8,5 +8,5 @@ export type AutocompleteDom = {
   resetButton: HTMLButtonElement;
   loadingIndicator: HTMLDivElement;
   panel: HTMLDivElement;
-  touchOverlay: HTMLDivElement;
+  detachedOverlay: HTMLDivElement;
 };

packages/autocomplete-js/src/types/AutocompleteOptions.ts

@@ -38,12 +38,12 @@ export interface AutocompleteOptions<TItem extends BaseItem>
    */
   panelContainer?: string | HTMLElement;
   /**
-   * The Media Query to turn Autocomplete into a touch experience.
+   * The Media Query to turn Autocomplete into a detached experience.
    *
    * @default "(hover: none) and (pointer: coarse)"
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
    */
-  touchMediaQuery?: string;
+  detachedMediaQuery?: string;
   getSources?: (
     params: GetSourcesParams<TItem>
   ) => MaybePromise<Array<AutocompleteSource<TItem>>>;

packages/website/docs/autocomplete-js.md

@@ -96,6 +96,12 @@ The class names to inject in each created DOM element. It it useful to design wi
 
 ```ts
 type ClassNames = Partial<{
+  detachedCancelButton: string;
+  detachedFormContainer: string;
+  detachedOverlay: string;
+  detachedSearchButton: string;
+  detachedSearchButtonIcon: string;
+  detachedSearchButtonPlaceholder: string;
   form: string;
   input: string;
   inputWrapper: string;
@@ -113,12 +119,6 @@ type ClassNames = Partial<{
   sourceFooter: string;
   sourceHeader: string;
   submitButton: string;
-  touchCancelButton: string;
-  touchFormContainer: string;
-  touchOverlay: string;
-  touchSearchButton: string;
-  touchSearchButtonIcon: string;
-  touchSearchButtonPlaceholder: string;
 }>;
 ```