@procore/core-react 11.22.1 → 11.23.0

package/dist/SuperSelect/useSuperSelect.test.js

@@ -0,0 +1,1284 @@
+import { act, renderHook } from '@testing-library/react-hooks'
+import {
+  draggableOptionIdSymbol,
+  isOptgroupSymbol,
+} from './SuperSelect.constants'
+import { useSuperSelect } from './useSuperSelect'
+
+describe('setSearchValue', () => {
+  jest.useFakeTimers()
+
+  test('should set new searchValue', () => {
+    const { result } = renderHook(() => useSuperSelect({}))
+
+    act(() => {
+      result.current.state.setSearchValue('ababa')
+      result.current.state.setSearchValue('ababa2')
+      result.current.state.setSearchValue('ababa1')
+      jest.runAllTimers()
+    })
+
+    expect(result.current.state.searchValue).toEqual('ababa1')
+
+    act(() => {
+      result.current.state.setSearchValue('The value')
+      jest.runAllTimers()
+    })
+
+    expect(result.current.state.searchValue).toEqual('The value')
+  })
+})
+
+describe('getClearProps', () => {
+  test('should return value [] and set open true', () => {
+    const { result } = renderHook(() =>
+      useSuperSelect({ multiple: true, initialValue: ['123', '321'] })
+    )
+
+    const stopPropagationMock = jest.fn()
+
+    act(() => {
+      result.current.props.clear().onClick({
+        stopPropagation: stopPropagationMock,
+      })
+    })
+
+    expect(result.current.state.value).toEqual([])
+    expect(result.current.state.open).toEqual(true)
+  })
+})
+
+describe('getOptionGroup', () => {
+  test('should return group name default', () => {
+    const { result } = renderHook(() => useSuperSelect({}))
+    expect(
+      result.current.option.group({
+        id: 2,
+        label: 'item 2',
+        group: 'Group 1',
+      })
+    ).toEqual('Group 1')
+
+    expect(
+      result.current.option.group({
+        id: 2,
+        label: 'item 2',
+      })
+    ).toEqual('')
+  })
+
+  test('should return option group custom', () => {
+    const { result } = renderHook(() =>
+      useSuperSelect({
+        getOptionGroup: (option) => option?.customGroup ?? '',
+      })
+    )
+
+    expect(
+      result.current.option.group({
+        id: 2,
+        label: 'item 2',
+        customGroup: 'Group custom',
+      })
+    ).toEqual('Group custom')
+
+    expect(
+      result.current.option.group({
+        id: 2,
+        label: 'item 2',
+      })
+    ).toEqual('')
+  })
+})
+
+describe('getOptionIsBatch', () => {
+  test('should return true if is batch', () => {
+    const { result } = renderHook(() => useSuperSelect({}))
+    expect(
+      result.current.option.isBatch({
+        id: '1',
+        group: 'Groups 1',
+        value: [2, 4, 6],
+        label: 'Group B',
+        disabled: false,
+      })
+    ).toEqual(true)
+
+    expect(
+      result.current.option.isBatch({
+        id: '1',
+        group: 'Groups 1',
+        option: 'test 1',
+        label: 'Group B',
+        disabled: false,
+      })
+    ).toEqual(false)
+  })
+
+  test('should return true if is custom batch', () => {
+    const { result } = renderHook(() =>
+      useSuperSelect({
+        getOptionIsBatch: (option) => {
+          return Array.isArray(option?.customValue)
+        },
+      })
+    )
+
+    expect(
+      result.current.option.isBatch({
+        id: '1',
+        group: 'Groups 1',
+        customValue: [2, 4, 6],
+        label: 'Group B',
+        disabled: false,
+      })
+    ).toEqual(true)
+
+    expect(
+      result.current.option.isBatch({
+        id: '1',
+        group: 'Groups 1',
+        label: 'Group B',
+        disabled: false,
+      })
+    ).toEqual(false)
+  })
+})
+
+describe('getOptionIsDisabled', () => {
+  test('should return true if option is disabled', () => {
+    const { result } = renderHook(() => useSuperSelect({}))
+
+    expect(
+      result.current.option.isDisabled({
+        id: 2,
+        label: 'item 2',
+        group: 'Group 1',
+        disabled: true,
+      })
+    ).toEqual(true)
+
+    expect(
+      result.current.option.isDisabled({
+        id: 2,
+        label: 'item 2',
+        group: 'Group 1',
+      })
+    ).toEqual(false)
+  })
+
+  test('should return true if option is disabled custom', () => {
+    const { result } = renderHook(() =>
+      useSuperSelect({
+        getOptionIsDisabled: (option) => {
+          return option?.customDisabled ?? false
+        },
+      })
+    )
+
+    expect(
+      result.current.option.isDisabled({
+        id: 2,
+        label: 'item 2',
+        group: 'Group 1',
+        customDisabled: true,
+      })
+    ).toEqual(true)
+
+    expect(
+      result.current.option.isDisabled({
+        id: 2,
+        label: 'item 2',
+        group: 'Group 1',
+      })
+    ).toEqual(false)
+  })
+})
+
+describe('getOptionLabel', () => {
+  test('should return label', () => {
+    const { result } = renderHook(() => useSuperSelect({}))
+
+    expect(
+      result.current.option.label({
+        id: 2,
+        label: 'item 2',
+        group: 'Group 1',
+      })
+    ).toEqual('item 2')
+
+    expect(
+      result.current.option.label({
+        id: 2,
+        group: 'Group 1',
+      })
+    ).toEqual('')
+  })
+
+  test('should return custom label', () => {
+    const { result } = renderHook(() =>
+      useSuperSelect({
+        getOptionLabel: (option) => {
+          return option?.customLabel ?? ''
+        },
+      })
+    )
+
+    expect(
+      result.current.option.label({
+        id: 2,
+        customLabel: 'item 2',
+        group: 'Group 1',
+      })
+    ).toEqual('item 2')
+
+    expect(
+      result.current.option.label({
+        id: 2,
+        group: 'Group 1',
+      })
+    ).toEqual('')
+  })
+})
+
+describe('onSelect', () => {
+  describe('multiple', () => {
+    test('should handle batch option value', () => {
+      const { result } = renderHook(() =>
+        useSuperSelect({ multiple: true, defaultValue: ['123', '321'] })
+      )
+
+      act(() => {
+        result.current.state.onSelect({
+          value: ['456', '123'],
+        })
+      })
+
+      expect(result.current.state.value).toEqual(['123', '321', '456'])
+    })
+
+    test('should not select disabled option', () => {
+      const { result } = renderHook(() =>
+        useSuperSelect({ multiple: true, defaultValue: ['123', '321'] })
+      )
+
+      act(() => {
+        result.current.state.onSelect({
+          value: ['456', '123'],
+          disabled: true,
+        })
+      })
+
+      expect(result.current.state.value).toEqual(['123', '321'])
+    })
+
+    test('should handle regular option', () => {
+      const { result } = renderHook(() =>
+        useSuperSelect({ multiple: true, defaultValue: ['123', '321'] })
+      )
+
+      act(() => {
+        result.current.state.onSelect({
+          value: '456',
+        })
+      })
+
+      expect(result.current.state.value).toEqual(['123', '321', '456'])
+    })
+  })
+
+  describe('single', () => {
+    test('should not select disabled option', () => {
+      const { result } = renderHook(() =>
+        useSuperSelect({ multiple: false, defaultValue: '123' })
+      )
+
+      act(() => {
+        result.current.state.onSelect({
+          value: '456',
+          disabled: true,
+        })
+      })
+
+      expect(result.current.state.value).toEqual('123')
+    })
+
+    test('should set new value', () => {
+      const { result } = renderHook(() =>
+        useSuperSelect({ multiple: false, defaultValue: '123' })
+      )
+
+      act(() => {
+        result.current.state.onSelect({
+          value: '456',
+        })
+      })
+
+      expect(result.current.state.value).toEqual('456')
+    })
+  })
+})
+
+describe('controlled API', () => {
+  test('should always return value when passed value', () => {
+    const { result } = renderHook(() => useSuperSelect({ value: '123' }))
+
+    expect(result.current.state.value).toEqual('123')
+  })
+
+  test('should call onChange when value is changed', () => {
+    const onChangeMock = jest.fn()
+    const { result, rerender } = renderHook(useSuperSelect, {
+      initialProps: {
+        value: '123',
+        onChange: onChangeMock,
+      },
+    })
+
+    act(() => {
+      result.current.state.onSelect({
+        value: '456',
+      })
+    })
+
+    rerender({ value: '456' })
+
+    expect(onChangeMock).toHaveBeenCalledWith('456')
+    expect(result.current.state.value).toEqual('456')
+  })
+})
+
+describe('uncontrolled API', () => {
+  test('should call onChange when the value is changed', () => {
+    const onChangeMock = jest.fn()
+
+    const { result } = renderHook(() =>
+      useSuperSelect({
+        defaultValue: '123',
+        onChange: (v) => {
+          onChangeMock(v)
+        },
+      })
+    )
+
+    expect(onChangeMock).not.toHaveBeenCalled()
+    expect(result.current.state.value).toEqual('123')
+
+    act(() => {
+      result.current.state.onSelect({
+        value: '321',
+      })
+    })
+
+    expect(onChangeMock).toHaveBeenCalledWith('321')
+    expect(result.current.state.value).toEqual('321')
+  })
+})
+
+describe('options', () => {
+  describe('draggable = false', () => {
+    describe('sorted', () => {
+      test('should return unfiltered array', () => {
+        const { result } = renderHook(useSuperSelect, {
+          initialProps: {
+            options: [
+              { label: 'value 0', value: 0, group: 'Group 1' },
+              {
+                label: 'value 1',
+                value: 1,
+              },
+              {
+                label: 'Batch Group 1.1',
+                value: [4, 6],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                label: 'Batch Group 1.2',
+                value: [1, 7],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                value: [2, 3, 5],
+                label: 'Batch Group',
+                group: 'Batch Group',
+                disabled: false,
+              },
+              {
+                value: [9, 8, 10],
+                label: 'Batch Ungrouped',
+                disabled: false,
+              },
+              { label: 'value 2', value: 2, group: 'Group 2' },
+              { label: 'value 3', value: 3, group: 'Group 2' },
+              {
+                label: 'Batch Group 2',
+                value: [11, 12, 13],
+                group: 'Group 2',
+                disabled: false,
+              },
+            ],
+            multiple: true,
+            value: [2, 3, 5],
+          },
+        })
+
+        expect(result.current.state.options).toEqual([
+          {
+            value: [9, 8, 10],
+            label: 'Batch Ungrouped',
+            disabled: false,
+          },
+          {
+            label: 'value 1',
+            value: 1,
+          },
+          {
+            id: 'Batch Group',
+            label: 'Batch Group',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            value: [2, 3, 5],
+            label: 'Batch Group',
+            group: 'Batch Group',
+            disabled: true,
+          },
+          {
+            id: 'Group 1',
+            label: 'Group 1',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            label: 'Batch Group 1.1',
+            value: [4, 6],
+            group: 'Group 1',
+            disabled: false,
+          },
+          {
+            label: 'Batch Group 1.2',
+            value: [1, 7],
+            group: 'Group 1',
+            disabled: false,
+          },
+          { label: 'value 0', value: 0, group: 'Group 1' },
+          {
+            id: 'Group 2',
+            label: 'Group 2',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            label: 'Batch Group 2',
+            value: [11, 12, 13],
+            group: 'Group 2',
+            disabled: false,
+          },
+          { label: 'value 2', value: 2, group: 'Group 2' },
+          { label: 'value 3', value: 3, group: 'Group 2' },
+        ])
+      })
+
+      test('should return filtered array', () => {
+        jest.useFakeTimers()
+
+        const { result } = renderHook(useSuperSelect, {
+          initialProps: {
+            options: [
+              { label: 'value 0', value: 0, group: 'Group 1' },
+              {
+                label: 'value 1',
+                value: 1,
+              },
+              {
+                label: 'Batch Group 1.1',
+                value: [4, 6],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                label: 'Batch Group 1.2',
+                value: [1, 7],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                value: [2, 3, 5],
+                label: 'Batch Group',
+                group: 'Batch Group',
+                disabled: false,
+              },
+              {
+                value: [9, 8, 10],
+                label: 'Batch Ungrouped',
+                disabled: false,
+              },
+              { label: 'value 2', value: 2, group: 'Group 2' },
+              { label: 'value 3', value: 3, group: 'Group 2' },
+              {
+                label: 'Batch Group 2',
+                value: [11, 12, 13],
+                group: 'Group 2',
+                disabled: false,
+              },
+            ],
+            multiple: true,
+            value: [2, 3, 5],
+          },
+        })
+
+        act(() => {
+          result.current.state.setSearchValue('value')
+          jest.runAllTimers()
+        })
+
+        expect(result.current.state.options).toEqual([
+          {
+            label: 'value 1',
+            value: 1,
+          },
+          {
+            id: 'Group 1',
+            label: 'Group 1',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            group: 'Group 1',
+            label: 'value 0',
+            value: 0,
+          },
+          {
+            id: 'Group 2',
+            label: 'Group 2',
+            [isOptgroupSymbol]: true,
+          },
+          { label: 'value 2', value: 2, group: 'Group 2' },
+          { label: 'value 3', value: 3, group: 'Group 2' },
+        ])
+      })
+    })
+
+    describe('unsorted', () => {
+      test('should return unfiltered array', () => {
+        const { result } = renderHook(useSuperSelect, {
+          initialProps: {
+            options: [
+              { label: 'value 0', value: 0, group: 'Group 1' },
+              {
+                label: 'value 1',
+                value: 1,
+              },
+              {
+                label: 'Batch Group 1.1',
+                value: [4, 6],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                label: 'Batch Group 1.2',
+                value: [1, 7],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                value: [2, 3, 5],
+                label: 'Batch Group',
+                group: 'Batch Group',
+                disabled: false,
+              },
+              {
+                value: [9, 8, 10],
+                label: 'Batch Ungrouped',
+                disabled: false,
+              },
+              { label: 'value 2', value: 2, group: 'Group 2' },
+              { label: 'value 3', value: 3, group: 'Group 2' },
+              {
+                label: 'Batch Group 2',
+                value: [11, 12, 13],
+                group: 'Group 2',
+                disabled: false,
+              },
+            ],
+            multiple: true,
+            value: [2, 3, 5],
+            sort: false,
+          },
+        })
+
+        expect(result.current.state.options).toEqual([
+          {
+            label: 'value 1',
+            value: 1,
+          },
+          {
+            value: [9, 8, 10],
+            label: 'Batch Ungrouped',
+            disabled: false,
+          },
+          {
+            id: 'Group 1',
+            label: 'Group 1',
+            [isOptgroupSymbol]: true,
+          },
+          { label: 'value 0', value: 0, group: 'Group 1' },
+          {
+            label: 'Batch Group 1.1',
+            value: [4, 6],
+            group: 'Group 1',
+            disabled: false,
+          },
+          {
+            label: 'Batch Group 1.2',
+            value: [1, 7],
+            group: 'Group 1',
+            disabled: false,
+          },
+          {
+            id: 'Batch Group',
+            label: 'Batch Group',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            value: [2, 3, 5],
+            label: 'Batch Group',
+            group: 'Batch Group',
+            disabled: true,
+          },
+          {
+            id: 'Group 2',
+            label: 'Group 2',
+            [isOptgroupSymbol]: true,
+          },
+          { label: 'value 2', value: 2, group: 'Group 2' },
+          { label: 'value 3', value: 3, group: 'Group 2' },
+          {
+            label: 'Batch Group 2',
+            value: [11, 12, 13],
+            group: 'Group 2',
+            disabled: false,
+          },
+        ])
+      })
+
+      test('should return filtered array', () => {
+        jest.useFakeTimers()
+
+        const { result } = renderHook(useSuperSelect, {
+          initialProps: {
+            options: [
+              { label: 'value 0', value: 0, group: 'Group 1' },
+              {
+                label: 'value 1',
+                value: 1,
+              },
+              {
+                label: 'Batch Group 1.1',
+                value: [4, 6],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                label: 'Batch Group 1.2',
+                value: [1, 7],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                value: [2, 3, 5],
+                label: 'Batch Group',
+                group: 'Batch Group',
+                disabled: false,
+              },
+              {
+                value: [9, 8, 10],
+                label: 'Batch Ungrouped',
+                disabled: false,
+              },
+              { label: 'value 2', value: 2, group: 'Group 2' },
+              { label: 'value 3', value: 3, group: 'Group 2' },
+              {
+                label: 'Batch Group 2',
+                value: [11, 12, 13],
+                group: 'Group 2',
+                disabled: false,
+              },
+            ],
+            multiple: true,
+            value: [2, 3, 5],
+            sort: false,
+          },
+        })
+
+        act(() => {
+          result.current.state.setSearchValue('value')
+          jest.runAllTimers()
+        })
+
+        expect(result.current.state.options).toEqual([
+          {
+            label: 'value 1',
+            value: 1,
+          },
+          {
+            id: 'Group 1',
+            label: 'Group 1',
+            [isOptgroupSymbol]: true,
+          },
+          { label: 'value 0', value: 0, group: 'Group 1' },
+          {
+            id: 'Group 2',
+            label: 'Group 2',
+            [isOptgroupSymbol]: true,
+          },
+          { label: 'value 2', value: 2, group: 'Group 2' },
+          { label: 'value 3', value: 3, group: 'Group 2' },
+        ])
+      })
+    })
+  })
+
+  describe('draggable = true', () => {
+    describe('sorted', () => {
+      test('should return filtered array', () => {
+        jest.useFakeTimers()
+
+        const { result } = renderHook(useSuperSelect, {
+          initialProps: {
+            draggable: true,
+            options: [
+              { label: 'value 0', value: 0, group: 'Group 1' },
+              {
+                label: 'value 1',
+                value: 1,
+              },
+              {
+                label: 'Batch Group 1.1',
+                value: [4, 6],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                label: 'Batch Group 1.2',
+                value: [1, 7],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                value: [2, 3, 5],
+                label: 'Batch Group',
+                group: 'Batch Group',
+                disabled: false,
+              },
+              {
+                value: [2, 3, 5],
+                label: 'Batch Group',
+                group: 'Batch Group',
+                disabled: false,
+              },
+              {
+                value: [9, 8, 10],
+                label: 'Batch Ungrouped',
+                disabled: false,
+              },
+              { label: 'value 2', value: 2, group: 'Group 2' },
+              { label: 'value 3', value: 3, group: 'Group 2' },
+              {
+                label: 'Batch Group 2',
+                value: [11, 12, 13],
+                group: 'Group 2',
+                disabled: false,
+              },
+            ],
+
+            multiple: true,
+            value: [2, 3, 5],
+          },
+        })
+
+        act(() => {
+          result.current.state.setSearchValue('value')
+          jest.runAllTimers()
+        })
+
+        expect(result.current.state.options).toEqual([
+          {
+            label: 'value 1',
+            value: 1,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            id: 'Group 1',
+            label: 'Group 1',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            group: 'Group 1',
+            label: 'value 0',
+            value: 0,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            id: 'Group 2',
+            label: 'Group 2',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            label: 'value 2',
+            value: 2,
+            group: 'Group 2',
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            label: 'value 3',
+            value: 3,
+            group: 'Group 2',
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+        ])
+      })
+
+      test('should return unfiltered array', () => {
+        const { result } = renderHook(useSuperSelect, {
+          initialProps: {
+            draggable: true,
+            options: [
+              { label: 'value 0', value: 0, group: 'Group 1' },
+              {
+                label: 'value 1',
+                value: 1,
+              },
+              {
+                label: 'Batch Group 1.1',
+                value: [4, 6],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                label: 'Batch Group 1.2',
+                value: [1, 7],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                value: [2, 3, 5],
+                label: 'Batch Group',
+                group: 'Batch Group',
+                disabled: false,
+              },
+              {
+                value: [9, 8, 10],
+                label: 'Batch Ungrouped',
+                disabled: false,
+              },
+              { label: 'value 2', value: 2, group: 'Group 2' },
+              { label: 'value 3', value: 3, group: 'Group 2' },
+              {
+                label: 'Batch Group 2',
+                value: [11, 12, 13],
+                group: 'Group 2',
+                disabled: false,
+              },
+            ],
+
+            multiple: true,
+            value: [2, 3, 5],
+          },
+        })
+
+        expect(result.current.state.options).toEqual([
+          {
+            value: [9, 8, 10],
+            label: 'Batch Ungrouped',
+            disabled: false,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            label: 'value 1',
+            value: 1,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            id: 'Batch Group',
+            label: 'Batch Group',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            value: [2, 3, 5],
+            label: 'Batch Group',
+            group: 'Batch Group',
+            disabled: true,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            id: 'Group 1',
+            label: 'Group 1',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            label: 'Batch Group 1.1',
+            value: [4, 6],
+            group: 'Group 1',
+            disabled: false,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            label: 'Batch Group 1.2',
+            value: [1, 7],
+            group: 'Group 1',
+            disabled: false,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            label: 'value 0',
+            value: 0,
+            group: 'Group 1',
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            id: 'Group 2',
+            label: 'Group 2',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            label: 'Batch Group 2',
+            value: [11, 12, 13],
+            group: 'Group 2',
+            disabled: false,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            label: 'value 2',
+            value: 2,
+            group: 'Group 2',
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            label: 'value 3',
+            value: 3,
+            group: 'Group 2',
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+        ])
+      })
+
+      test('should return filtered array', () => {
+        jest.useFakeTimers()
+
+        const { result } = renderHook(useSuperSelect, {
+          initialProps: {
+            draggable: true,
+            options: [
+              { label: 'value 0', value: 0, group: 'Group 1' },
+              {
+                label: 'value 1',
+                value: 1,
+              },
+              {
+                label: 'Batch Group 1.1',
+                value: [4, 6],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                label: 'Batch Group 1.2',
+                value: [1, 7],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                value: [2, 3, 5],
+                label: 'Batch Group',
+                group: 'Batch Group',
+                disabled: false,
+              },
+              {
+                value: [2, 3, 5],
+                label: 'Batch Group',
+                group: 'Batch Group',
+                disabled: false,
+              },
+              {
+                value: [9, 8, 10],
+                label: 'Batch Ungrouped',
+                disabled: false,
+              },
+              { label: 'value 2', value: 2, group: 'Group 2' },
+              { label: 'value 3', value: 3, group: 'Group 2' },
+              {
+                label: 'Batch Group 2',
+                value: [11, 12, 13],
+                group: 'Group 2',
+                disabled: false,
+              },
+            ],
+
+            multiple: true,
+            value: [2, 3, 5],
+          },
+        })
+
+        act(() => {
+          result.current.state.setSearchValue('value')
+          jest.runAllTimers()
+        })
+
+        expect(result.current.state.options).toEqual([
+          {
+            label: 'value 1',
+            value: 1,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            id: 'Group 1',
+            label: 'Group 1',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            group: 'Group 1',
+            label: 'value 0',
+            value: 0,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            id: 'Group 2',
+            label: 'Group 2',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            label: 'value 2',
+            value: 2,
+            group: 'Group 2',
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            label: 'value 3',
+            value: 3,
+            group: 'Group 2',
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+        ])
+      })
+    })
+
+    describe('unsorted', () => {
+      test('should return filtered array', () => {
+        jest.useFakeTimers()
+
+        const { result } = renderHook(useSuperSelect, {
+          initialProps: {
+            draggable: true,
+            options: [
+              { label: 'value 0', value: 0, group: 'Group 1' },
+              {
+                label: 'value 1',
+                value: 1,
+              },
+              {
+                label: 'Batch Group 1.1',
+                value: [4, 6],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                label: 'Batch Group 1.2',
+                value: [1, 7],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                value: [2, 3, 5],
+                label: 'Batch Group',
+                group: 'Batch Group',
+                disabled: false,
+              },
+              {
+                value: [9, 8, 10],
+                label: 'Batch Ungrouped',
+                disabled: false,
+              },
+              { label: 'value 2', value: 2, group: 'Group 2' },
+              { label: 'value 3', value: 3, group: 'Group 2' },
+              {
+                label: 'Batch Group 2',
+                value: [11, 12, 13],
+                group: 'Group 2',
+                disabled: false,
+              },
+            ],
+
+            multiple: true,
+            value: [2, 3, 5],
+            sort: false,
+          },
+        })
+
+        act(() => {
+          result.current.state.setSearchValue('value')
+          jest.runAllTimers()
+        })
+
+        expect(result.current.state.options).toEqual([
+          {
+            label: 'value 1',
+            value: 1,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            id: 'Group 1',
+            label: 'Group 1',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            label: 'value 0',
+            value: 0,
+            group: 'Group 1',
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            id: 'Group 2',
+            label: 'Group 2',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            label: 'value 2',
+            value: 2,
+            group: 'Group 2',
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            label: 'value 3',
+            value: 3,
+            group: 'Group 2',
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+        ])
+      })
+
+      test('should return unfiltered array', () => {
+        const { result } = renderHook(useSuperSelect, {
+          initialProps: {
+            draggable: true,
+            options: [
+              { label: 'value 0', value: 0, group: 'Group 1' },
+              {
+                label: 'value 1',
+                value: 1,
+              },
+              {
+                label: 'Batch Group 1.1',
+                value: [4, 6],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                label: 'Batch Group 1.2',
+                value: [1, 7],
+                group: 'Group 1',
+                disabled: false,
+              },
+              {
+                value: [2, 3, 5],
+                label: 'Batch Group',
+                group: 'Batch Group',
+                disabled: false,
+              },
+              {
+                value: [9, 8, 10],
+                label: 'Batch Ungrouped',
+                disabled: false,
+              },
+              { label: 'value 2', value: 2, group: 'Group 2' },
+              { label: 'value 3', value: 3, group: 'Group 2' },
+              {
+                label: 'Batch Group 2',
+                value: [11, 12, 13],
+                group: 'Group 2',
+                disabled: false,
+              },
+            ],
+
+            multiple: true,
+            value: [2, 3, 5],
+            sort: false,
+          },
+        })
+
+        expect(result.current.state.options).toEqual([
+          {
+            label: 'value 1',
+            value: 1,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            value: [9, 8, 10],
+            label: 'Batch Ungrouped',
+            disabled: false,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            id: 'Group 1',
+            label: 'Group 1',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            label: 'value 0',
+            value: 0,
+            group: 'Group 1',
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            label: 'Batch Group 1.1',
+            value: [4, 6],
+            group: 'Group 1',
+            disabled: false,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            label: 'Batch Group 1.2',
+            value: [1, 7],
+            group: 'Group 1',
+            disabled: false,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            id: 'Batch Group',
+            label: 'Batch Group',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            value: [2, 3, 5],
+            label: 'Batch Group',
+            group: 'Batch Group',
+            disabled: true,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            id: 'Group 2',
+            label: 'Group 2',
+            [isOptgroupSymbol]: true,
+          },
+          {
+            label: 'value 2',
+            value: 2,
+            group: 'Group 2',
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            label: 'value 3',
+            value: 3,
+            group: 'Group 2',
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+          {
+            label: 'Batch Group 2',
+            value: [11, 12, 13],
+            group: 'Group 2',
+            disabled: false,
+            [draggableOptionIdSymbol]: expect.any(String),
+          },
+        ])
+      })
+    })
+  })
+})