+
)
diff --git a/src/lib/components/styles/input.styles.js b/src/lib/components/styles/input.styles.js
index abad0ce..e68ce2a 100644
--- a/src/lib/components/styles/input.styles.js
+++ b/src/lib/components/styles/input.styles.js
@@ -1,5 +1,6 @@
const styles = {
queryContainer: {
+ display: 'inline-block',
position: 'relative'
},
query: {
@@ -13,8 +14,9 @@ const styles = {
top: 0,
left: 0
},
- x: {
+ clearButton: {
position: 'absolute',
+ display: 'inline-block',
zIndex: 2
}
}
diff --git a/src/lib/index.jsx b/src/lib/index.jsx
index b63d0f1..b705c81 100644
--- a/src/lib/index.jsx
+++ b/src/lib/index.jsx
@@ -2,6 +2,7 @@
import React from 'react'
import PropTypes from 'prop-types'
+import { nanoid } from 'nanoid'
import { StateContextProvider } from './context/state'
import isUndefined from './utils/isUndefined'
import Container from './components/container'
@@ -9,8 +10,12 @@ import Container from './components/container'
// Set prop defaults before passing them on to components
const propDefaults = {
autoFocus: false,
+ clearButton: false,
+ clearButtonAriaLabel: 'Clear contents',
+ clearButtonText: '×',
debounceWait: 250,
defaultItemGroupsAreImmutable: true,
+ id: nanoid(),
isDisabled: false,
itemGroupsAreImmutable: true,
maxItems: 10,
@@ -37,6 +42,9 @@ const msgOneOnly = `Both a "data" prop and an "itemGroups" prop were provided. P
const requiredPropsAreMissing = (props) => isUndefined(props.data) && isUndefined(props.itemGroups)
Turnstone.propTypes = {
autoFocus: PropTypes.bool,
+ clearButton: PropTypes.bool,
+ clearButtonAriaLabel: PropTypes.string,
+ clearButtonText: PropTypes.string,
data: (props) => {
if(requiredPropsAreMissing(props)) return new Error(msgBothRequired)
if(!isUndefined(props.data) && !isUndefined(props.itemGroups)) return new Error(msgOneOnly)
@@ -51,6 +59,7 @@ Turnstone.propTypes = {
defaultItemGroups: PropTypes.array,
defaultItemGroupsAreImmutable: PropTypes.bool,
displayField: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ id: PropTypes.string,
itemGroups: (props) => {
if(requiredPropsAreMissing(props)) return new Error(msgBothRequired)
if(!isUndefined(props.data) && !isUndefined(props.itemGroups)) return new Error(msgOneOnly)
diff --git a/src/lib/index.test.jsx b/src/lib/index.test.jsx
index 0a32ce7..4a88444 100644
--- a/src/lib/index.test.jsx
+++ b/src/lib/index.test.jsx
@@ -24,8 +24,16 @@ describe('Turnstone', () => {
})
test('Turnstone component passes all props to Container component along with default props', () => {
- expect(component.root.children[0].children[0].props).toEqual({
+ const props = {...component.root.children[0].children[0].props}
+
+ // The id prop is randomly generated so must be excluded
+ delete props.id
+
+ expect(props).toEqual({
autoFocus: false,
+ clearButton: false,
+ clearButtonAriaLabel: 'Clear contents',
+ clearButtonText: '×',
debounceWait: 250,
defaultItemGroupsAreImmutable: true,
isDisabled: false,