Rename splitChar to separator

examples/geo/App.jsx

@@ -6,7 +6,7 @@ import defaultListbox from '../_shared/defaultListbox'
 
 const maxItems = 10
 const placeholder = 'Enter a city or airport'
-const splitChar = ','
+const separator = ','
 const noItemsMessage = 'We found no places that match your search'
 
 const listbox = [
@@ -81,7 +81,7 @@ const App = () => {
             onEnter={onEnter}
             onTab={onTab}
             placeholder={placeholder}
-            splitChar={splitChar}
+            separator={separator}
             styles={autocompleteStyles}
           />
         </div>

src/lib/components/item.jsx

@@ -13,7 +13,7 @@ export default function Item(props) {
     dispatch
   } = useContext(StateContext)
 
-  const { customStyles, highlighted, splitChar, query } = state
+  const { customStyles, highlighted, separator, query } = state
 
   const startsWith = item.dataSearchType !== 'contains'
 
@@ -23,8 +23,8 @@ export default function Item(props) {
     return str.split(regex).filter(part => part.length)
   }
 
-  const splitText = split(item.text, splitChar)
-  const splitQuery = split(query, splitChar)
+  const splitText = split(item.text, separator)
+  const splitQuery = split(query, separator)
 
   const isHighlighted = highlighted && index === highlighted.index
 

src/lib/components/item.test.jsx

@@ -10,7 +10,7 @@ const customStyles = {
   highlightedItem: 'highlighted-item-class',
   topItem: 'top-item-class',
   split: 'split-class',
-  splitChar: 'split-char-class'
+  separator: 'separator-class'
 }
 const item = {
   text: 'Chicago, Illinois, United States',

src/lib/context/state.jsx

@@ -6,7 +6,7 @@ import undef from '../utils/undef'
 const StateContext = createContext() //TODO: Rename GlobalStateContext
 
 const StateContextProvider = (props) => {
-  const { splitChar, styles = {}, text = '', items = [] } = props
+  const { separator, styles = {}, text = '', items = [] } = props
   const { children, ...propsMinusChildren} = props
   const [state, dispatch] = useReducer(reducer, {
     query: text,
@@ -15,7 +15,7 @@ const StateContextProvider = (props) => {
     highlighted: undef,
     selected: undef,
     customStyles: styles,
-    splitChar,
+    separator,
     props: propsMinusChildren
   })
 

src/lib/index.jsx

@@ -92,7 +92,7 @@ Turnstone.propTypes = {
   onTab: PropTypes.func,
   placeholder: PropTypes.string,
   maxItems: PropTypes.number,
-  splitChar: PropTypes.string,
+  separator: PropTypes.string,
   styles: PropTypes.object,
   tabIndex: PropTypes.number,
   text: PropTypes.string

src/lib/index.test.jsx

@@ -6,14 +6,13 @@ import Turnstone from './index'
 
 vi.mock('./components/container', () => ({ default: () => 'Container' }))
 
-const data = ['foo', 'bar', 'foobar']
-const dataSearchType = 'startswith'
+const listbox = {
+  data: ['foo', 'bar', 'foobar'],
+  dataSearchType: 'startswith'
+}
 
 const component = renderer.create(
-  <Turnstone
-    data={data}
-    dataSearchType={dataSearchType}
-  />
+  <Turnstone listbox={listbox} />
 )
 
 const tree = component.toJSON()
@@ -37,12 +36,11 @@ describe('Turnstone', () => {
       debounceWait: 250,
       defaultListboxIsImmutable: true,
       disabled: false,
+      listbox,
       listboxIsImmutable: true,
       maxItems: 10,
       minQueryLength: 1,
-      placeholder: '',
-      data,
-      dataSearchType
+      placeholder: ''
     })
   })
 })