npm - @sproutsocial/seeds-react-token-input - Versions diffs - 1.2.0 → 1.4.0 - Mend

@sproutsocial/seeds-react-token-input 1.2.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/.turbo/turbo-build.log CHANGED Viewed

@@ -9,13 +9,13 @@ CLI Cleaning output folder
 CJS Build start
 ESM Build start
 CJS dist/index.js     14.89 KB
-CJS dist/index.js.map 26.84 KB
-CJS ⚡️ Build success in 325ms
+CJS dist/index.js.map 26.82 KB
+CJS ⚡️ Build success in 285ms
 ESM dist/esm/index.js     12.24 KB
-ESM dist/esm/index.js.map 26.68 KB
-ESM ⚡️ Build success in 338ms
+ESM dist/esm/index.js.map 26.66 KB
+ESM ⚡️ Build success in 264ms
 DTS Build start
-DTS ⚡️ Build success in 26952ms
+DTS ⚡️ Build success in 23745ms
 DTS dist/index.d.ts  5.12 KB
 DTS dist/index.d.mts 5.12 KB
-Done in 34.58s.
+Done in 30.96s.

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,30 @@
 # @sproutsocial/seeds-react-token-input
+## 1.4.0
+### Minor Changes
+- f78ba19: Simplify onClick event types
+### Patch Changes
+- Updated dependencies [f78ba19]
+- Updated dependencies [1cf5097]
+  - @sproutsocial/seeds-react-token@1.2.0
+  - @sproutsocial/seeds-react-input@1.4.2
+## 1.3.0
+### Minor Changes
+- b04649d: Bump token version to 1.1.1
+### Patch Changes
+- b04649d: Updates type parameter syntax for onClick events
+- Updated dependencies [b04649d]
+  - @sproutsocial/seeds-react-token@1.1.2
 ## 1.2.0
 ### Minor Changes

