feat(js): introduce Props API

packages/autocomplete-js/src/autocomplete.ts

@@ -24,6 +24,14 @@ export function autocomplete<TItem extends BaseItem>({
   render: renderer = defaultRenderer,
   panelPlacement = 'input-wrapper-width',
   classNames = {},
+  getEnvironmentProps = ({ props }) => props,
+  getFormProps = ({ props }) => props,
+  getInputProps = ({ props }) => props,
+  getItemProps = ({ props }) => props,
+  getLabelProps = ({ props }) => props,
+  getListProps = ({ props }) => props,
+  getPanelProps = ({ props }) => props,
+  getRootProps = ({ props }) => props,
   ...props
 }: AutocompleteOptions<TItem>): AutocompleteApi<TItem> {
   const { runEffect, cleanupEffects } = createEffectWrapper();
@@ -41,6 +49,16 @@ export function autocomplete<TItem extends BaseItem>({
       props.onStateChange?.(options);
     },
   });
+  const initialState: AutocompleteState<TItem> = {
+    collections: [],
+    completion: null,
+    context: {},
+    isOpen: false,
+    query: '',
+    selectedItemId: null,
+    status: 'idle',
+    ...props.initialState,
+  };
 
   const {
     inputWrapper,
@@ -53,8 +71,17 @@ export function autocomplete<TItem extends BaseItem>({
     root,
     panel,
   } = createAutocompleteDom({
-    ...autocomplete,
+    state: initialState,
+    autocomplete,
     classNames,
+    getEnvironmentProps,
+    getFormProps,
+    getInputProps,
+    getItemProps,
+    getLabelProps,
+    getListProps,
+    getPanelProps,
+    getRootProps,
   });
 
   function setPanelPosition() {
@@ -92,19 +119,17 @@ export function autocomplete<TItem extends BaseItem>({
 
   runEffect(() => {
     const panelRoot = getHTMLElement(panelContainer);
-    const state: AutocompleteState<TItem> = {
-      collections: [],
-      completion: null,
-      context: {},
-      isOpen: false,
-      query: '',
-      selectedItemId: null,
-      status: 'idle',
-      ...props.initialState,
-    };
     render(renderer, {
-      state,
-      ...autocomplete,
+      state: initialState,
+      autocomplete,
+      getEnvironmentProps,
+      getFormProps,
+      getInputProps,
+      getItemProps,
+      getLabelProps,
+      getListProps,
+      getPanelProps,
+      getRootProps,
       classNames,
       panelRoot,
       root,
@@ -136,7 +161,15 @@ export function autocomplete<TItem extends BaseItem>({
     }>(({ state }) => {
       unmountRef.current = render(renderer, {
         state,
-        ...autocomplete,
+        autocomplete,
+        getEnvironmentProps,
+        getFormProps,
+        getInputProps,
+        getItemProps,
+        getLabelProps,
+        getListProps,
+        getPanelProps,
+        getRootProps,
         classNames,
         panelRoot,
         root,

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

@@ -1,19 +1,28 @@
 import { AutocompleteApi as AutocompleteCoreApi } from '@algolia/autocomplete-core';
 
+import { AutocompletePropGetters, AutocompleteState } from '../types';
 import { Component, WithClassNames } from '../types/Component';
 import { concatClassNames, setProperties } from '../utils';
 
 type InputProps = WithClassNames<{
-  getInputProps: AutocompleteCoreApi<any>['getInputProps'];
+  state: AutocompleteState<any>;
+  getInputProps: AutocompletePropGetters<any>['getInputProps'];
+  getInputPropsCore: AutocompleteCoreApi<any>['getInputProps'];
 }>;
 
 export const Input: Component<InputProps, HTMLInputElement> = ({
   classNames,
   getInputProps,
+  getInputPropsCore,
+  state,
 }) => {
   const element = document.createElement('input');
   setProperties(element, {
-    ...getInputProps({ inputElement: element }),
+    ...getInputProps({
+      state,
+      props: getInputPropsCore({ inputElement: element }),
+      inputElement: element,
+    }),
     class: concatClassNames(['aa-Input', classNames.input]),
   });
 

packages/autocomplete-js/src/createAutocompleteDom.ts

@@ -14,29 +14,61 @@ import {
   Root,
   SubmitButton,
 } from './components';
-import { AutocompleteClassNames, AutocompleteDom } from './types';
+import {
+  AutocompleteClassNames,
+  AutocompleteDom,
+  AutocompletePropGetters,
+  AutocompleteState,
+} from './types';
 
-type CreateDomProps<TItem extends BaseItem> = AutocompleteCoreApi<TItem> & {
+type CreateDomProps<TItem extends BaseItem> = AutocompletePropGetters<TItem> & {
   classNames: Partial<AutocompleteClassNames>;
+  autocomplete: AutocompleteCoreApi<TItem>;
+  state: AutocompleteState<TItem>;
 };
 
 export function createAutocompleteDom<TItem extends BaseItem>({
+  autocomplete,
+  classNames,
   getRootProps,
   getFormProps,
   getLabelProps,
   getInputProps,
   getPanelProps,
-  classNames,
+  state,
 }: CreateDomProps<TItem>): AutocompleteDom {
-  const root = Root({ classNames, ...getRootProps({}) });
+  const root = Root({
+    classNames,
+    ...getRootProps({
+      state,
+      props: autocomplete.getRootProps({}),
+    }),
+  });
   const inputWrapper = InputWrapper({ classNames });
-  const label = Label({ classNames, ...getLabelProps({}) });
-  const input = Input({ classNames, getInputProps });
+  const label = Label({
+    classNames,
+    ...getLabelProps({ state, props: autocomplete.getLabelProps({}) }),
+  });
+  const input = Input({
+    classNames,
+    state,
+    getInputProps,
+    getInputPropsCore: autocomplete.getInputProps,
+  });
   const submitButton = SubmitButton({ classNames });
   const resetButton = ResetButton({ classNames });
   const loadingIndicator = LoadingIndicator({ classNames });
-  const form = Form({ classNames, ...getFormProps({ inputElement: input }) });
-  const panel = Panel({ classNames, ...getPanelProps({}) });
+  const form = Form({
+    classNames,
+    ...getFormProps({
+      state,
+      props: autocomplete.getFormProps({ inputElement: input }),
+    }),
+  });
+  const panel = Panel({
+    classNames,
+    ...getPanelProps({ state, props: autocomplete.getPanelProps({}) }),
+  });
 
   label.appendChild(submitButton);
   inputWrapper.appendChild(input);

packages/autocomplete-js/src/render.ts

@@ -13,6 +13,7 @@ import { renderTemplate } from './renderTemplate';
 import {
   AutocompleteClassNames,
   AutocompleteDom,
+  AutocompletePropGetters,
   AutocompleteRenderer,
   AutocompleteState,
 } from './types';
@@ -22,12 +23,14 @@ type RenderProps<TItem extends BaseItem> = {
   state: AutocompleteState<TItem>;
   classNames: Partial<AutocompleteClassNames>;
   panelRoot: HTMLElement;
-} & AutocompleteCoreApi<TItem> &
-  AutocompleteDom;
+  autocomplete: AutocompleteCoreApi<TItem>;
+} & AutocompleteDom &
+  AutocompletePropGetters<TItem>;
 
 export function render<TItem extends BaseItem>(
   renderer: AutocompleteRenderer<TItem>,
   {
+    autocomplete,
     state,
     getRootProps,
     getInputProps,
@@ -43,8 +46,18 @@ export function render<TItem extends BaseItem>(
     panel,
   }: RenderProps<TItem>
 ): () => void {
-  setPropertiesWithoutEvents(root, getRootProps({}));
-  setPropertiesWithoutEvents(input, getInputProps({ inputElement: input }));
+  setPropertiesWithoutEvents(
+    root,
+    getRootProps({ state, props: autocomplete.getRootProps({}) })
+  );
+  setPropertiesWithoutEvents(
+    input,
+    getInputProps({
+      state,
+      props: autocomplete.getInputProps({ inputElement: input }),
+      inputElement: input,
+    })
+  );
   setPropertiesWithoutEvents(resetButton, { hidden: !state.query });
   setProperties(submitButton, { hidden: state.status === 'stalled' });
   setProperties(loadingIndicator, { hidden: state.status !== 'stalled' });
@@ -88,14 +101,17 @@ export function render<TItem extends BaseItem>(
     if (items.length > 0) {
       const listElement = SourceList({
         classNames,
-        ...getListProps(),
+        ...getListProps({ state, props: autocomplete.getListProps({}) }),
       });
       const listFragment = document.createDocumentFragment();
 
       items.forEach((item) => {
         const itemElement = SourceItem({
           classNames,
-          ...getItemProps({ item, source }),
+          ...getItemProps({
+            state,
+            props: autocomplete.getItemProps({ item, source }),
+          }),
         });
 
         renderTemplate({

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

@@ -6,6 +6,7 @@ import {
 import { MaybePromise } from '@algolia/autocomplete-shared';
 
 import { AutocompleteClassNames } from './AutocompleteClassNames';
+import { AutocompletePropGetters } from './AutocompletePropGetters';
 import { AutocompleteSource } from './AutocompleteSource';
 import { AutocompleteState } from './AutocompleteState';
 
@@ -16,7 +17,8 @@ export type AutocompleteRenderer<TItem extends BaseItem> = (params: {
 }) => void;
 
 export interface AutocompleteOptions<TItem extends BaseItem>
-  extends AutocompleteCoreOptions<TItem> {
+  extends AutocompleteCoreOptions<TItem>,
+    Partial<AutocompletePropGetters<TItem>> {
   /**
    * The container for the Autocomplete search box.
    *

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

@@ -0,0 +1,42 @@
+import {
+  BaseItem,
+  AutocompleteApi as AutocompleteCoreApi,
+} from '@algolia/autocomplete-core';
+
+import { AutocompleteState } from './AutocompleteState';
+
+export type AutocompletePropGetters<TItem extends BaseItem> = {
+  getEnvironmentProps(params: {
+    state: AutocompleteState<TItem>;
+    props: ReturnType<AutocompleteCoreApi<TItem>['getEnvironmentProps']>;
+  }): ReturnType<AutocompleteCoreApi<TItem>['getEnvironmentProps']>;
+  getFormProps(params: {
+    state: AutocompleteState<TItem>;
+    props: ReturnType<AutocompleteCoreApi<TItem>['getFormProps']>;
+  }): ReturnType<AutocompleteCoreApi<TItem>['getFormProps']>;
+  getInputProps(params: {
+    state: AutocompleteState<TItem>;
+    props: ReturnType<AutocompleteCoreApi<TItem>['getInputProps']>;
+    inputElement: HTMLInputElement;
+  }): ReturnType<AutocompleteCoreApi<TItem>['getInputProps']>;
+  getItemProps(params: {
+    state: AutocompleteState<TItem>;
+    props: ReturnType<AutocompleteCoreApi<TItem>['getItemProps']>;
+  }): ReturnType<AutocompleteCoreApi<TItem>['getItemProps']>;
+  getLabelProps(params: {
+    state: AutocompleteState<TItem>;
+    props: ReturnType<AutocompleteCoreApi<TItem>['getLabelProps']>;
+  }): ReturnType<AutocompleteCoreApi<TItem>['getLabelProps']>;
+  getListProps(params: {
+    state: AutocompleteState<TItem>;
+    props: ReturnType<AutocompleteCoreApi<TItem>['getListProps']>;
+  }): ReturnType<AutocompleteCoreApi<TItem>['getListProps']>;
+  getPanelProps(params: {
+    state: AutocompleteState<TItem>;
+    props: ReturnType<AutocompleteCoreApi<TItem>['getPanelProps']>;
+  }): ReturnType<AutocompleteCoreApi<TItem>['getPanelProps']>;
+  getRootProps(params: {
+    state: AutocompleteState<TItem>;
+    props: ReturnType<AutocompleteCoreApi<TItem>['getRootProps']>;
+  }): ReturnType<AutocompleteCoreApi<TItem>['getRootProps']>;
+};

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

@@ -3,5 +3,6 @@ export * from './AutocompleteClassNames';
 export * from './AutocompleteCollection';
 export * from './AutocompleteDom';
 export * from './AutocompleteOptions';
+export * from './AutocompletePropGetters';
 export * from './AutocompleteSource';
 export * from './AutocompleteState';