Repository: laboratoriobridge/bold
Pull request #476 (2019-10-02 14:03:11)

Correção do paginator
closes #1778


Patch:
diff --git a/package.json b/package.json
index 6686d4a3d..4912d87a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bold-ui",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.16",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "homepage": "https://bold.bridge.ufsc.br",
diff --git a/site/components/Tags.tsx b/site/components/Tags.tsx
deleted file mode 100644
index d1cf8b4da..000000000
--- a/site/components/Tags.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react'
-
-import { Tag, TagProps, useTheme } from '../../lib'
-
-export function TagDone(props: TagProps) {
-  const theme = useTheme()
-
-  return (
-    <Tag
-      style={{
-        color: theme.pallete.status.success.c40,
-        backgroundColor: theme.pallete.status.success.c90,
-        fontWeight: 400,
-      }}
-      {...props}
-    />
-  )
-}
-
-export function TagNormal(props: TagProps) {
-  const theme = useTheme()
-
-  return (
-    <Tag
-      style={{
-        color: theme.pallete.gray.c40,
-        backgroundColor: theme.pallete.gray.c90,
-        fontWeight: 400,
-      }}
-      {...props}
-    />
-  )
-}
diff --git a/site/pages.ts b/site/pages.ts
index 5d6ab2ced..d4429dadb 100644
--- a/site/pages.ts
+++ b/site/pages.ts
@@ -37,7 +37,6 @@ export default [
     icon: 'bricksFilled',
     href: '/components',
     children: [
-      { href: '/components/overview', title: 'Overview' },
       { href: '/components/accordion', title: 'Accordion' },
       { href: '/components/alert', title: 'Alert' },
       { href: '/components/breadcrumb', title: 'Breadcrumb' },
diff --git a/site/pages/components/overview/index.mdx b/site/pages/components/overview/index.mdx
deleted file mode 100644
index 54eaeb7dd..000000000
--- a/site/pages/components/overview/index.mdx
+++ /dev/null
@@ -1,177 +0,0 @@
-import { Table, TableHeader, TableBody, TableRow, TableCell, TableHead, Tag } from '../../../../lib'
-import { TagDone, TagNormal } from '../../../components/Tags'
-
-# Overview
-
-Track the status of components across design and development. You can also see new components and the next ones to come.
-
-## Component status
-
-<Table>
-
-<TableHead>
-  <TableRow>
-    <TableHeader>Component</TableHeader>
-    <TableHeader>Design</TableHeader>
-    <TableHeader>Development</TableHeader>
-  </TableRow>
-</TableHead>
-<TableBody>
-    <TableRow>
-        <TableCell>Accordion</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagNormal>Upcoming</TagNormal></TableCell>
-     </TableRow>
-     <TableRow>
-        <TableCell>Alert</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-     </TableRow>
-     <TableRow>
-        <TableCell>Breadcrumb</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-     </TableRow>
-     <TableRow>
-        <TableCell>Button</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-     </TableRow>
-     <TableRow>
-        <TableCell>Cards</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagNormal>Upcoming</TagNormal></TableCell>
-     </TableRow>
-     <TableRow>
-        <TableCell>Checkbox</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-     </TableRow>
-     <TableRow>
-        <TableCell>Content Switch</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-     </TableRow>
-    <TableRow>
-        <TableCell>Date Picker</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-     </TableRow>
-    <TableRow>
-        <TableCell>Dropdown</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-     </TableRow>
-    <TableRow>
-        <TableCell>File Uploader</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-     </TableRow>
-    <TableRow>
-        <TableCell>Form</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-     </TableRow>
-    <TableRow>
-        <TableCell>Link</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-     </TableRow>
-    <TableRow>
-        <TableCell>Modal</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-     </TableRow>
-    <TableRow>
-        <TableCell>Multi Select</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-     </TableRow>
-    <TableRow>
-        <TableCell>Paginator</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-     </TableRow>
-     <TableRow>
-        <TableCell>Form</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-    </TableRow>
-    <TableRow>
-        <TableCell>Link</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-    </TableRow>
-    <TableRow>
-        <TableCell>Modal</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-    </TableRow>
-    <TableRow>
-        <TableCell>Multi Select</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-    </TableRow>
-    <TableRow>
-        <TableCell>Paginator</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-    </TableRow>
-    <TableRow>
-        <TableCell>Radio Button</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-    </TableRow>
-    <TableRow>
-        <TableCell>Search</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-    </TableRow>
-    <TableRow>
-        <TableCell>Select</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-    </TableRow>
-    <TableRow>
-        <TableCell>Switch</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-    </TableRow>
-    <TableRow>
-        <TableCell>Table</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-    </TableRow>
-    <TableRow>
-        <TableCell>Tabs</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-    </TableRow>
-    <TableRow>
-        <TableCell>Tag</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-    </TableRow>
-    <TableRow>
-        <TableCell>Text Field</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-    </TableRow>
-    <TableRow>
-        <TableCell>Toast</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagNormal>Upcoming</TagNormal></TableCell>
-    </TableRow>
-    <TableRow>
-        <TableCell>Tooltip</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-    </TableRow>
-    <TableRow>
-        <TableCell>Wizard</TableCell>
-        <TableCell><TagDone>Done</TagDone></TableCell>
-        <TableCell><TagNormal>Upcoming</TagNormal></TableCell>
-    </TableRow>
-</TableBody>
-
-</Table>
diff --git a/site/pages/components/select/Select.demo.tsx b/site/pages/components/select/Select.demo.tsx
index 454695128..89c359466 100644
--- a/site/pages/components/select/Select.demo.tsx
+++ b/site/pages/components/select/Select.demo.tsx
@@ -6,7 +6,9 @@ function SelectDemo() {
   const itemToString = (item: any) => item
 
   return (
-    <Select<string> label='Favorite pasta' items={items} itemToString={itemToString} name='favorite pasta' required />
+    <FormControl label='Favorite pasta' required>
+      <Select<string> items={items} itemToString={itemToString} name='favorite pasta' required />
+    </FormControl>
   )
 }
 
diff --git a/site/pages/components/select/Suggestion.demo.tsx b/site/pages/components/select/Suggestion.demo.tsx
deleted file mode 100644
index 4ae94093c..000000000
--- a/site/pages/components/select/Suggestion.demo.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useState } from 'react'
-
-import { Select, Text, VFlow } from '../../../../lib'
-
-const items = ['Carbonara', 'Gnocchi', 'Lasagna', 'Macaroni and Cheese', 'Pesto', 'Pizza']
-
-function SuggestionDemo() {
-  const [value, setValue] = useState()
-
-  const itemToString = (item: any) => item
-  const createNewItem = (inputValue: string) => inputValue
-
-  return (
-    <VFlow>
-      <Text>Selected item: {value || '[none]'}</Text>
-      <Select<string>
-        value={value}
-        label='Favorite pasta'
-        name='favorite pasta'
-        items={items}
-        onChange={setValue}
-        itemToString={itemToString}
-        createNewItem={createNewItem}
-        icon={null}
-        required
-      />
-    </VFlow>
-  )
-}
-
-export default SuggestionDemo
diff --git a/site/pages/components/select/index.mdx b/site/pages/components/select/index.mdx
index a41d2e874..533c2d51b 100644
--- a/site/pages/components/select/index.mdx
+++ b/site/pages/components/select/index.mdx
@@ -13,11 +13,3 @@ Select is a type of input that is used in forms, where a user is submitting data
 ## Example
 
 <Demo src='pages/components/select/Select' />
-
-## Suggestion
-
-Allow select value to be whatever the user types, by providing a `createNewItem` prop.
-
-You can use the prop `openOnFocus` to control whether the suggestion menu should appear when input receives focus - default is false for suggestion selects (when createNewItem) and true for normal selects.
-
-<Demo src='pages/components/select/Suggestion' />
diff --git a/src/components/Paginator/Paginator.tsx b/src/components/Paginator/Paginator.tsx
index 97ab970e2..bc26d7db8 100644
--- a/src/components/Paginator/Paginator.tsx
+++ b/src/components/Paginator/Paginator.tsx
@@ -28,13 +28,16 @@ export function Paginator(props: PaginatorProps) {
   const { page, total, onChange } = props
   const locale = useLocale()
 
-  const [inputValue, setInputValue] = useState<number>(0)
+  const [inputValue, setInputValue] = useState<string>(`${page + 1}`)
   useEffect(() => {
-    setInputValue(page + 1)
+    setInputValue(`${page + 1}`)
   }, [page])
 
   const { classes } = useStyles(createStyles, inputValue)
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => setInputValue(parseInt(e.target.value, 10))
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value)
+  }
 
   const handleInputKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