package/dist/esm/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/TokenInput.tsx","../../src/styles.ts","../../src/util.ts","../../src/TokenScreenReaderStatus.tsx","../../../seeds-react-visually-hidden/src/VisuallyHidden.tsx","../../src/TokenInputTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { Accessory } from \"@sproutsocial/seeds-react-input\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Token from \"@sproutsocial/seeds-react-token\";\nimport Container from \"./styles\";\nimport { asTokenSpec, delimitersAsRegExp } from \"./util\";\nimport type { TypeTokenInputProps, TypeTokenSpec } from \"./TokenInputTypes\";\nimport { TokenScreenReaderStatus } from \"./TokenScreenReaderStatus\";\n\ntype TypeState = {\n prevProps: TypeTokenInputProps;\n hasFocus: boolean;\n activeToken: string \| null \| undefined;\n value: string;\n};\n\nconst DefaultDelimiters = [\",\", \"Enter\"];\nconst ControlledPropNames: (keyof TypeState)[] = [\n \"value\",\n \"hasFocus\",\n \"activeToken\",\n];\n\nexport default class TokenInput extends React.Component<\n TypeTokenInputProps,\n TypeState\n> {\n delimiterMatcher: RegExp;\n\n constructor(props: TypeTokenInputProps) {\n super(props);\n const { hasFocus, activeToken, value, delimiters } = props;\n this.delimiterMatcher = delimitersAsRegExp(delimiters \|\| DefaultDelimiters);\n this.state = {\n prevProps: props,\n hasFocus: hasFocus \|\| false,\n activeToken: activeToken,\n value: value \|\| \"\",\n };\n }\n\n static getDerivedStateFromProps(\n props: Readonly<TypeTokenInputProps>,\n state: TypeState\n ) {\n const { prevProps } = state;\n const modifiedState: Partial<TypeState> = { prevProps: props };\n ControlledPropNames.forEach((propName) => {\n const currentProp = props[propName as keyof TypeTokenInputProps];\n\n // @ts-ignore: TODO - fix state types for prevProps\n if (currentProp !== prevProps[propName]) {\n modifiedState[propName] = currentProp;\n }\n });\n modifiedState.prevProps = props;\n return modifiedState;\n }\n\n isDelimiter(keyName: string) {\n const { delimiters = DefaultDelimiters } = this.props;\n return delimiters.includes(keyName);\n }\n\n spawnNewTokens(texts: string[]) {\n const {\n onAddToken,\n onChangeTokens,\n tokenMaxLength: max = Infinity,\n tokens = [],\n } = this.props;\n const tokenSpecs = texts.map((text) => asTokenSpec(text.slice(0, max)));\n\n if (onAddToken) {\n tokenSpecs.forEach(onAddToken);\n } else if (onChangeTokens) {\n onChangeTokens(tokens.concat(tokenSpecs));\n }\n\n this.setState({\n value: \"\",\n });\n }\n\n deleteToken(tokenId?: string) {\n const { onRemoveToken, onChangeTokens, tokens = [] } = this.props;\n const count = tokens.length;\n if (count === 0) return;\n const id = tokenId ?? tokens[count - 1]?.id;\n\n if (onRemoveToken) {\n onRemoveToken(id ? id : \"\");\n } else if (onChangeTokens) {\n onChangeTokens(tokens.filter((tokenSpec) => tokenSpec.id !== id));\n }\n\n this.setState({\n value: \"\",\n });\n }\n\n handleChangeText = (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { value } = e.currentTarget;\n const { onChange } = this.props;\n this.setState({\n value,\n });\n onChange?.(e, value);\n };\n\n handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n const { onFocus } = this.props;\n this.setState({\n hasFocus: true,\n });\n onFocus?.(e);\n };\n\n handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n const { onBlur } = this.props;\n if (onBlur) onBlur(e);\n this.setState({\n hasFocus: false,\n });\n };\n\n handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n this.props.onKeyUp?.(e, e.currentTarget.value);\n };\n\n handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const { onKeyDown } = this.props;\n const { key, currentTarget } = e;\n const text = currentTarget.value;\n if (onKeyDown) onKeyDown(e, text);\n\n // keyPress event runs before change\n // Prevent event from bubbling up and calling change, which can lead to comma in value\n if (this.isDelimiter(key)) {\n if (text) {\n this.spawnNewTokens([text]);\n e.preventDefault();\n }\n } else if (key === \"Backspace\") {\n if (text === \"\") {\n this.deleteToken();\n }\n }\n };\n\n handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n const text = e.clipboardData.getData(\"text\");\n const { onPaste } = this.props;\n if (onPaste) onPaste(e, text);\n const subtexts = text.split(this.delimiterMatcher);\n const texts = subtexts.filter((subtext) => subtext.length);\n\n if (texts.length > 1) {\n this.spawnNewTokens(texts);\n e.preventDefault();\n }\n };\n\n handleClickToken = (\n e: React.MouseEvent<Element, MouseEvent>,\n token: TypeTokenSpec\n ) => {\n const { onClickToken, disabled } = this.props;\n if (onClickToken) onClickToken(e, token.id);\n\n if (!disabled) {\n this.deleteToken(token.id);\n }\n };\n\n renderToken(token: TypeTokenSpec): React.ReactNode {\n const { iconName: defaultIconName, disabled } = this.props;\n const activeId = this.state.activeToken;\n const {\n id,\n iconName: tokenIconName,\n iconProps = { \"aria-hidden\": true },\n value,\n valid,\n hasWarning,\n tokenProps: { onClick, ...restTokenProps } = {},\n } = token;\n const iconName = tokenIconName \|\| defaultIconName;\n const isActive = activeId === id;\n return (\n <Token\n id={id}\n onClick={(e) => {\n this.handleClickToken(e, token);\n onClick?.(e);\n }}\n valid={valid}\n hasWarning={hasWarning}\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n active={isActive}\n disabled={disabled}\n {...restTokenProps}\n >\n <Box display=\"flex\" alignItems=\"center\">\n {iconName && (\n <Icon name={iconName} size=\"mini\" pr={300} {...iconProps} />\n )}\n {value}\n </Box>\n </Token>\n );\n }\n\n renderTokens(tokens: TypeTokenSpec[]): React.ReactNode {\n return tokens.map<React.ReactNode>((token) => (\n <div key={token.id} className=\"TokenInput-token\">\n {this.renderToken(token)}\n </div>\n ));\n }\n\n override render() {\n const {\n autoFocus,\n autocomplete,\n disabled,\n isInvalid,\n hasWarning,\n id,\n name,\n placeholder,\n required,\n elemBefore,\n elemAfter,\n maxLength,\n ariaDescribedby,\n ariaLabel,\n innerRef,\n // These functions are used in the class functions above, but need to be extracted in order for `rest` to be correct\n /* eslint-disable @typescript-eslint/no-unused-vars /\n value,\n onAddToken,\n onRemoveToken,\n onChangeTokens,\n onClickToken,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onKeyUp,\n onPaste,\n / eslint-enable @typescript-eslint/no-unused-vars /\n inputProps = {},\n qa = {},\n tokens,\n ...rest\n } = this.props;\n const { state } = this;\n return (\n <Container\n hasBeforeElement={!!elemBefore}\n hasAfterElement={!!elemAfter}\n disabled={disabled}\n invalid={!!isInvalid}\n warning={hasWarning}\n focused={state.hasFocus}\n {...rest}\n >\n {elemBefore && <Accessory before>{elemBefore}</Accessory>}\n\n {tokens && this.renderTokens(tokens)}\n\n <TokenScreenReaderStatus tokens={tokens} />\n\n <input\n aria-describedby={ariaDescribedby}\n aria-invalid={!!isInvalid}\n aria-label={ariaLabel}\n autoFocus={autoFocus}\n autoComplete={autocomplete}\n disabled={disabled}\n id={id}\n name={name}\n placeholder={placeholder}\n type=\"text\"\n required={required}\n value={state.value}\n maxLength={maxLength}\n onBlur={this.handleBlur}\n onChange={this.handleChangeText}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n onKeyUp={this.handleKeyUp}\n onPaste={this.handlePaste}\n ref={innerRef}\n data-qa-input={name \|\| \"\"}\n data-qa-input-isdisabled={!!disabled}\n data-qa-input-isrequired={!!required}\n {...qa}\n {...inputProps}\n />\n\n {elemAfter && <Accessory after>{elemAfter}</Accessory>}\n </Container>\n );\n }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeInputContainerProps } from \"@sproutsocial/seeds-react-input\";\n\ninterface TypeTokenInputContainerProps\n extends Pick<\n TypeInputContainerProps,\n \"hasBeforeElement\" \| \"hasAfterElement\" \| \"disabled\" \| \"invalid\" \| \"warning\"\n > {\n focused?: boolean;\n}\n\nconst Container = styled.div<TypeTokenInputContainerProps>`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n align-content: center;\n cursor: text;\n width: 100%;\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: ${(props) => props.theme.radii[500]};\n margin: 0;\n padding: ${(props) => props.theme.space[300]};\n padding-top: ${(props) => props.theme.space[200]};\n background-color: ${(props) => props.theme.colors.form.background.base};\n color: ${(props) => props.theme.colors.text.body};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n box-shadow ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n ${(props) => props.theme.typography[200]};\n font-family: ${(props) => props.theme.fontFamily};\n font-weight: ${(props) => props.theme.fontWeights.normal};\n appearance: none;\n\n button {\n margin: ${(props) => props.theme.space[200]}\n ${(props) => props.theme.space[200]} 0 0;\n }\n\n input {\n ${(props) => props.theme.typography[200]};\n outline: none;\n border: none;\n flex: 1;\n padding: 0;\n padding-top: ${(props) => props.theme.space[100]};\n margin: ${(props) => props.theme.space[200]}\n ${(props) => props.theme.space[300]} ${(props) => props.theme.space[100]}\n 0;\n color: ${(props) => props.theme.colors.text.body};\n background-color: ${(props) => props.theme.colors.form.background.base};\n /* This matches the height of the token so size does not change as tokens are added /\n min-height: 20px;\n\n &::-webkit-search-cancel-button {\n appearance: none;\n }\n\n / Explicitly removes double focus ring in environments where box-shadow focus styles have been specified (Seeds). Focus is passed up from the input to the parent container. /\n &:focus {\n box-shadow: none;\n }\n\n / https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs /\n &::-ms-clear {\n display: none;\n }\n\n / Fix for red ring when input is marked required in Firefox /\n &:not(output):not(:focus):-moz-ui-invalid {\n box-shadow: none;\n }\n\n &::placeholder {\n color: ${(props) => props.theme.colors.form.placeholder.base};\n font-style: italic;\n }\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n\n cursor: not-allowed;\n `}\n }\n\n ${(props) =>\n props.hasBeforeElement &&\n css`\n padding-left: 40px;\n `}\n\n ${(props) =>\n props.hasAfterElement &&\n css`\n padding-right: 40px;\n `}\n\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n\n cursor: not-allowed;\n `}\n\n ${(props) =>\n props.focused &&\n css`\n ${focusRing}\n `}\n\n ${(props) =>\n props.invalid &&\n css`\n border-color: ${(props) => props.theme.colors.form.border.error};\n `}\n\n\t${(props) =>\n props.warning &&\n css`\n border-color: ${(props) => props.theme.colors.form.border.warning};\n `}\n\n ${COMMON}\n`;\n\nContainer.displayName = \"TokenInputContainer\";\n\nexport default Container;\n","import uniqueId from \"lodash.uniqueid\";\nimport type { TypeTokenSpec } from \"./\";\n\nexport const asTokenSpec = (text: string): TypeTokenSpec => ({\n id: uniqueId(`${text}-`),\n value: text.trim(),\n});\n\nconst KeyNameToRegExpChar: { [key: string]: string } = {\n Enter: \"\\\\n\",\n};\n\nexport const delimitersAsRegExp = (delimiters: string[] \| null \| undefined) => {\n if (!delimiters) return /[,\\n]/;\n const chars = delimiters\n .map(\n (key) =>\n KeyNameToRegExpChar[key as keyof typeof KeyNameToRegExpChar] \|\| key\n )\n .join(\"\");\n return RegExp(`[${chars}]`);\n};\n","import React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport type { TypeTokenInputProps } from \"./\";\n\nfunction usePrevious(value: TypeTokenInputProps[\"tokens\"]) {\n const ref = useRef<TypeTokenInputProps[\"tokens\"]>();\n\n useEffect(() => {\n ref.current = value;\n });\n\n return ref.current;\n}\n\nexport const TokenScreenReaderStatus = ({\n tokens,\n}: {\n tokens: TypeTokenInputProps[\"tokens\"];\n}) => {\n const prevTokens = usePrevious(tokens);\n const [tokenStatus, setTokenStatus] = useState(\"\");\n\n // TODO: Use callbacks so consumers can pass localized messaging to the screen reader\n useEffect(() => {\n if (prevTokens && tokens) {\n if (prevTokens.length > tokens.length) {\n setTokenStatus(\n `${\n prevTokens.filter((item) => tokens.indexOf(item) === -1)[0]?.value\n } has been removed`\n );\n }\n\n if (prevTokens.length < tokens.length) {\n setTokenStatus(`${tokens[tokens.length - 1]?.value} has been added.`);\n }\n }\n }, [prevTokens, tokens, tokenStatus]);\n\n return (\n <VisuallyHidden as=\"div\" role=\"status\">\n {tokenStatus}\n </VisuallyHidden>\n );\n};\n","import styled from \"styled-components\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nconst StyledVisuallyHidden = styled.span`\n ${visuallyHidden}\n`;\n\nexport type VisuallyHiddenProps = ComponentPropsWithRef<\n typeof StyledVisuallyHidden\n>;\n\n// This wrapper component is needed for react-docgen to work.\n// It has issues with generating docs for the styled component directly.\nexport const VisuallyHidden = (props: VisuallyHiddenProps) => {\n return <StyledVisuallyHidden {...props} />;\n};\n","import as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeIconProps,\n TypeIconName,\n} from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeTokenProps } from \"@sproutsocial/seeds-react-token\";\n\nexport interface TypeTokenSpec {\n id: string;\n iconName?: TypeIconName;\n iconProps?: Omit<TypeIconProps, \"name\">;\n value: string;\n valid?: boolean;\n hasWarning?: boolean;\n tokenProps?: Partial<TypeTokenProps>;\n}\n\nexport interface TypeBaseTokenInputProps {\n /** ID of the form element, should match the \"for\" value of the associated label /\n id: string;\n name: string;\n iconName?: TypeIconName;\n\n /* Array of delimiter key names /\n delimiters?: string[];\n\n /* Current input text. Required when controlling the input text /\n value?: string;\n\n /* Current focus state. Required when controlling the focus via onFocus and onBlur /\n hasFocus?: boolean;\n\n /* Id of the currently selected token /\n activeToken?: string;\n\n /* Array of current tokens /\n tokens?: TypeTokenSpec[];\n\n /* Standard control of changing tokens. For fine-grain control use onAddToken and onRemoveToken, instead /\n onChangeTokens?: (tokens: TypeTokenSpec[]) => void;\n\n /* Fine-grained control of adding tokens. Use with onRemoveToken instead of onChangeTokens /\n onAddToken?: (tokenSpec: TypeTokenSpec) => void;\n\n /* Fine-grained control of removing tokens. Use with onAddToken instead of onChangeTokens /\n onRemoveToken?: (tokenId: string) => void;\n\n /* Controls clicking on a token. When absent, clicking a token removes itself /\n onClickToken?: (\n e: React.MouseEvent<Element, MouseEvent>,\n tokenId: string\n ) => void;\n\n /* Fine-grained control of the input text used to create tokens /\n onChange?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;\n\n /* Fine-grained control of pasted text /\n onPaste?: (e: React.ClipboardEvent<HTMLInputElement>, value: string) => void;\n onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n\n /* Attribute used to associate other elements that describe the Input, like an error /\n ariaDescribedby?: string;\n\n /* Label used to describe the input if not used with an accompanying visual label /\n ariaLabel?: string;\n\n /* Placeholder text for when value is undefined or empty /\n placeholder?: string;\n\n /* Will autofocus the element when mounted to the DOM /\n autoFocus?: boolean;\n\n /* HTML disabled attribute /\n disabled?: boolean;\n\n /* Whether or not the current contents of the input are invalid /\n isInvalid?: boolean;\n\n /* Whether or not the current contents of the input has any warnings /\n hasWarning?: boolean;\n\n /* HTML required attribute /\n required?: boolean;\n\n /* 16x16 element, such as an icon /\n elemBefore?: React.ReactNode;\n\n /* 16x16 element, such as an icon /\n elemAfter?: React.ReactNode;\n\n /* Max input text length /\n maxLength?: number;\n\n /* Max length of the token /\n tokenMaxLength?: number;\n\n /* Props to spread onto the underlying input element /\n inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n\n /* Used to get a reference to the underlying element /\n innerRef?: React.Ref<HTMLInputElement>;\n qa?: object;\n\n /* Browser autocomplete support /\n autocomplete?: string;\n}\n\nexport interface TypeTokenInputProps\n extends TypeBaseTokenInputProps,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<\n React.ComponentPropsWithoutRef<\"div\">,\n keyof TypeBaseTokenInputProps \| \"color\"\n > {}\n","import TokenInput from \"./TokenInput\";\n\nexport default TokenInput;\nexport { TokenInput };\nexport from \"./TokenInputTypes\";\n"],"mappings":"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","names":["React","props","styled","jsx","jsx"]}
1	+ {"version":3,"sources":["../../src/TokenInput.tsx","../../src/styles.ts","../../src/util.ts","../../src/TokenScreenReaderStatus.tsx","../../../seeds-react-visually-hidden/src/VisuallyHidden.tsx","../../src/TokenInputTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { Accessory } from \"@sproutsocial/seeds-react-input\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Token from \"@sproutsocial/seeds-react-token\";\nimport Container from \"./styles\";\nimport { asTokenSpec, delimitersAsRegExp } from \"./util\";\nimport type { TypeTokenInputProps, TypeTokenSpec } from \"./TokenInputTypes\";\nimport { TokenScreenReaderStatus } from \"./TokenScreenReaderStatus\";\n\ntype TypeState = {\n prevProps: TypeTokenInputProps;\n hasFocus: boolean;\n activeToken: string \| null \| undefined;\n value: string;\n};\n\nconst DefaultDelimiters = [\",\", \"Enter\"];\nconst ControlledPropNames: (keyof TypeState)[] = [\n \"value\",\n \"hasFocus\",\n \"activeToken\",\n];\n\nexport default class TokenInput extends React.Component<\n TypeTokenInputProps,\n TypeState\n> {\n delimiterMatcher: RegExp;\n\n constructor(props: TypeTokenInputProps) {\n super(props);\n const { hasFocus, activeToken, value, delimiters } = props;\n this.delimiterMatcher = delimitersAsRegExp(delimiters \|\| DefaultDelimiters);\n this.state = {\n prevProps: props,\n hasFocus: hasFocus \|\| false,\n activeToken: activeToken,\n value: value \|\| \"\",\n };\n }\n\n static getDerivedStateFromProps(\n props: Readonly<TypeTokenInputProps>,\n state: TypeState\n ) {\n const { prevProps } = state;\n const modifiedState: Partial<TypeState> = { prevProps: props };\n ControlledPropNames.forEach((propName) => {\n const currentProp = props[propName as keyof TypeTokenInputProps];\n\n // @ts-ignore: TODO - fix state types for prevProps\n if (currentProp !== prevProps[propName]) {\n modifiedState[propName] = currentProp;\n }\n });\n modifiedState.prevProps = props;\n return modifiedState;\n }\n\n isDelimiter(keyName: string) {\n const { delimiters = DefaultDelimiters } = this.props;\n return delimiters.includes(keyName);\n }\n\n spawnNewTokens(texts: string[]) {\n const {\n onAddToken,\n onChangeTokens,\n tokenMaxLength: max = Infinity,\n tokens = [],\n } = this.props;\n const tokenSpecs = texts.map((text) => asTokenSpec(text.slice(0, max)));\n\n if (onAddToken) {\n tokenSpecs.forEach(onAddToken);\n } else if (onChangeTokens) {\n onChangeTokens(tokens.concat(tokenSpecs));\n }\n\n this.setState({\n value: \"\",\n });\n }\n\n deleteToken(tokenId?: string) {\n const { onRemoveToken, onChangeTokens, tokens = [] } = this.props;\n const count = tokens.length;\n if (count === 0) return;\n const id = tokenId ?? tokens[count - 1]?.id;\n\n if (onRemoveToken) {\n onRemoveToken(id ? id : \"\");\n } else if (onChangeTokens) {\n onChangeTokens(tokens.filter((tokenSpec) => tokenSpec.id !== id));\n }\n\n this.setState({\n value: \"\",\n });\n }\n\n handleChangeText = (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { value } = e.currentTarget;\n const { onChange } = this.props;\n this.setState({\n value,\n });\n onChange?.(e, value);\n };\n\n handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n const { onFocus } = this.props;\n this.setState({\n hasFocus: true,\n });\n onFocus?.(e);\n };\n\n handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n const { onBlur } = this.props;\n if (onBlur) onBlur(e);\n this.setState({\n hasFocus: false,\n });\n };\n\n handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n this.props.onKeyUp?.(e, e.currentTarget.value);\n };\n\n handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const { onKeyDown } = this.props;\n const { key, currentTarget } = e;\n const text = currentTarget.value;\n if (onKeyDown) onKeyDown(e, text);\n\n // keyPress event runs before change\n // Prevent event from bubbling up and calling change, which can lead to comma in value\n if (this.isDelimiter(key)) {\n if (text) {\n this.spawnNewTokens([text]);\n e.preventDefault();\n }\n } else if (key === \"Backspace\") {\n if (text === \"\") {\n this.deleteToken();\n }\n }\n };\n\n handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n const text = e.clipboardData.getData(\"text\");\n const { onPaste } = this.props;\n if (onPaste) onPaste(e, text);\n const subtexts = text.split(this.delimiterMatcher);\n const texts = subtexts.filter((subtext) => subtext.length);\n\n if (texts.length > 1) {\n this.spawnNewTokens(texts);\n e.preventDefault();\n }\n };\n\n handleClickToken = (\n e: React.SyntheticEvent<Element, Event>,\n token: TypeTokenSpec\n ) => {\n const { onClickToken, disabled } = this.props;\n if (onClickToken) onClickToken(e, token.id);\n\n if (!disabled) {\n this.deleteToken(token.id);\n }\n };\n\n renderToken(token: TypeTokenSpec): React.ReactNode {\n const { iconName: defaultIconName, disabled } = this.props;\n const activeId = this.state.activeToken;\n const {\n id,\n iconName: tokenIconName,\n iconProps = { \"aria-hidden\": true },\n value,\n valid,\n hasWarning,\n tokenProps: { onClick, ...restTokenProps } = {},\n } = token;\n const iconName = tokenIconName \|\| defaultIconName;\n const isActive = activeId === id;\n return (\n <Token\n id={id}\n onClick={(e) => {\n this.handleClickToken(e, token);\n onClick?.(e);\n }}\n valid={valid}\n hasWarning={hasWarning}\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n active={isActive}\n disabled={disabled}\n {...restTokenProps}\n >\n <Box display=\"flex\" alignItems=\"center\">\n {iconName && (\n <Icon name={iconName} size=\"mini\" pr={300} {...iconProps} />\n )}\n {value}\n </Box>\n </Token>\n );\n }\n\n renderTokens(tokens: TypeTokenSpec[]): React.ReactNode {\n return tokens.map<React.ReactNode>((token) => (\n <div key={token.id} className=\"TokenInput-token\">\n {this.renderToken(token)}\n </div>\n ));\n }\n\n override render() {\n const {\n autoFocus,\n autocomplete,\n disabled,\n isInvalid,\n hasWarning,\n id,\n name,\n placeholder,\n required,\n elemBefore,\n elemAfter,\n maxLength,\n ariaDescribedby,\n ariaLabel,\n innerRef,\n // These functions are used in the class functions above, but need to be extracted in order for `rest` to be correct\n /* eslint-disable @typescript-eslint/no-unused-vars /\n value,\n onAddToken,\n onRemoveToken,\n onChangeTokens,\n onClickToken,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onKeyUp,\n onPaste,\n / eslint-enable @typescript-eslint/no-unused-vars /\n inputProps = {},\n qa = {},\n tokens,\n ...rest\n } = this.props;\n const { state } = this;\n return (\n <Container\n hasBeforeElement={!!elemBefore}\n hasAfterElement={!!elemAfter}\n disabled={disabled}\n invalid={!!isInvalid}\n warning={hasWarning}\n focused={state.hasFocus}\n {...rest}\n >\n {elemBefore && <Accessory before>{elemBefore}</Accessory>}\n\n {tokens && this.renderTokens(tokens)}\n\n <TokenScreenReaderStatus tokens={tokens} />\n\n <input\n aria-describedby={ariaDescribedby}\n aria-invalid={!!isInvalid}\n aria-label={ariaLabel}\n autoFocus={autoFocus}\n autoComplete={autocomplete}\n disabled={disabled}\n id={id}\n name={name}\n placeholder={placeholder}\n type=\"text\"\n required={required}\n value={state.value}\n maxLength={maxLength}\n onBlur={this.handleBlur}\n onChange={this.handleChangeText}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n onKeyUp={this.handleKeyUp}\n onPaste={this.handlePaste}\n ref={innerRef}\n data-qa-input={name \|\| \"\"}\n data-qa-input-isdisabled={!!disabled}\n data-qa-input-isrequired={!!required}\n {...qa}\n {...inputProps}\n />\n\n {elemAfter && <Accessory after>{elemAfter}</Accessory>}\n </Container>\n );\n }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeInputContainerProps } from \"@sproutsocial/seeds-react-input\";\n\ninterface TypeTokenInputContainerProps\n extends Pick<\n TypeInputContainerProps,\n \"hasBeforeElement\" \| \"hasAfterElement\" \| \"disabled\" \| \"invalid\" \| \"warning\"\n > {\n focused?: boolean;\n}\n\nconst Container = styled.div<TypeTokenInputContainerProps>`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n align-content: center;\n cursor: text;\n width: 100%;\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: ${(props) => props.theme.radii[500]};\n margin: 0;\n padding: ${(props) => props.theme.space[300]};\n padding-top: ${(props) => props.theme.space[200]};\n background-color: ${(props) => props.theme.colors.form.background.base};\n color: ${(props) => props.theme.colors.text.body};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n box-shadow ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n ${(props) => props.theme.typography[200]};\n font-family: ${(props) => props.theme.fontFamily};\n font-weight: ${(props) => props.theme.fontWeights.normal};\n appearance: none;\n\n button {\n margin: ${(props) => props.theme.space[200]}\n ${(props) => props.theme.space[200]} 0 0;\n }\n\n input {\n ${(props) => props.theme.typography[200]};\n outline: none;\n border: none;\n flex: 1;\n padding: 0;\n padding-top: ${(props) => props.theme.space[100]};\n margin: ${(props) => props.theme.space[200]}\n ${(props) => props.theme.space[300]} ${(props) => props.theme.space[100]}\n 0;\n color: ${(props) => props.theme.colors.text.body};\n background-color: ${(props) => props.theme.colors.form.background.base};\n /* This matches the height of the token so size does not change as tokens are added /\n min-height: 20px;\n\n &::-webkit-search-cancel-button {\n appearance: none;\n }\n\n / Explicitly removes double focus ring in environments where box-shadow focus styles have been specified (Seeds). Focus is passed up from the input to the parent container. /\n &:focus {\n box-shadow: none;\n }\n\n / https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs /\n &::-ms-clear {\n display: none;\n }\n\n / Fix for red ring when input is marked required in Firefox /\n &:not(output):not(:focus):-moz-ui-invalid {\n box-shadow: none;\n }\n\n &::placeholder {\n color: ${(props) => props.theme.colors.form.placeholder.base};\n font-style: italic;\n }\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n\n cursor: not-allowed;\n `}\n }\n\n ${(props) =>\n props.hasBeforeElement &&\n css`\n padding-left: 40px;\n `}\n\n ${(props) =>\n props.hasAfterElement &&\n css`\n padding-right: 40px;\n `}\n\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n\n cursor: not-allowed;\n `}\n\n ${(props) =>\n props.focused &&\n css`\n ${focusRing}\n `}\n\n ${(props) =>\n props.invalid &&\n css`\n border-color: ${(props) => props.theme.colors.form.border.error};\n `}\n\n\t${(props) =>\n props.warning &&\n css`\n border-color: ${(props) => props.theme.colors.form.border.warning};\n `}\n\n ${COMMON}\n`;\n\nContainer.displayName = \"TokenInputContainer\";\n\nexport default Container;\n","import uniqueId from \"lodash.uniqueid\";\nimport type { TypeTokenSpec } from \"./\";\n\nexport const asTokenSpec = (text: string): TypeTokenSpec => ({\n id: uniqueId(`${text}-`),\n value: text.trim(),\n});\n\nconst KeyNameToRegExpChar: { [key: string]: string } = {\n Enter: \"\\\\n\",\n};\n\nexport const delimitersAsRegExp = (delimiters: string[] \| null \| undefined) => {\n if (!delimiters) return /[,\\n]/;\n const chars = delimiters\n .map(\n (key) =>\n KeyNameToRegExpChar[key as keyof typeof KeyNameToRegExpChar] \|\| key\n )\n .join(\"\");\n return RegExp(`[${chars}]`);\n};\n","import React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport type { TypeTokenInputProps } from \"./\";\n\nfunction usePrevious(value: TypeTokenInputProps[\"tokens\"]) {\n const ref = useRef<TypeTokenInputProps[\"tokens\"]>();\n\n useEffect(() => {\n ref.current = value;\n });\n\n return ref.current;\n}\n\nexport const TokenScreenReaderStatus = ({\n tokens,\n}: {\n tokens: TypeTokenInputProps[\"tokens\"];\n}) => {\n const prevTokens = usePrevious(tokens);\n const [tokenStatus, setTokenStatus] = useState(\"\");\n\n // TODO: Use callbacks so consumers can pass localized messaging to the screen reader\n useEffect(() => {\n if (prevTokens && tokens) {\n if (prevTokens.length > tokens.length) {\n setTokenStatus(\n `${\n prevTokens.filter((item) => tokens.indexOf(item) === -1)[0]?.value\n } has been removed`\n );\n }\n\n if (prevTokens.length < tokens.length) {\n setTokenStatus(`${tokens[tokens.length - 1]?.value} has been added.`);\n }\n }\n }, [prevTokens, tokens, tokenStatus]);\n\n return (\n <VisuallyHidden as=\"div\" role=\"status\">\n {tokenStatus}\n </VisuallyHidden>\n );\n};\n","import styled from \"styled-components\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nconst StyledVisuallyHidden = styled.span`\n ${visuallyHidden}\n`;\n\nexport type VisuallyHiddenProps = ComponentPropsWithRef<\n typeof StyledVisuallyHidden\n>;\n\n// This wrapper component is needed for react-docgen to work.\n// It has issues with generating docs for the styled component directly.\nexport const VisuallyHidden = (props: VisuallyHiddenProps) => {\n return <StyledVisuallyHidden {...props} />;\n};\n","import as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeIconProps,\n TypeIconName,\n} from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeTokenProps } from \"@sproutsocial/seeds-react-token\";\n\nexport interface TypeTokenSpec {\n id: string;\n iconName?: TypeIconName;\n iconProps?: Omit<TypeIconProps, \"name\">;\n value: string;\n valid?: boolean;\n hasWarning?: boolean;\n tokenProps?: Partial<TypeTokenProps>;\n}\n\nexport interface TypeBaseTokenInputProps {\n /** ID of the form element, should match the \"for\" value of the associated label /\n id: string;\n name: string;\n iconName?: TypeIconName;\n\n /* Array of delimiter key names /\n delimiters?: string[];\n\n /* Current input text. Required when controlling the input text /\n value?: string;\n\n /* Current focus state. Required when controlling the focus via onFocus and onBlur /\n hasFocus?: boolean;\n\n /* Id of the currently selected token /\n activeToken?: string;\n\n /* Array of current tokens /\n tokens?: TypeTokenSpec[];\n\n /* Standard control of changing tokens. For fine-grain control use onAddToken and onRemoveToken, instead /\n onChangeTokens?: (tokens: TypeTokenSpec[]) => void;\n\n /* Fine-grained control of adding tokens. Use with onRemoveToken instead of onChangeTokens /\n onAddToken?: (tokenSpec: TypeTokenSpec) => void;\n\n /* Fine-grained control of removing tokens. Use with onAddToken instead of onChangeTokens /\n onRemoveToken?: (tokenId: string) => void;\n\n /* Controls clicking on a token. When absent, clicking a token removes itself /\n onClickToken?(e: React.SyntheticEvent<Element, Event>, tokenId: string): void;\n\n /* Fine-grained control of the input text used to create tokens /\n onChange?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;\n\n /* Fine-grained control of pasted text /\n onPaste?: (e: React.ClipboardEvent<HTMLInputElement>, value: string) => void;\n onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n\n /* Attribute used to associate other elements that describe the Input, like an error /\n ariaDescribedby?: string;\n\n /* Label used to describe the input if not used with an accompanying visual label /\n ariaLabel?: string;\n\n /* Placeholder text for when value is undefined or empty /\n placeholder?: string;\n\n /* Will autofocus the element when mounted to the DOM /\n autoFocus?: boolean;\n\n /* HTML disabled attribute /\n disabled?: boolean;\n\n /* Whether or not the current contents of the input are invalid /\n isInvalid?: boolean;\n\n /* Whether or not the current contents of the input has any warnings /\n hasWarning?: boolean;\n\n /* HTML required attribute /\n required?: boolean;\n\n /* 16x16 element, such as an icon /\n elemBefore?: React.ReactNode;\n\n /* 16x16 element, such as an icon /\n elemAfter?: React.ReactNode;\n\n /* Max input text length /\n maxLength?: number;\n\n /* Max length of the token /\n tokenMaxLength?: number;\n\n /* Props to spread onto the underlying input element /\n inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n\n /* Used to get a reference to the underlying element /\n innerRef?: React.Ref<HTMLInputElement>;\n qa?: object;\n\n /* Browser autocomplete support /\n autocomplete?: string;\n}\n\nexport interface TypeTokenInputProps\n extends TypeBaseTokenInputProps,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<\n React.ComponentPropsWithoutRef<\"div\">,\n keyof TypeBaseTokenInputProps \| \"color\"\n > {}\n","import TokenInput from \"./TokenInput\";\n\nexport default TokenInput;\nexport { TokenInput };\nexport from \"./TokenInputTypes\";\n"],"mappings":"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","names":["React","props","styled","jsx","jsx"]}

