{
+ // your custom keyDown handler here.
+ if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+ // Prevent Downshift's default 'Enter' behavior.
+ event.nativeEvent.preventDownshiftDefault = true
+
+ // your handler code
+ }
+ },
+ })}
+ />
+)
+```
+
+If you would like to completely override Downshift's behavior for a handler, in
+favor of your own, you can bypass prop getters:
+
+```javascript
+const items = [...] // items here.
+const {getTagGroup} = useTagGroup({initialItems: items})
+const ui = (
+
{
+ // your custom keyDown handler here.
+ }}
+ />
+)
+```
+
+## Examples
+
+Usage examples are kept on the [downshift docsite][docsite] and also on [the
+sandbox repo][sandbox-repo]. Each example has a link to its own Codesandbox
+version, so check the docs.
+
+It can be a great contributing opportunity to provide relevant use cases as
+docsite examples. If you have such an example, please create an issue with the
+suggestion and the Codesandbox for it, and we will take it from there.
+
+[sandbox-example]:
+ https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fhooks%2FuseTagGroup%2Fbasic-usage.js&moduleview=1
+[state-change-file]:
+ https://github.com/downshift-js/downshift/blob/master/src/hooks/useTagGroup/stateChangeTypes.ts
+[blog-post-prop-getters]:
+ https://blog.kentcdodds.com/how-to-give-rendering-control-to-users-with-prop-getters-549eaef76acf
+[docsite]: https://downshift-js.com/
+[sandbox-repo]:
+ https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Findex.js&moduleview=1
+[advanced-react-component-patterns-course]:
+ https://github.com/downshift-js/downshift#advanced-react-component-patterns-course
diff --git a/src/hooks/useTagGroup/__tests__/getTagGroupProps.test.ts b/src/hooks/useTagGroup/__tests__/getTagGroupProps.test.ts
new file mode 100644
index 000000000..9865eecde
--- /dev/null
+++ b/src/hooks/useTagGroup/__tests__/getTagGroupProps.test.ts
@@ -0,0 +1,250 @@
+import {
+ act,
+ screen,
+ defaultProps,
+ renderTagGroup,
+ renderUseTagGroup,
+} from './utils'
+
+// We are using React 18.
+jest.mock('react', () => {
+ return {
+ ...jest.requireActual('react'),
+ useId() {
+ return 'test-id'
+ },
+ }
+})
+
+describe('getTagGroupProps', () => {
+ describe('hook props', () => {
+ test('assign assigns a role of "listbox" and aria live attributes', () => {
+ const {result} = renderUseTagGroup()
+ const tagGroupProps = result.current.getTagGroupProps()
+
+ expect(tagGroupProps.role).toEqual('listbox')
+ expect(tagGroupProps.id).toEqual('downshift-test-id-tag-group')
+ expect(tagGroupProps['aria-live']).toEqual('polite')
+ expect(tagGroupProps['aria-atomic']).toEqual('false')
+ expect(tagGroupProps['aria-relevant']).toEqual('additions')
+ })
+ })
+
+ describe('user props', () => {
+ test('are passed down', () => {
+ const {result} = renderUseTagGroup()
+
+ expect(result.current.getTagGroupProps({foo: 'bar'})).toHaveProperty(
+ 'foo',
+ 'bar',
+ )
+ })
+
+ test('event handler onKeyDown is called along with downshift handler', () => {
+ const userOnKeyDown = jest.fn()
+ const {result} = renderUseTagGroup({initialActiveIndex: 2})
+
+ act(() => {
+ const {onKeyDown} = result.current.getTagGroupProps({
+ onKeyDown: userOnKeyDown,
+ })
+
+ onKeyDown({key: 'ArrowLeft'})
+ })
+
+ expect(userOnKeyDown).toHaveBeenCalledTimes(1)
+ expect(result.current.activeIndex).toBe(1)
+ })
+
+ test('event handler onKeyDown is called along without downshift handler if event.preventDownshiftDefault is passed', () => {
+ const userOnKeyDown = jest.fn(event => {
+ event.preventDownshiftDefault = true
+ })
+ const {result} = renderUseTagGroup({initialActiveIndex: 2})
+
+ act(() => {
+ const {onKeyDown} = result.current.getTagGroupProps({
+ onKeyDown: userOnKeyDown,
+ })
+
+ onKeyDown({key: 'ArrowLeft'})
+ })
+
+ expect(userOnKeyDown).toHaveBeenCalledTimes(1)
+ expect(result.current.activeIndex).toBe(2)
+ })
+ })
+
+ describe('keydown', () => {
+ test('arrow left moves selection to the previous item', async () => {
+ const {clickOnTag, user, getTags} = renderTagGroup()
+
+ await clickOnTag(2)
+ await user.keyboard('{ArrowLeft}')
+
+ const tags = getTags()
+
+ expect(tags[2]).toHaveAttribute('tabindex', '-1')
+ expect(tags[1]).toHaveAttribute('tabindex', '0')
+ })
+
+ test('arrow left moves selection to the last item if first item was active', async () => {
+ const {clickOnTag, user, getTags} = renderTagGroup()
+
+ await clickOnTag(0)
+ await user.keyboard('{ArrowLeft}')
+
+ const tags = getTags()
+
+ expect(tags[tags.length - 1]).toHaveAttribute('tabindex', '0')
+ expect(tags[0]).toHaveAttribute('tabindex', '-1')
+ })
+
+ test('arrow right moves selection to the previous item', async () => {
+ const {clickOnTag, user, getTags} = renderTagGroup()
+
+ await clickOnTag(2)
+ await user.keyboard('{ArrowRight}')
+
+ const tags = getTags()
+
+ expect(tags[2]).toHaveAttribute('tabindex', '-1')
+ expect(tags[3]).toHaveAttribute('tabindex', '0')
+ })
+
+ test('arrow right moves selection to the first item if last item was active', async () => {
+ const lastItemIndex = defaultProps.initialItems.length - 1
+ const {clickOnTag, user, getTags} = renderTagGroup()
+
+ await clickOnTag(lastItemIndex)
+ await user.keyboard('{ArrowRight}')
+
+ const tags = getTags()
+
+ expect(tags[lastItemIndex]).toHaveAttribute('tabindex', '-1')
+ expect(tags[0]).toHaveAttribute('tabindex', '0')
+ })
+
+ test('arrows move selection correctly', async () => {
+ const {clickOnTag, user, getTags} = renderTagGroup()
+
+ await clickOnTag(0)
+ await user.keyboard('{ArrowRight}')
+ await user.keyboard('{ArrowRight}')
+
+ const tags = getTags()
+
+ expect(tags[0]).toHaveAttribute('tabindex', '-1')
+ expect(tags[1]).toHaveAttribute('tabindex', '-1')
+ expect(tags[2]).toHaveAttribute('tabindex', '0')
+
+ await user.keyboard('{ArrowLeft}')
+
+ expect(tags[2]).toHaveAttribute('tabindex', '-1')
+ expect(tags[1]).toHaveAttribute('tabindex', '0')
+
+ await user.keyboard('{ArrowRight}')
+
+ expect(tags[1]).toHaveAttribute('tabindex', '-1')
+ expect(tags[2]).toHaveAttribute('tabindex', '0')
+ })
+
+ test('delete removes the active item', async () => {
+ const {clickOnTag, user, getTags} = renderTagGroup()
+
+ const tagsCount = getTags().length
+
+ await clickOnTag(2)
+ await user.keyboard('{Delete}')
+
+ const newTagsCount = getTags().length
+
+ expect(newTagsCount).toEqual(tagsCount - 1)
+ expect(
+ screen.queryByRole('tag', {name: defaultProps.initialItems[2]}),
+ ).not.toBeInTheDocument()
+ expect(getTags()[2]).toHaveAttribute('tabindex', '0')
+ expect(getTags()[2]).toHaveFocus()
+ })
+
+ test('delete removes the active last item and the second to last item becomes active', async () => {
+ const {clickOnTag, user, getTags} = renderTagGroup()
+
+ const tagsCount = getTags().length
+
+ await clickOnTag(tagsCount - 1)
+ await user.keyboard('{Delete}')
+
+ expect(getTags()[tagsCount - 2]).toHaveAttribute('tabindex', '0')
+ expect(getTags()[tagsCount - 2]).toHaveFocus()
+ })
+
+ test('delete removes the only active item', async () => {
+ const {clickOnTag, user, queryByRole} = renderTagGroup({
+ initialItems: [defaultProps.initialItems[0] as string],
+ })
+
+ await clickOnTag(0)
+ await user.keyboard('{Delete}')
+
+ // eslint-disable-next-line testing-library/prefer-screen-queries
+ expect(queryByRole('tag')).not.toBeInTheDocument()
+ })
+
+ test('backspace removes the active item', async () => {
+ const {clickOnTag, user, getTags} = renderTagGroup()
+
+ const tagsCount = getTags().length
+
+ await clickOnTag(2)
+ await user.keyboard('{Backspace}')
+
+ const newTagsCount = getTags().length
+
+ expect(newTagsCount).toEqual(tagsCount - 1)
+ expect(
+ screen.queryByRole('tag', {name: defaultProps.initialItems[2]}),
+ ).not.toBeInTheDocument()
+ expect(getTags()[2]).toHaveAttribute('tabindex', '0')
+ expect(getTags()[2]).toHaveFocus()
+ })
+
+ test('backspace removes the active last item and the second to last item becomes active', async () => {
+ const {clickOnTag, user, getTags} = renderTagGroup()
+
+ const tagsCount = getTags().length
+
+ await clickOnTag(tagsCount - 1)
+ await user.keyboard('{Backspace}')
+
+ expect(getTags()[tagsCount - 2]).toHaveAttribute('tabindex', '0')
+ expect(getTags()[tagsCount - 2]).toHaveFocus()
+ })
+
+ test('backspace removes the only active item', async () => {
+ const {clickOnTag, user, queryByRole} = renderTagGroup({
+ initialItems: [defaultProps.initialItems[0] as string],
+ })
+
+ await clickOnTag(0)
+ await user.keyboard('{Backspace}')
+
+ // eslint-disable-next-line testing-library/prefer-screen-queries
+ expect(queryByRole('tag')).not.toBeInTheDocument()
+ })
+
+ test('any other key does nothing', async () => {
+ const {clickOnTag, user, getTags} = renderTagGroup({
+ defaultActiveIndex: 2,
+ })
+
+ await clickOnTag(2)
+ await user.keyboard('{Space}')
+
+ const tags = getTags()
+
+ expect(tags).toHaveLength(defaultProps.initialItems.length)
+ expect(tags[2]).toHaveAttribute('tabindex', '0')
+ })
+ })
+})
diff --git a/src/hooks/useTagGroup/__tests__/getTagProps.test.ts b/src/hooks/useTagGroup/__tests__/getTagProps.test.ts
new file mode 100644
index 000000000..34ab1c99c
--- /dev/null
+++ b/src/hooks/useTagGroup/__tests__/getTagProps.test.ts
@@ -0,0 +1,107 @@
+import {A11Y_DESCRIPTION_ELEMENT_ID} from '../utils'
+import {renderTagGroup, renderUseTagGroup, defaultIds, act} from './utils'
+
+jest.mock('react', () => {
+ return {
+ ...jest.requireActual('react'),
+ useId() {
+ return 'test-id'
+ },
+ }
+})
+
+describe('getTagProps', () => {
+ describe('hook props', () => {
+ test('assign assigns a role of "option"', () => {
+ const {result} = renderUseTagGroup()
+ const tagProps = result.current.getTagProps({index: 0})
+
+ expect(tagProps.role).toEqual('option')
+ expect(tagProps.tabIndex).toEqual(0)
+ expect(tagProps['aria-describedby']).toEqual(A11Y_DESCRIPTION_ELEMENT_ID)
+ })
+
+ test('assign default value to id', () => {
+ const {result} = renderUseTagGroup()
+
+ expect(result.current.getTagProps({index: 0}).id).toEqual(
+ `${defaultIds.getTagId(0)}`,
+ )
+ })
+
+ test('assign custom value passed by user to id', () => {
+ const getTagId = (index: number) => `my-custom-item-id-${index}`
+ const {result} = renderUseTagGroup({getTagId})
+
+ expect(result.current.getTagProps({index: 0}).id).toEqual(getTagId(0))
+ })
+
+ test('calling it without index results in error', () => {
+ const {result} = renderUseTagGroup()
+
+ expect(() =>
+ result.current.getTagProps({index: -2}),
+ ).toThrowErrorMatchingInlineSnapshot("Pass correct item index to getTagProps!")
+ })
+ })
+
+ describe('user props', () => {
+ test('are passed down', () => {
+ const {result} = renderUseTagGroup()
+
+ expect(result.current.getTagProps({foo: 'bar', index: 0})).toHaveProperty(
+ 'foo',
+ 'bar',
+ )
+ })
+
+ test('event handler onClick is called along with downshift handler', () => {
+ const userOnClick = jest.fn()
+ const {result} = renderUseTagGroup({initialActiveIndex: 2})
+
+ act(() => {
+ const {onClick} = result.current.getTagProps({
+ onClick: userOnClick,
+ index: 1,
+ })
+
+ onClick({})
+ })
+
+ expect(userOnClick).toHaveBeenCalledTimes(1)
+ expect(result.current.activeIndex).toBe(1)
+ })
+
+ test('event handler onClick is called along without downshift handler if event.preventDownshiftDefault is passed', () => {
+ const userOnClick = jest.fn(event => {
+ event.preventDownshiftDefault = true
+ })
+ const {result} = renderUseTagGroup({initialActiveIndex: 2})
+
+ act(() => {
+ const {onClick} = result.current.getTagProps({
+ onClick: userOnClick,
+ index: 1,
+ })
+
+ onClick({})
+ })
+
+ expect(userOnClick).toHaveBeenCalledTimes(1)
+ expect(result.current.activeIndex).toBe(2)
+ })
+ })
+
+ describe('click', () => {
+ test('sets the item as active and focusable', async () => {
+ const {clickOnTag, getTags} = renderTagGroup({initialActiveIndex: 1})
+
+ await clickOnTag(2)
+
+ const tags = getTags()
+
+ expect(tags[2]).toHaveAttribute('tabindex', '0')
+ expect(tags[1]).toHaveAttribute('tabindex', '-1')
+ })
+ })
+})
diff --git a/src/hooks/useTagGroup/__tests__/getTagRemoveProps.test.ts b/src/hooks/useTagGroup/__tests__/getTagRemoveProps.test.ts
new file mode 100644
index 000000000..90e7babba
--- /dev/null
+++ b/src/hooks/useTagGroup/__tests__/getTagRemoveProps.test.ts
@@ -0,0 +1,142 @@
+import {
+ renderTagGroup,
+ renderUseTagGroup,
+ defaultIds,
+ act,
+ defaultProps,
+ screen,
+} from './utils'
+
+// We are using React 18.
+jest.mock('react', () => {
+ return {
+ ...jest.requireActual('react'),
+ useId() {
+ return 'test-id'
+ },
+ }
+})
+
+describe('getTagRemoveProps', () => {
+ describe('hook props', () => {
+ test('assign assigns tabindex of -1 and aria-labelledby', () => {
+ const {result} = renderUseTagGroup()
+ const tagRemoveProps = result.current.getTagRemoveProps({index: 0})
+ const tagId = defaultIds.getTagId(0)
+
+ expect(tagRemoveProps.tabIndex).toEqual(-1)
+ expect(tagRemoveProps['aria-labelledby']).toEqual(
+ `${tagId}-remove ${tagId}`,
+ )
+ })
+
+ test('assign default value to id', () => {
+ const {result} = renderUseTagGroup()
+
+ expect(result.current.getTagRemoveProps({index: 0}).id).toEqual(
+ `${defaultIds.getTagId(0)}-remove`,
+ )
+ })
+
+ test('assign custom value passed by user to id', () => {
+ const getTagId = (index: number) => `my-custom-item-id-${index}`
+ const {result} = renderUseTagGroup({getTagId})
+
+ expect(result.current.getTagRemoveProps({index: 0}).id).toEqual(
+ `${getTagId(0)}-remove`,
+ )
+ })
+
+ test('calling it without index results in error', () => {
+ const {result} = renderUseTagGroup()
+
+ expect(() =>
+ result.current.getTagRemoveProps({index: -3}),
+ ).toThrowErrorMatchingInlineSnapshot(`Pass correct item index to getTagRemoveProps!`)
+ })
+ })
+
+ describe('user props', () => {
+ test('are passed down', () => {
+ const {result} = renderUseTagGroup()
+
+ expect(
+ result.current.getTagRemoveProps({foo: 'bar', index: 0}),
+ ).toHaveProperty('foo', 'bar')
+ })
+
+ test('event handler onClick is called along with downshift handler', () => {
+ const userOnClick = jest.fn()
+ const stopPropagation = jest.fn()
+ const {result} = renderUseTagGroup()
+
+ act(() => {
+ const {onClick} = result.current.getTagRemoveProps({
+ onClick: userOnClick,
+ index: 1,
+ })
+
+ onClick({stopPropagation})
+ })
+
+ expect(userOnClick).toHaveBeenCalledTimes(1)
+ expect(result.current.items).not.toContain(defaultProps.initialItems[1])
+ expect(stopPropagation).toHaveBeenCalledTimes(1)
+ })
+
+ test('event handler onClick is called along without downshift handler if event.preventDownshiftDefault is passed', () => {
+ const stopPropagation = jest.fn()
+ const userOnClick = jest.fn(event => {
+ event.preventDownshiftDefault = true
+ })
+ const {result} = renderUseTagGroup({initialActiveIndex: 2})
+
+ act(() => {
+ const {onClick} = result.current.getTagRemoveProps({
+ onClick: userOnClick,
+ index: 1,
+ })
+
+ onClick({stopPropagation})
+ })
+
+ expect(userOnClick).toHaveBeenCalledTimes(1)
+ expect(result.current.items).toContain(defaultProps.initialItems[1])
+ expect(stopPropagation).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('click', () => {
+ test('removes the tag', async () => {
+ const {clickOnRemoveTag} = renderTagGroup()
+
+ await clickOnRemoveTag(2)
+
+ expect(
+ screen.getByRole('option', {name: defaultProps.initialItems[1]}),
+ ).toBeInTheDocument()
+ })
+
+
+ test('click removes the active last item and the second to last item becomes active', async () => {
+ const {clickOnRemoveTag, getTags} = renderTagGroup()
+
+ const tagsCount = getTags().length
+
+ await clickOnRemoveTag(tagsCount - 1)
+
+ expect(getTags()[tagsCount - 2]).toHaveAttribute('tabindex', '0')
+ })
+
+ test('click removes the only active item', async () => {
+ const {clickOnRemoveTag, queryByRole} = renderTagGroup({
+ initialItems: [defaultProps.initialItems[0] as string],
+ })
+
+ await clickOnRemoveTag(0)
+
+ // eslint-disable-next-line testing-library/prefer-screen-queries
+ expect(queryByRole('tag')).not.toBeInTheDocument()
+ })
+ })
+})
diff --git a/src/hooks/useTagGroup/__tests__/props.test.ts b/src/hooks/useTagGroup/__tests__/props.test.ts
new file mode 100644
index 000000000..3ae05588c
--- /dev/null
+++ b/src/hooks/useTagGroup/__tests__/props.test.ts
@@ -0,0 +1,442 @@
+/* eslint-disable testing-library/prefer-screen-queries */
+import useTagGroup from '..'
+import {A11Y_DESCRIPTION_ELEMENT_ID} from '../utils'
+import {
+ renderTagGroup,
+ renderHook,
+ colors,
+ renderUseTagGroup,
+ act,
+ defaultProps,
+} from './utils'
+
+describe('props', () => {
+ test('passing no props object will still work', () => {
+ const result = renderHook(() => useTagGroup())
+
+ expect(result.result.current.getTagGroupProps).toBeDefined()
+ })
+
+ test('initialActiveIndex sets activeIndex at mount', () => {
+ const {getTags} = renderTagGroup({
+ initialActiveIndex: 1,
+ })
+
+ const tags = getTags()
+
+ expect(tags[0]).toHaveAttribute('tabindex', '-1')
+ expect(tags[1]).toHaveAttribute('tabindex', '0')
+ expect(tags[2]).toHaveAttribute('tabindex', '-1')
+ })
+
+ test('initialActiveIndex does not focus active item at mount', () => {
+ const {getTags} = renderTagGroup({
+ initialActiveIndex: 1,
+ })
+
+ const tags = getTags()
+
+ expect(tags[1]).not.toHaveFocus()
+ })
+
+ test('activeIndex controls the activeIndex state', async () => {
+ const {getTags, clickOnTag} = renderTagGroup({
+ activeIndex: 1,
+ })
+
+ const tags = getTags()
+
+ await clickOnTag(0)
+
+ expect(tags[0]).toHaveAttribute('tabindex', '-1')
+ expect(tags[1]).toHaveAttribute('tabindex', '0')
+
+ await clickOnTag(2)
+
+ expect(tags[2]).toHaveAttribute('tabindex', '-1')
+ expect(tags[1]).toHaveAttribute('tabindex', '0')
+ })
+
+ test('initialItems sets items at mount', () => {
+ const {getTags} = renderTagGroup({
+ initialItems: [colors[2] as string],
+ })
+
+ const tags = getTags()
+
+ expect(tags).toHaveLength(1)
+ expect(tags[0]).toHaveTextContent(colors[2] as string)
+ })
+
+ test('items controls the items state', async () => {
+ const {result} = renderUseTagGroup({items: [colors[2] as string]})
+
+ act(() => {
+ result.current.addItem(colors[3] as string)
+ })
+
+ expect(result.current.items).toEqual([colors[2]])
+ })
+
+ test('id if passed will override downshift default', () => {
+ const {getTagGroup, getTags} = renderTagGroup({
+ id: 'my-custom-little-id',
+ })
+ const elements = [getTagGroup(), ...getTags()]
+
+ elements.forEach(element => {
+ expect(element).toHaveAttribute(
+ 'id',
+ expect.stringContaining('my-custom-little-id'),
+ )
+ })
+ })
+
+ test('tagGroupId if passed will override downshift default', () => {
+ const {getTagGroup} = renderTagGroup({
+ tagGroupId: 'my-custom-little-id',
+ id: 'should-be-overriden',
+ })
+
+ expect(getTagGroup()).toHaveAttribute('id', 'my-custom-little-id')
+ })
+
+ test('getTagId if passed will override downshift default', () => {
+ const {getTags} = renderTagGroup({
+ getTagId(index) {
+ return `custom-${index}`
+ },
+ id: 'should-be-overriden',
+ })
+
+ getTags().forEach((element, index) => {
+ expect(element).toHaveAttribute('id', `custom-${index}`)
+ })
+ })
+
+ test('stateReducer gets called before using addItem', () => {
+ const stateReducer = jest.fn().mockImplementation((_s, c) => c.changes)
+ const {result} = renderUseTagGroup({stateReducer})
+
+ act(() => {
+ result.current.addItem('test')
+ })
+
+ expect(stateReducer).toHaveBeenCalledTimes(1)
+ expect(stateReducer).toHaveBeenNthCalledWith(
+ 1,
+ {
+ activeIndex: 0,
+ items: defaultProps.initialItems,
+ },
+ {
+ changes: {
+ activeIndex: 0,
+ items: [...defaultProps.initialItems, 'test'],
+ },
+ index: undefined,
+ item: 'test',
+ type: useTagGroup.stateChangeTypes.FunctionAddItem,
+ },
+ )
+ })
+
+ test('stateReducer gets called before any new state update', async () => {
+ const stateReducer = jest.fn().mockImplementation((_s, c) => c.changes)
+ const {user, clickOnTag, clickOnRemoveTag} = renderTagGroup({
+ stateReducer,
+ })
+
+ expect(stateReducer).not.toHaveBeenCalled()
+
+ await clickOnTag(3)
+
+ expect(stateReducer).toHaveBeenCalledTimes(1)
+ expect(stateReducer).toHaveBeenNthCalledWith(
+ 1,
+ {
+ activeIndex: 0,
+ items: defaultProps.initialItems,
+ },
+ {
+ changes: {
+ activeIndex: 3,
+ items: defaultProps.initialItems,
+ },
+ index: 3,
+ type: useTagGroup.stateChangeTypes.TagClick,
+ },
+ )
+
+ await user.keyboard('{ArrowLeft}')
+
+ expect(stateReducer).toHaveBeenCalledTimes(2)
+ expect(stateReducer).toHaveBeenNthCalledWith(
+ 2,
+ {
+ activeIndex: 3,
+ items: defaultProps.initialItems,
+ },
+ {
+ changes: {
+ activeIndex: 2,
+ items: defaultProps.initialItems,
+ },
+ type: useTagGroup.stateChangeTypes.TagGroupKeyDownArrowLeft,
+ },
+ )
+
+ await user.keyboard('{ArrowRight}')
+
+ expect(stateReducer).toHaveBeenCalledTimes(3)
+ expect(stateReducer).toHaveBeenNthCalledWith(
+ 3,
+ {
+ activeIndex: 2,
+ items: defaultProps.initialItems,
+ },
+ {
+ changes: {
+ activeIndex: 3,
+ items: defaultProps.initialItems,
+ },
+ type: useTagGroup.stateChangeTypes.TagGroupKeyDownArrowRight,
+ },
+ )
+
+ await user.keyboard('{Backspace}')
+
+ const newItemsAfterBackspace = [
+ ...defaultProps.initialItems.slice(0, 3),
+ ...defaultProps.initialItems.slice(4),
+ ]
+
+ expect(stateReducer).toHaveBeenCalledTimes(4)
+ expect(stateReducer).toHaveBeenNthCalledWith(
+ 4,
+ {
+ activeIndex: 3,
+ items: defaultProps.initialItems,
+ },
+ {
+ changes: {
+ activeIndex: 3,
+ items: newItemsAfterBackspace,
+ },
+ type: useTagGroup.stateChangeTypes.TagGroupKeyDownBackspace,
+ },
+ )
+
+ await user.keyboard('{Delete}')
+
+ const newItemsAfterDelete = [
+ ...defaultProps.initialItems.slice(0, 3),
+ ...defaultProps.initialItems.slice(5),
+ ]
+
+ expect(stateReducer).toHaveBeenCalledTimes(5)
+ expect(stateReducer).toHaveBeenNthCalledWith(
+ 5,
+ {
+ activeIndex: 3,
+ items: newItemsAfterBackspace,
+ },
+ {
+ changes: {
+ activeIndex: 3,
+ items: newItemsAfterDelete,
+ },
+ type: useTagGroup.stateChangeTypes.TagGroupKeyDownDelete,
+ },
+ )
+
+ await clickOnRemoveTag(0)
+
+ const newItemsAfterRemoveClick = [
+ ...defaultProps.initialItems.slice(1, 3),
+ ...defaultProps.initialItems.slice(5),
+ ]
+
+ expect(stateReducer).toHaveBeenCalledTimes(6)
+ expect(stateReducer).toHaveBeenNthCalledWith(
+ 6,
+ {
+ activeIndex: 3,
+ items: newItemsAfterDelete,
+ },
+ {
+ changes: {
+ activeIndex: 0,
+ items: newItemsAfterRemoveClick,
+ },
+ index: 0,
+ type: useTagGroup.stateChangeTypes.TagRemoveClick,
+ },
+ )
+ })
+
+ test('environment substitutes window when passed', () => {
+ const element = {style: {}, setAttribute: jest.fn(), remove: jest.fn()}
+ const environment = {
+ document: {
+ body: {appendChild: jest.fn()},
+ createElement: jest.fn().mockReturnValue(element),
+ } as unknown as Document,
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ Node: {} as unknown as typeof window.Node,
+ }
+ const {unmount} = renderTagGroup({
+ environment,
+ })
+
+ expect(environment.document.createElement).toHaveBeenCalledTimes(1)
+ expect(environment.document.createElement).toHaveBeenCalledWith('div')
+ expect(element.setAttribute).toHaveBeenCalledTimes(1)
+ expect(element.setAttribute).toHaveBeenCalledWith(
+ 'id',
+ A11Y_DESCRIPTION_ELEMENT_ID,
+ )
+ expect(environment.document.body.appendChild).toHaveBeenCalledTimes(1)
+ expect(environment.document.body.appendChild).toHaveBeenCalledWith(element)
+ expect(element.remove).not.toHaveBeenCalled()
+
+ unmount()
+
+ expect(element.remove).toHaveBeenCalledTimes(1)
+ })
+
+ test('removeElementDescription can be overriden', () => {
+ const removeElementDescription = 'just remove it'
+ const {getByText, queryByText} = renderTagGroup({
+ removeElementDescription,
+ })
+
+ expect(getByText(removeElementDescription)).toBeInTheDocument()
+ expect(queryByText('Press Delete or Backspace to remove tag.')).not.toBeInTheDocument()
+ })
+
+ test('removeElementDescription has a default options', () => {
+ const {getByText} = renderTagGroup()
+
+ expect(getByText('Press Delete or Backspace to remove tag.')).toBeInTheDocument()
+ })
+
+ test('onStateChange is called after adding an item', () => {
+ const onStateChange = jest.fn()
+ const {result} = renderUseTagGroup({onStateChange})
+
+ act(() => {
+ result.current.addItem('test')
+ })
+
+ expect(onStateChange).toHaveBeenCalledTimes(1)
+ expect(onStateChange).toHaveBeenNthCalledWith(1, {
+ items: [...defaultProps.initialItems, 'test'],
+ type: useTagGroup.stateChangeTypes.FunctionAddItem,
+ })
+ })
+
+ test('onStateChange is called after each user action', async () => {
+ const onStateChange = jest.fn()
+ const {clickOnTag, clickOnRemoveTag, user} = renderTagGroup({onStateChange})
+
+ await clickOnTag(2)
+
+ expect(onStateChange).toHaveBeenCalledTimes(1)
+ expect(onStateChange).toHaveBeenCalledWith({
+ type: useTagGroup.stateChangeTypes.TagClick,
+ activeIndex: 2,
+ })
+
+ await clickOnRemoveTag(4)
+
+ expect(onStateChange).toHaveBeenCalledTimes(2)
+ expect(onStateChange).toHaveBeenNthCalledWith(2, {
+ type: useTagGroup.stateChangeTypes.TagRemoveClick,
+ activeIndex: 4,
+ items: [
+ ...defaultProps.initialItems.slice(0, 4),
+ ...defaultProps.initialItems.slice(5),
+ ],
+ })
+
+ await user.keyboard('{ArrowLeft}')
+
+ expect(onStateChange).toHaveBeenCalledTimes(3)
+ expect(onStateChange).toHaveBeenNthCalledWith(3, {
+ type: useTagGroup.stateChangeTypes.TagGroupKeyDownArrowLeft,
+ activeIndex: 3,
+ })
+
+ await user.keyboard('{ArrowRight}')
+
+ expect(onStateChange).toHaveBeenCalledTimes(4)
+ expect(onStateChange).toHaveBeenNthCalledWith(4, {
+ type: useTagGroup.stateChangeTypes.TagGroupKeyDownArrowRight,
+ activeIndex: 4,
+ })
+
+ await user.keyboard('{Delete}')
+
+ expect(onStateChange).toHaveBeenCalledTimes(5)
+ expect(onStateChange).toHaveBeenNthCalledWith(5, {
+ type: useTagGroup.stateChangeTypes.TagGroupKeyDownDelete,
+ items: [
+ ...defaultProps.initialItems.slice(0, 4),
+ ...defaultProps.initialItems.slice(6),
+ ],
+ })
+
+ await user.keyboard('{Backspace}')
+
+ expect(onStateChange).toHaveBeenCalledTimes(6)
+ expect(onStateChange).toHaveBeenNthCalledWith(6, {
+ type: useTagGroup.stateChangeTypes.TagGroupKeyDownBackspace,
+ items: [
+ ...defaultProps.initialItems.slice(0, 4),
+ ...defaultProps.initialItems.slice(7),
+ ],
+ })
+ })
+
+ test('onActiveIndexChange is called after active index changes', async () => {
+ const onActiveIndexChange = jest.fn()
+ const {clickOnTag, clickOnRemoveTag} = renderTagGroup({onActiveIndexChange})
+
+ await clickOnTag(2)
+
+ expect(onActiveIndexChange).toHaveBeenCalledTimes(1)
+ expect(onActiveIndexChange).toHaveBeenCalledWith({
+ type: useTagGroup.stateChangeTypes.TagClick,
+ activeIndex: 2,
+ items: defaultProps.initialItems,
+ })
+
+ onActiveIndexChange.mockClear()
+ await clickOnRemoveTag(2)
+
+ expect(onActiveIndexChange).not.toHaveBeenCalled()
+ })
+
+ test('onItemsChange is called after items change', async () => {
+ const onItemsChange = jest.fn()
+ const {clickOnTag, clickOnRemoveTag} = renderTagGroup({onItemsChange})
+
+ await clickOnTag(2)
+
+ expect(onItemsChange).not.toHaveBeenCalled()
+
+ await clickOnRemoveTag(2)
+
+ expect(onItemsChange).toHaveBeenCalledTimes(1)
+ expect(onItemsChange).toHaveBeenCalledWith({
+ type: useTagGroup.stateChangeTypes.TagRemoveClick,
+ activeIndex: 2,
+ items: [
+ ...defaultProps.initialItems.slice(0, 2),
+ ...defaultProps.initialItems.slice(3),
+ ],
+ })
+ })
+})
diff --git a/src/hooks/useTagGroup/__tests__/reducer.test.ts b/src/hooks/useTagGroup/__tests__/reducer.test.ts
new file mode 100644
index 000000000..41a9bc77e
--- /dev/null
+++ b/src/hooks/useTagGroup/__tests__/reducer.test.ts
@@ -0,0 +1,17 @@
+import {UseTagGroupReducerAction} from '../index.types'
+import {useTagGroupReducer} from '../reducer'
+
+test('reducer throws error if called without proper action type', () => {
+ expect(() => {
+ useTagGroupReducer(
+ {activeIndex: 0, items: []},
+ {
+ stateReducer(state) {
+ return state
+ },
+ removeElementDescription: 'bla bla',
+ },
+ {type: 'super-bogus'} as unknown as UseTagGroupReducerAction
,
+ )
+ }).toThrow('Invalid useTagGroup reducer action.')
+})
diff --git a/src/hooks/useTagGroup/__tests__/returnProps.test.ts b/src/hooks/useTagGroup/__tests__/returnProps.test.ts
new file mode 100644
index 000000000..b1285df1e
--- /dev/null
+++ b/src/hooks/useTagGroup/__tests__/returnProps.test.ts
@@ -0,0 +1,82 @@
+import useTagGroup from '..'
+import * as stateChangeTypes from '../stateChangeTypes'
+import {renderUseTagGroup, act, defaultProps} from './utils'
+
+
+describe('returnProps', () => {
+ test('should have stateChangeTypes attached to hook', () => {
+ expect(useTagGroup).toHaveProperty('stateChangeTypes', stateChangeTypes)
+ })
+
+ describe('prop getters', () => {
+ test('are returned as functions', () => {
+ const {result} = renderUseTagGroup()
+
+ expect(result.current.getTagGroupProps).toBeInstanceOf(Function)
+ expect(result.current.getTagProps).toBeInstanceOf(Function)
+ expect(result.current.getTagRemoveProps).toBeInstanceOf(Function)
+ })
+ })
+
+ describe('actions', () => {
+ test('addItem adds an item to the group', () => {
+ const {result} = renderUseTagGroup()
+
+ const previousItems = result.current.items
+
+ act(() => {
+ result.current.addItem('test')
+ })
+
+ expect(result.current.items).toEqual([...previousItems, 'test'])
+ })
+
+ test('addItem keeps the active item if previously set', () => {
+ const {result} = renderUseTagGroup({initialActiveIndex: 2})
+
+ act(() => {
+ result.current.addItem('test')
+ })
+
+ expect(result.current.activeIndex).toEqual(2)
+ })
+
+ test('addItem makes the last item active if there is no previous active item', () => {
+ const {result} = renderUseTagGroup({initialActiveIndex: -1})
+
+ act(() => {
+ result.current.addItem('test')
+ })
+
+ expect(result.current.activeIndex).toEqual(
+ result.current.items.length - 1,
+ )
+ })
+
+ test('addItem adds an item to the group at the index specified', () => {
+ const {result} = renderUseTagGroup()
+
+ const previousItems = result.current.items
+
+ act(() => {
+ result.current.addItem('test', 0)
+ })
+
+ expect(result.current.items).toEqual(['test', ...previousItems])
+ })
+ })
+
+ describe('state and props', () => {
+ test('activeIndex is returned', () => {
+ const {result} = renderUseTagGroup()
+
+ expect(result.current.activeIndex).toBe(0)
+ })
+
+ test('items is returned', () => {
+ const {result} = renderUseTagGroup()
+
+ expect(result.current.items).toBe(defaultProps.initialItems)
+ })
+ })
+})
diff --git a/src/hooks/useTagGroup/__tests__/utils/defaultIds.ts b/src/hooks/useTagGroup/__tests__/utils/defaultIds.ts
new file mode 100644
index 000000000..4c098d140
--- /dev/null
+++ b/src/hooks/useTagGroup/__tests__/utils/defaultIds.ts
@@ -0,0 +1,4 @@
+export const defaultIds = {
+ tagGroupId: 'downshift-test-id-tag-group',
+ getTagId: (index: number) => `downshift-test-id-tag-${index}`,
+}
diff --git a/src/hooks/useTagGroup/__tests__/utils/defaultProps.ts b/src/hooks/useTagGroup/__tests__/utils/defaultProps.ts
new file mode 100644
index 000000000..c3ce60980
--- /dev/null
+++ b/src/hooks/useTagGroup/__tests__/utils/defaultProps.ts
@@ -0,0 +1,20 @@
+export const colors = [
+ 'Black',
+ 'Red',
+ 'Green',
+ 'Blue',
+ 'Orange',
+ 'Purple',
+ 'Pink',
+ 'Orchid',
+ 'Aqua',
+ 'Lime',
+ 'Gray',
+ 'Brown',
+ 'Teal',
+ 'Skyblue',
+]
+
+export const defaultProps = {
+ initialItems: colors.slice(0, 8),
+}
\ No newline at end of file
diff --git a/src/hooks/useTagGroup/__tests__/utils/index.ts b/src/hooks/useTagGroup/__tests__/utils/index.ts
new file mode 100644
index 000000000..a005c320d
--- /dev/null
+++ b/src/hooks/useTagGroup/__tests__/utils/index.ts
@@ -0,0 +1,6 @@
+export * from '@testing-library/react'
+
+export {defaultProps, colors} from './defaultProps'
+export {renderTagGroup} from './renderTagGroup'
+export {renderUseTagGroup} from './renderUseTagGroup'
+export {defaultIds} from './defaultIds'
diff --git a/src/hooks/useTagGroup/__tests__/utils/renderTagGroup.tsx b/src/hooks/useTagGroup/__tests__/utils/renderTagGroup.tsx
new file mode 100644
index 000000000..718e0ff32
--- /dev/null
+++ b/src/hooks/useTagGroup/__tests__/utils/renderTagGroup.tsx
@@ -0,0 +1,74 @@
+/* eslint-disable testing-library/prefer-screen-queries */
+import * as React from 'react'
+import {render} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import useTagGroup from '../..'
+import {UseTagGroupProps} from '../../index.types'
+import {defaultProps} from './defaultProps'
+
+export function renderTagGroup(props: Partial> = {}) {
+ const utils = render(> = {}) {
+ const {getTagProps, getTagRemoveProps, getTagGroupProps, items, activeIndex} =
+ useTagGroup(props)
+
+ return (
+
+ {items.map((color, index) => (
+
+ {color}
+
+ ✕
+
+
+ ))}
+
+ )
+}
diff --git a/src/hooks/useTagGroup/__tests__/utils/renderUseTagGroup.ts b/src/hooks/useTagGroup/__tests__/utils/renderUseTagGroup.ts
new file mode 100644
index 000000000..edaed2218
--- /dev/null
+++ b/src/hooks/useTagGroup/__tests__/utils/renderUseTagGroup.ts
@@ -0,0 +1,16 @@
+import {renderHook} from '@testing-library/react'
+
+import {UseTagGroupProps, UseTagGroupReturnValue} from '../../index.types'
+import useTagGroup from '../..'
+import {defaultProps} from './defaultProps'
+
+export function renderUseTagGroup(
+ initialProps: Partial> = {},
+) {
+ return renderHook<
+ UseTagGroupReturnValue,
+ Partial>
+ >((props = {}) => useTagGroup(props), {
+ initialProps: {...defaultProps, ...initialProps},
+ })
+}
diff --git a/src/hooks/useTagGroup/index.ts b/src/hooks/useTagGroup/index.ts
new file mode 100644
index 000000000..4b14ee5c2
--- /dev/null
+++ b/src/hooks/useTagGroup/index.ts
@@ -0,0 +1,222 @@
+import {useEffect, useCallback, useRef} from 'react'
+
+import {
+ callAllEventHandlers,
+ handleRefs,
+ useLatestRef,
+ validatePropTypes,
+} from '../../utils-ts'
+import {useControlledReducer} from '../utils-ts'
+import * as stateChangeTypes from './stateChangeTypes'
+import {
+ GetTagGroupPropsOptions,
+ GetTagPropsOptions,
+ GetTagRemovePropsOptions,
+ UseTagGroupInterface,
+ UseTagGroupProps,
+ UseTagGroupMergedProps,
+ UseTagGroupReducerAction,
+ UseTagGroupReturnValue,
+ UseTagGroupState,
+ UseTagGroupStateChangeTypes,
+ GetTagRemovePropsReturnValue,
+ GetTagPropsReturnValue,
+ GetTagGroupPropsReturnValue,
+} from './index.types'
+import {useTagGroupReducer} from './reducer'
+import {
+ getInitialState,
+ isStateEqual,
+ propTypes,
+ useElementIds,
+ useAccessibleDescription,
+ A11Y_DESCRIPTION_ELEMENT_ID,
+ getMergedProps,
+} from './utils'
+
+const useTagGroup: UseTagGroupInterface = - (
+ userProps: UseTagGroupProps
- = {},
+) => {
+ /* State and Props */
+
+ validatePropTypes(userProps, useTagGroup, propTypes)
+
+ const props = getMergedProps(userProps)
+
+ const [state, dispatch] = useControlledReducer<
+ UseTagGroupState
- ,
+ UseTagGroupMergedProps
- ,
+ UseTagGroupStateChangeTypes,
+ UseTagGroupReducerAction
-
+ >(useTagGroupReducer, props, getInitialState, isStateEqual)
+
+ const {activeIndex, items} = state
+
+ /* Refs */
+
+ const latest = useLatestRef({state, props})
+ const elementIds = useElementIds({
+ getTagId: props.getTagId,
+ id: props.id,
+ tagGroupId: props.tagGroupId,
+ })
+ const itemRefs = useRef
>({})
+ const previousActiveIndexRef = useRef(activeIndex)
+ const previousItemsLengthRef = useRef(items.length)
+
+ /* Effects */
+
+ useAccessibleDescription(
+ props.environment?.document,
+ props.removeElementDescription,
+ )
+
+ useEffect(() => {
+ if (
+ (activeIndex !== -1 &&
+ previousActiveIndexRef.current !== -1 &&
+ activeIndex !== previousActiveIndexRef.current) ||
+ previousItemsLengthRef.current === items.length + 1
+ ) {
+ itemRefs.current[elementIds.getTagId(activeIndex)]?.focus()
+ }
+
+ previousActiveIndexRef.current = activeIndex
+ previousItemsLengthRef.current = items.length
+ }, [activeIndex, elementIds, items])
+
+ /* Getter functions */
+
+ const getTagGroupProps = useCallback(
+ >(
+ options?: GetTagGroupPropsOptions & Extra,
+ ) => {
+ const {onKeyDown, ...rest} =
+ options ?? ({} as GetTagGroupPropsOptions & Extra)
+ const handleKeyDown = (e: React.KeyboardEvent): void => {
+ switch (e.key) {
+ case 'ArrowLeft':
+ dispatch({
+ type: stateChangeTypes.TagGroupKeyDownArrowLeft,
+ })
+ break
+ case 'ArrowRight':
+ dispatch({
+ type: stateChangeTypes.TagGroupKeyDownArrowRight,
+ })
+ break
+ case 'Delete':
+ dispatch({
+ type: stateChangeTypes.TagGroupKeyDownDelete,
+ })
+ break
+ case 'Backspace':
+ dispatch({
+ type: stateChangeTypes.TagGroupKeyDownBackspace,
+ })
+ break
+ default:
+ }
+ }
+
+ const tagGroupProps = {
+ id: elementIds.tagGroupId,
+ 'aria-live': 'polite',
+ 'aria-atomic': 'false',
+ 'aria-relevant': 'additions',
+ role: 'listbox',
+ onKeyDown: callAllEventHandlers(onKeyDown, handleKeyDown),
+ ...rest,
+ } as GetTagGroupPropsReturnValue & Extra
+
+ return tagGroupProps
+ },
+ [dispatch, elementIds.tagGroupId],
+ )
+
+ const getTagProps = useCallback(
+ >(
+ options: GetTagPropsOptions & Extra,
+ ) => {
+ const {index, refKey = 'ref', ref, onClick, ...rest} = options
+
+ if (!Number.isInteger(index) || index < 0) {
+ throw new Error('Pass correct item index to getTagProps!')
+ }
+
+ const latestState = latest.current.state
+
+ const handleClick = () => {
+ dispatch({type: stateChangeTypes.TagClick, index})
+ }
+ const tagId = elementIds.getTagId(index)
+
+ return {
+ 'aria-describedby': A11Y_DESCRIPTION_ELEMENT_ID,
+ [refKey]: handleRefs(ref, itemNode => {
+ if (itemNode) {
+ itemRefs.current[tagId] = itemNode
+ }
+ }),
+ 'aria-labelledby': tagId,
+ role: 'option',
+ id: tagId,
+ onClick: callAllEventHandlers(onClick, handleClick),
+ tabIndex: latestState.activeIndex === index ? 0 : -1,
+ ...rest,
+ } as GetTagPropsReturnValue & Extra
+ },
+ [dispatch, elementIds, latest],
+ )
+
+ const getTagRemoveProps = useCallback(
+ >(
+ options: GetTagRemovePropsOptions & Extra,
+ ) => {
+ const {index, onClick, ...rest} = options
+
+ if (!Number.isInteger(index) || index < 0) {
+ throw new Error('Pass correct item index to getTagRemoveProps!')
+ }
+
+ const handleClick = (event: React.MouseEvent) => {
+ event.stopPropagation()
+ dispatch({type: stateChangeTypes.TagRemoveClick, index})
+ }
+
+ const tagId = elementIds.getTagId(index)
+ const tagRemoveId = `${tagId}-remove`
+
+ return {
+ id: tagRemoveId,
+ tabIndex: -1,
+ 'aria-labelledby': `${tagRemoveId} ${tagId}`,
+ onClick: callAllEventHandlers(onClick, handleClick),
+ ...rest,
+ } as GetTagRemovePropsReturnValue & Extra
+ },
+ [elementIds, dispatch],
+ )
+
+ /* Imperative Functions */
+
+ const addItem = useCallback['addItem']>(
+ (item, index): void => {
+ dispatch({type: stateChangeTypes.FunctionAddItem, item, index})
+ },
+ [dispatch],
+ )
+
+ return {
+ activeIndex,
+ addItem,
+ getTagGroupProps,
+ getTagProps,
+ getTagRemoveProps,
+ items,
+ }
+}
+
+useTagGroup.stateChangeTypes = stateChangeTypes
+
+export default useTagGroup
diff --git a/src/hooks/useTagGroup/index.types.ts b/src/hooks/useTagGroup/index.types.ts
new file mode 100644
index 000000000..b2f000cc1
--- /dev/null
+++ b/src/hooks/useTagGroup/index.types.ts
@@ -0,0 +1,177 @@
+import {Action, State} from '../../utils-ts'
+
+export interface UseTagGroupState- extends State {
+ activeIndex: number
+ items: Item[]
+}
+
+export interface Environment {
+ addEventListener: typeof window.addEventListener
+ removeEventListener: typeof window.removeEventListener
+ document: Document
+ Node: typeof window.Node
+}
+
+export interface UseTagGroupStateChange
- extends Partial<
+ UseTagGroupState
-
+> {
+ type: UseTagGroupStateChangeTypes
+}
+
+export interface UseTagGroupActiveIndexChange<
+ Item,
+> extends UseTagGroupStateChange
- {
+ activeIndex: number
+}
+
+export interface UseTagGroupItemsChange<
+ Item,
+> extends UseTagGroupStateChange
- {
+ items: Item[]
+}
+
+export interface UseTagGroupProps
- extends Partial<
+ UseTagGroupState
-
+> {
+ environment?: Environment
+ getTagId?: (index: number) => string
+ id?: string
+ initialActiveIndex?: number
+ initialItems?: Item[]
+ onActiveIndexChange?: (changes: UseTagGroupActiveIndexChange
- ) => void
+ onItemsChange?: (changes: UseTagGroupItemsChange
- ) => void
+ onStateChange?: (changes: UseTagGroupStateChange
- ) => void
+ removeElementDescription?: string
+ stateReducer?(
+ state: UseTagGroupState
- ,
+ actionAndChanges: Action
& {
+ changes: Partial>
+ },
+ ): Partial>
+ tagGroupId?: string
+}
+
+export type UseTagGroupMergedProps- = Required<
+ Pick
, 'stateReducer' | 'removeElementDescription'>
+> &
+ UseTagGroupProps-
+
+export interface UseTagGroupInterface {
+
- (props?: UseTagGroupProps
- ): UseTagGroupReturnValue
-
+ stateChangeTypes: {
+ TagClick: UseTagGroupStateChangeTypes.TagClick
+ TagGroupKeyDownArrowLeft: UseTagGroupStateChangeTypes.TagGroupKeyDownArrowLeft
+ TagGroupKeyDownArrowRight: UseTagGroupStateChangeTypes.TagGroupKeyDownArrowRight
+ TagGroupKeyDownBackspace: UseTagGroupStateChangeTypes.TagGroupKeyDownBackspace
+ TagGroupKeyDownDelete: UseTagGroupStateChangeTypes.TagGroupKeyDownDelete
+ TagRemoveClick: UseTagGroupStateChangeTypes.TagRemoveClick
+ FunctionAddItem: UseTagGroupStateChangeTypes.FunctionAddItem
+ }
+}
+
+export interface UseTagGroupReturnValue
- {
+ activeIndex: number
+ addItem: (item: Item, index?: number) => void
+ getTagGroupProps: GetTagGroupProps
+ getTagProps: GetTagProps
+ getTagRemoveProps: GetTagRemoveProps
+ items: Item[]
+}
+
+export interface GetTagPropsOptions extends React.HTMLProps
{
+ index: number
+ refKey?: string
+ ref?: React.MutableRefObject
+}
+
+export interface GetTagPropsReturnValue {
+ 'aria-describedby': string
+ id: string
+ role: 'option'
+ onPress?: (event: React.BaseSyntheticEvent) => void
+ onClick?: React.MouseEventHandler
+ tabIndex: 0 | -1
+}
+
+export interface GetTagRemovePropsOptions extends React.HTMLProps {
+ index: number
+}
+
+export interface GetTagRemovePropsReturnValue {
+ id: string
+ 'aria-labelledby': string
+ onPress?: (event: React.BaseSyntheticEvent) => void
+ onClick?: React.MouseEventHandler
+ tabIndex: number
+}
+
+export interface GetTagGroupPropsOptions extends React.HTMLProps {
+ refKey?: string
+ ref?: React.MutableRefObject
+}
+
+export interface GetTagGroupPropsReturnValue {
+ id: string
+ role: 'listbox'
+ 'aria-live': 'polite'
+ 'aria-atomic': 'false'
+ 'aria-relevant': 'additions'
+ onKeyDown: React.KeyboardEventHandler
+}
+export type GetTagGroupProps = = {}>(
+ options?: GetTagGroupPropsOptions & Extra,
+) => GetTagGroupPropsReturnValue & Extra
+
+export type GetTagProps = = {}>(
+ options: GetTagPropsOptions & Extra,
+) => GetTagPropsReturnValue & Extra
+
+export type GetTagRemoveProps = = {}>(
+ options: GetTagRemovePropsOptions & Extra,
+) => GetTagRemovePropsReturnValue & Extra
+
+export enum UseTagGroupStateChangeTypes {
+ TagClick = '__tag_click__',
+ TagGroupKeyDownArrowLeft = '__taggroup_keydown_arrowleft__',
+ TagGroupKeyDownArrowRight = '__taggroup_keydown_arrowright__',
+ TagGroupKeyDownBackspace = '__taggroup_keydown_backspace__',
+ TagGroupKeyDownDelete = '__taggroup_keydown_delete__',
+ TagRemoveClick = '__tagremove_click__',
+ FunctionAddItem = '__function_add_item__',
+}
+
+export type UseTagGroupReducerAction- =
+ | UseTagGroupTagClickReducerAction
+ | UseTagGroupTagKeyDownArrowLeftAction
+ | UseTagGroupTagKeyDownArrowRightAction
+ | UseTagGroupTagKeyDownBackspaceAction
+ | UseTagGroupTagKeyDownDeleteAction
+ | UseTagGroupTagRemoveClickAction
+ | UseTagGroupFunctionAddItem
-
+
+export type UseTagGroupTagClickReducerAction = {
+ type: UseTagGroupStateChangeTypes.TagClick
+ index: number
+}
+
+export type UseTagGroupTagKeyDownArrowLeftAction = {
+ type: UseTagGroupStateChangeTypes.TagGroupKeyDownArrowLeft
+}
+export type UseTagGroupTagKeyDownArrowRightAction = {
+ type: UseTagGroupStateChangeTypes.TagGroupKeyDownArrowRight
+}
+export type UseTagGroupTagKeyDownBackspaceAction = {
+ type: UseTagGroupStateChangeTypes.TagGroupKeyDownBackspace
+}
+export type UseTagGroupTagKeyDownDeleteAction = {
+ type: UseTagGroupStateChangeTypes.TagGroupKeyDownDelete
+}
+export type UseTagGroupTagRemoveClickAction = {
+ type: UseTagGroupStateChangeTypes.TagRemoveClick
+ index: number
+}
+export type UseTagGroupFunctionAddItem
- = {
+ type: UseTagGroupStateChangeTypes.FunctionAddItem
+ item: Item
+ index?: number
+}
diff --git a/src/hooks/useTagGroup/reducer.ts b/src/hooks/useTagGroup/reducer.ts
new file mode 100644
index 000000000..5f05201d0
--- /dev/null
+++ b/src/hooks/useTagGroup/reducer.ts
@@ -0,0 +1,105 @@
+import {
+ UseTagGroupProps,
+ UseTagGroupReducerAction,
+ UseTagGroupState,
+} from './index.types'
+import * as stateChangeTypes from './stateChangeTypes'
+
+export function useTagGroupReducer
- (
+ state: UseTagGroupState
- ,
+ _props: UseTagGroupProps
- ,
+ action: UseTagGroupReducerAction
- ,
+): UseTagGroupState
- {
+ const {type} = action
+
+ let changes
+
+ switch (type) {
+ case stateChangeTypes.TagClick:
+ changes = {
+ activeIndex: action.index,
+ }
+ break
+ case stateChangeTypes.TagGroupKeyDownArrowLeft:
+ changes = {
+ activeIndex:
+ state.activeIndex === 0
+ ? state.items.length - 1
+ : state.activeIndex - 1,
+ }
+ break
+ case stateChangeTypes.TagGroupKeyDownArrowRight:
+ changes = {
+ activeIndex:
+ state.activeIndex === state.items.length - 1
+ ? 0
+ : state.activeIndex + 1,
+ }
+ break
+ case stateChangeTypes.TagGroupKeyDownBackspace:
+ case stateChangeTypes.TagGroupKeyDownDelete: {
+ const newItems = [
+ ...state.items.slice(0, state.activeIndex),
+ ...state.items.slice(state.activeIndex + 1),
+ ]
+ const newActiveIndex =
+ newItems.length === 0
+ ? -1
+ : newItems.length === state.activeIndex
+ ? state.activeIndex - 1
+ : state.activeIndex
+ changes = {
+ items: [
+ ...state.items.slice(0, state.activeIndex),
+ ...state.items.slice(state.activeIndex + 1),
+ ],
+ activeIndex: newActiveIndex,
+ }
+ break
+ }
+ case stateChangeTypes.TagRemoveClick:
+ {
+ const newItems = [
+ ...state.items.slice(0, action.index),
+ ...state.items.slice(action.index + 1),
+ ]
+ const newActiveIndex =
+ newItems.length === 0
+ ? -1
+ : newItems.length === action.index
+ ? action.index - 1
+ : action.index
+ changes = {
+ items: newItems,
+ activeIndex: newActiveIndex,
+ }
+ }
+ break
+ case stateChangeTypes.FunctionAddItem: {
+ let newItems: Item[] = []
+
+ if (action.index === undefined) {
+ newItems = [...state.items, action.item]
+ } else {
+ newItems = [
+ ...state.items.slice(0, action.index),
+ action.item,
+ ...state.items.slice(action.index),
+ ]
+ }
+
+ const newActiveIndex =
+ state.activeIndex === -1 ? newItems.length - 1 : state.activeIndex
+
+ changes = {
+ items: newItems,
+ activeIndex: newActiveIndex,
+ }
+ break
+ }
+ default:
+ throw new Error('Invalid useTagGroup reducer action.')
+ }
+
+ return {...state, ...changes}
+}
diff --git a/src/hooks/useTagGroup/stateChangeTypes.ts b/src/hooks/useTagGroup/stateChangeTypes.ts
new file mode 100644
index 000000000..009780355
--- /dev/null
+++ b/src/hooks/useTagGroup/stateChangeTypes.ts
@@ -0,0 +1,27 @@
+import productionEnum from '../../productionEnum.macro'
+import {UseTagGroupStateChangeTypes} from './index.types'
+
+export const TagClick = productionEnum(
+ '__tag_click__',
+) as UseTagGroupStateChangeTypes.TagClick
+
+export const TagGroupKeyDownArrowLeft = productionEnum(
+ '__taggroup_keydown_arrowleft__',
+) as UseTagGroupStateChangeTypes.TagGroupKeyDownArrowLeft
+export const TagGroupKeyDownArrowRight = productionEnum(
+ '__taggroup_keydown_arrowright__',
+) as UseTagGroupStateChangeTypes.TagGroupKeyDownArrowRight
+export const TagGroupKeyDownDelete = productionEnum(
+ '__taggroup_keydown_delete__',
+) as UseTagGroupStateChangeTypes.TagGroupKeyDownDelete
+export const TagGroupKeyDownBackspace = productionEnum(
+ '__taggroup_keydown_backspace__',
+) as UseTagGroupStateChangeTypes.TagGroupKeyDownBackspace
+
+export const TagRemoveClick = productionEnum(
+ '__tagremove_click__',
+) as UseTagGroupStateChangeTypes.TagRemoveClick
+
+export const FunctionAddItem = productionEnum(
+ '__function_add_item__',
+) as UseTagGroupStateChangeTypes.FunctionAddItem
diff --git a/src/hooks/useTagGroup/utils/__tests__/useAccessibleDescription.test.ts b/src/hooks/useTagGroup/utils/__tests__/useAccessibleDescription.test.ts
new file mode 100644
index 000000000..41ace534b
--- /dev/null
+++ b/src/hooks/useTagGroup/utils/__tests__/useAccessibleDescription.test.ts
@@ -0,0 +1,53 @@
+import {renderHook, act} from '@testing-library/react'
+import {A11Y_DESCRIPTION_ELEMENT_ID, useAccessibleDescription} from '..'
+
+describe('useAccessibleDescription', () => {
+ test('does nothing if document is undefined', () => {
+ const {result} = renderHook(() =>
+ useAccessibleDescription(undefined, 'description'),
+ )
+
+ expect(result.current).toBeUndefined()
+ })
+
+ test('adds a div element to the document that serves as accessible description', () => {
+ const divElement = {
+ setAttribute: jest.fn(),
+ remove: jest.fn(),
+ style: {display: ''},
+ textContent: '',
+ }
+
+ const document: Document = {
+ createElement: jest.fn().mockReturnValue(divElement),
+ body: {
+ appendChild: jest.fn(),
+ },
+ } as unknown as Document
+ const description = 'press delete to remove'
+
+ const {unmount} = renderHook(() =>
+ useAccessibleDescription(document, description),
+ )
+
+ expect(document.createElement).toHaveBeenCalledTimes(1)
+ expect(document.createElement).toHaveBeenCalledWith('div')
+ expect(divElement.setAttribute).toHaveBeenCalledTimes(1)
+ expect(divElement.setAttribute).toHaveBeenCalledWith(
+ 'id',
+ A11Y_DESCRIPTION_ELEMENT_ID,
+ )
+ // eslint-disable-next-line jest-dom/prefer-to-have-style
+ expect(divElement.style.display).toEqual('none')
+ // eslint-disable-next-line jest-dom/prefer-to-have-text-content
+ expect(divElement.textContent).toEqual(description)
+ expect(document.body.appendChild).toHaveBeenCalledTimes(1)
+ expect(document.body.appendChild).toHaveBeenCalledWith(divElement)
+
+ act(() => {
+ unmount()
+ })
+
+ expect(divElement.remove).toHaveBeenCalledTimes(1)
+ })
+})
diff --git a/src/hooks/useTagGroup/utils/__tests__/utils.use-element-ids.r18.test.ts b/src/hooks/useTagGroup/utils/__tests__/utils.use-element-ids.r18.test.ts
new file mode 100644
index 000000000..b606c90a3
--- /dev/null
+++ b/src/hooks/useTagGroup/utils/__tests__/utils.use-element-ids.r18.test.ts
@@ -0,0 +1,23 @@
+import {renderHook} from '@testing-library/react'
+import {useElementIds} from '..'
+
+jest.mock('react', () => {
+ return {
+ ...jest.requireActual('react'),
+ useId() {
+ return 'mocked-id'
+ },
+ }
+})
+
+describe('useElementIds', () => {
+ test('uses React.useId for React >= 18', () => {
+ const {result} = renderHook(() => useElementIds({}))
+
+ expect(result.current).toEqual({
+ getTagId: expect.any(Function),
+ tagGroupId: 'downshift-mocked-id-tag-group',
+ })
+ expect(result.current.getTagId(10)).toEqual("downshift-mocked-id-tag-10")
+ })
+})
diff --git a/src/hooks/useTagGroup/utils/__tests__/utils.use-element-ids.test.ts b/src/hooks/useTagGroup/utils/__tests__/utils.use-element-ids.test.ts
new file mode 100644
index 000000000..12ea31c4e
--- /dev/null
+++ b/src/hooks/useTagGroup/utils/__tests__/utils.use-element-ids.test.ts
@@ -0,0 +1,23 @@
+import {renderHook} from '@testing-library/react'
+import {useElementIds} from '..'
+
+jest.mock('react', () => {
+ const {useId, ...react} = jest.requireActual('react')
+ return react
+})
+
+jest.mock('../../../../utils-ts', () => ({
+ generateId: jest.fn().mockReturnValue('test-id'),
+}))
+
+describe('useElementIds', () => {
+ test('uses React.useId for React < 18', () => {
+ const {result} = renderHook(() => useElementIds({}))
+
+ expect(result.current).toEqual({
+ getTagId: expect.any(Function),
+ tagGroupId: 'downshift-test-id-tag-group',
+ })
+ expect(result.current.getTagId(12)).toEqual('downshift-test-id-tag-12')
+ })
+})
diff --git a/src/hooks/useTagGroup/utils/getInitialState.ts b/src/hooks/useTagGroup/utils/getInitialState.ts
new file mode 100644
index 000000000..603bc2af1
--- /dev/null
+++ b/src/hooks/useTagGroup/utils/getInitialState.ts
@@ -0,0 +1,16 @@
+import {UseTagGroupProps, UseTagGroupState} from '../index.types'
+
+export function getInitialState
(
+ props: UseTagGroupProps,
+): UseTagGroupState {
+ const items = props.items ?? props.initialItems ?? []
+ const activeIndex =
+ props.activeIndex ??
+ props.initialActiveIndex ??
+ (items.length === 0 ? -1 : 0)
+
+ return {
+ activeIndex,
+ items,
+ }
+}
diff --git a/src/hooks/useTagGroup/utils/getMergedProps.ts b/src/hooks/useTagGroup/utils/getMergedProps.ts
new file mode 100644
index 000000000..811956e42
--- /dev/null
+++ b/src/hooks/useTagGroup/utils/getMergedProps.ts
@@ -0,0 +1,18 @@
+import {UseTagGroupProps, UseTagGroupMergedProps} from '../index.types'
+
+import {isReactNative} from '../../../is.macro.js'
+
+export function getMergedProps- (
+ userProps: UseTagGroupProps
- ,
+): UseTagGroupMergedProps
- {
+ return {
+ stateReducer(_s, {changes}) {
+ return changes
+ },
+ environment:
+ /* istanbul ignore next (ssr) */
+ typeof window === 'undefined' || isReactNative ? undefined : window,
+ removeElementDescription: 'Press Delete or Backspace to remove tag.',
+ ...userProps,
+ }
+}
diff --git a/src/hooks/useTagGroup/utils/index.ts b/src/hooks/useTagGroup/utils/index.ts
new file mode 100644
index 000000000..ae76f19df
--- /dev/null
+++ b/src/hooks/useTagGroup/utils/index.ts
@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+
+export {
+ type UseElementIdsProps,
+ type UseElementIdsReturnValue,
+ useElementIds,
+} from './useElementIds'
+export {getInitialState} from './getInitialState'
+export {isStateEqual} from './isStateEqual'
+export {
+ useAccessibleDescription,
+ A11Y_DESCRIPTION_ELEMENT_ID,
+} from './useAccessibleDescription'
+export {getMergedProps} from './getMergedProps'
+
+export const propTypes: Record<
+ string,
+ PropTypes.Requireable<(...args: unknown[]) => unknown>
+> = {
+ isItemDisabled: PropTypes.func,
+}
diff --git a/src/hooks/useTagGroup/utils/isStateEqual.ts b/src/hooks/useTagGroup/utils/isStateEqual.ts
new file mode 100644
index 000000000..307e55e48
--- /dev/null
+++ b/src/hooks/useTagGroup/utils/isStateEqual.ts
@@ -0,0 +1,11 @@
+import {UseTagGroupState} from '../index.types'
+
+export function isStateEqual
(
+ oldState: UseTagGroupState,
+ newState: UseTagGroupState,
+): boolean {
+ return (
+ oldState.activeIndex === newState.activeIndex &&
+ oldState.items === newState.items
+ )
+}
diff --git a/src/hooks/useTagGroup/utils/useAccessibleDescription.ts b/src/hooks/useTagGroup/utils/useAccessibleDescription.ts
new file mode 100644
index 000000000..cf0744df2
--- /dev/null
+++ b/src/hooks/useTagGroup/utils/useAccessibleDescription.ts
@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+export const A11Y_DESCRIPTION_ELEMENT_ID = 'tag-group-a11y-description'
+
+export function useAccessibleDescription(
+ document: Document | undefined,
+ description: string,
+) {
+ React.useEffect(() => {
+ if (!document) {
+ return
+ }
+
+ const accessibleDescriptionElement = document.createElement('div')
+
+ accessibleDescriptionElement.setAttribute('id', A11Y_DESCRIPTION_ELEMENT_ID)
+ accessibleDescriptionElement.style.display = 'none'
+ accessibleDescriptionElement.textContent = description
+
+ document.body.appendChild(accessibleDescriptionElement)
+
+ return () => {
+ accessibleDescriptionElement.remove()
+ }
+ }, [description, document])
+}
diff --git a/src/hooks/useTagGroup/utils/useElementIds.ts b/src/hooks/useTagGroup/utils/useElementIds.ts
new file mode 100644
index 000000000..c64412219
--- /dev/null
+++ b/src/hooks/useTagGroup/utils/useElementIds.ts
@@ -0,0 +1,53 @@
+import * as React from 'react'
+
+import {generateId} from '../../../utils-ts'
+import {UseTagGroupProps} from '../index.types'
+
+export type UseElementIdsProps = Pick<
+ UseTagGroupProps,
+ 'id' | 'getTagId' | 'tagGroupId'
+>
+
+export type UseElementIdsReturnValue = Required<
+ Pick, 'getTagId' | 'tagGroupId'>
+>
+
+// istanbul ignore next
+export const useElementIds: (
+ props: UseElementIdsProps,
+) => UseElementIdsReturnValue =
+ 'useId' in React // Avoid conditional useId call
+ ? useElementIdsR18
+ : useElementIdsLegacy
+
+function useElementIdsR18({
+ id,
+ tagGroupId,
+ getTagId,
+}: UseElementIdsProps): UseElementIdsReturnValue {
+ // Avoid conditional useId call
+ const reactId = `downshift-${React.useId()}`
+ if (!id) {
+ id = reactId
+ }
+
+ const elementIdsRef = React.useRef({
+ tagGroupId: tagGroupId ?? `${id}-tag-group`,
+ getTagId: getTagId ?? (index => `${id}-tag-${index}`),
+ })
+
+ return elementIdsRef.current
+}
+
+function useElementIdsLegacy({
+ id = `downshift-${generateId()}`,
+ getTagId,
+ tagGroupId,
+}: UseElementIdsProps): UseElementIdsReturnValue {
+ const elementIdsRef = React.useRef({
+ tagGroupId: tagGroupId ?? `${id}-tag-group`,
+ getTagId: getTagId ?? (index => `${id}-tag-${index}`),
+ })
+
+ return elementIdsRef.current
+}
diff --git a/src/hooks/utils-ts/__tests__/getItemAndIndex.test.ts b/src/hooks/utils-ts/__tests__/getItemAndIndex.test.ts
new file mode 100644
index 000000000..c9341fec7
--- /dev/null
+++ b/src/hooks/utils-ts/__tests__/getItemAndIndex.test.ts
@@ -0,0 +1,47 @@
+import {getItemAndIndex} from '../getItemAndIndex'
+
+test('returns the props if both are passed', () => {
+ const item = {hi: 'hello'}
+ const index = 5
+
+ expect(getItemAndIndex(item, index, [item], 'bla')).toEqual([item, index])
+})
+
+test('throws error when index is not passed and item is not found in the array', () => {
+ const item = {hi: 'hello'}
+ const errorMessage = 'no item found'
+
+ expect(() => getItemAndIndex(item, undefined, [], errorMessage)).toThrowError(
+ errorMessage,
+ )
+})
+
+test('returns the item and the index found', () => {
+ const item = {hi: 'hello'}
+
+ expect(getItemAndIndex(item, undefined, [item], 'bla')).toEqual([item, 0])
+})
+
+test('throws error when item is not passed and item is not found in the array', () => {
+ const item = {hi: 'hello'}
+ const errorMessage = 'no item found at index'
+
+ expect(() =>
+ getItemAndIndex(undefined, 1, [item], errorMessage),
+ ).toThrowError(errorMessage)
+})
+
+test('returns the index and the item found', () => {
+ const item = {hi: 'hello'}
+ const index = 0
+
+ expect(getItemAndIndex(undefined, index, [item], 'bla')).toEqual([item, 0])
+})
+
+test('throws error when both index and item are not passed', () => {
+ const errorMessage = 'it is all wrong'
+
+ expect(() =>
+ getItemAndIndex(undefined, undefined, [{item: 'bla'}], errorMessage),
+ ).toThrowError(errorMessage)
+})
diff --git a/src/hooks/utils-ts/callOnChangeProps.ts b/src/hooks/utils-ts/callOnChangeProps.ts
new file mode 100644
index 000000000..f755892c3
--- /dev/null
+++ b/src/hooks/utils-ts/callOnChangeProps.ts
@@ -0,0 +1,45 @@
+import {Action, Props, State} from '../../utils-ts'
+import {capitalizeString} from './capitalizeString'
+
+export function callOnChangeProps<
+ S extends State,
+ P extends Partial & Props,
+ T,
+>(action: Action, props: P, state: S, newState: S) {
+ const {type} = action
+ const changes: Partial = {}
+ const keys = Object.keys(state)
+
+ for (const key of keys) {
+ invokeOnChangeHandler(key, action, props, state, newState)
+
+ if (newState[key] !== state[key]) {
+ changes[key] = newState[key]
+ }
+ }
+
+ if (props.onStateChange && Object.keys(changes).length) {
+ props.onStateChange({type, ...changes})
+ }
+}
+
+function invokeOnChangeHandler<
+ S extends State,
+ P extends Partial & Props,
+ T,
+>(key: string, action: Action, props: P, state: S, newState: S) {
+ if (newState[key] === state[key]) {
+ return
+ }
+
+ const handlerKey = `on${capitalizeString(key)}Change`
+ const handler = props[handlerKey]
+
+ if (typeof handler !== 'function') {
+ return
+ }
+
+ const {type} = action
+
+ handler({type, ...newState})
+}
diff --git a/src/hooks/utils-ts/capitalizeString.ts b/src/hooks/utils-ts/capitalizeString.ts
new file mode 100644
index 000000000..033d20981
--- /dev/null
+++ b/src/hooks/utils-ts/capitalizeString.ts
@@ -0,0 +1,3 @@
+export function capitalizeString(string: string): string {
+ return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`
+}
diff --git a/src/hooks/utils-ts/getDefaultValue.ts b/src/hooks/utils-ts/getDefaultValue.ts
new file mode 100644
index 000000000..6aa3bd009
--- /dev/null
+++ b/src/hooks/utils-ts/getDefaultValue.ts
@@ -0,0 +1,16 @@
+import {State} from '../../utils-ts'
+import {capitalizeString} from './capitalizeString'
+
+export function getDefaultValue>(
+ props: P,
+ propKey: keyof S,
+ defaultStateValues: S,
+): S[keyof S] {
+ const defaultValue = props[`default${capitalizeString(propKey as string)}`]
+
+ if (defaultValue !== undefined) {
+ return defaultValue as S[keyof S]
+ }
+
+ return defaultStateValues[propKey]
+}
diff --git a/src/hooks/utils-ts/getInitialValue.ts b/src/hooks/utils-ts/getInitialValue.ts
new file mode 100644
index 000000000..954e5fbb3
--- /dev/null
+++ b/src/hooks/utils-ts/getInitialValue.ts
@@ -0,0 +1,23 @@
+import {State} from '../../utils-ts'
+import {capitalizeString} from './capitalizeString'
+import {getDefaultValue} from './getDefaultValue'
+
+export function getInitialValue>(
+ props: P,
+ propKey: keyof S,
+ defaultStateValues: S,
+): S[keyof S] {
+ const value = props[propKey] as keyof S | undefined
+
+ if (value !== undefined) {
+ return value as S[keyof S]
+ }
+
+ const initialValue = props[`initial${capitalizeString(propKey as string)}`]
+
+ if (initialValue !== undefined) {
+ return initialValue as S[keyof S]
+ }
+
+ return getDefaultValue(props, propKey, defaultStateValues)
+}
diff --git a/src/hooks/utils-ts/getItemAndIndex.ts b/src/hooks/utils-ts/getItemAndIndex.ts
new file mode 100644
index 000000000..719afb70d
--- /dev/null
+++ b/src/hooks/utils-ts/getItemAndIndex.ts
@@ -0,0 +1,40 @@
+/**
+ * Returns both the item and index when both or either is passed.
+ *
+ * @param itemProp The item which could be undefined.
+ * @param indexProp The index which could be undefined.
+ * @param items The array of items to get the item based on index.
+ * @param errorMessage The error to be thrown if index and item could not be returned for any reason.
+ * @returns An array with item and index.
+ */
+export function getItemAndIndex- (
+ itemProp: Item | undefined,
+ indexProp: number | undefined,
+ items: Item[],
+ errorMessage: string,
+): [Item, number] {
+ if (itemProp !== undefined && indexProp !== undefined) {
+ return [itemProp, indexProp]
+ }
+
+ if (itemProp !== undefined) {
+ const index = items.indexOf(itemProp)
+
+ if (index < 0) {
+ throw new Error(errorMessage)
+ }
+
+ return [itemProp, items.indexOf(itemProp)]
+ }
+
+ if (indexProp !== undefined) {
+ const item = items[indexProp]
+
+ if (item === undefined) {
+ throw new Error(errorMessage)
+ }
+ return [item, indexProp]
+ }
+
+ throw new Error(errorMessage)
+}
diff --git a/src/hooks/utils-ts/index.ts b/src/hooks/utils-ts/index.ts
new file mode 100644
index 000000000..9f4c66895
--- /dev/null
+++ b/src/hooks/utils-ts/index.ts
@@ -0,0 +1,11 @@
+export {useControlledReducer} from './useControlledReducer'
+export {useEnhancedReducer} from './useEnhancedReducer'
+export {callOnChangeProps} from './callOnChangeProps'
+export {getItemAndIndex} from './getItemAndIndex'
+export {useIsInitialMount} from './useIsInitialMount'
+export {stateReducer} from './stateReducer'
+export {propTypes as commonPropTypes} from './propTypes'
+export {capitalizeString} from './capitalizeString'
+export {getDefaultValue} from './getDefaultValue'
+export {getInitialValue} from './getInitialValue'
+export {useA11yMessageStatus} from './useA11yMessageStatus'
diff --git a/src/hooks/utils-ts/propTypes.ts b/src/hooks/utils-ts/propTypes.ts
new file mode 100644
index 000000000..c424483b6
--- /dev/null
+++ b/src/hooks/utils-ts/propTypes.ts
@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types'
+
+// Shared between all exports.
+export const propTypes = {
+ environment: PropTypes.shape({
+ addEventListener: PropTypes.func.isRequired,
+ removeEventListener: PropTypes.func.isRequired,
+ document: PropTypes.shape({
+ createElement: PropTypes.func.isRequired,
+ getElementById: PropTypes.func.isRequired,
+ activeElement: PropTypes.any.isRequired,
+ body: PropTypes.any.isRequired,
+ }).isRequired,
+ Node: PropTypes.func.isRequired,
+ }),
+ itemToKey: PropTypes.func,
+ stateReducer: PropTypes.func,
+}
diff --git a/src/hooks/utils-ts/stateReducer.ts b/src/hooks/utils-ts/stateReducer.ts
new file mode 100644
index 000000000..1fedcb71d
--- /dev/null
+++ b/src/hooks/utils-ts/stateReducer.ts
@@ -0,0 +1,9 @@
+import {Action, State} from '../../utils-ts'
+
+/**
+ * Default state reducer that returns the changes.
+ *
+ */
+export function stateReducer
(_s: State, a: Action) {
+ return a.changes
+}
diff --git a/src/hooks/utils-ts/useA11yMessageStatus.ts b/src/hooks/utils-ts/useA11yMessageStatus.ts
new file mode 100644
index 000000000..55e953070
--- /dev/null
+++ b/src/hooks/utils-ts/useA11yMessageStatus.ts
@@ -0,0 +1,50 @@
+import * as React from 'react'
+
+import {cleanupStatusDiv, debounce, setStatus} from '../../utils-ts'
+import {isReactNative} from '../../is.macro.js'
+import {useIsInitialMount} from './useIsInitialMount'
+
+/**
+ * Debounced call for updating the a11y message.
+ */
+const updateA11yStatus = debounce((status: string, document: Document) => {
+ setStatus(status, document)
+}, 200)
+
+/**
+ * Adds an a11y aria live status message if getA11yStatusMessage is passed.
+ * @param getA11yStatusMessage The function that builds the status message.
+ * @param options The options to be passed to getA11yStatusMessage if called.
+ * @param dependencyArray The dependency array that triggers the status message setter via useEffect.
+ * @param environment The environment object containing the document.
+ */
+export function useA11yMessageStatus(
+ getA11yStatusMessage: ((options: Options) => string) | undefined,
+ options: Options,
+ dependencyArray: unknown[],
+ environment: {document: Document | undefined} | undefined,
+) {
+ const document = environment?.document
+ const isInitialMount = useIsInitialMount()
+
+ // Adds an a11y aria live status message if getA11yStatusMessage is passed.
+ React.useEffect(() => {
+ if (!getA11yStatusMessage || isInitialMount || isReactNative || !document) {
+ return
+ }
+
+ const status = getA11yStatusMessage(options)
+
+ updateA11yStatus(status, document)
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, dependencyArray)
+
+ // Cleanup the status message container.
+ React.useEffect(() => {
+ return () => {
+ updateA11yStatus.cancel()
+ cleanupStatusDiv(document)
+ }
+ }, [document])
+}
diff --git a/src/hooks/utils-ts/useControlledReducer.ts b/src/hooks/utils-ts/useControlledReducer.ts
new file mode 100644
index 000000000..aa05ce1bc
--- /dev/null
+++ b/src/hooks/utils-ts/useControlledReducer.ts
@@ -0,0 +1,33 @@
+import {getState, type Action, type State, type Props} from '../../utils-ts'
+import {useEnhancedReducer} from './useEnhancedReducer'
+
+/**
+ * Wraps the useEnhancedReducer and applies the controlled prop values before
+ * returning the new state.
+ *
+ * @param {Function} reducer Reducer function from downshift.
+ * @param {Object} props The hook props, also passed to createInitialState.
+ * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
+ * @returns {Array} An array with the state and an action dispatcher.
+ */
+export function useControlledReducer<
+ S extends State,
+ P extends Partial & Props,
+ T,
+ A extends Action,
+>(
+ reducer: (state: S, props: P, action: A) => S,
+ props: P,
+ createInitialState: (props: P) => S,
+ isStateEqual: (prevState: S, newState: S) => boolean,
+): [S, (action: A) => void] {
+ const [state, dispatch] = useEnhancedReducer(
+ reducer,
+ props,
+ createInitialState,
+ isStateEqual,
+ )
+
+ return [getState(state, props), dispatch]
+}
diff --git a/src/hooks/utils-ts/useEnhancedReducer.ts b/src/hooks/utils-ts/useEnhancedReducer.ts
new file mode 100644
index 000000000..9b06adf74
--- /dev/null
+++ b/src/hooks/utils-ts/useEnhancedReducer.ts
@@ -0,0 +1,77 @@
+import * as React from 'react'
+
+import {
+ type Action,
+ type Props,
+ type State,
+ getState,
+ useLatestRef,
+} from '../../utils-ts'
+import {callOnChangeProps} from './callOnChangeProps'
+
+/**
+ * Computes the controlled state using a the previous state, props,
+ * two reducers, one from downshift and an optional one from the user.
+ * Also calls the onChange handlers for state values that have changed.
+ *
+ * @param {Function} reducer Reducer function from downshift.
+ * @param {Object} props The hook props, also passed to createInitialState.
+ * @param {Function} createInitialState Function that returns the initial state.
+ * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
+ * @returns {Array} An array with the state and an action dispatcher.
+ */
+export function useEnhancedReducer<
+ S extends State,
+ P extends Partial & Props,
+ T,
+ A extends Action,
+>(
+ reducer: (state: S, props: P, action: A) => S,
+ props: P,
+ createInitialState: (props: P) => S,
+ isStateEqual: (prevState: S, newState: S) => boolean,
+): [S, (action: A) => void] {
+ const prevStateRef = React.useRef(null)
+ const actionRef = React.useRef(undefined)
+ const propsRef = useLatestRef(props)
+
+ const enhancedReducer = React.useCallback(
+ (state: S, action: A): S => {
+ actionRef.current = action
+ state = getState(state, propsRef.current)
+
+ const changes = reducer(state, propsRef.current, action)
+ const newState = propsRef.current.stateReducer(state, {
+ ...action,
+ changes,
+ })
+
+ return {...state, ...newState}
+ },
+ [propsRef, reducer],
+ )
+ const [state, dispatch] = React.useReducer(
+ enhancedReducer,
+ props,
+ createInitialState,
+ )
+
+ const action = actionRef.current
+
+ React.useEffect(() => {
+ const prevState = getState(
+ prevStateRef.current ?? ({} as S),
+ propsRef.current,
+ )
+ const shouldCallOnChangeProps =
+ action && prevStateRef.current && !isStateEqual(prevState, state)
+
+ if (shouldCallOnChangeProps) {
+ callOnChangeProps(action, propsRef.current, prevState, state)
+ }
+
+ prevStateRef.current = state
+ }, [state, action, isStateEqual, propsRef])
+
+ return [state, dispatch]
+}
diff --git a/src/hooks/utils-ts/useIsInitialMount.ts b/src/hooks/utils-ts/useIsInitialMount.ts
new file mode 100644
index 000000000..68ef5559a
--- /dev/null
+++ b/src/hooks/utils-ts/useIsInitialMount.ts
@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+/**
+ * Tracks if it's the first render.
+ */
+export function useIsInitialMount(): boolean {
+ const isInitialMountRef = React.useRef(true)
+
+ React.useEffect(() => {
+ isInitialMountRef.current = false
+
+ return () => {
+ isInitialMountRef.current = true
+ }
+ }, [])
+
+ return isInitialMountRef.current
+}
diff --git a/src/hooks/utils.dropdown/defaultProps.ts b/src/hooks/utils.dropdown/defaultProps.ts
new file mode 100644
index 000000000..390873d16
--- /dev/null
+++ b/src/hooks/utils.dropdown/defaultProps.ts
@@ -0,0 +1,18 @@
+import {scrollIntoView} from '../../utils-ts'
+import {stateReducer} from '../utils-ts'
+
+import {isReactNative} from '../../is.macro.js'
+
+export const defaultProps = {
+ itemToString(item: unknown) {
+ return item ? String(item) : ''
+ },
+ itemToKey(item: unknown) {
+ return item
+ },
+ stateReducer,
+ scrollIntoView,
+ environment:
+ /* istanbul ignore next (ssr) */
+ typeof window === 'undefined' || isReactNative ? undefined : window,
+}
diff --git a/src/hooks/utils.dropdown/defaultStateValues.ts b/src/hooks/utils.dropdown/defaultStateValues.ts
new file mode 100644
index 000000000..0cd17127a
--- /dev/null
+++ b/src/hooks/utils.dropdown/defaultStateValues.ts
@@ -0,0 +1,6 @@
+export const defaultStateValues = {
+ highlightedIndex: -1,
+ isOpen: false,
+ selectedItem: null as unknown,
+ inputValue: '',
+}
diff --git a/src/hooks/utils.dropdown/index.ts b/src/hooks/utils.dropdown/index.ts
new file mode 100644
index 000000000..05c0ed4b1
--- /dev/null
+++ b/src/hooks/utils.dropdown/index.ts
@@ -0,0 +1,3 @@
+export {propTypes as dropdownPropTypes} from './propTypes'
+export {defaultProps as dropdownDefaultProps} from './defaultProps'
+export {defaultStateValues as dropdownDefaultStateValues} from './defaultStateValues'
diff --git a/src/hooks/utils.dropdown/propTypes.ts b/src/hooks/utils.dropdown/propTypes.ts
new file mode 100644
index 000000000..338748077
--- /dev/null
+++ b/src/hooks/utils.dropdown/propTypes.ts
@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types'
+
+import {commonPropTypes} from '../utils-ts'
+
+// Shared between useSelect, useCombobox, Downshift.
+export const propTypes = {
+ ...commonPropTypes,
+ getA11yStatusMessage: PropTypes.func,
+ highlightedIndex: PropTypes.number,
+ defaultHighlightedIndex: PropTypes.number,
+ initialHighlightedIndex: PropTypes.number,
+ isOpen: PropTypes.bool,
+ defaultIsOpen: PropTypes.bool,
+ initialIsOpen: PropTypes.bool,
+ selectedItem: PropTypes.any,
+ initialSelectedItem: PropTypes.any,
+ defaultSelectedItem: PropTypes.any,
+ id: PropTypes.string,
+ labelId: PropTypes.string,
+ menuId: PropTypes.string,
+ getItemId: PropTypes.func,
+ toggleButtonId: PropTypes.string,
+ onSelectedItemChange: PropTypes.func,
+ onHighlightedIndexChange: PropTypes.func,
+ onStateChange: PropTypes.func,
+ onIsOpenChange: PropTypes.func,
+ scrollIntoView: PropTypes.func,
+}
diff --git a/src/hooks/utils.js b/src/hooks/utils.js
index cbc8c6e6c..bcc599ec6 100644
--- a/src/hooks/utils.js
+++ b/src/hooks/utils.js
@@ -1,85 +1,17 @@
-import React, {
- useRef,
- useCallback,
- useReducer,
- useEffect,
- useLayoutEffect,
- useMemo,
-} from 'react'
-import PropTypes from 'prop-types'
+import * as React from 'react'
import {isReactNative} from '../is.macro'
-import {
- scrollIntoView,
- getState,
- generateId,
- debounce,
- validateControlledUnchanged,
- noop,
- targetWithinDownshift,
-} from '../utils'
-import {cleanupStatusDiv, setStatus} from '../set-a11y-status'
-
-const dropdownDefaultStateValues = {
- highlightedIndex: -1,
- isOpen: false,
- selectedItem: null,
- inputValue: '',
-}
-
-function callOnChangeProps(action, state, newState) {
- const {props, type} = action
- const changes = {}
-
- Object.keys(state).forEach(key => {
- invokeOnChangeHandler(key, action, state, newState)
-
- if (newState[key] !== state[key]) {
- changes[key] = newState[key]
- }
- })
-
- if (props.onStateChange && Object.keys(changes).length) {
- props.onStateChange({type, ...changes})
- }
-}
-
-function invokeOnChangeHandler(key, action, state, newState) {
- const {props, type} = action
- const handler = `on${capitalizeString(key)}Change`
- if (
- props[handler] &&
- newState[key] !== undefined &&
- newState[key] !== state[key]
- ) {
- props[handler]({type, ...newState})
- }
-}
-
-/**
- * Default state reducer that returns the changes.
- *
- * @param {Object} s state.
- * @param {Object} a action with changes.
- * @returns {Object} changes.
- */
-function stateReducer(s, a) {
- return a.changes
-}
-
-/**
- * Debounced call for updating the a11y message.
- */
-const updateA11yStatus = debounce((status, document) => {
- setStatus(status, document)
-}, 200)
+import {validateControlledUnchanged, targetWithinDownshift} from '../utils'
+import {generateId, noop} from '../utils-ts'
+import {useIsInitialMount, getDefaultValue, getInitialValue} from './utils-ts'
+import {dropdownDefaultStateValues} from './utils.dropdown'
// istanbul ignore next
const useIsomorphicLayoutEffect =
typeof window !== 'undefined' &&
typeof window.document !== 'undefined' &&
typeof window.document.createElement !== 'undefined'
- ? useLayoutEffect
- : useEffect
+ ? React.useLayoutEffect
+ : React.useEffect
// istanbul ignore next
const useElementIds =
@@ -98,7 +30,7 @@ const useElementIds =
id = reactId
}
- const elementIds = useMemo(
+ const elementIds = React.useMemo(
() => ({
labelId: labelId || `${id}-label`,
menuId: menuId || `${id}-menu`,
@@ -119,7 +51,7 @@ const useElementIds =
toggleButtonId,
inputId,
}) {
- const elementIds = useMemo(
+ const elementIds = React.useMemo(
() => ({
labelId: labelId || `${id}-label`,
menuId: menuId || `${id}-menu`,
@@ -133,176 +65,24 @@ const useElementIds =
return elementIds
}
-function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
- let item, index
-
- if (itemProp === undefined) {
- if (indexProp === undefined) {
- throw new Error(errorMessage)
- }
-
- item = items[indexProp]
- index = indexProp
- } else {
- index = indexProp === undefined ? items.indexOf(itemProp) : indexProp
- item = itemProp
- }
-
- return [item, index]
-}
-
function isAcceptedCharacterKey(key) {
return /^\S{1}$/.test(key)
}
-function capitalizeString(string) {
- return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`
-}
-
-function useLatestRef(val) {
- const ref = useRef(val)
- // technically this is not "concurrent mode safe" because we're manipulating
- // the value during render (so it's not idempotent). However, the places this
- // hook is used is to support memoizing callbacks which will be called
- // *during* render, so we need the latest values *during* render.
- // If not for this, then we'd probably want to use useLayoutEffect instead.
- ref.current = val
- return ref
-}
-
-/**
- * Computes the controlled state using a the previous state, props,
- * two reducers, one from downshift and an optional one from the user.
- * Also calls the onChange handlers for state values that have changed.
- *
- * @param {Function} reducer Reducer function from downshift.
- * @param {Object} props The hook props, also passed to createInitialState.
- * @param {Function} createInitialState Function that returns the initial state.
- * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
- * @returns {Array} An array with the state and an action dispatcher.
- */
-function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
- const prevStateRef = useRef()
- const actionRef = useRef()
- const enhancedReducer = useCallback(
- (state, action) => {
- actionRef.current = action
- state = getState(state, action.props)
-
- const changes = reducer(state, action)
- const newState = action.props.stateReducer(state, {...action, changes})
-
- return newState
- },
- [reducer],
- )
- const [state, dispatch] = useReducer(
- enhancedReducer,
+function getInitialState(props) {
+ const selectedItem = getInitialValue(
props,
- createInitialState,
- )
- const propsRef = useLatestRef(props)
- const dispatchWithProps = useCallback(
- action => dispatch({props: propsRef.current, ...action}),
- [propsRef],
+ 'selectedItem',
+ dropdownDefaultStateValues,
)
- const action = actionRef.current
-
- useEffect(() => {
- const prevState = getState(prevStateRef.current, action?.props)
- const shouldCallOnChangeProps =
- action && prevStateRef.current && !isStateEqual(prevState, state)
-
- if (shouldCallOnChangeProps) {
- callOnChangeProps(action, prevState, state)
- }
-
- prevStateRef.current = state
- }, [state, action, isStateEqual])
-
- return [state, dispatchWithProps]
-}
-
-/**
- * Wraps the useEnhancedReducer and applies the controlled prop values before
- * returning the new state.
- *
- * @param {Function} reducer Reducer function from downshift.
- * @param {Object} props The hook props, also passed to createInitialState.
- * @param {Function} createInitialState Function that returns the initial state.
- * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
- * @returns {Array} An array with the state and an action dispatcher.
- */
-function useControlledReducer(
- reducer,
- props,
- createInitialState,
- isStateEqual,
-) {
- const [state, dispatch] = useEnhancedReducer(
- reducer,
+ const isOpen = getInitialValue(props, 'isOpen', dropdownDefaultStateValues)
+ const highlightedIndex = getInitialHighlightedIndex(props)
+ const inputValue = getInitialValue(
props,
- createInitialState,
- isStateEqual,
+ 'inputValue',
+ dropdownDefaultStateValues,
)
- return [getState(state, props), dispatch]
-}
-
-const defaultProps = {
- itemToString(item) {
- return item ? String(item) : ''
- },
- itemToKey(item) {
- return item
- },
- stateReducer,
- scrollIntoView,
- environment:
- /* istanbul ignore next (ssr) */
- typeof window === 'undefined' || isReactNative ? undefined : window,
-}
-
-function getDefaultValue(
- props,
- propKey,
- defaultStateValues = dropdownDefaultStateValues,
-) {
- const defaultValue = props[`default${capitalizeString(propKey)}`]
-
- if (defaultValue !== undefined) {
- return defaultValue
- }
-
- return defaultStateValues[propKey]
-}
-
-function getInitialValue(
- props,
- propKey,
- defaultStateValues = dropdownDefaultStateValues,
-) {
- const value = props[propKey]
-
- if (value !== undefined) {
- return value
- }
-
- const initialValue = props[`initial${capitalizeString(propKey)}`]
-
- if (initialValue !== undefined) {
- return initialValue
- }
-
- return getDefaultValue(props, propKey, defaultStateValues)
-}
-
-function getInitialState(props) {
- const selectedItem = getInitialValue(props, 'selectedItem')
- const isOpen = getInitialValue(props, 'isOpen')
- const highlightedIndex = getInitialHighlightedIndex(props)
- const inputValue = getInitialValue(props, 'inputValue')
-
return {
highlightedIndex:
highlightedIndex < 0 && selectedItem && isOpen
@@ -376,18 +156,18 @@ function useMouseAndTouchTracker(
handleBlur,
downshiftRefs,
) {
- const mouseAndTouchTrackersRef = useRef({
+ const mouseAndTouchTrackersRef = React.useRef({
isMouseDown: false,
isTouchMove: false,
isTouchEnd: false,
})
-const getDownshiftElements = useCallback(
+const getDownshiftElements = React.useCallback(
() => downshiftRefs.map(ref => ref.current),
[downshiftRefs],
);
- useEffect(() => {
+ React.useEffect(() => {
if (isReactNative || !environment) {
return noop
}
@@ -400,7 +180,11 @@ const getDownshiftElements = useCallback(
mouseAndTouchTrackersRef.current.isMouseDown = false
if (
- !targetWithinDownshift(event.target, getDownshiftElements(), environment)
+ !targetWithinDownshift(
+ event.target,
+ getDownshiftElements(),
+ environment,
+ )
) {
handleBlur()
}
@@ -458,7 +242,7 @@ let useGetterPropsCalledChecker = () => noop
/* istanbul ignore next */
if (process.env.NODE_ENV !== 'production') {
useGetterPropsCalledChecker = (...propKeys) => {
- const getterPropsCalledRef = useRef(
+ const getterPropsCalledRef = React.useRef(
propKeys.reduce((acc, propKey) => {
acc[propKey] = {}
@@ -466,7 +250,7 @@ if (process.env.NODE_ENV !== 'production') {
}, {}),
)
- useEffect(() => {
+ React.useEffect(() => {
Object.keys(getterPropsCalledRef.current).forEach(propKey => {
const propCallInfo = getterPropsCalledRef.current[propKey]
@@ -493,7 +277,7 @@ if (process.env.NODE_ENV !== 'production') {
})
}, [])
- const setGetterPropCallInfo = useCallback(
+ const setGetterPropCallInfo = React.useCallback(
(propKey, suppressRefError, refKey, elementRef) => {
getterPropsCalledRef.current[propKey] = {
suppressRefError,
@@ -508,44 +292,6 @@ if (process.env.NODE_ENV !== 'production') {
}
}
-/**
- * Adds an a11y aria live status message if getA11yStatusMessage is passed.
- * @param {(options: Object) => string} getA11yStatusMessage The function that builds the status message.
- * @param {Object} options The options to be passed to getA11yStatusMessage if called.
- * @param {Array} dependencyArray The dependency array that triggers the status message setter via useEffect.
- * @param {{document: Document}} environment The environment object containing the document.
- */
-function useA11yMessageStatus(
- getA11yStatusMessage,
- options,
- dependencyArray,
- environment = {},
-) {
- const document = environment.document
- const isInitialMount = useIsInitialMount()
-
- // Adds an a11y aria live status message if getA11yStatusMessage is passed.
- useEffect(() => {
- if (!getA11yStatusMessage || isInitialMount || isReactNative || !document) {
- return
- }
-
- const status = getA11yStatusMessage(options)
-
- updateA11yStatus(status, document)
-
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, dependencyArray)
-
- // Cleanup the status message container.
- useEffect(() => {
- return () => {
- updateA11yStatus.cancel()
- cleanupStatusDiv(document)
- }
- }, [document])
-}
-
function useScrollIntoView({
highlightedIndex,
isOpen,
@@ -555,7 +301,7 @@ function useScrollIntoView({
scrollIntoView: scrollIntoViewProp,
}) {
// used not to scroll on highlight by mouse.
- const shouldScrollRef = useRef(true)
+ const shouldScrollRef = React.useRef(true)
// Scroll on highlighted item if change comes from keyboard.
useIsomorphicLayoutEffect(() => {
if (
@@ -583,10 +329,10 @@ let useControlPropsValidator = noop
if (process.env.NODE_ENV !== 'production') {
useControlPropsValidator = ({props, state}) => {
// used for checking when props are moving from controlled to uncontrolled.
- const prevPropsRef = useRef(props)
+ const prevPropsRef = React.useRef(props)
const isInitialMount = useIsInitialMount()
- useEffect(() => {
+ React.useEffect(() => {
if (isInitialMount) {
return
}
@@ -613,8 +359,12 @@ function getChangesOnSelection(props, highlightedIndex, inputValue = true) {
highlightedIndex: -1,
...(shouldSelect && {
selectedItem: props.items[highlightedIndex],
- isOpen: getDefaultValue(props, 'isOpen'),
- highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
+ isOpen: getDefaultValue(props, 'isOpen', dropdownDefaultStateValues),
+ highlightedIndex: getDefaultValue(
+ props,
+ 'highlightedIndex',
+ dropdownDefaultStateValues,
+ ),
...(inputValue && {
inputValue: props.itemToString(props.items[highlightedIndex]),
}),
@@ -639,23 +389,6 @@ function isDropdownsStateEqual(prevState, newState) {
)
}
-/**
- * Tracks if it's the first render.
- */
-function useIsInitialMount() {
- const isInitialMountRef = React.useRef(true)
-
- React.useEffect(() => {
- isInitialMountRef.current = false
-
- return () => {
- isInitialMountRef.current = true
- }
- }, [])
-
- return isInitialMountRef.current
-}
-
/**
* Returns the new highlightedIndex based on the defaultHighlightedIndex prop, if it's not disabled.
*
@@ -663,7 +396,11 @@ function useIsInitialMount() {
* @returns {number} The highlighted index.
*/
function getDefaultHighlightedIndex(props) {
- const highlightedIndex = getDefaultValue(props, 'highlightedIndex')
+ const highlightedIndex = getDefaultValue(
+ props,
+ 'highlightedIndex',
+ dropdownDefaultStateValues,
+ )
if (
highlightedIndex > -1 &&
props.isItemDisabled(props.items[highlightedIndex], highlightedIndex)
@@ -681,7 +418,11 @@ function getDefaultHighlightedIndex(props) {
* @returns {number} The highlighted index.
*/
function getInitialHighlightedIndex(props) {
- const highlightedIndex = getInitialValue(props, 'highlightedIndex')
+ const highlightedIndex = getInitialValue(
+ props,
+ 'highlightedIndex',
+ dropdownDefaultStateValues,
+ )
if (
highlightedIndex > -1 &&
@@ -693,72 +434,16 @@ function getInitialHighlightedIndex(props) {
return highlightedIndex
}
-// Shared between all exports.
-const commonPropTypes = {
- environment: PropTypes.shape({
- addEventListener: PropTypes.func.isRequired,
- removeEventListener: PropTypes.func.isRequired,
- document: PropTypes.shape({
- createElement: PropTypes.func.isRequired,
- getElementById: PropTypes.func.isRequired,
- activeElement: PropTypes.any.isRequired,
- body: PropTypes.any.isRequired,
- }).isRequired,
- Node: PropTypes.func.isRequired,
- }),
- itemToString: PropTypes.func,
- itemToKey: PropTypes.func,
- stateReducer: PropTypes.func,
-}
-
-// Shared between useSelect, useCombobox, Downshift.
-const commonDropdownPropTypes = {
- ...commonPropTypes,
- getA11yStatusMessage: PropTypes.func,
- highlightedIndex: PropTypes.number,
- defaultHighlightedIndex: PropTypes.number,
- initialHighlightedIndex: PropTypes.number,
- isOpen: PropTypes.bool,
- defaultIsOpen: PropTypes.bool,
- initialIsOpen: PropTypes.bool,
- selectedItem: PropTypes.any,
- initialSelectedItem: PropTypes.any,
- defaultSelectedItem: PropTypes.any,
- id: PropTypes.string,
- labelId: PropTypes.string,
- menuId: PropTypes.string,
- getItemId: PropTypes.func,
- toggleButtonId: PropTypes.string,
- onSelectedItemChange: PropTypes.func,
- onHighlightedIndexChange: PropTypes.func,
- onStateChange: PropTypes.func,
- onIsOpenChange: PropTypes.func,
- scrollIntoView: PropTypes.func,
-}
-
export {
useControlPropsValidator,
useScrollIntoView,
- updateA11yStatus,
useGetterPropsCalledChecker,
useMouseAndTouchTracker,
getHighlightedIndexOnOpen,
- getInitialState,
- getInitialValue,
- getDefaultValue,
- defaultProps,
- useControlledReducer,
- useEnhancedReducer,
- useLatestRef,
- capitalizeString,
isAcceptedCharacterKey,
- getItemAndIndex,
useElementIds,
getChangesOnSelection,
isDropdownsStateEqual,
- commonDropdownPropTypes,
- commonPropTypes,
- useIsInitialMount,
- useA11yMessageStatus,
getDefaultHighlightedIndex,
+ getInitialState,
}
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index ef3656b33..000000000
--- a/src/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export {default} from './downshift'
-export {resetIdCounter} from './utils'
-export {useSelect, useCombobox, useMultipleSelection} from './hooks'
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 000000000..357106112
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,3 @@
+export {default} from './downshift'
+export {resetIdCounter} from './utils-ts'
+export {useSelect, useCombobox, useMultipleSelection, useTagGroup} from './hooks'
diff --git a/src/is.macro.d.ts b/src/is.macro.d.ts
new file mode 100644
index 000000000..a094c6a93
--- /dev/null
+++ b/src/is.macro.d.ts
@@ -0,0 +1,3 @@
+export declare const isPreact: boolean,
+ isReactNative: boolean,
+ isReactNativeWeb: boolean
diff --git a/src/productionEnum.macro.d.ts b/src/productionEnum.macro.d.ts
new file mode 100644
index 000000000..7b429744b
--- /dev/null
+++ b/src/productionEnum.macro.d.ts
@@ -0,0 +1,3 @@
+declare function productionEnum(value: T): T;
+
+export default productionEnum;
\ No newline at end of file
diff --git a/src/set-a11y-status.js b/src/set-a11y-status.js
deleted file mode 100644
index 3beecf35b..000000000
--- a/src/set-a11y-status.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import {debounce} from './utils'
-
-const cleanupStatus = debounce(documentProp => {
- getStatusDiv(documentProp).textContent = ''
-}, 500)
-
-/**
- * Get the status node or create it if it does not already exist.
- * @param {Object} documentProp document passed by the user.
- * @return {HTMLElement} the status node.
- */
-function getStatusDiv(documentProp) {
- let statusDiv = documentProp.getElementById('a11y-status-message')
- if (statusDiv) {
- return statusDiv
- }
-
- statusDiv = documentProp.createElement('div')
- statusDiv.setAttribute('id', 'a11y-status-message')
- statusDiv.setAttribute('role', 'status')
- statusDiv.setAttribute('aria-live', 'polite')
- statusDiv.setAttribute('aria-relevant', 'additions text')
- Object.assign(statusDiv.style, {
- border: '0',
- clip: 'rect(0 0 0 0)',
- height: '1px',
- margin: '-1px',
- overflow: 'hidden',
- padding: '0',
- position: 'absolute',
- width: '1px',
- })
- documentProp.body.appendChild(statusDiv)
- return statusDiv
-}
-
-/**
- * @param {String} status the status message
- * @param {Object} documentProp document passed by the user.
- */
-export function setStatus(status, documentProp) {
- if (!status || !documentProp) {
- return
- }
-
- const div = getStatusDiv(documentProp)
-
- div.textContent = status
- cleanupStatus(documentProp)
-}
-
-/**
- * Removes the status element from the DOM
- * @param {Document} documentProp
- */
-export function cleanupStatusDiv(documentProp) {
- const statusDiv = documentProp?.getElementById('a11y-status-message')
-
- if (statusDiv) {
- statusDiv.remove()
- }
-}
diff --git a/src/types.ts b/src/types.ts
deleted file mode 100644
index 5ca882bdf..000000000
--- a/src/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/* External Types */
-
-export interface A11yStatusMessageOptions- {
- highlightedIndex: number | null
- inputValue: string
- isOpen: boolean
- itemToString: (item: Item | null) => string
- previousResultCount: number
- resultCount: number
- highlightedItem: Item
- selectedItem: Item | null
-}
diff --git a/src/utils-ts/__tests__/getState.test.ts b/src/utils-ts/__tests__/getState.test.ts
new file mode 100644
index 000000000..4feaac8af
--- /dev/null
+++ b/src/utils-ts/__tests__/getState.test.ts
@@ -0,0 +1,14 @@
+import {getState, Props} from '../getState'
+
+test('returns state if no props are passed', () => {
+ const state = {a: 'b'}
+
+ expect(getState(state, undefined)).toEqual(state)
+})
+
+test('merges state with props', () => {
+ const state = {a: 'b', c: 'd'}
+ const props = {b: 'e', c: 'f'} as unknown as Props
+
+ expect(getState(state, props)).toEqual({a: 'b', c: 'f'})
+})
diff --git a/src/utils-ts/__tests__/handleRefs.test.ts b/src/utils-ts/__tests__/handleRefs.test.ts
new file mode 100644
index 000000000..78437df1f
--- /dev/null
+++ b/src/utils-ts/__tests__/handleRefs.test.ts
@@ -0,0 +1,17 @@
+import {handleRefs} from '../handleRefs'
+
+test('handleRefs handles both ref functions and objects', () => {
+ const refFunction = jest.fn() as unknown as React.RefCallback
+ const refObject = {
+ current: null,
+ } as unknown as React.MutableRefObject
+ const refs = [refFunction, refObject]
+ const node = {} as unknown as HTMLElement
+ const ref = handleRefs(...refs)
+
+ ref(node)
+
+ expect(refFunction).toHaveBeenCalledTimes(1)
+ expect(refFunction).toHaveBeenCalledWith(node)
+ expect(refObject.current).toEqual(node)
+})
diff --git a/src/utils-ts/callAllEventHandlers.ts b/src/utils-ts/callAllEventHandlers.ts
new file mode 100644
index 000000000..4e4116a78
--- /dev/null
+++ b/src/utils-ts/callAllEventHandlers.ts
@@ -0,0 +1,26 @@
+/**
+ * This is intended to be used to compose event handlers.
+ * They are executed in order until one of them sets
+ * `event.preventDownshiftDefault = true`.
+ * @param fns the event handler functions
+ * @return the event handler to add to an element
+ */
+export function callAllEventHandlers(...fns: (Function | undefined)[]) {
+ return (
+ event: React.SyntheticEvent & {
+ preventDownshiftDefault?: boolean
+ nativeEvent: {preventDownshiftDefault?: boolean}
+ },
+ ...args: unknown[]
+ ) =>
+ fns.some(fn => {
+ if (fn) {
+ fn(event, ...args)
+ }
+ return (
+ event.preventDownshiftDefault ||
+ (event.hasOwnProperty('nativeEvent') &&
+ event.nativeEvent.preventDownshiftDefault)
+ )
+ })
+}
diff --git a/src/utils-ts/debounce.ts b/src/utils-ts/debounce.ts
new file mode 100644
index 000000000..6f2fccf55
--- /dev/null
+++ b/src/utils-ts/debounce.ts
@@ -0,0 +1,29 @@
+/**
+ * Simple debounce implementation. Will call the given
+ * function once after the time given has passed since
+ * it was last called.
+ */
+export function debounce(
+ fn: Function,
+ time: number,
+): Function & {cancel: Function} {
+ let timeoutId: NodeJS.Timeout | undefined | null
+
+ function cancel() {
+ if (timeoutId) {
+ clearTimeout(timeoutId)
+ }
+ }
+
+ function wrapper(...args: unknown[]) {
+ cancel()
+ timeoutId = setTimeout(() => {
+ timeoutId = null
+ fn(...args)
+ }, time)
+ }
+
+ wrapper.cancel = cancel
+
+ return wrapper
+}
diff --git a/src/utils-ts/generateId.ts b/src/utils-ts/generateId.ts
new file mode 100644
index 000000000..9d4a94024
--- /dev/null
+++ b/src/utils-ts/generateId.ts
@@ -0,0 +1,35 @@
+import * as React from 'react'
+
+let idCounter = 0
+
+/**
+ * This generates a unique ID for an instance of Downshift
+ * @return {string} the unique ID
+ */
+export function generateId(): string {
+ return String(idCounter++)
+}
+
+/**
+ * This is only used in tests
+ * @param {number} num the number to set the idCounter to
+ */
+export function setIdCounter(num: number): void {
+ idCounter = num
+}
+
+/**
+ * Resets idCounter to 0. Used for SSR.
+ */
+export function resetIdCounter() {
+ // istanbul ignore next
+ if ('useId' in React) {
+ console.warn(
+ `It is not necessary to call resetIdCounter when using React 18+`,
+ )
+
+ return
+ }
+
+ idCounter = 0
+}
diff --git a/src/utils-ts/getState.ts b/src/utils-ts/getState.ts
new file mode 100644
index 000000000..f49720a5d
--- /dev/null
+++ b/src/utils-ts/getState.ts
@@ -0,0 +1,46 @@
+export interface Action extends Record {
+ type: T
+}
+
+export type State = Record
+
+export interface Props {
+ onStateChange?(typeAndChanges: unknown): void
+ stateReducer(
+ state: S,
+ actionAndChanges: Action & {changes: Partial},
+ ): Partial
+}
+
+/**
+ * This will perform a shallow merge of the given state object
+ * with the state coming from props
+ * (for the controlled component scenario)
+ * This is used in state updater functions so they're referencing
+ * the right state regardless of where it comes from.
+ *
+ * @param state The state of the component/hook.
+ * @param props The props that may contain controlled values.
+ * @returns The merged controlled state.
+ */
+export function getState<
+ S extends State,
+ P extends Partial & Props,
+ T,
+>(state: S, props?: P): S {
+ if (!props) {
+ return state
+ }
+
+ const keys = Object.keys(state) as (keyof S)[]
+
+ return keys.reduce(
+ (newState, key) => {
+ if (props[key] !== undefined) {
+ newState[key] = (props as Partial)[key] as S[typeof key]
+ }
+ return newState
+ },
+ {...state},
+ )
+}
diff --git a/src/utils-ts/handleRefs.ts b/src/utils-ts/handleRefs.ts
new file mode 100644
index 000000000..0463b02ac
--- /dev/null
+++ b/src/utils-ts/handleRefs.ts
@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+export function handleRefs(
+ ...refs: (
+ | React.MutableRefObject
+ | React.RefCallback
+ | undefined
+ )[]
+) {
+ return (node: HTMLElement) => {
+ refs.forEach(ref => {
+ if (typeof ref === 'function') {
+ ref(node)
+ } else if (ref) {
+ ref.current = node
+ }
+ })
+ }
+}
diff --git a/src/utils-ts/index.ts b/src/utils-ts/index.ts
new file mode 100644
index 000000000..afd68dce9
--- /dev/null
+++ b/src/utils-ts/index.ts
@@ -0,0 +1,11 @@
+export {generateId, setIdCounter, resetIdCounter} from './generateId'
+export {useLatestRef} from './useLatestRef'
+export {handleRefs} from './handleRefs'
+export {callAllEventHandlers} from './callAllEventHandlers'
+export {debounce} from './debounce'
+export {setStatus, cleanupStatusDiv} from './setA11yStatus'
+export {noop} from './noop'
+export {validatePropTypes} from './validatePropTypes'
+export {getState} from './getState'
+export type {Action, Props, State} from './getState'
+export {scrollIntoView} from './scrollIntoView'
diff --git a/src/utils-ts/noop.ts b/src/utils-ts/noop.ts
new file mode 100644
index 000000000..177804c7a
--- /dev/null
+++ b/src/utils-ts/noop.ts
@@ -0,0 +1 @@
+export function noop() {}
diff --git a/src/utils-ts/scrollIntoView.ts b/src/utils-ts/scrollIntoView.ts
new file mode 100644
index 000000000..f61c2a41f
--- /dev/null
+++ b/src/utils-ts/scrollIntoView.ts
@@ -0,0 +1,25 @@
+import {compute} from 'compute-scroll-into-view'
+
+/**
+ * Scroll node into view if necessary
+ * @param {HTMLElement} node the element that should scroll into view
+ * @param {HTMLElement} menuNode the menu element of the component
+ */
+export function scrollIntoView(
+ node: HTMLElement | undefined,
+ menuNode: HTMLElement | undefined,
+) {
+ if (!node) {
+ return
+ }
+
+ const actions = compute(node, {
+ boundary: menuNode,
+ block: 'nearest',
+ scrollMode: 'if-needed',
+ })
+ actions.forEach(({el, top, left}) => {
+ el.scrollTop = top
+ el.scrollLeft = left
+ })
+}
diff --git a/src/utils-ts/setA11yStatus.ts b/src/utils-ts/setA11yStatus.ts
new file mode 100644
index 000000000..a0ec4b888
--- /dev/null
+++ b/src/utils-ts/setA11yStatus.ts
@@ -0,0 +1,59 @@
+import {debounce} from './debounce'
+
+const cleanupStatus = debounce((document: Document) => {
+ getStatusDiv(document).textContent = ''
+}, 500)
+
+/**
+ * Get the status node or create it if it does not already exist.
+ */
+function getStatusDiv(document: Document) {
+ let statusDiv = document.getElementById('a11y-status-message')
+ if (statusDiv) {
+ return statusDiv
+ }
+
+ statusDiv = document.createElement('div')
+ statusDiv.setAttribute('id', 'a11y-status-message')
+ statusDiv.setAttribute('role', 'status')
+ statusDiv.setAttribute('aria-live', 'polite')
+ statusDiv.setAttribute('aria-relevant', 'additions text')
+ Object.assign(statusDiv.style, {
+ border: '0',
+ clip: 'rect(0 0 0 0)',
+ height: '1px',
+ margin: '-1px',
+ overflow: 'hidden',
+ padding: '0',
+ position: 'absolute',
+ width: '1px',
+ })
+
+ document.body.appendChild(statusDiv)
+ return statusDiv
+}
+
+/**
+ * Sets aria live status to a div element that's visually hidden.
+ */
+export function setStatus(status: string, document: Document | undefined) {
+ if (!status || !document) {
+ return
+ }
+
+ const div = getStatusDiv(document)
+
+ div.textContent = status
+ cleanupStatus(document)
+}
+
+/**
+ * Removes the status element from the DOM
+ */
+export function cleanupStatusDiv(document: Document | undefined) {
+ const statusDiv = document?.getElementById('a11y-status-message')
+
+ if (statusDiv) {
+ statusDiv.remove()
+ }
+}
diff --git a/src/utils-ts/useLatestRef.ts b/src/utils-ts/useLatestRef.ts
new file mode 100644
index 000000000..cd23e096a
--- /dev/null
+++ b/src/utils-ts/useLatestRef.ts
@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+export function useLatestRef(val: T): React.MutableRefObject {
+ const ref = React.useRef(val)
+ // technically this is not "concurrent mode safe" because we're manipulating
+ // the value during render (so it's not idempotent). However, the places this
+ // hook is used is to support memoizing callbacks which will be called
+ // *during* render, so we need the latest values *during* render.
+ // If not for this, then we'd probably want to use useLayoutEffect instead.
+ ref.current = val
+ return ref
+}
diff --git a/src/utils-ts/validatePropTypes.ts b/src/utils-ts/validatePropTypes.ts
new file mode 100644
index 000000000..a57f3fdb5
--- /dev/null
+++ b/src/utils-ts/validatePropTypes.ts
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types'
+import {noop} from './noop'
+
+// eslint-disable-next-line import/no-mutable-exports
+export let validatePropTypes = noop as (
+ options: unknown,
+ caller: Function,
+ propTypes: Record<
+ string,
+ PropTypes.Requireable<(...args: unknown[]) => unknown>
+ >,
+) => void
+/* istanbul ignore next */
+if (process.env.NODE_ENV !== 'production') {
+ validatePropTypes = (
+ options: unknown,
+ caller: Function,
+ propTypes: Record<
+ string,
+ PropTypes.Requireable<(...args: unknown[]) => unknown>
+ >,
+ ): void => {
+ PropTypes.checkPropTypes(propTypes, options, 'prop', caller.name)
+ }
+}
diff --git a/src/utils.js b/src/utils.js
index 23b992236..aa168abe5 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,8 +1,5 @@
-import {compute} from 'compute-scroll-into-view'
-import React from 'react'
import {isPreact} from './is.macro'
-
-let idCounter = 0
+import { noop } from './utils-ts'
/**
* Accepts a parameter and returns it if it's a function
@@ -16,29 +13,6 @@ function cbToCb(cb) {
return typeof cb === 'function' ? cb : noop
}
-function noop() {}
-
-/**
- * Scroll node into view if necessary
- * @param {HTMLElement} node the element that should scroll into view
- * @param {HTMLElement} menuNode the menu element of the component
- */
-function scrollIntoView(node, menuNode) {
- if (!node) {
- return
- }
-
- const actions = compute(node, {
- boundary: menuNode,
- block: 'nearest',
- scrollMode: 'if-needed',
- })
- actions.forEach(({el, top, left}) => {
- el.scrollTop = top
- el.scrollLeft = left
- })
-}
-
/**
* @param {HTMLElement} parent the parent node
* @param {HTMLElement} child the child node
@@ -117,38 +91,6 @@ function handleRefs(...refs) {
}
}
-/**
- * This generates a unique ID for an instance of Downshift
- * @return {String} the unique ID
- */
-function generateId() {
- return String(idCounter++)
-}
-
-/**
- * This is only used in tests
- * @param {Number} num the number to set the idCounter to
- */
-function setIdCounter(num) {
- idCounter = num
-}
-
-/**
- * Resets idCounter to 0. Used for SSR.
- */
-function resetIdCounter() {
- // istanbul ignore next
- if ('useId' in React) {
- console.warn(
- `It is not necessary to call resetIdCounter when using React 18+`,
- )
-
- return
- }
-
- idCounter = 0
-}
-
/**
* Default implementation for status message. Only added when menu is open.
* Will specify if there are results in the list, and if so, how many,
@@ -255,29 +197,6 @@ function pickState(state = {}) {
return result
}
-/**
- * This will perform a shallow merge of the given state object
- * with the state coming from props
- * (for the controlled component scenario)
- * This is used in state updater functions so they're referencing
- * the right state regardless of where it comes from.
- *
- * @param {Object} state The state of the component/hook.
- * @param {Object} props The props that may contain controlled values.
- * @returns {Object} The merged controlled state.
- */
-function getState(state, props) {
- if (!state || !props) {
- return state
- }
-
- return Object.keys(state).reduce((prevState, key) => {
- prevState[key] = isControlledProp(props, key) ? props[key] : state[key]
-
- return prevState
- }, {})
-}
-
/**
* This determines whether a prop is a "controlled prop" meaning it is
* state which is controlled by the outside of this component rather
@@ -476,21 +395,15 @@ export {
callAllEventHandlers,
handleRefs,
debounce,
- scrollIntoView,
- generateId,
getA11yStatusMessage,
unwrapArray,
isDOMElement,
getElementProps,
- noop,
requiredProp,
- setIdCounter,
- resetIdCounter,
pickState,
isPlainObject,
normalizeArrowKey,
targetWithinDownshift,
- getState,
isControlledProp,
validateControlledUnchanged,
getHighlightedIndex,
diff --git a/test/basic.test.tsx b/test/basic.test.tsx
index b5f9b7cd5..4270e67d0 100644
--- a/test/basic.test.tsx
+++ b/test/basic.test.tsx
@@ -1,5 +1,5 @@
import * as React from 'react'
-import Downshift, {StateChangeOptions} from '../'
+import Downshift, {StateChangeOptions} from '..'
type Item = string
diff --git a/test/custom.test.tsx b/test/custom.test.tsx
index 218e50a2a..90f8aaa0f 100644
--- a/test/custom.test.tsx
+++ b/test/custom.test.tsx
@@ -1,5 +1,5 @@
import * as React from 'react'
-import Downshift, {ControllerStateAndHelpers} from '../'
+import Downshift, { ControllerStateAndHelpers } from '..'
type Item = string
diff --git a/test/downshift.test.tsx b/test/downshift.test.tsx
index 0b9c00e1d..32dc27587 100644
--- a/test/downshift.test.tsx
+++ b/test/downshift.test.tsx
@@ -1,5 +1,4 @@
import * as React from 'react'
-
import Downshift from '..'
export const colors = [
diff --git a/test/tsconfig.json b/test/tsconfig.json
new file mode 100644
index 000000000..e78e4d116
--- /dev/null
+++ b/test/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ "extends": "../tsconfig.json",
+ "compilerOptions": {
+ "noEmit": true,
+ },
+ "include": ["../typings/index.d.ts"],
+ "exclude": []
+}
\ No newline at end of file
diff --git a/test/useCombobox.test.tsx b/test/useCombobox.test.tsx
index 08cd85286..d911770ed 100644
--- a/test/useCombobox.test.tsx
+++ b/test/useCombobox.test.tsx
@@ -1,5 +1,4 @@
import * as React from 'react'
-
import {useCombobox} from '..'
export const colors = [
diff --git a/tsconfig.json b/tsconfig.json
index 67a6c4dcd..baeaf112d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,5 @@
- {
+{
"compilerOptions": {
- "noEmit": true,
"allowJs": true,
"esModuleInterop": true,
"jsx": "react",
@@ -10,13 +9,21 @@
"resolveJsonModule": true,
"noUncheckedIndexedAccess": true,
"module": "ESNext",
- "typeRoots": ["./typings", "./node_modules/@types"],
+ "typeRoots": [
+ "./typings",
+ "./node_modules/@types",
+ "./node_modules/@testing-library"
+ ],
"strictNullChecks": true,
"outDir": "dist",
+ "declaration": true,
+ "declarationDir": "dist",
+ "emitDeclarationOnly": true,
+ "baseUrl": ".",
+ "paths": {
+ "*": ["*"]
+ }
},
- "include": [
- "typings/**/*.d.ts",
- "**/*.ts",
- "**/*.tsx",
- ],
-}
\ No newline at end of file
+ "include": ["src/**/*.ts", "src/**/*.tsx"],
+ "exclude": ["typings"]
+}
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 342f4c7dd..a53512ba2 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,906 +1,23 @@
-import * as React from 'react'
-
-type Callback = () => void
-
-type Overwrite = Pick> & U
-
-export interface DownshiftState- {
- highlightedIndex: number | null
- inputValue: string | null
- isOpen: boolean
- selectedItem: Item | null
-}
-
-export enum StateChangeTypes {
- unknown = '__autocomplete_unknown__',
- mouseUp = '__autocomplete_mouseup__',
- itemMouseEnter = '__autocomplete_item_mouseenter__',
- keyDownArrowUp = '__autocomplete_keydown_arrow_up__',
- keyDownArrowDown = '__autocomplete_keydown_arrow_down__',
- keyDownEscape = '__autocomplete_keydown_escape__',
- keyDownEnter = '__autocomplete_keydown_enter__',
- clickItem = '__autocomplete_click_item__',
- blurInput = '__autocomplete_blur_input__',
- changeInput = '__autocomplete_change_input__',
- keyDownSpaceButton = '__autocomplete_keydown_space_button__',
- clickButton = '__autocomplete_click_button__',
- blurButton = '__autocomplete_blur_button__',
- controlledPropUpdatedSelectedItem = '__autocomplete_controlled_prop_updated_selected_item__',
- touchEnd = '__autocomplete_touchend__',
-}
-
-export interface DownshiftProps
- {
- initialSelectedItem?: Item
- initialInputValue?: string
- initialHighlightedIndex?: number | null
- initialIsOpen?: boolean
- defaultHighlightedIndex?: number | null
- defaultIsOpen?: boolean
- itemToString?: (item: Item | null) => string
- selectedItemChanged?: (prevItem: Item, item: Item) => boolean
- getA11yStatusMessage?: (options: A11yStatusMessageOptions
- ) => string
- onChange?: (
- selectedItem: Item | null,
- stateAndHelpers: ControllerStateAndHelpers
- ,
- ) => void
- onSelect?: (
- selectedItem: Item | null,
- stateAndHelpers: ControllerStateAndHelpers
- ,
- ) => void
- onStateChange?: (
- options: StateChangeOptions
- ,
- stateAndHelpers: ControllerStateAndHelpers
- ,
- ) => void
- onInputValueChange?: (
- inputValue: string,
- stateAndHelpers: ControllerStateAndHelpers
- ,
- ) => void
- stateReducer?: (
- state: DownshiftState
- ,
- changes: StateChangeOptions
- ,
- ) => Partial
>
- itemCount?: number
- highlightedIndex?: number | null
- inputValue?: string | null
- isOpen?: boolean
- selectedItem?: Item | null
- children?: ChildrenFunction-
- id?: string
- inputId?: string
- labelId?: string
- menuId?: string
- getItemId?: (index?: number) => string
- environment?: Environment
- onOuterClick?: (stateAndHelpers: ControllerStateAndHelpers
- ) => void
- scrollIntoView?: (node: HTMLElement, menuNode: HTMLElement) => void
- onUserAction?: (
- options: StateChangeOptions
- ,
- stateAndHelpers: ControllerStateAndHelpers
- ,
- ) => void
- suppressRefError?: boolean
-}
-
-export interface Environment {
- addEventListener: typeof window.addEventListener
- removeEventListener: typeof window.removeEventListener
- document: Document
- Node: typeof window.Node
-}
-
-export interface A11yStatusMessageOptions
- {
- highlightedIndex: number | null
- inputValue: string
- isOpen: boolean
- itemToString: (item: Item | null) => string
- previousResultCount: number
- resultCount: number
- highlightedItem: Item
- selectedItem: Item | null
-}
-
-export interface StateChangeOptions
-
- extends Partial
> {
- type: StateChangeTypes
-}
-
-type StateChangeFunction- = (
- state: DownshiftState
- ,
-) => Partial
>
-
-export interface GetRootPropsOptions {
- refKey?: string
- ref?: React.RefObject
-}
-
-export interface GetRootPropsReturnValue {
- 'aria-expanded': boolean
- 'aria-haspopup': 'listbox'
- 'aria-labelledby': string
- 'aria-owns': string | undefined
- ref?: React.RefObject
- role: 'combobox'
-}
-
-export interface GetInputPropsOptions
- extends React.HTMLProps {
- disabled?: boolean
-}
-
-export interface GetInputPropsReturnValue {
- 'aria-autocomplete': 'list'
- 'aria-activedescendant': string | undefined
- 'aria-controls': string | undefined
- 'aria-labelledby': string | undefined
- autoComplete: 'off'
- id: string
- onChange?: React.ChangeEventHandler
- onChangeText?: React.ChangeEventHandler
- onInput?: React.FormEventHandler
- onKeyDown?: React.KeyboardEventHandler
- onBlur?: React.FocusEventHandler
- value: string
-}
-
-export interface GetLabelPropsOptions
- extends React.HTMLProps {}
-
-export interface GetLabelPropsReturnValue {
- htmlFor: string
- id: string
-}
-
-export interface GetToggleButtonPropsOptions
- extends React.HTMLProps {
- disabled?: boolean
- onPress?: (event: React.BaseSyntheticEvent) => void
-}
-
-interface GetToggleButtonPropsReturnValue {
- 'aria-label': 'close menu' | 'open menu'
- 'aria-haspopup': true
- 'data-toggle': true
- onPress?: (event: React.BaseSyntheticEvent) => void
- onClick?: React.MouseEventHandler
- onKeyDown?: React.KeyboardEventHandler
- onKeyUp?: React.KeyboardEventHandler
- onBlur?: React.FocusEventHandler
- role: 'button'
- type: 'button'
-}
-export interface GetMenuPropsOptions
- extends React.HTMLProps,
- GetPropsWithRefKey {
- ['aria-label']?: string
-}
-
-export interface GetMenuPropsReturnValue {
- 'aria-labelledby': string | undefined
- ref?: React.RefObject
- role: 'listbox'
- id: string
-}
-
-export interface GetPropsCommonOptions {
- suppressRefError?: boolean
-}
-
-export interface GetPropsWithRefKey {
- refKey?: string
-}
-
-export interface GetItemPropsOptions-
- extends React.HTMLProps
{
- index?: number
- item: Item
- isSelected?: boolean
- disabled?: boolean
-}
-
-export interface GetItemPropsReturnValue {
- 'aria-selected': boolean
- id: string
- onClick?: React.MouseEventHandler
- onMouseDown?: React.MouseEventHandler
- onMouseMove?: React.MouseEventHandler
- onPress?: React.MouseEventHandler
- role: 'option'
-}
-
-export interface PropGetters- {
- getRootProps:
(
- options?: GetRootPropsOptions & Options,
- otherOptions?: GetPropsCommonOptions,
- ) => Overwrite
- getToggleButtonProps: (
- options?: GetToggleButtonPropsOptions & Options,
- ) => Overwrite
- getLabelProps: (
- options?: GetLabelPropsOptions & Options,
- ) => Overwrite
- getMenuProps: (
- options?: GetMenuPropsOptions & Options,
- otherOptions?: GetPropsCommonOptions,
- ) => Overwrite
- getInputProps: (
- options?: GetInputPropsOptions & Options,
- ) => Overwrite
- getItemProps: (
- options: GetItemPropsOptions- & Options,
- ) => Omit
, 'index' | 'item'>
-}
-
-export interface Actions- {
- reset: (
- otherStateToSet?: Partial
>,
- cb?: Callback,
- ) => void
- openMenu: (cb?: Callback) => void
- closeMenu: (cb?: Callback) => void
- toggleMenu: (
- otherStateToSet?: Partial>,
- cb?: Callback,
- ) => void
- selectItem: (
- item: Item | null,
- otherStateToSet?: Partial>,
- cb?: Callback,
- ) => void
- selectItemAtIndex: (
- index: number,
- otherStateToSet?: Partial>,
- cb?: Callback,
- ) => void
- selectHighlightedItem: (
- otherStateToSet?: Partial>,
- cb?: Callback,
- ) => void
- setHighlightedIndex: (
- index: number,
- otherStateToSet?: Partial>,
- cb?: Callback,
- ) => void
- clearSelection: (cb?: Callback) => void
- clearItems: () => void
- setItemCount: (count: number) => void
- unsetItemCount: () => void
- setState: (
- stateToSet: Partial> | StateChangeFunction- ,
- cb?: Callback,
- ) => void
- // props
- itemToString: (item: Item | null) => string
-}
-
-export type ControllerStateAndHelpers
- = DownshiftState
- &
- PropGetters
- &
- Actions
-
-
-export type ChildrenFunction
- = (
- options: ControllerStateAndHelpers
- ,
-) => React.ReactNode
-
-export default class Downshift
- extends React.Component<
- DownshiftProps
-
-> {
- static stateChangeTypes: {
- unknown: StateChangeTypes.unknown
- mouseUp: StateChangeTypes.mouseUp
- itemMouseEnter: StateChangeTypes.itemMouseEnter
- keyDownArrowUp: StateChangeTypes.keyDownArrowUp
- keyDownArrowDown: StateChangeTypes.keyDownArrowDown
- keyDownEscape: StateChangeTypes.keyDownEscape
- keyDownEnter: StateChangeTypes.keyDownEnter
- clickItem: StateChangeTypes.clickItem
- blurInput: StateChangeTypes.blurInput
- changeInput: StateChangeTypes.changeInput
- keyDownSpaceButton: StateChangeTypes.keyDownSpaceButton
- clickButton: StateChangeTypes.clickButton
- blurButton: StateChangeTypes.blurButton
- controlledPropUpdatedSelectedItem: StateChangeTypes.controlledPropUpdatedSelectedItem
- touchEnd: StateChangeTypes.touchEnd
- }
-}
-
-export function resetIdCounter(): void
-
-/* useSelect Types */
-
-export interface UseSelectState
- {
- highlightedIndex: number
- selectedItem: Item | null
- isOpen: boolean
- inputValue: string
-}
-
-export enum UseSelectStateChangeTypes {
- ToggleButtonClick = '__togglebutton_click__',
- ToggleButtonKeyDownArrowDown = '__togglebutton_keydown_arrow_down__',
- ToggleButtonKeyDownArrowUp = '__togglebutton_keydown_arrow_up__',
- ToggleButtonKeyDownCharacter = '__togglebutton_keydown_character__',
- ToggleButtonKeyDownEscape = '__togglebutton_keydown_escape__',
- ToggleButtonKeyDownHome = '__togglebutton_keydown_home__',
- ToggleButtonKeyDownEnd = '__togglebutton_keydown_end__',
- ToggleButtonKeyDownEnter = '__togglebutton_keydown_enter__',
- ToggleButtonKeyDownSpaceButton = '__togglebutton_keydown_space_button__',
- ToggleButtonKeyDownPageUp = '__togglebutton_keydown_page_up__',
- ToggleButtonKeyDownPageDown = '__togglebutton_keydown_page_down__',
- ToggleButtonBlur = '__togglebutton_blur__',
- MenuMouseLeave = '__menu_mouse_leave__',
- ItemMouseMove = '__item_mouse_move__',
- ItemClick = '__item_click__',
- FunctionToggleMenu = '__function_toggle_menu__',
- FunctionOpenMenu = '__function_open_menu__',
- FunctionCloseMenu = '__function_close_menu__',
- FunctionSetHighlightedIndex = '__function_set_highlighted_index__',
- FunctionSelectItem = '__function_select_item__',
- FunctionSetInputValue = '__function_set_input_value__',
- FunctionReset = '__function_reset__',
-}
-
-export interface UseSelectProps
- {
- items: Item[]
- isItemDisabled?(item: Item, index: number): boolean
- itemToString?: (item: Item | null) => string
- itemToKey?: (item: Item | null) => any
- getA11yStatusMessage?: (options: UseSelectState
- ) => string
- highlightedIndex?: number
- initialHighlightedIndex?: number
- defaultHighlightedIndex?: number
- isOpen?: boolean
- initialIsOpen?: boolean
- defaultIsOpen?: boolean
- selectedItem?: Item | null
- initialSelectedItem?: Item | null
- defaultSelectedItem?: Item | null
- id?: string
- labelId?: string
- menuId?: string
- toggleButtonId?: string
- getItemId?: (index: number) => string
- scrollIntoView?: (node: HTMLElement, menuNode: HTMLElement) => void
- stateReducer?: (
- state: UseSelectState
- ,
- actionAndChanges: UseSelectStateChangeOptions
- ,
- ) => Partial
>
- onSelectedItemChange?: (changes: UseSelectSelectedItemChange- ) => void
- onIsOpenChange?: (changes: UseSelectIsOpenChange
- ) => void
- onHighlightedIndexChange?: (
- changes: UseSelectHighlightedIndexChange
- ,
- ) => void
- onStateChange?: (changes: UseSelectStateChange
- ) => void
- environment?: Environment
-}
-
-export interface UseSelectStateChangeOptions
-
- extends UseSelectDispatchAction
- {
- changes: Partial
>
-}
-
-export interface UseSelectDispatchAction- {
- type: UseSelectStateChangeTypes
- altKey?: boolean
- key?: string
- index?: number
- highlightedIndex?: number
- selectedItem?: Item | null
- inputValue?: string
-}
-
-export interface UseSelectStateChange
-
- extends Partial
> {
- type: UseSelectStateChangeTypes
-}
-
-export interface UseSelectSelectedItemChange-
- extends UseSelectStateChange
- {
- selectedItem: Item | null
-}
-
-export interface UseSelectHighlightedIndexChange
-
- extends UseSelectStateChange
- {
- highlightedIndex: number
-}
-
-export interface UseSelectIsOpenChange
-
- extends UseSelectStateChange
- {
- isOpen: boolean
-}
-
-export interface UseSelectGetMenuPropsOptions
- extends GetPropsWithRefKey,
- GetMenuPropsOptions {}
-
-export interface UseSelectGetMenuReturnValue extends GetMenuPropsReturnValue {
- onMouseLeave: React.MouseEventHandler
-}
-
-export interface UseSelectGetToggleButtonPropsOptions
- extends GetPropsWithRefKey,
- React.HTMLProps
{
- onPress?: (event: React.BaseSyntheticEvent) => void
-}
-
-export interface UseSelectGetToggleButtonReturnValue
- extends Pick<
- GetToggleButtonPropsReturnValue,
- 'onBlur' | 'onClick' | 'onPress' | 'onKeyDown'
- > {
- 'aria-activedescendant': string
- 'aria-controls': string
- 'aria-expanded': boolean
- 'aria-haspopup': 'listbox'
- 'aria-labelledby': string | undefined
- id: string
- ref?: React.RefObject
- role: 'combobox'
- tabIndex: 0
-}
-
-export interface UseSelectGetLabelPropsOptions extends GetLabelPropsOptions {}
-export interface UseSelectGetLabelPropsReturnValue
- extends GetLabelPropsReturnValue {
- onClick: React.MouseEventHandler
-}
-
-export interface UseSelectGetItemPropsOptions-
- extends Omit
, 'disabled'>,
- GetPropsWithRefKey {}
-
-export interface UseSelectGetItemPropsReturnValue
- extends GetItemPropsReturnValue {
- 'aria-disabled': boolean
- ref?: React.RefObject
-}
-
-export interface UseSelectPropGetters- {
- getToggleButtonProps:
(
- options?: UseSelectGetToggleButtonPropsOptions & Options,
- otherOptions?: GetPropsCommonOptions,
- ) => Overwrite
- getLabelProps: (
- options?: UseSelectGetLabelPropsOptions & Options,
- ) => Overwrite
- getMenuProps: (
- options?: UseSelectGetMenuPropsOptions & Options,
- otherOptions?: GetPropsCommonOptions,
- ) => Overwrite
- getItemProps: (
- options: UseSelectGetItemPropsOptions- & Options,
- ) => Omit<
- Overwrite
,
- 'index' | 'item'
- >
-}
-
-export interface UseSelectActions- {
- reset: () => void
- openMenu: () => void
- closeMenu: () => void
- toggleMenu: () => void
- selectItem: (item: Item | null) => void
- setHighlightedIndex: (index: number) => void
-}
-
-export type UseSelectReturnValue
- = UseSelectState
- &
- UseSelectPropGetters
- &
- UseSelectActions
-
-
-export interface UseSelectInterface {
-
- (props: UseSelectProps
- ): UseSelectReturnValue
-
- stateChangeTypes: {
- ToggleButtonClick: UseSelectStateChangeTypes.ToggleButtonClick
- ToggleButtonKeyDownArrowDown: UseSelectStateChangeTypes.ToggleButtonKeyDownArrowDown
- ToggleButtonKeyDownArrowUp: UseSelectStateChangeTypes.ToggleButtonKeyDownArrowUp
- ToggleButtonKeyDownCharacter: UseSelectStateChangeTypes.ToggleButtonKeyDownCharacter
- ToggleButtonKeyDownEscape: UseSelectStateChangeTypes.ToggleButtonKeyDownEscape
- ToggleButtonKeyDownHome: UseSelectStateChangeTypes.ToggleButtonKeyDownHome
- ToggleButtonKeyDownEnd: UseSelectStateChangeTypes.ToggleButtonKeyDownEnd
- ToggleButtonKeyDownEnter: UseSelectStateChangeTypes.ToggleButtonKeyDownEnter
- ToggleButtonKeyDownSpaceButton: UseSelectStateChangeTypes.ToggleButtonKeyDownSpaceButton
- ToggleButtonKeyDownPageUp: UseSelectStateChangeTypes.ToggleButtonKeyDownPageUp
- ToggleButtonKeyDownPageDown: UseSelectStateChangeTypes.ToggleButtonKeyDownPageDown
- ToggleButtonBlur: UseSelectStateChangeTypes.ToggleButtonBlur
- MenuMouseLeave: UseSelectStateChangeTypes.MenuMouseLeave
- ItemMouseMove: UseSelectStateChangeTypes.ItemMouseMove
- ItemClick: UseSelectStateChangeTypes.ItemClick
- FunctionToggleMenu: UseSelectStateChangeTypes.FunctionToggleMenu
- FunctionOpenMenu: UseSelectStateChangeTypes.FunctionOpenMenu
- FunctionCloseMenu: UseSelectStateChangeTypes.FunctionCloseMenu
- FunctionSetHighlightedIndex: UseSelectStateChangeTypes.FunctionSetHighlightedIndex
- FunctionSelectItem: UseSelectStateChangeTypes.FunctionSelectItem
- FunctionSetInputValue: UseSelectStateChangeTypes.FunctionSetInputValue
- FunctionReset: UseSelectStateChangeTypes.FunctionReset
- }
-}
-
-export const useSelect: UseSelectInterface
-
-/* useCombobox Types */
-
-export interface UseComboboxState
- {
- highlightedIndex: number
- selectedItem: Item | null
- isOpen: boolean
- inputValue: string
-}
-
-export enum UseComboboxStateChangeTypes {
- InputKeyDownArrowDown = '__input_keydown_arrow_down__',
- InputKeyDownArrowUp = '__input_keydown_arrow_up__',
- InputKeyDownEscape = '__input_keydown_escape__',
- InputKeyDownHome = '__input_keydown_home__',
- InputKeyDownEnd = '__input_keydown_end__',
- InputKeyDownPageUp = '__input_keydown_page_up__',
- InputKeyDownPageDown = '__input_keydown_page_down__',
- InputKeyDownEnter = '__input_keydown_enter__',
- InputChange = '__input_change__',
- InputBlur = '__input_blur__',
- InputClick = '__input_click__',
- MenuMouseLeave = '__menu_mouse_leave__',
- ItemMouseMove = '__item_mouse_move__',
- ItemClick = '__item_click__',
- ToggleButtonClick = '__togglebutton_click__',
- FunctionToggleMenu = '__function_toggle_menu__',
- FunctionOpenMenu = '__function_open_menu__',
- FunctionCloseMenu = '__function_close_menu__',
- FunctionSetHighlightedIndex = '__function_set_highlighted_index__',
- FunctionSelectItem = '__function_select_item__',
- FunctionSetInputValue = '__function_set_input_value__',
- FunctionReset = '__function_reset__',
- ControlledPropUpdatedSelectedItem = '__controlled_prop_updated_selected_item__',
-}
-
-export interface UseComboboxProps
- {
- items: Item[]
- isItemDisabled?(item: Item, index: number): boolean
- itemToString?: (item: Item | null) => string
- itemToKey?: (item: Item | null) => any
- getA11yStatusMessage?: (options: UseComboboxState
- ) => string
- highlightedIndex?: number
- initialHighlightedIndex?: number
- defaultHighlightedIndex?: number
- isOpen?: boolean
- initialIsOpen?: boolean
- defaultIsOpen?: boolean
- selectedItem?: Item | null
- initialSelectedItem?: Item | null
- defaultSelectedItem?: Item | null
- inputValue?: string
- initialInputValue?: string
- defaultInputValue?: string
- id?: string
- labelId?: string
- menuId?: string
- toggleButtonId?: string
- inputId?: string
- getItemId?: (index: number) => string
- scrollIntoView?: (node: HTMLElement, menuNode: HTMLElement) => void
- stateReducer?: (
- state: UseComboboxState
- ,
- actionAndChanges: UseComboboxStateChangeOptions
- ,
- ) => Partial
>
- onSelectedItemChange?: (changes: UseComboboxSelectedItemChange- ) => void
- onIsOpenChange?: (changes: UseComboboxIsOpenChange
- ) => void
- onHighlightedIndexChange?: (
- changes: UseComboboxHighlightedIndexChange
- ,
- ) => void
- onStateChange?: (changes: UseComboboxStateChange
- ) => void
- onInputValueChange?: (changes: UseComboboxInputValueChange
- ) => void
- environment?: Environment
-}
-
-export interface UseComboboxStateChangeOptions
-
- extends UseComboboxDispatchAction
- {
- changes: Partial
>
-}
-
-export interface UseComboboxDispatchAction- {
- type: UseComboboxStateChangeTypes
- altKey?: boolean
- inputValue?: string
- index?: number
- highlightedIndex?: number
- selectedItem?: Item | null
- selectItem?: boolean
-}
-
-export interface UseComboboxStateChange
-
- extends Partial
> {
- type: UseComboboxStateChangeTypes
-}
-
-export interface UseComboboxSelectedItemChange-
- extends UseComboboxStateChange
- {
- selectedItem: Item | null
-}
-export interface UseComboboxHighlightedIndexChange
-
- extends UseComboboxStateChange