@@ -47,12 +50,13 @@ export function Paginator(props: PaginatorProps) {
   }
 
   const applyInputValue = () => {
-    if (inputValue !== currentPage()) {
-      if (inputValue >= 1 && inputValue <= total) {
-        onChange && onChange(inputValue - 1)
-      } else {
-        setInputValue(page + 1)
+    const inputNumber = parseInt(inputValue, 10)
+    if (!isNaN(inputNumber) && inputNumber !== currentPage()) {
+      if (inputNumber >= 1 && inputNumber <= total) {
+        onChange && onChange(inputNumber - 1)
       }
+    } else {
+      setInputValue(`${page + 1}`)
     }
   }
 
@@ -109,7 +113,7 @@ Paginator.defaultProps = {
   onChange: (page: number) => null,
 } as Partial<PaginatorProps>
 
-export const createStyles = (theme: Theme, inputValue: number) => ({
+export const createStyles = (theme: Theme, inputValue: string) => ({
   paginator: {
     display: 'inline-flex',
     alignItems: 'center',
@@ -123,7 +127,7 @@ export const createStyles = (theme: Theme, inputValue: number) => ({
     },
   } as CSSProperties,
   input: {
-    width: 40 + (inputValue && inputValue.toString().length * 7),
+    width: Number(40 + (inputValue && inputValue.length * 7)),
     textAlign: 'center',
     margin: '0 0.5rem 0 0.25rem',
   } as CSSProperties,
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 61b3bffe2..6bf90e3fe 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -42,27 +42,6 @@ storiesOf('Components|Select', module)
       multiple={boolean('multiple', false)}
       clearable={boolean('clearable', true)}
       disabled={boolean('disabled', false)}
-      openOnFocus={boolean('openOnFocus', true)}
-      loading={boolean('loading', false)}
-      onChange={action('changed')}
-      onBlur={action('blur')}
-    />
-  ))
-  .add('suggestion', () => (
-    <Select<DefaultItemType>
-      label='Fruit'
-      name='fruit'
-      items={fruits}
-      error={text('error', '')}
-      icon={null}
-      createNewItem={str => ({ value: str, label: str })}
-      itemToString={item => item && item.label}
-      itemIsEqual={(a, b) => a.value === b.value}
-      placeholder='Select a value...'
-      multiple={boolean('multiple', false)}
-      clearable={boolean('clearable', true)}
-      disabled={boolean('disabled', false)}
-      openOnFocus={boolean('openOnFocus', false)}
       loading={boolean('loading', false)}
       onChange={action('changed')}
       onBlur={action('blur')}
@@ -80,7 +59,6 @@ storiesOf('Components|Select', module)
       multiple={boolean('multiple', false)}
       clearable={boolean('clearable', true)}
       disabled={boolean('disabled', false)}
-      openOnFocus={boolean('openOnFocus', true)}
       onChange={action('changed')}
       onBlur={action('blur')}
     />
@@ -105,7 +83,6 @@ storiesOf('Components|Select', module)
       multiple={boolean('multiple', false)}
       clearable={boolean('clearable', true)}
       disabled={boolean('disabled', false)}
-      openOnFocus={boolean('openOnFocus', true)}
       loading={boolean('loading', false)}
       onChange={action('changed')}
       onBlur={action('blur')}
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index be181d756..76f308448 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -35,12 +35,6 @@ export function Select<T = DefaultItemType>(props: SelectProps<T>) {
     checkedValue = value[0]
   }
 
-  if (props.multiple && props.createNewItem) {
-    if (process.env.NODE_ENV !== 'production') {
-      throw new Error(`Select does not support props 'createNewItem' and 'multiple' together`)
-    }
-  }
-
   if (multiple) {
     return <SelectMulti<T> {...rest} value={checkedValue as T[]} onChange={onChange} itemIsEqual={itemIsEqual} />
   } else {
diff --git a/src/components/Select/SelectMenu/SelectMenuItem.tsx b/src/components/Select/SelectMenu/SelectMenuItem.tsx
index 0a8926076..9c0c24cf0 100644
--- a/src/components/Select/SelectMenu/SelectMenuItem.tsx
+++ b/src/components/Select/SelectMenu/SelectMenuItem.tsx
@@ -26,12 +26,7 @@ export function SelectMenuItem(props: SelectMenuItemProps) {
 export function SelectHelperMenuItem(props: SelectMenuItemProps) {
   const theme = useTheme()
 
-  return (
-    <SelectMenuItem
-      style={{ background: theme.pallete.surface.background, paddingTop: '0.25rem', paddingBottom: '0.25rem' }}
-      {...props}
-    />
-  )
+  return <SelectMenuItem style={{ background: theme.pallete.surface.background }} {...props} />
 }
 
 export function SelectLoadingItem(props: SelectMenuItemProps) {
@@ -52,12 +47,6 @@ export function SelectEmptyItem(props: SelectMenuItemProps) {
   return <SelectHelperMenuItem {...props}>{locale.select.emptyItem}</SelectHelperMenuItem>
 }
 
-export function SelectCreateItem(props: SelectMenuItemProps) {
-  const locale = useLocale()
-
-  return <SelectHelperMenuItem {...props}>{locale.select.createItem}</SelectHelperMenuItem>
-}
-
 export const createStyles = (theme: Theme) => ({
   item: {
     ...theme.typography.variant('main'),
diff --git a/src/components/Select/SelectSingle/SelectDownshift.tsx b/src/components/Select/SelectSingle/SelectDownshift.tsx
index 45998e6ac..146312aac 100644
--- a/src/components/Select/SelectSingle/SelectDownshift.tsx
+++ b/src/components/Select/SelectSingle/SelectDownshift.tsx
@@ -1,6 +1,6 @@
-import Downshift, { ControllerStateAndHelpers, DownshiftProps, DownshiftState, StateChangeOptions } from 'downshift'
+import Downshift, { ControllerStateAndHelpers, DownshiftProps, StateChangeOptions } from 'downshift'
 import matchSorter from 'match-sorter'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 export interface SelectDownshiftProps<T> extends DownshiftProps<T> {
   /**
@@ -8,11 +8,6 @@ export interface SelectDownshiftProps<T> extends DownshiftProps<T> {
    */
   items: T[]
 
-  /**
-   * Whether the select menu should be opened when the select is focused.
-   */
-  openOnFocus?: boolean
-
   children?(props: SelectDownshiftRenderProps<T>): React.ReactNode
 
   /**
@@ -21,13 +16,6 @@ export interface SelectDownshiftProps<T> extends DownshiftProps<T> {
    * @param downshift The downshift controller and helpers.
    */
   onFilterChange?(filter: string, downshift: SelectDownshiftRenderProps<T>): void
-
-  /**
-   * If informed, select will allow insertion of items not present on the select.
-   * @param inputValue The string type in the text box
-   * @return The value that should be created and hold by the select
-   */
-  createNewItem?(inputValue: string): T
 }
 
 export interface SelectDownshiftRenderProps<T> extends ControllerStateAndHelpers<T>, State<T> {
@@ -54,9 +42,7 @@ export function defaultSelectFilter<T>(
  * Downshift extension with item and filter management.
  */
 export function SelectDownshift<T>(props: SelectDownshiftProps<T>) {
-  const { items, onFilterChange, children, createNewItem, openOnFocus, ...rest } = props
-
-  const stateReducer = useMemo(() => createReducer(props), [openOnFocus, props.stateReducer])
+  const { items, onFilterChange, children, ...rest } = props
 
   const [visibleItems, setVisibleItems] = useState<T[]>(items)
   useEffect(() => {
@@ -64,10 +50,6 @@ export function SelectDownshift<T>(props: SelectDownshiftProps<T>) {
   }, [props.items])
 
   const handleStateChange = (options: StateChangeOptions<T>, downshift: ControllerStateAndHelpers<T>) => {
-    if (createNewItem && options.hasOwnProperty('inputValue')) {
-      rest.onChange && rest.onChange(createNewItem(options.inputValue), getStateAndHelpers(downshift))
-    }
-
     if (options.isOpen) {
       onFilterChange(null, getStateAndHelpers(downshift))
     }
@@ -98,7 +80,7 @@ export function SelectDownshift<T>(props: SelectDownshiftProps<T>) {
   })
 
   return (
-    <Downshift {...rest} stateReducer={stateReducer} onStateChange={handleStateChange} onChange={handleChange}>
+    <Downshift {...rest} onStateChange={handleStateChange} onChange={handleChange}>
       {downshift => children(getStateAndHelpers(downshift))}
     </Downshift>
   )
@@ -110,15 +92,3 @@ SelectDownshift.defaultProps = {
     setVisibleItems(defaultSelectFilter(items, filter, itemToString))
   },
 } as Partial<SelectDownshiftProps<any>>
-
-function createReducer(props: SelectDownshiftProps<any>) {
-  const { openOnFocus = props.createNewItem ? false : undefined, stateReducer } = props
-
-  return (state: DownshiftState<any>, changes: StateChangeOptions<any>) => {
-    if (openOnFocus === false && changes.type === undefined && !state.isOpen && changes.isOpen) {
-      return { ...changes, isOpen: false }
-    }
-
-    return stateReducer ? stateReducer(state, changes) : changes
-  }
-}
diff --git a/src/components/Select/SelectSingle/SelectDownshiftMenu.tsx b/src/components/Select/SelectSingle/SelectDownshiftMenu.tsx
index 9b134de3c..545380623 100644
--- a/src/components/Select/SelectSingle/SelectDownshiftMenu.tsx
+++ b/src/components/Select/SelectSingle/SelectDownshiftMenu.tsx
@@ -3,13 +3,12 @@ import React, { CSSProperties } from 'react'
 
 import { useStyles } from '../../../styles'
 import { SelectEmptyItem, SelectLoadingItem, SelectMenu, SelectMenuItem } from '../SelectMenu'
-import { SelectCreateItem } from '../SelectMenu/SelectMenuItem'
 
 export interface SelectDownshiftMenuProps<T> {
   items: T[]
   loading: boolean
   downshift: ControllerStateAndHelpers<T>
-  createNewItem?: boolean
+
   components?: Partial<SelectMenuComponents<T>>
 
   /**
@@ -21,7 +20,6 @@ export interface SelectDownshiftMenuProps<T> {
 }
 
 export interface SelectMenuComponents<T> {
-  CreateItem: React.ComponentType<SelectDownshiftMenuProps<T>>
   LoadingItem: React.ComponentType<SelectDownshiftMenuProps<T>>
   EmptyItem: React.ComponentType<SelectDownshiftMenuProps<T>>
   Item: React.ComponentType<SelectDownshiftMenuProps<T> & { item: T; index: number }>
@@ -32,12 +30,11 @@ export function SelectDownshiftMenu<T>(props: SelectDownshiftMenuProps<T>) {
     items,
     loading: isLoading,
     components,
-    createNewItem,
     downshift: { isOpen, getMenuProps },
   } = props
 
   const { classes } = useStyles(createStyles)
-  const { CreateItem, LoadingItem, EmptyItem, Item } = { ...defaultComponents, ...components }
+  const { LoadingItem, EmptyItem, Item } = { ...defaultComponents, ...components }
 
   return (
     <div className={classes.wrapper}>
@@ -45,9 +42,7 @@ export function SelectDownshiftMenu<T>(props: SelectDownshiftMenuProps<T>) {
         <SelectMenu {...getMenuProps({ refKey: 'menuRef' })}>
           {isLoading && <LoadingItem {...props} />}
 
-          {!isLoading && createNewItem && (items || []).length > 0 && <CreateItem {...props} />}
-
-          {!isLoading && !createNewItem && (items || []).length === 0 && <EmptyItem {...props} />}
+          {!isLoading && (!items || items.length === 0) && <EmptyItem {...props} />}
 
           {items && items.map((item, index) => <Item key={index} index={index} item={item} {...props} />)}
         </SelectMenu>
@@ -57,7 +52,6 @@ export function SelectDownshiftMenu<T>(props: SelectDownshiftMenuProps<T>) {
 }
 
 export const defaultComponents: SelectMenuComponents<any> = {
-  CreateItem: (props: SelectDownshiftMenuProps<any>) => <SelectCreateItem />,
   LoadingItem: (props: SelectDownshiftMenuProps<any>) => <SelectLoadingItem />,
   EmptyItem: (props: SelectDownshiftMenuProps<any>) => <SelectEmptyItem />,
   Item: (props: SelectDownshiftMenuProps<any> & { item: any; index: number }) => {
diff --git a/src/components/Select/SelectSingle/SelectSingle.tsx b/src/components/Select/SelectSingle/SelectSingle.tsx
index a4ea7b9bb..dec37cf10 100644
--- a/src/components/Select/SelectSingle/SelectSingle.tsx
+++ b/src/components/Select/SelectSingle/SelectSingle.tsx
@@ -23,9 +23,7 @@ export interface SelectSingleProps<T = DefaultItemType>
   itemToString: SelectDownshiftProps<T>['itemToString']
   onChange?: SelectDownshiftProps<T>['onChange']
   isOpen?: SelectDownshiftProps<T>['isOpen']
-  openOnFocus?: SelectDownshiftProps<T>['openOnFocus']
   onFilterChange?: SelectDownshiftProps<T>['onFilterChange']
-  createNewItem?: SelectDownshiftProps<T>['createNewItem']
 
   loading?: SelectDownshiftMenuProps<T>['loading']
   renderItem?: SelectDownshiftMenuProps<T>['renderItem']
@@ -39,9 +37,7 @@ export function SelectSingle<T>(props: SelectSingleProps<T>) {
     itemToString,
     onChange,
     isOpen,
-    openOnFocus,
     onFilterChange,
-    createNewItem,
     loading,
     renderItem,
     components,
@@ -83,9 +79,7 @@ export function SelectSingle<T>(props: SelectSingleProps<T>) {
         itemToString={itemToString}
         onChange={onChange}
         isOpen={isOpen}
-        openOnFocus={openOnFocus}
         onFilterChange={onFilterChange}
-        createNewItem={createNewItem}
         labelId={formControlProps.labelId}
       >
         {downshift => {
@@ -95,7 +89,7 @@ export function SelectSingle<T>(props: SelectSingleProps<T>) {
             <div className={css(style)}>
               <div>
                 <TextInput
-                  icon={downshiftOpen ? 'angleUp' : 'angleDown'}
+                  icon={isOpen ? 'zoomOutline' : downshiftOpen ? 'angleUp' : 'angleDown'}
                   {...rest}
                   onBlur={handleInputBlur(downshift)}
                   onFocus={handleInputFocus(downshift)}
@@ -114,7 +108,6 @@ export function SelectSingle<T>(props: SelectSingleProps<T>) {
                 loading={loading}
                 renderItem={renderItem}
                 components={components}
-                createNewItem={!!createNewItem}
               />
             </div>
           )
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 84e42876c..3fd679cf9 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -27,7 +27,6 @@ const locale = {
     currentPage: 'Current page',
   },
   select: {
-    createItem: 'Select an item or type a new value',
     emptyItem: 'No results were found',
     loadingItem: 'Loading...',
     removeItem: 'Remove',
diff --git a/src/i18n/locales/pt-BR.ts b/src/i18n/locales/pt-BR.ts
index 2951506b0..1eaded132 100644
--- a/src/i18n/locales/pt-BR.ts
+++ b/src/i18n/locales/pt-BR.ts
@@ -29,7 +29,6 @@ const locale: LocaleConfiguration = {
     currentPage: 'Página atual',
   },
   select: {
-    createItem: 'Selecione um item ou digite um novo valor',
     emptyItem: 'Nenhum resultado encontrado',
     loadingItem: 'Carregando...',
     removeItem: 'Remover',


Test patch:
diff --git a/src/components/Paginator/Paginator.test.tsx b/src/components/Paginator/Paginator.test.tsx
index 43ba2df71..168abf997 100644
--- a/src/components/Paginator/Paginator.test.tsx
+++ b/src/components/Paginator/Paginator.test.tsx
@@ -52,6 +52,17 @@ it('should call onChange when Enter is pressed', () => {
   expect(handleChange).toHaveBeenCalledTimes(1)
 })
 
+it('should reset value if value is not an integer', () => {
+  const handleChange = jest.fn()
+  const { container } = render(<Paginator page={4} total={10} onChange={handleChange} />)
+  const input = container.querySelector('input')
+
+  fireEvent.change(input, { target: { value: 'a' } })
+  fireEvent.blur(input)
+
+  expect(input.value).toBe('5')
+})
+
 it('should allow message customization via locale context', () => {
   const { container, queryByText } = render(
     <LocaleContext.Provider value={ptBr}>
diff --git a/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap b/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
index 556becdca..d0fd3b546 100644
--- a/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
+++ b/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
@@ -73,65 +73,6 @@ exports[`should render correctly 1`] = `
   position: relative;
 }
 
-.emotion-4 {
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: #3A3A47;
-}
-
-.emotion-6 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-  margin-left: 0.25rem;
-}
-
-.emotion-6 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-6:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-6:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-6:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
 .emotion-2 {
   background-color: #FFFFFF;
   border: solid 1px #8F8FA2;
@@ -206,6 +147,65 @@ exports[`should render correctly 1`] = `
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
+.emotion-4 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #3A3A47;
+}
+
+.emotion-6 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 1.5rem;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: all .2s;
+  transition: all .2s;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #3A3A47;
+  font-size: 0.875rem;
+  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
+  margin-left: 0.25rem;
+}
+
+.emotion-6 > span {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-6:not(:disabled):active {
+  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
+}
+
+.emotion-6:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #0069D0;
+}
+
+.emotion-6:not(:disabled):hover {
+  background-color: rgba(58,58,71,0.1);
+}
+
 <div>
   <div
     class="emotion-7"
@@ -293,65 +293,6 @@ exports[`should render correctly 2`] = `
   position: relative;
 }
 
-.emotion-4 {
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: #3A3A47;
-}
-
-.emotion-6 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-  margin-left: 0.25rem;
-}
-
-.emotion-6 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-6:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-6:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-6:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
 .emotion-2 {
   background-color: #FFFFFF;
   border: solid 1px #8F8FA2;
@@ -426,6 +367,65 @@ exports[`should render correctly 2`] = `
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
+.emotion-4 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #3A3A47;
+}
+
+.emotion-6 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 1.5rem;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: all .2s;
+  transition: all .2s;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #3A3A47;
+  font-size: 0.875rem;
+  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
+  margin-left: 0.25rem;
+}
+
+.emotion-6 > span {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-6:not(:disabled):active {
+  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
+}
+
+.emotion-6:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #0069D0;
+}
+
+.emotion-6:not(:disabled):hover {
+  background-color: rgba(58,58,71,0.1);
+}
+
 .emotion-1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -567,65 +567,6 @@ exports[`should render correctly 3`] = `
   position: relative;
 }
 
-.emotion-4 {
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: #3A3A47;
-}
-
-.emotion-6 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-  margin-left: 0.25rem;
-}
-
-.emotion-6 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-6:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-6:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-6:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
 .emotion-2 {
   background-color: #FFFFFF;
   border: solid 1px #8F8FA2;
@@ -700,6 +641,65 @@ exports[`should render correctly 3`] = `
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
+.emotion-4 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #3A3A47;
+}
+
+.emotion-6 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 1.5rem;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: all .2s;
+  transition: all .2s;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #3A3A47;
+  font-size: 0.875rem;
+  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
+  margin-left: 0.25rem;
+}
+
+.emotion-6 > span {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-6:not(:disabled):active {
+  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
+}
+
+.emotion-6:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #0069D0;
+}
+
+.emotion-6:not(:disabled):hover {
+  background-color: rgba(58,58,71,0.1);
+}
+
 .emotion-1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
index fc777c92d..1590e457c 100644
--- a/src/components/Select/Select.test.tsx
+++ b/src/components/Select/Select.test.tsx
@@ -17,35 +17,28 @@ const items: DefaultItemType[] = [
 afterEach(jest.clearAllMocks)
 
 // tslint:disable jsx-no-lambda
-function SelectTest(props: Partial<SelectProps<DefaultItemType>>) {
+function createSelect(props: Partial<SelectProps<DefaultItemType>> = {}) {
   return <Select<DefaultItemType> items={items} itemToString={item => item && item.label} {...props} />
 }
 
 describe('single', () => {
   it('should render without errors', () => {
-    render(<SelectTest value={items[3]} />)
+    render(createSelect({ value: items[3] }))
   })
   it('should warn when value is an array', () => {
     const spy = jest.spyOn(console, 'warn').mockImplementation(() => null)
-    render(<SelectTest value={[]} />)
+    render(createSelect({ value: [] }))
     expect(spy).toMatchSnapshot()
   })
 })
 
 describe('multiple', () => {
   it('should render without errors', () => {
-    render(SelectTest({ multiple: true, value: [items[4], items[3]] }))
+    render(createSelect({ multiple: true, value: [items[4], items[3]] }))
   })
   it('should warn when value is NOT an array', () => {
     const spy = jest.spyOn(console, 'warn').mockImplementation(() => null)
-    render(<SelectTest value={items[0]} multiple />)
+    render(createSelect({ multiple: true, value: items[0] }))
     expect(spy).toMatchSnapshot()
   })
-  it('should throw an error when createNewItem is set together with multiple prop', () => {
-    jest.spyOn(console, 'error').mockImplementation(() => undefined)
-
-    expect(() => {
-      render(<SelectTest createNewItem={jest.fn()} multiple />)
-    }).toThrowErrorMatchingInlineSnapshot(`"Select does not support props 'createNewItem' and 'multiple' together"`)
-  })
 })
diff --git a/src/components/Select/SelectMenu/SelectMenuItem.test.tsx b/src/components/Select/SelectMenu/SelectMenuItem.test.tsx
index f08e933ae..a45842c3a 100644
--- a/src/components/Select/SelectMenu/SelectMenuItem.test.tsx
+++ b/src/components/Select/SelectMenu/SelectMenuItem.test.tsx
@@ -1,13 +1,7 @@
 import { render } from '@testing-library/react'
 import React from 'react'
 
-import {
-  SelectCreateItem,
-  SelectEmptyItem,
-  SelectHelperMenuItem,
-  SelectLoadingItem,
-  SelectMenuItem,
-} from './SelectMenuItem'
+import { SelectEmptyItem, SelectHelperMenuItem, SelectLoadingItem, SelectMenuItem } from './SelectMenuItem'
 
 describe('SelectMenuItem', () => {
   it('should render correctly', () => {
@@ -46,10 +40,3 @@ describe('SelectEmptyItem', () => {
     expect(container).toMatchSnapshot()
   })
 })
-
-describe('SelectCreateItem', () => {
-  it('should render correctly', () => {
-    const { container } = render(<SelectCreateItem />)
-    expect(container).toMatchSnapshot()
-  })
-})
diff --git a/src/components/Select/SelectMenu/__snapshots__/SelectMenuItem.test.tsx.snap b/src/components/Select/SelectMenu/__snapshots__/SelectMenuItem.test.tsx.snap
index 84c14bd25..18f0b5a14 100644
--- a/src/components/Select/SelectMenu/__snapshots__/SelectMenuItem.test.tsx.snap
+++ b/src/components/Select/SelectMenu/__snapshots__/SelectMenuItem.test.tsx.snap
@@ -1,45 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SelectCreateItem should render correctly 1`] = `
-.emotion-0 {
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: #3A3A47;
-  border-bottom: 1px solid #D3D4DD;
-  cursor: pointer;
-  padding: 0.5rem 0.5rem;
-  -webkit-transition: .1s ease;
-  transition: .1s ease;
-  background: #F0F0F5;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
-.emotion-0:last-of-type {
-  border-bottom: none;
-}
-
-.emotion-0:hover {
-  background: #F0F0F5;
-}
-
-.emotion-0:focus {
-  outline: 0;
-  border-radius: 3px;
-  box-shadow: inset 0 0 0 2px #0069D0;
-}
-
-<div>
-  <li
-    aria-selected="false"
-    class="emotion-0"
-  >
-    Select an item or type a new value
-  </li>
-</div>
-`;
-
 exports[`SelectEmptyItem should render correctly 1`] = `
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
@@ -52,8 +12,6 @@ exports[`SelectEmptyItem should render correctly 1`] = `
   -webkit-transition: .1s ease;
   transition: .1s ease;
   background: #F0F0F5;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
 }
 
 .emotion-0:last-of-type {
@@ -143,8 +101,6 @@ exports[`SelectLoadingItem should render correctly 1`] = `
   -webkit-transition: .1s ease;
   transition: .1s ease;
   background: #F0F0F5;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
 }
 
 .emotion-1:last-of-type {
diff --git a/src/components/Select/SelectSingle/SelectSingle.test.tsx b/src/components/Select/SelectSingle/SelectSingle.test.tsx
index e900c6030..4ca6a4702 100644
--- a/src/components/Select/SelectSingle/SelectSingle.test.tsx
+++ b/src/components/Select/SelectSingle/SelectSingle.test.tsx
@@ -1,8 +1,6 @@
 import { fireEvent, render } from '@testing-library/react'
 import React from 'react'
 
-import en from '../../../i18n/locales/en-US'
-
 import { DefaultItemType, SelectSingle, SelectSingleProps } from './SelectSingle'
 
 jest.mock('../../../util/string')
@@ -129,39 +127,3 @@ describe('input label', () => {
     expect(container.querySelector('input').getAttribute('aria-labelledby')).toBeFalsy()
   })
 })
-
-describe('createNewItem', () => {
-  it('should allow selectedItem to become whatever is typed on text input', () => {
-    const createNewItem = jest.fn(text => ({ value: -1, label: text }))
-    const change = jest.fn()
-    const { container } = render(<SelectTest id='foo' createNewItem={createNewItem} onChange={change} />)
-
-    fireEvent.change(container.querySelector('input'), { target: { value: 'my item' } })
-
-    expect(createNewItem).toHaveBeenCalledWith('my item')
-    expect(change).toHaveBeenCalledWith({ value: -1, label: 'my item' }, expect.anything())
-  })
-  it('should render CreateItemSelect message', () => {
-    const createNewItem = jest.fn(text => ({ value: -1, label: text }))
-    const { queryByText } = render(<SelectTest id='foo' createNewItem={createNewItem} isOpen />)
-    expect(queryByText(en.select.createItem)).toBeTruthy()
-  })
-  it('should NOT render CreateItemSelect message when suggestion list is empty', () => {
-    const createNewItem = jest.fn(text => ({ value: -1, label: text }))
-    const { container, queryByText } = render(<SelectTest id='foo' createNewItem={createNewItem} isOpen />)
-    fireEvent.change(container.querySelector('input'), { target: { value: 'empty suggestion' } })
-    expect(queryByText(en.select.createItem)).toBeFalsy()
-  })
-  it('should NOT open select when focus by default', () => {
-    const createNewItem = jest.fn(text => ({ value: -1, label: text }))
-    const { container } = render(<SelectTest id='foo' createNewItem={createNewItem} />)
-    fireEvent.focus(container.querySelector('input'))
-    expect(container.querySelector('ul')).toBeFalsy()
-  })
-  it('should open select when focus and openOnFocus is true', () => {
-    const createNewItem = jest.fn(text => ({ value: -1, label: text }))
-    const { container } = render(<SelectTest id='foo' createNewItem={createNewItem} openOnFocus />)
-    fireEvent.focus(container.querySelector('input'))
-    expect(container.querySelector('ul')).toBeTruthy()
-  })
-})
diff --git a/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap b/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
index b3867f152..9a14ba966 100644
--- a/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
+++ b/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
@@ -955,7 +955,7 @@ exports[`should render correctly when opened 1`] = `
                   width="1em"
                 >
                   <path
-                    d="M7.707 14.707a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L12 10.414l-4.293 4.293z"
+                    d="M14.605 13.194l7 6.998a1 1 0 0 1-1.415 1.414l-6.997-7a7 7 0 1 1 1.412-1.412zM9 14A5 5 0 1 0 9 4a5 5 0 0 0 0 10z"
                   />
                 </svg>
               </span>
diff --git a/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap b/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
index ea9b8f905..f4d7af6ac 100644
--- a/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
+++ b/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
@@ -394,7 +394,7 @@ exports[`SelectInline should render correctly when closed 1`] = `
                       width="1em"
                     >
                       <path
-                        d="M7.707 14.707a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L12 10.414l-4.293 4.293z"
+                        d="M14.605 13.194l7 6.998a1 1 0 0 1-1.415 1.414l-6.997-7a7 7 0 1 1 1.412-1.412zM9 14A5 5 0 1 0 9 4a5 5 0 0 0 0 10z"
                       />
                     </svg>
                   </span>
@@ -847,7 +847,7 @@ exports[`SelectInline should render correctly when opened 1`] = `
                         width="1em"
                       >
                         <path
-                          d="M7.707 14.707a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L12 10.414l-4.293 4.293z"
+                          d="M14.605 13.194l7 6.998a1 1 0 0 1-1.415 1.414l-6.997-7a7 7 0 1 1 1.412-1.412zM9 14A5 5 0 1 0 9 4a5 5 0 0 0 0 10z"
                         />
                       </svg>
                     </span>
@@ -1301,7 +1301,7 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
                       width="1em"
                     >
                       <path
-                        d="M7.707 14.707a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L12 10.414l-4.293 4.293z"
+                        d="M14.605 13.194l7 6.998a1 1 0 0 1-1.415 1.414l-6.997-7a7 7 0 1 1 1.412-1.412zM9 14A5 5 0 1 0 9 4a5 5 0 0 0 0 10z"
                       />
                     </svg>
                   </span>
diff --git a/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap b/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
index 7b3f75412..74c49d6c1 100644
--- a/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
+++ b/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
@@ -196,58 +196,6 @@ exports[`renders correctly 1`] = `
   position: relative;
 }
 
-.emotion-12 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-  margin-left: 0.25rem;
-}
-
-.emotion-12 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-12:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-12:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-12:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
 .emotion-8 {
   background-color: #FFFFFF;
   border: solid 1px #8F8FA2;
@@ -322,6 +270,58 @@ exports[`renders correctly 1`] = `
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
+.emotion-12 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 1.5rem;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: all .2s;
+  transition: all .2s;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #3A3A47;
+  font-size: 0.875rem;
+  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
+  margin-left: 0.25rem;
+}
+
+.emotion-12 > span {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-12:not(:disabled):active {
+  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
+}
+
+.emotion-12:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #0069D0;
+}
+
+.emotion-12:not(:disabled):hover {
+  background-color: rgba(58,58,71,0.1);
+}
+
 <div>
   <div
     class="emotion-15"