package/dist/index.d.mts CHANGED Viewed

@@ -35,7 +35,7 @@ interface TypeBaseTokenInputProps {
     /** Fine-grained control of removing tokens. Use with onAddToken instead of onChangeTokens */
     onRemoveToken?: (tokenId: string) => void;
     /** Controls clicking on a token. When absent, clicking a token removes itself */
-    onClickToken?: (e: React.MouseEvent<Element, MouseEvent>, tokenId: string) => void;
+    onClickToken?(e: React.SyntheticEvent<Element, Event>, tokenId: string): void;
     /** Fine-grained control of the input text used to create tokens */
     onChange?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;
     /** Fine-grained control of pasted text */
@@ -98,7 +98,7 @@ declare class TokenInput extends React.Component<TypeTokenInputProps, TypeState>
     handleKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     handlePaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
-    handleClickToken: (e: React.MouseEvent<Element, MouseEvent>, token: TypeTokenSpec) => void;
+    handleClickToken: (e: React.SyntheticEvent<Element, Event>, token: TypeTokenSpec) => void;
     renderToken(token: TypeTokenSpec): React.ReactNode;
     renderTokens(tokens: TypeTokenSpec[]): React.ReactNode;
     render(): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts CHANGED Viewed

@@ -35,7 +35,7 @@ interface TypeBaseTokenInputProps {
     /** Fine-grained control of removing tokens. Use with onAddToken instead of onChangeTokens */
     onRemoveToken?: (tokenId: string) => void;
     /** Controls clicking on a token. When absent, clicking a token removes itself */
-    onClickToken?: (e: React.MouseEvent<Element, MouseEvent>, tokenId: string) => void;
+    onClickToken?(e: React.SyntheticEvent<Element, Event>, tokenId: string): void;
     /** Fine-grained control of the input text used to create tokens */
     onChange?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;
     /** Fine-grained control of pasted text */
@@ -98,7 +98,7 @@ declare class TokenInput extends React.Component<TypeTokenInputProps, TypeState>
     handleKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     handlePaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
-    handleClickToken: (e: React.MouseEvent<Element, MouseEvent>, token: TypeTokenSpec) => void;
+    handleClickToken: (e: React.SyntheticEvent<Element, Event>, token: TypeTokenSpec) => void;
     renderToken(token: TypeTokenSpec): React.ReactNode;
     renderTokens(tokens: TypeTokenSpec[]): React.ReactNode;
     render(): react_jsx_runtime.JSX.Element;

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts","../src/TokenInput.tsx","../src/styles.ts","../src/util.ts","../src/TokenScreenReaderStatus.tsx","../../seeds-react-visually-hidden/src/VisuallyHidden.tsx","../src/TokenInputTypes.ts"],"sourcesContent":["import TokenInput from \"./TokenInput\";\n\nexport default TokenInput;\nexport { TokenInput };\nexport * from \"./TokenInputTypes\";\n","import * as React from \"react\";\nimport { Accessory } from \"@sproutsocial/seeds-react-input\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Token from \"@sproutsocial/seeds-react-token\";\nimport Container from \"./styles\";\nimport { asTokenSpec, delimitersAsRegExp } from \"./util\";\nimport type { TypeTokenInputProps, TypeTokenSpec } from \"./TokenInputTypes\";\nimport { TokenScreenReaderStatus } from \"./TokenScreenReaderStatus\";\n\ntype TypeState = {\n prevProps: TypeTokenInputProps;\n hasFocus: boolean;\n activeToken: string \| null \| undefined;\n value: string;\n};\n\nconst DefaultDelimiters = [\",\", \"Enter\"];\nconst ControlledPropNames: (keyof TypeState)[] = [\n \"value\",\n \"hasFocus\",\n \"activeToken\",\n];\n\nexport default class TokenInput extends React.Component<\n TypeTokenInputProps,\n TypeState\n> {\n delimiterMatcher: RegExp;\n\n constructor(props: TypeTokenInputProps) {\n super(props);\n const { hasFocus, activeToken, value, delimiters } = props;\n this.delimiterMatcher = delimitersAsRegExp(delimiters \|\| DefaultDelimiters);\n this.state = {\n prevProps: props,\n hasFocus: hasFocus \|\| false,\n activeToken: activeToken,\n value: value \|\| \"\",\n };\n }\n\n static getDerivedStateFromProps(\n props: Readonly<TypeTokenInputProps>,\n state: TypeState\n ) {\n const { prevProps } = state;\n const modifiedState: Partial<TypeState> = { prevProps: props };\n ControlledPropNames.forEach((propName) => {\n const currentProp = props[propName as keyof TypeTokenInputProps];\n\n // @ts-ignore: TODO - fix state types for prevProps\n if (currentProp !== prevProps[propName]) {\n modifiedState[propName] = currentProp;\n }\n });\n modifiedState.prevProps = props;\n return modifiedState;\n }\n\n isDelimiter(keyName: string) {\n const { delimiters = DefaultDelimiters } = this.props;\n return delimiters.includes(keyName);\n }\n\n spawnNewTokens(texts: string[]) {\n const {\n onAddToken,\n onChangeTokens,\n tokenMaxLength: max = Infinity,\n tokens = [],\n } = this.props;\n const tokenSpecs = texts.map((text) => asTokenSpec(text.slice(0, max)));\n\n if (onAddToken) {\n tokenSpecs.forEach(onAddToken);\n } else if (onChangeTokens) {\n onChangeTokens(tokens.concat(tokenSpecs));\n }\n\n this.setState({\n value: \"\",\n });\n }\n\n deleteToken(tokenId?: string) {\n const { onRemoveToken, onChangeTokens, tokens = [] } = this.props;\n const count = tokens.length;\n if (count === 0) return;\n const id = tokenId ?? tokens[count - 1]?.id;\n\n if (onRemoveToken) {\n onRemoveToken(id ? id : \"\");\n } else if (onChangeTokens) {\n onChangeTokens(tokens.filter((tokenSpec) => tokenSpec.id !== id));\n }\n\n this.setState({\n value: \"\",\n });\n }\n\n handleChangeText = (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { value } = e.currentTarget;\n const { onChange } = this.props;\n this.setState({\n value,\n });\n onChange?.(e, value);\n };\n\n handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n const { onFocus } = this.props;\n this.setState({\n hasFocus: true,\n });\n onFocus?.(e);\n };\n\n handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n const { onBlur } = this.props;\n if (onBlur) onBlur(e);\n this.setState({\n hasFocus: false,\n });\n };\n\n handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n this.props.onKeyUp?.(e, e.currentTarget.value);\n };\n\n handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const { onKeyDown } = this.props;\n const { key, currentTarget } = e;\n const text = currentTarget.value;\n if (onKeyDown) onKeyDown(e, text);\n\n // keyPress event runs before change\n // Prevent event from bubbling up and calling change, which can lead to comma in value\n if (this.isDelimiter(key)) {\n if (text) {\n this.spawnNewTokens([text]);\n e.preventDefault();\n }\n } else if (key === \"Backspace\") {\n if (text === \"\") {\n this.deleteToken();\n }\n }\n };\n\n handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n const text = e.clipboardData.getData(\"text\");\n const { onPaste } = this.props;\n if (onPaste) onPaste(e, text);\n const subtexts = text.split(this.delimiterMatcher);\n const texts = subtexts.filter((subtext) => subtext.length);\n\n if (texts.length > 1) {\n this.spawnNewTokens(texts);\n e.preventDefault();\n }\n };\n\n handleClickToken = (\n e: React.MouseEvent<Element, MouseEvent>,\n token: TypeTokenSpec\n ) => {\n const { onClickToken, disabled } = this.props;\n if (onClickToken) onClickToken(e, token.id);\n\n if (!disabled) {\n this.deleteToken(token.id);\n }\n };\n\n renderToken(token: TypeTokenSpec): React.ReactNode {\n const { iconName: defaultIconName, disabled } = this.props;\n const activeId = this.state.activeToken;\n const {\n id,\n iconName: tokenIconName,\n iconProps = { \"aria-hidden\": true },\n value,\n valid,\n hasWarning,\n tokenProps: { onClick, ...restTokenProps } = {},\n } = token;\n const iconName = tokenIconName \|\| defaultIconName;\n const isActive = activeId === id;\n return (\n <Token\n id={id}\n onClick={(e) => {\n this.handleClickToken(e, token);\n onClick?.(e);\n }}\n valid={valid}\n hasWarning={hasWarning}\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n active={isActive}\n disabled={disabled}\n {...restTokenProps}\n >\n <Box display=\"flex\" alignItems=\"center\">\n {iconName && (\n <Icon name={iconName} size=\"mini\" pr={300} {...iconProps} />\n )}\n {value}\n </Box>\n </Token>\n );\n }\n\n renderTokens(tokens: TypeTokenSpec[]): React.ReactNode {\n return tokens.map<React.ReactNode>((token) => (\n <div key={token.id} className=\"TokenInput-token\">\n {this.renderToken(token)}\n </div>\n ));\n }\n\n override render() {\n const {\n autoFocus,\n autocomplete,\n disabled,\n isInvalid,\n hasWarning,\n id,\n name,\n placeholder,\n required,\n elemBefore,\n elemAfter,\n maxLength,\n ariaDescribedby,\n ariaLabel,\n innerRef,\n // These functions are used in the class functions above, but need to be extracted in order for `rest` to be correct\n /* eslint-disable @typescript-eslint/no-unused-vars /\n value,\n onAddToken,\n onRemoveToken,\n onChangeTokens,\n onClickToken,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onKeyUp,\n onPaste,\n / eslint-enable @typescript-eslint/no-unused-vars /\n inputProps = {},\n qa = {},\n tokens,\n ...rest\n } = this.props;\n const { state } = this;\n return (\n <Container\n hasBeforeElement={!!elemBefore}\n hasAfterElement={!!elemAfter}\n disabled={disabled}\n invalid={!!isInvalid}\n warning={hasWarning}\n focused={state.hasFocus}\n {...rest}\n >\n {elemBefore && <Accessory before>{elemBefore}</Accessory>}\n\n {tokens && this.renderTokens(tokens)}\n\n <TokenScreenReaderStatus tokens={tokens} />\n\n <input\n aria-describedby={ariaDescribedby}\n aria-invalid={!!isInvalid}\n aria-label={ariaLabel}\n autoFocus={autoFocus}\n autoComplete={autocomplete}\n disabled={disabled}\n id={id}\n name={name}\n placeholder={placeholder}\n type=\"text\"\n required={required}\n value={state.value}\n maxLength={maxLength}\n onBlur={this.handleBlur}\n onChange={this.handleChangeText}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n onKeyUp={this.handleKeyUp}\n onPaste={this.handlePaste}\n ref={innerRef}\n data-qa-input={name \|\| \"\"}\n data-qa-input-isdisabled={!!disabled}\n data-qa-input-isrequired={!!required}\n {...qa}\n {...inputProps}\n />\n\n {elemAfter && <Accessory after>{elemAfter}</Accessory>}\n </Container>\n );\n }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeInputContainerProps } from \"@sproutsocial/seeds-react-input\";\n\ninterface TypeTokenInputContainerProps\n extends Pick<\n TypeInputContainerProps,\n \"hasBeforeElement\" \| \"hasAfterElement\" \| \"disabled\" \| \"invalid\" \| \"warning\"\n > {\n focused?: boolean;\n}\n\nconst Container = styled.div<TypeTokenInputContainerProps>`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n align-content: center;\n cursor: text;\n width: 100%;\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: ${(props) => props.theme.radii[500]};\n margin: 0;\n padding: ${(props) => props.theme.space[300]};\n padding-top: ${(props) => props.theme.space[200]};\n background-color: ${(props) => props.theme.colors.form.background.base};\n color: ${(props) => props.theme.colors.text.body};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n box-shadow ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n ${(props) => props.theme.typography[200]};\n font-family: ${(props) => props.theme.fontFamily};\n font-weight: ${(props) => props.theme.fontWeights.normal};\n appearance: none;\n\n button {\n margin: ${(props) => props.theme.space[200]}\n ${(props) => props.theme.space[200]} 0 0;\n }\n\n input {\n ${(props) => props.theme.typography[200]};\n outline: none;\n border: none;\n flex: 1;\n padding: 0;\n padding-top: ${(props) => props.theme.space[100]};\n margin: ${(props) => props.theme.space[200]}\n ${(props) => props.theme.space[300]} ${(props) => props.theme.space[100]}\n 0;\n color: ${(props) => props.theme.colors.text.body};\n background-color: ${(props) => props.theme.colors.form.background.base};\n /* This matches the height of the token so size does not change as tokens are added /\n min-height: 20px;\n\n &::-webkit-search-cancel-button {\n appearance: none;\n }\n\n / Explicitly removes double focus ring in environments where box-shadow focus styles have been specified (Seeds). Focus is passed up from the input to the parent container. /\n &:focus {\n box-shadow: none;\n }\n\n / https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs /\n &::-ms-clear {\n display: none;\n }\n\n / Fix for red ring when input is marked required in Firefox /\n &:not(output):not(:focus):-moz-ui-invalid {\n box-shadow: none;\n }\n\n &::placeholder {\n color: ${(props) => props.theme.colors.form.placeholder.base};\n font-style: italic;\n }\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n\n cursor: not-allowed;\n `}\n }\n\n ${(props) =>\n props.hasBeforeElement &&\n css`\n padding-left: 40px;\n `}\n\n ${(props) =>\n props.hasAfterElement &&\n css`\n padding-right: 40px;\n `}\n\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n\n cursor: not-allowed;\n `}\n\n ${(props) =>\n props.focused &&\n css`\n ${focusRing}\n `}\n\n ${(props) =>\n props.invalid &&\n css`\n border-color: ${(props) => props.theme.colors.form.border.error};\n `}\n\n\t${(props) =>\n props.warning &&\n css`\n border-color: ${(props) => props.theme.colors.form.border.warning};\n `}\n\n ${COMMON}\n`;\n\nContainer.displayName = \"TokenInputContainer\";\n\nexport default Container;\n","import uniqueId from \"lodash.uniqueid\";\nimport type { TypeTokenSpec } from \"./\";\n\nexport const asTokenSpec = (text: string): TypeTokenSpec => ({\n id: uniqueId(`${text}-`),\n value: text.trim(),\n});\n\nconst KeyNameToRegExpChar: { [key: string]: string } = {\n Enter: \"\\\\n\",\n};\n\nexport const delimitersAsRegExp = (delimiters: string[] \| null \| undefined) => {\n if (!delimiters) return /[,\\n]/;\n const chars = delimiters\n .map(\n (key) =>\n KeyNameToRegExpChar[key as keyof typeof KeyNameToRegExpChar] \|\| key\n )\n .join(\"\");\n return RegExp(`[${chars}]`);\n};\n","import React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport type { TypeTokenInputProps } from \"./\";\n\nfunction usePrevious(value: TypeTokenInputProps[\"tokens\"]) {\n const ref = useRef<TypeTokenInputProps[\"tokens\"]>();\n\n useEffect(() => {\n ref.current = value;\n });\n\n return ref.current;\n}\n\nexport const TokenScreenReaderStatus = ({\n tokens,\n}: {\n tokens: TypeTokenInputProps[\"tokens\"];\n}) => {\n const prevTokens = usePrevious(tokens);\n const [tokenStatus, setTokenStatus] = useState(\"\");\n\n // TODO: Use callbacks so consumers can pass localized messaging to the screen reader\n useEffect(() => {\n if (prevTokens && tokens) {\n if (prevTokens.length > tokens.length) {\n setTokenStatus(\n `${\n prevTokens.filter((item) => tokens.indexOf(item) === -1)[0]?.value\n } has been removed`\n );\n }\n\n if (prevTokens.length < tokens.length) {\n setTokenStatus(`${tokens[tokens.length - 1]?.value} has been added.`);\n }\n }\n }, [prevTokens, tokens, tokenStatus]);\n\n return (\n <VisuallyHidden as=\"div\" role=\"status\">\n {tokenStatus}\n </VisuallyHidden>\n );\n};\n","import styled from \"styled-components\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nconst StyledVisuallyHidden = styled.span`\n ${visuallyHidden}\n`;\n\nexport type VisuallyHiddenProps = ComponentPropsWithRef<\n typeof StyledVisuallyHidden\n>;\n\n// This wrapper component is needed for react-docgen to work.\n// It has issues with generating docs for the styled component directly.\nexport const VisuallyHidden = (props: VisuallyHiddenProps) => {\n return <StyledVisuallyHidden {...props} />;\n};\n","import as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeIconProps,\n TypeIconName,\n} from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeTokenProps } from \"@sproutsocial/seeds-react-token\";\n\nexport interface TypeTokenSpec {\n id: string;\n iconName?: TypeIconName;\n iconProps?: Omit<TypeIconProps, \"name\">;\n value: string;\n valid?: boolean;\n hasWarning?: boolean;\n tokenProps?: Partial<TypeTokenProps>;\n}\n\nexport interface TypeBaseTokenInputProps {\n /** ID of the form element, should match the \"for\" value of the associated label /\n id: string;\n name: string;\n iconName?: TypeIconName;\n\n /* Array of delimiter key names /\n delimiters?: string[];\n\n /* Current input text. Required when controlling the input text /\n value?: string;\n\n /* Current focus state. Required when controlling the focus via onFocus and onBlur /\n hasFocus?: boolean;\n\n /* Id of the currently selected token /\n activeToken?: string;\n\n /* Array of current tokens /\n tokens?: TypeTokenSpec[];\n\n /* Standard control of changing tokens. For fine-grain control use onAddToken and onRemoveToken, instead /\n onChangeTokens?: (tokens: TypeTokenSpec[]) => void;\n\n /* Fine-grained control of adding tokens. Use with onRemoveToken instead of onChangeTokens /\n onAddToken?: (tokenSpec: TypeTokenSpec) => void;\n\n /* Fine-grained control of removing tokens. Use with onAddToken instead of onChangeTokens /\n onRemoveToken?: (tokenId: string) => void;\n\n /* Controls clicking on a token. When absent, clicking a token removes itself /\n onClickToken?: (\n e: React.MouseEvent<Element, MouseEvent>,\n tokenId: string\n ) => void;\n\n /* Fine-grained control of the input text used to create tokens /\n onChange?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;\n\n /* Fine-grained control of pasted text /\n onPaste?: (e: React.ClipboardEvent<HTMLInputElement>, value: string) => void;\n onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n\n /* Attribute used to associate other elements that describe the Input, like an error /\n ariaDescribedby?: string;\n\n /* Label used to describe the input if not used with an accompanying visual label /\n ariaLabel?: string;\n\n /* Placeholder text for when value is undefined or empty /\n placeholder?: string;\n\n /* Will autofocus the element when mounted to the DOM /\n autoFocus?: boolean;\n\n /* HTML disabled attribute /\n disabled?: boolean;\n\n /* Whether or not the current contents of the input are invalid /\n isInvalid?: boolean;\n\n /* Whether or not the current contents of the input has any warnings /\n hasWarning?: boolean;\n\n /* HTML required attribute /\n required?: boolean;\n\n /* 16x16 element, such as an icon /\n elemBefore?: React.ReactNode;\n\n /* 16x16 element, such as an icon /\n elemAfter?: React.ReactNode;\n\n /* Max input text length /\n maxLength?: number;\n\n /* Max length of the token /\n tokenMaxLength?: number;\n\n /* Props to spread onto the underlying input element /\n inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n\n /* Used to get a reference to the underlying element /\n innerRef?: React.Ref<HTMLInputElement>;\n qa?: object;\n\n /* Browser autocomplete support */\n autocomplete?: string;\n}\n\nexport interface TypeTokenInputProps\n extends TypeBaseTokenInputProps,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<\n React.ComponentPropsWithoutRef<\"div\">,\n keyof TypeBaseTokenInputProps \| \"color\"\n > {}\n"],"mappings":"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","names":["React","styled","props","uniqueId","import_react","import_styled_components","import_seeds_react_mixins","styled","import_jsx_runtime","import_jsx_runtime","Token","Box","Icon","React"]}
1	+ {"version":3,"sources":["../src/index.ts","../src/TokenInput.tsx","../src/styles.ts","../src/util.ts","../src/TokenScreenReaderStatus.tsx","../../seeds-react-visually-hidden/src/VisuallyHidden.tsx","../src/TokenInputTypes.ts"],"sourcesContent":["import TokenInput from \"./TokenInput\";\n\nexport default TokenInput;\nexport { TokenInput };\nexport * from \"./TokenInputTypes\";\n","import * as React from \"react\";\nimport { Accessory } from \"@sproutsocial/seeds-react-input\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Token from \"@sproutsocial/seeds-react-token\";\nimport Container from \"./styles\";\nimport { asTokenSpec, delimitersAsRegExp } from \"./util\";\nimport type { TypeTokenInputProps, TypeTokenSpec } from \"./TokenInputTypes\";\nimport { TokenScreenReaderStatus } from \"./TokenScreenReaderStatus\";\n\ntype TypeState = {\n prevProps: TypeTokenInputProps;\n hasFocus: boolean;\n activeToken: string \| null \| undefined;\n value: string;\n};\n\nconst DefaultDelimiters = [\",\", \"Enter\"];\nconst ControlledPropNames: (keyof TypeState)[] = [\n \"value\",\n \"hasFocus\",\n \"activeToken\",\n];\n\nexport default class TokenInput extends React.Component<\n TypeTokenInputProps,\n TypeState\n> {\n delimiterMatcher: RegExp;\n\n constructor(props: TypeTokenInputProps) {\n super(props);\n const { hasFocus, activeToken, value, delimiters } = props;\n this.delimiterMatcher = delimitersAsRegExp(delimiters \|\| DefaultDelimiters);\n this.state = {\n prevProps: props,\n hasFocus: hasFocus \|\| false,\n activeToken: activeToken,\n value: value \|\| \"\",\n };\n }\n\n static getDerivedStateFromProps(\n props: Readonly<TypeTokenInputProps>,\n state: TypeState\n ) {\n const { prevProps } = state;\n const modifiedState: Partial<TypeState> = { prevProps: props };\n ControlledPropNames.forEach((propName) => {\n const currentProp = props[propName as keyof TypeTokenInputProps];\n\n // @ts-ignore: TODO - fix state types for prevProps\n if (currentProp !== prevProps[propName]) {\n modifiedState[propName] = currentProp;\n }\n });\n modifiedState.prevProps = props;\n return modifiedState;\n }\n\n isDelimiter(keyName: string) {\n const { delimiters = DefaultDelimiters } = this.props;\n return delimiters.includes(keyName);\n }\n\n spawnNewTokens(texts: string[]) {\n const {\n onAddToken,\n onChangeTokens,\n tokenMaxLength: max = Infinity,\n tokens = [],\n } = this.props;\n const tokenSpecs = texts.map((text) => asTokenSpec(text.slice(0, max)));\n\n if (onAddToken) {\n tokenSpecs.forEach(onAddToken);\n } else if (onChangeTokens) {\n onChangeTokens(tokens.concat(tokenSpecs));\n }\n\n this.setState({\n value: \"\",\n });\n }\n\n deleteToken(tokenId?: string) {\n const { onRemoveToken, onChangeTokens, tokens = [] } = this.props;\n const count = tokens.length;\n if (count === 0) return;\n const id = tokenId ?? tokens[count - 1]?.id;\n\n if (onRemoveToken) {\n onRemoveToken(id ? id : \"\");\n } else if (onChangeTokens) {\n onChangeTokens(tokens.filter((tokenSpec) => tokenSpec.id !== id));\n }\n\n this.setState({\n value: \"\",\n });\n }\n\n handleChangeText = (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { value } = e.currentTarget;\n const { onChange } = this.props;\n this.setState({\n value,\n });\n onChange?.(e, value);\n };\n\n handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n const { onFocus } = this.props;\n this.setState({\n hasFocus: true,\n });\n onFocus?.(e);\n };\n\n handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n const { onBlur } = this.props;\n if (onBlur) onBlur(e);\n this.setState({\n hasFocus: false,\n });\n };\n\n handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n this.props.onKeyUp?.(e, e.currentTarget.value);\n };\n\n handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const { onKeyDown } = this.props;\n const { key, currentTarget } = e;\n const text = currentTarget.value;\n if (onKeyDown) onKeyDown(e, text);\n\n // keyPress event runs before change\n // Prevent event from bubbling up and calling change, which can lead to comma in value\n if (this.isDelimiter(key)) {\n if (text) {\n this.spawnNewTokens([text]);\n e.preventDefault();\n }\n } else if (key === \"Backspace\") {\n if (text === \"\") {\n this.deleteToken();\n }\n }\n };\n\n handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n const text = e.clipboardData.getData(\"text\");\n const { onPaste } = this.props;\n if (onPaste) onPaste(e, text);\n const subtexts = text.split(this.delimiterMatcher);\n const texts = subtexts.filter((subtext) => subtext.length);\n\n if (texts.length > 1) {\n this.spawnNewTokens(texts);\n e.preventDefault();\n }\n };\n\n handleClickToken = (\n e: React.SyntheticEvent<Element, Event>,\n token: TypeTokenSpec\n ) => {\n const { onClickToken, disabled } = this.props;\n if (onClickToken) onClickToken(e, token.id);\n\n if (!disabled) {\n this.deleteToken(token.id);\n }\n };\n\n renderToken(token: TypeTokenSpec): React.ReactNode {\n const { iconName: defaultIconName, disabled } = this.props;\n const activeId = this.state.activeToken;\n const {\n id,\n iconName: tokenIconName,\n iconProps = { \"aria-hidden\": true },\n value,\n valid,\n hasWarning,\n tokenProps: { onClick, ...restTokenProps } = {},\n } = token;\n const iconName = tokenIconName \|\| defaultIconName;\n const isActive = activeId === id;\n return (\n <Token\n id={id}\n onClick={(e) => {\n this.handleClickToken(e, token);\n onClick?.(e);\n }}\n valid={valid}\n hasWarning={hasWarning}\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n active={isActive}\n disabled={disabled}\n {...restTokenProps}\n >\n <Box display=\"flex\" alignItems=\"center\">\n {iconName && (\n <Icon name={iconName} size=\"mini\" pr={300} {...iconProps} />\n )}\n {value}\n </Box>\n </Token>\n );\n }\n\n renderTokens(tokens: TypeTokenSpec[]): React.ReactNode {\n return tokens.map<React.ReactNode>((token) => (\n <div key={token.id} className=\"TokenInput-token\">\n {this.renderToken(token)}\n </div>\n ));\n }\n\n override render() {\n const {\n autoFocus,\n autocomplete,\n disabled,\n isInvalid,\n hasWarning,\n id,\n name,\n placeholder,\n required,\n elemBefore,\n elemAfter,\n maxLength,\n ariaDescribedby,\n ariaLabel,\n innerRef,\n // These functions are used in the class functions above, but need to be extracted in order for `rest` to be correct\n /* eslint-disable @typescript-eslint/no-unused-vars /\n value,\n onAddToken,\n onRemoveToken,\n onChangeTokens,\n onClickToken,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onKeyUp,\n onPaste,\n / eslint-enable @typescript-eslint/no-unused-vars /\n inputProps = {},\n qa = {},\n tokens,\n ...rest\n } = this.props;\n const { state } = this;\n return (\n <Container\n hasBeforeElement={!!elemBefore}\n hasAfterElement={!!elemAfter}\n disabled={disabled}\n invalid={!!isInvalid}\n warning={hasWarning}\n focused={state.hasFocus}\n {...rest}\n >\n {elemBefore && <Accessory before>{elemBefore}</Accessory>}\n\n {tokens && this.renderTokens(tokens)}\n\n <TokenScreenReaderStatus tokens={tokens} />\n\n <input\n aria-describedby={ariaDescribedby}\n aria-invalid={!!isInvalid}\n aria-label={ariaLabel}\n autoFocus={autoFocus}\n autoComplete={autocomplete}\n disabled={disabled}\n id={id}\n name={name}\n placeholder={placeholder}\n type=\"text\"\n required={required}\n value={state.value}\n maxLength={maxLength}\n onBlur={this.handleBlur}\n onChange={this.handleChangeText}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n onKeyUp={this.handleKeyUp}\n onPaste={this.handlePaste}\n ref={innerRef}\n data-qa-input={name \|\| \"\"}\n data-qa-input-isdisabled={!!disabled}\n data-qa-input-isrequired={!!required}\n {...qa}\n {...inputProps}\n />\n\n {elemAfter && <Accessory after>{elemAfter}</Accessory>}\n </Container>\n );\n }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeInputContainerProps } from \"@sproutsocial/seeds-react-input\";\n\ninterface TypeTokenInputContainerProps\n extends Pick<\n TypeInputContainerProps,\n \"hasBeforeElement\" \| \"hasAfterElement\" \| \"disabled\" \| \"invalid\" \| \"warning\"\n > {\n focused?: boolean;\n}\n\nconst Container = styled.div<TypeTokenInputContainerProps>`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n align-content: center;\n cursor: text;\n width: 100%;\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: ${(props) => props.theme.radii[500]};\n margin: 0;\n padding: ${(props) => props.theme.space[300]};\n padding-top: ${(props) => props.theme.space[200]};\n background-color: ${(props) => props.theme.colors.form.background.base};\n color: ${(props) => props.theme.colors.text.body};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n box-shadow ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n ${(props) => props.theme.typography[200]};\n font-family: ${(props) => props.theme.fontFamily};\n font-weight: ${(props) => props.theme.fontWeights.normal};\n appearance: none;\n\n button {\n margin: ${(props) => props.theme.space[200]}\n ${(props) => props.theme.space[200]} 0 0;\n }\n\n input {\n ${(props) => props.theme.typography[200]};\n outline: none;\n border: none;\n flex: 1;\n padding: 0;\n padding-top: ${(props) => props.theme.space[100]};\n margin: ${(props) => props.theme.space[200]}\n ${(props) => props.theme.space[300]} ${(props) => props.theme.space[100]}\n 0;\n color: ${(props) => props.theme.colors.text.body};\n background-color: ${(props) => props.theme.colors.form.background.base};\n /* This matches the height of the token so size does not change as tokens are added /\n min-height: 20px;\n\n &::-webkit-search-cancel-button {\n appearance: none;\n }\n\n / Explicitly removes double focus ring in environments where box-shadow focus styles have been specified (Seeds). Focus is passed up from the input to the parent container. /\n &:focus {\n box-shadow: none;\n }\n\n / https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs /\n &::-ms-clear {\n display: none;\n }\n\n / Fix for red ring when input is marked required in Firefox /\n &:not(output):not(:focus):-moz-ui-invalid {\n box-shadow: none;\n }\n\n &::placeholder {\n color: ${(props) => props.theme.colors.form.placeholder.base};\n font-style: italic;\n }\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n\n cursor: not-allowed;\n `}\n }\n\n ${(props) =>\n props.hasBeforeElement &&\n css`\n padding-left: 40px;\n `}\n\n ${(props) =>\n props.hasAfterElement &&\n css`\n padding-right: 40px;\n `}\n\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n\n cursor: not-allowed;\n `}\n\n ${(props) =>\n props.focused &&\n css`\n ${focusRing}\n `}\n\n ${(props) =>\n props.invalid &&\n css`\n border-color: ${(props) => props.theme.colors.form.border.error};\n `}\n\n\t${(props) =>\n props.warning &&\n css`\n border-color: ${(props) => props.theme.colors.form.border.warning};\n `}\n\n ${COMMON}\n`;\n\nContainer.displayName = \"TokenInputContainer\";\n\nexport default Container;\n","import uniqueId from \"lodash.uniqueid\";\nimport type { TypeTokenSpec } from \"./\";\n\nexport const asTokenSpec = (text: string): TypeTokenSpec => ({\n id: uniqueId(`${text}-`),\n value: text.trim(),\n});\n\nconst KeyNameToRegExpChar: { [key: string]: string } = {\n Enter: \"\\\\n\",\n};\n\nexport const delimitersAsRegExp = (delimiters: string[] \| null \| undefined) => {\n if (!delimiters) return /[,\\n]/;\n const chars = delimiters\n .map(\n (key) =>\n KeyNameToRegExpChar[key as keyof typeof KeyNameToRegExpChar] \|\| key\n )\n .join(\"\");\n return RegExp(`[${chars}]`);\n};\n","import React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport type { TypeTokenInputProps } from \"./\";\n\nfunction usePrevious(value: TypeTokenInputProps[\"tokens\"]) {\n const ref = useRef<TypeTokenInputProps[\"tokens\"]>();\n\n useEffect(() => {\n ref.current = value;\n });\n\n return ref.current;\n}\n\nexport const TokenScreenReaderStatus = ({\n tokens,\n}: {\n tokens: TypeTokenInputProps[\"tokens\"];\n}) => {\n const prevTokens = usePrevious(tokens);\n const [tokenStatus, setTokenStatus] = useState(\"\");\n\n // TODO: Use callbacks so consumers can pass localized messaging to the screen reader\n useEffect(() => {\n if (prevTokens && tokens) {\n if (prevTokens.length > tokens.length) {\n setTokenStatus(\n `${\n prevTokens.filter((item) => tokens.indexOf(item) === -1)[0]?.value\n } has been removed`\n );\n }\n\n if (prevTokens.length < tokens.length) {\n setTokenStatus(`${tokens[tokens.length - 1]?.value} has been added.`);\n }\n }\n }, [prevTokens, tokens, tokenStatus]);\n\n return (\n <VisuallyHidden as=\"div\" role=\"status\">\n {tokenStatus}\n </VisuallyHidden>\n );\n};\n","import styled from \"styled-components\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nconst StyledVisuallyHidden = styled.span`\n ${visuallyHidden}\n`;\n\nexport type VisuallyHiddenProps = ComponentPropsWithRef<\n typeof StyledVisuallyHidden\n>;\n\n// This wrapper component is needed for react-docgen to work.\n// It has issues with generating docs for the styled component directly.\nexport const VisuallyHidden = (props: VisuallyHiddenProps) => {\n return <StyledVisuallyHidden {...props} />;\n};\n","import as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeIconProps,\n TypeIconName,\n} from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeTokenProps } from \"@sproutsocial/seeds-react-token\";\n\nexport interface TypeTokenSpec {\n id: string;\n iconName?: TypeIconName;\n iconProps?: Omit<TypeIconProps, \"name\">;\n value: string;\n valid?: boolean;\n hasWarning?: boolean;\n tokenProps?: Partial<TypeTokenProps>;\n}\n\nexport interface TypeBaseTokenInputProps {\n /** ID of the form element, should match the \"for\" value of the associated label /\n id: string;\n name: string;\n iconName?: TypeIconName;\n\n /* Array of delimiter key names /\n delimiters?: string[];\n\n /* Current input text. Required when controlling the input text /\n value?: string;\n\n /* Current focus state. Required when controlling the focus via onFocus and onBlur /\n hasFocus?: boolean;\n\n /* Id of the currently selected token /\n activeToken?: string;\n\n /* Array of current tokens /\n tokens?: TypeTokenSpec[];\n\n /* Standard control of changing tokens. For fine-grain control use onAddToken and onRemoveToken, instead /\n onChangeTokens?: (tokens: TypeTokenSpec[]) => void;\n\n /* Fine-grained control of adding tokens. Use with onRemoveToken instead of onChangeTokens /\n onAddToken?: (tokenSpec: TypeTokenSpec) => void;\n\n /* Fine-grained control of removing tokens. Use with onAddToken instead of onChangeTokens /\n onRemoveToken?: (tokenId: string) => void;\n\n /* Controls clicking on a token. When absent, clicking a token removes itself /\n onClickToken?(e: React.SyntheticEvent<Element, Event>, tokenId: string): void;\n\n /* Fine-grained control of the input text used to create tokens /\n onChange?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;\n\n /* Fine-grained control of pasted text /\n onPaste?: (e: React.ClipboardEvent<HTMLInputElement>, value: string) => void;\n onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n\n /* Attribute used to associate other elements that describe the Input, like an error /\n ariaDescribedby?: string;\n\n /* Label used to describe the input if not used with an accompanying visual label /\n ariaLabel?: string;\n\n /* Placeholder text for when value is undefined or empty /\n placeholder?: string;\n\n /* Will autofocus the element when mounted to the DOM /\n autoFocus?: boolean;\n\n /* HTML disabled attribute /\n disabled?: boolean;\n\n /* Whether or not the current contents of the input are invalid /\n isInvalid?: boolean;\n\n /* Whether or not the current contents of the input has any warnings /\n hasWarning?: boolean;\n\n /* HTML required attribute /\n required?: boolean;\n\n /* 16x16 element, such as an icon /\n elemBefore?: React.ReactNode;\n\n /* 16x16 element, such as an icon /\n elemAfter?: React.ReactNode;\n\n /* Max input text length /\n maxLength?: number;\n\n /* Max length of the token /\n tokenMaxLength?: number;\n\n /* Props to spread onto the underlying input element /\n inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n\n /* Used to get a reference to the underlying element /\n innerRef?: React.Ref<HTMLInputElement>;\n qa?: object;\n\n /* Browser autocomplete support */\n autocomplete?: string;\n}\n\nexport interface TypeTokenInputProps\n extends TypeBaseTokenInputProps,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<\n React.ComponentPropsWithoutRef<\"div\">,\n keyof TypeBaseTokenInputProps \| \"color\"\n > {}\n"],"mappings":"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","names":["React","styled","props","uniqueId","import_react","import_styled_components","import_seeds_react_mixins","styled","import_jsx_runtime","import_jsx_runtime","Token","Box","Icon","React"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-token-input",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Seeds React TokenInput",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -24,7 +24,7 @@
     "@sproutsocial/seeds-react-input": "^1.3.1",
     "@sproutsocial/seeds-react-box": "^1.1.1",
     "@sproutsocial/seeds-react-icon": "^1.1.1",
-    "@sproutsocial/seeds-react-token": "^1.0.2",
+    "@sproutsocial/seeds-react-token": "^1.1.1",
     "lodash.uniqueid": "^4.0.1"
   },
   "devDependencies": {

package/src/TokenInput.tsx CHANGED Viewed

@@ -163,7 +163,7 @@ export default class TokenInput extends React.Component<
   };
   handleClickToken = (
-    e: React.MouseEvent<Element, MouseEvent>,
+    e: React.SyntheticEvent<Element, Event>,
     token: TypeTokenSpec
   ) => {
     const { onClickToken, disabled } = this.props;

package/src/TokenInputTypes.ts CHANGED Viewed

@@ -50,10 +50,7 @@ export interface TypeBaseTokenInputProps {
   onRemoveToken?: (tokenId: string) => void;
   /** Controls clicking on a token. When absent, clicking a token removes itself */
-  onClickToken?: (
-    e: React.MouseEvent<Element, MouseEvent>,
-    tokenId: string
-  ) => void;
+  onClickToken?(e: React.SyntheticEvent<Element, Event>, tokenId: string): void;
   /** Fine-grained control of the input text used to create tokens */
   onChange?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;