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

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ CLI Target: es2022
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     14.89 KB
-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.66 KB
-ESM ⚡️ Build success in 264ms
+CJS dist/index.js     15.11 KB
+CJS dist/index.js.map 27.20 KB
+CJS ⚡️ Build success in 305ms
+ESM dist/esm/index.js     12.41 KB
+ESM dist/esm/index.js.map 27.01 KB
+ESM ⚡️ Build success in 301ms
 DTS Build start
-DTS ⚡️ Build success in 23745ms
+DTS ⚡️ Build success in 25942ms
 DTS dist/index.d.ts  5.12 KB
 DTS dist/index.d.mts 5.12 KB
-Done in 30.96s.
+Done in 33.93s.

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sproutsocial/seeds-react-token-input
 
+## 1.4.1
+
+### Patch Changes
+
+- f55c7f4: Add support for TokenImport as textarea
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/esm/index.js

@@ -1,5 +1,6 @@
 // src/TokenInput.tsx
 import * as React2 from "react";
+import styled3 from "styled-components";
 import { Accessory } from "@sproutsocial/seeds-react-input";
 import Box from "@sproutsocial/seeds-react-box";
 import Icon from "@sproutsocial/seeds-react-icon";
@@ -39,7 +40,8 @@ var Container = styled.div`
       ${(props) => props.theme.space[200]} 0 0;
   }
 
-  input {
+  input,
+  textarea {
     ${(props) => props.theme.typography[200]};
     outline: none;
     border: none;
@@ -85,6 +87,10 @@ var Container = styled.div`
       `}
   }
 
+  textarea {
+    font-family: ${(props) => props.theme.fontFamily};
+  }
+
   ${(props) => props.hasBeforeElement && css`
       padding-left: 40px;
     `}
@@ -180,6 +186,7 @@ var TokenScreenReaderStatus = ({
 
 // src/TokenInput.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var StyledInput = styled3("input")``;
 var DefaultDelimiters = [",", "Enter"];
 var ControlledPropNames = [
   "value",
@@ -394,7 +401,7 @@ var TokenInput = class extends React2.Component {
           tokens && this.renderTokens(tokens),
           /* @__PURE__ */ jsx3(TokenScreenReaderStatus, { tokens }),
           /* @__PURE__ */ jsx3(
-            "input",
+            StyledInput,
             {
               "aria-describedby": ariaDescribedby,
               "aria-invalid": !!isInvalid,

package/dist/esm/index.js.map

@@ -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.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"]}
+{"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 styled from \"styled-components\";\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\n// Simply using a styled input to allow passing the `as` prop\nconst StyledInput = styled(\"input\")``;\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        <StyledInput\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  textarea {\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  textarea {\n    font-family: ${(props) => props.theme.fontFamily};\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":";AAAA,YAAYA,YAAW;AACvB,OAAOC,aAAY;AACnB,SAAS,iBAAiB;AAC1B,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,WAAW;;;ACLlB,OAAO,UAAU,WAAW;AAC5B,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAW1B,IAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBASH,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,OAAO,IAAI;AAAA,mBACjD,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA,aAEvC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,iBAC7B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,sBAC5B,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,WAAW,IAAI;AAAA,WAC7D,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,6BACrB,CAAC,UAAU,MAAM,MAAM,SAAS,IAAI;AAAA,QACzD,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA,iBAC5B,CAAC,UAAU,MAAM,MAAM,SAAS,IAAI;AAAA,QAC7C,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA,IACzC,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,iBACzB,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA,iBACjC,CAAC,UAAU,MAAM,MAAM,YAAY,MAAM;AAAA;AAAA;AAAA;AAAA,cAI5C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,QACvC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAKnC,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKzB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,cACtC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,QACvC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA,aAEjE,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,wBAC5B,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAwB3D,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA,MAI5D,CAAC,UACD,MAAM,YACN;AAAA;AAAA;AAAA;AAAA,OAIC;AAAA;AAAA;AAAA;AAAA,mBAIY,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA;AAAA;AAAA,IAGhD,CAAC,UACD,MAAM,oBACN;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,CAAC,UACD,MAAM,mBACN;AAAA;AAAA,KAEC;AAAA;AAAA;AAAA,IAGD,CAAC,UACD,MAAM,YACN;AAAA;AAAA;AAAA;AAAA,KAIC;AAAA;AAAA,IAED,CAAC,UACD,MAAM,WACN;AAAA,QACI,SAAS;AAAA,KACZ;AAAA;AAAA,IAED,CAAC,UACD,MAAM,WACN;AAAA,sBACkB,CAACC,WAAUA,OAAM,MAAM,OAAO,KAAK,OAAO,KAAK;AAAA,KAChE;AAAA;AAAA,GAEF,CAAC,UACA,MAAM,WACN;AAAA,sBACkB,CAACA,WAAUA,OAAM,MAAM,OAAO,KAAK,OAAO,OAAO;AAAA,KAClE;AAAA;AAAA,IAED,MAAM;AAAA;AAGV,UAAU,cAAc;AAExB,IAAO,iBAAQ;;;AC5If,OAAO,cAAc;AAGd,IAAM,cAAc,CAAC,UAAiC;AAAA,EAC3D,IAAI,SAAS,GAAG,IAAI,GAAG;AAAA,EACvB,OAAO,KAAK,KAAK;AACnB;AAEA,IAAM,sBAAiD;AAAA,EACrD,OAAO;AACT;AAEO,IAAM,qBAAqB,CAAC,eAA4C;AAC7E,MAAI,CAAC,WAAY,QAAO;AACxB,QAAM,QAAQ,WACX;AAAA,IACC,CAAC,QACC,oBAAoB,GAAuC,KAAK;AAAA,EACpE,EACC,KAAK,EAAE;AACV,SAAO,OAAO,IAAI,KAAK,GAAG;AAC5B;;;ACrBA,OAAkB;AAClB,SAAS,WAAW,QAAQ,gBAAgB;;;ACD5C,OAAOC,aAAY;AACnB,SAAS,sBAAsB;AActB,SAAA,WAAA;AAXT,IAAM,uBAAuBA,QAAO;IAChC,cAAc;;AASX,IAAM,iBAAiB,CAAC,UAA+B;AAC5D,SAAO,oBAAC,sBAAA,EAAsB,GAAG,MAAA,CAAO;AAC1C;;;ADyBI,gBAAAC,YAAA;AApCJ,SAAS,YAAY,OAAsC;AACzD,QAAM,MAAM,OAAsC;AAElD,YAAU,MAAM;AACd,QAAI,UAAU;AAAA,EAChB,CAAC;AAED,SAAO,IAAI;AACb;AAEO,IAAM,0BAA0B,CAAC;AAAA,EACtC;AACF,MAEM;AACJ,QAAM,aAAa,YAAY,MAAM;AACrC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAGjD,YAAU,MAAM;AACd,QAAI,cAAc,QAAQ;AACxB,UAAI,WAAW,SAAS,OAAO,QAAQ;AACrC;AAAA,UACE,GACE,WAAW,OAAO,CAAC,SAAS,OAAO,QAAQ,IAAI,MAAM,EAAE,EAAE,CAAC,GAAG,KAC/D;AAAA,QACF;AAAA,MACF;AAEA,UAAI,WAAW,SAAS,OAAO,QAAQ;AACrC,uBAAe,GAAG,OAAO,OAAO,SAAS,CAAC,GAAG,KAAK,kBAAkB;AAAA,MACtE;AAAA,IACF;AAAA,EACF,GAAG,CAAC,YAAY,QAAQ,WAAW,CAAC;AAEpC,SACE,gBAAAA,KAAC,kBAAe,IAAG,OAAM,MAAK,UAC3B,uBACH;AAEJ;;;AHoKQ,SAEI,OAAAC,MAFJ;AA9LR,IAAM,cAAcC,QAAO,OAAO;AAElC,IAAM,oBAAoB,CAAC,KAAK,OAAO;AACvC,IAAM,sBAA2C;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAqB,aAArB,cAA8C,iBAG5C;AAAA,EACA;AAAA,EAEA,YAAY,OAA4B;AACtC,UAAM,KAAK;AACX,UAAM,EAAE,UAAU,aAAa,OAAO,WAAW,IAAI;AACrD,SAAK,mBAAmB,mBAAmB,cAAc,iBAAiB;AAC1E,SAAK,QAAQ;AAAA,MACX,WAAW;AAAA,MACX,UAAU,YAAY;AAAA,MACtB;AAAA,MACA,OAAO,SAAS;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,OAAO,yBACL,OACA,OACA;AACA,UAAM,EAAE,UAAU,IAAI;AACtB,UAAM,gBAAoC,EAAE,WAAW,MAAM;AAC7D,wBAAoB,QAAQ,CAAC,aAAa;AACxC,YAAM,cAAc,MAAM,QAAqC;AAG/D,UAAI,gBAAgB,UAAU,QAAQ,GAAG;AACvC,sBAAc,QAAQ,IAAI;AAAA,MAC5B;AAAA,IACF,CAAC;AACD,kBAAc,YAAY;AAC1B,WAAO;AAAA,EACT;AAAA,EAEA,YAAY,SAAiB;AAC3B,UAAM,EAAE,aAAa,kBAAkB,IAAI,KAAK;AAChD,WAAO,WAAW,SAAS,OAAO;AAAA,EACpC;AAAA,EAEA,eAAe,OAAiB;AAC9B,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgB,MAAM;AAAA,MACtB,SAAS,CAAC;AAAA,IACZ,IAAI,KAAK;AACT,UAAM,aAAa,MAAM,IAAI,CAAC,SAAS,YAAY,KAAK,MAAM,GAAG,GAAG,CAAC,CAAC;AAEtE,QAAI,YAAY;AACd,iBAAW,QAAQ,UAAU;AAAA,IAC/B,WAAW,gBAAgB;AACzB,qBAAe,OAAO,OAAO,UAAU,CAAC;AAAA,IAC1C;AAEA,SAAK,SAAS;AAAA,MACZ,OAAO;AAAA,IACT,CAAC;AAAA,EACH;AAAA,EAEA,YAAY,SAAkB;AAC5B,UAAM,EAAE,eAAe,gBAAgB,SAAS,CAAC,EAAE,IAAI,KAAK;AAC5D,UAAM,QAAQ,OAAO;AACrB,QAAI,UAAU,EAAG;AACjB,UAAM,KAAK,WAAW,OAAO,QAAQ,CAAC,GAAG;AAEzC,QAAI,eAAe;AACjB,oBAAc,KAAK,KAAK,EAAE;AAAA,IAC5B,WAAW,gBAAgB;AACzB,qBAAe,OAAO,OAAO,CAAC,cAAc,UAAU,OAAO,EAAE,CAAC;AAAA,IAClE;AAEA,SAAK,SAAS;AAAA,MACZ,OAAO;AAAA,IACT,CAAC;AAAA,EACH;AAAA,EAEA,mBAAmB,CAAC,MAA8C;AAChE,UAAM,EAAE,MAAM,IAAI,EAAE;AACpB,UAAM,EAAE,SAAS,IAAI,KAAK;AAC1B,SAAK,SAAS;AAAA,MACZ;AAAA,IACF,CAAC;AACD,eAAW,GAAG,KAAK;AAAA,EACrB;AAAA,EAEA,cAAc,CAAC,MAA0C;AACvD,UAAM,EAAE,QAAQ,IAAI,KAAK;AACzB,SAAK,SAAS;AAAA,MACZ,UAAU;AAAA,IACZ,CAAC;AACD,cAAU,CAAC;AAAA,EACb;AAAA,EAEA,aAAa,CAAC,MAA0C;AACtD,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,QAAI,OAAQ,QAAO,CAAC;AACpB,SAAK,SAAS;AAAA,MACZ,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AAAA,EAEA,cAAc,CAAC,MAA6C;AAC1D,SAAK,MAAM,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,EAC/C;AAAA,EAEA,gBAAgB,CAAC,MAA6C;AAC5D,UAAM,EAAE,UAAU,IAAI,KAAK;AAC3B,UAAM,EAAE,KAAK,cAAc,IAAI;AAC/B,UAAM,OAAO,cAAc;AAC3B,QAAI,UAAW,WAAU,GAAG,IAAI;AAIhC,QAAI,KAAK,YAAY,GAAG,GAAG;AACzB,UAAI,MAAM;AACR,aAAK,eAAe,CAAC,IAAI,CAAC;AAC1B,UAAE,eAAe;AAAA,MACnB;AAAA,IACF,WAAW,QAAQ,aAAa;AAC9B,UAAI,SAAS,IAAI;AACf,aAAK,YAAY;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,cAAc,CAAC,MAA8C;AAC3D,UAAM,OAAO,EAAE,cAAc,QAAQ,MAAM;AAC3C,UAAM,EAAE,QAAQ,IAAI,KAAK;AACzB,QAAI,QAAS,SAAQ,GAAG,IAAI;AAC5B,UAAM,WAAW,KAAK,MAAM,KAAK,gBAAgB;AACjD,UAAM,QAAQ,SAAS,OAAO,CAAC,YAAY,QAAQ,MAAM;AAEzD,QAAI,MAAM,SAAS,GAAG;AACpB,WAAK,eAAe,KAAK;AACzB,QAAE,eAAe;AAAA,IACnB;AAAA,EACF;AAAA,EAEA,mBAAmB,CACjB,GACA,UACG;AACH,UAAM,EAAE,cAAc,SAAS,IAAI,KAAK;AACxC,QAAI,aAAc,cAAa,GAAG,MAAM,EAAE;AAE1C,QAAI,CAAC,UAAU;AACb,WAAK,YAAY,MAAM,EAAE;AAAA,IAC3B;AAAA,EACF;AAAA,EAEA,YAAY,OAAuC;AACjD,UAAM,EAAE,UAAU,iBAAiB,SAAS,IAAI,KAAK;AACrD,UAAM,WAAW,KAAK,MAAM;AAC5B,UAAM;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV,YAAY,EAAE,eAAe,KAAK;AAAA,MAClC;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,EAAE,SAAS,GAAG,eAAe,IAAI,CAAC;AAAA,IAChD,IAAI;AACJ,UAAM,WAAW,iBAAiB;AAClC,UAAM,WAAW,aAAa;AAC9B,WACE,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS,CAAC,MAAM;AACd,eAAK,iBAAiB,GAAG,KAAK;AAC9B,oBAAU,CAAC;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QAGA,QAAQ;AAAA,QACR;AAAA,QACC,GAAG;AAAA,QAEJ,+BAAC,OAAI,SAAQ,QAAO,YAAW,UAC5B;AAAA,sBACC,gBAAAA,KAAC,QAAK,MAAM,UAAU,MAAK,QAAO,IAAI,KAAM,GAAG,WAAW;AAAA,UAE3D;AAAA,WACH;AAAA;AAAA,IACF;AAAA,EAEJ;AAAA,EAEA,aAAa,QAA0C;AACrD,WAAO,OAAO,IAAqB,CAAC,UAClC,gBAAAA,KAAC,SAAmB,WAAU,oBAC3B,eAAK,YAAY,KAAK,KADf,MAAM,EAEhB,CACD;AAAA,EACH;AAAA,EAES,SAAS;AAChB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA,aAAa,CAAC;AAAA,MACd,KAAK,CAAC;AAAA,MACN;AAAA,MACA,GAAG;AAAA,IACL,IAAI,KAAK;AACT,UAAM,EAAE,MAAM,IAAI;AAClB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,kBAAkB,CAAC,CAAC;AAAA,QACpB,iBAAiB,CAAC,CAAC;AAAA,QACnB;AAAA,QACA,SAAS,CAAC,CAAC;AAAA,QACX,SAAS;AAAA,QACT,SAAS,MAAM;AAAA,QACd,GAAG;AAAA,QAEH;AAAA,wBAAc,gBAAAA,KAAC,aAAU,QAAM,MAAE,sBAAW;AAAA,UAE5C,UAAU,KAAK,aAAa,MAAM;AAAA,UAEnC,gBAAAA,KAAC,2BAAwB,QAAgB;AAAA,UAEzC,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,oBAAkB;AAAA,cAClB,gBAAc,CAAC,CAAC;AAAA,cAChB,cAAY;AAAA,cACZ;AAAA,cACA,cAAc;AAAA,cACd;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,MAAK;AAAA,cACL;AAAA,cACA,OAAO,MAAM;AAAA,cACb;AAAA,cACA,QAAQ,KAAK;AAAA,cACb,UAAU,KAAK;AAAA,cACf,SAAS,KAAK;AAAA,cACd,WAAW,KAAK;AAAA,cAChB,SAAS,KAAK;AAAA,cACd,SAAS,KAAK;AAAA,cACd,KAAK;AAAA,cACL,iBAAe,QAAQ;AAAA,cACvB,4BAA0B,CAAC,CAAC;AAAA,cAC5B,4BAA0B,CAAC,CAAC;AAAA,cAC3B,GAAG;AAAA,cACH,GAAG;AAAA;AAAA,UACN;AAAA,UAEC,aAAa,gBAAAA,KAAC,aAAU,OAAK,MAAE,qBAAU;AAAA;AAAA;AAAA,IAC5C;AAAA,EAEJ;AACF;;;AKxTA,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["React","styled","props","styled","jsx","jsx","styled"]}

package/dist/index.js

@@ -37,6 +37,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/TokenInput.tsx
 var React2 = __toESM(require("react"));
+var import_styled_components3 = __toESM(require("styled-components"));
 var import_seeds_react_input = require("@sproutsocial/seeds-react-input");
 var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
@@ -76,7 +77,8 @@ var Container = import_styled_components.default.div`
       ${(props) => props.theme.space[200]} 0 0;
   }
 
-  input {
+  input,
+  textarea {
     ${(props) => props.theme.typography[200]};
     outline: none;
     border: none;
@@ -122,6 +124,10 @@ var Container = import_styled_components.default.div`
       `}
   }
 
+  textarea {
+    font-family: ${(props) => props.theme.fontFamily};
+  }
+
   ${(props) => props.hasBeforeElement && import_styled_components.css`
       padding-left: 40px;
     `}
@@ -217,6 +223,7 @@ var TokenScreenReaderStatus = ({
 
 // src/TokenInput.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var StyledInput = (0, import_styled_components3.default)("input")``;
 var DefaultDelimiters = [",", "Enter"];
 var ControlledPropNames = [
   "value",
@@ -431,7 +438,7 @@ var TokenInput = class extends React2.Component {
           tokens && this.renderTokens(tokens),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TokenScreenReaderStatus, { tokens }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "input",
+            StyledInput,
             {
               "aria-describedby": ariaDescribedby,
               "aria-invalid": !!isInvalid,

package/dist/index.js.map

@@ -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.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"]}
+{"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 styled from \"styled-components\";\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\n// Simply using a styled input to allow passing the `as` prop\nconst StyledInput = styled(\"input\")``;\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        <StyledInput\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  textarea {\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  textarea {\n    font-family: ${(props) => props.theme.fontFamily};\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","import_styled_components","styled","props","uniqueId","import_react","import_styled_components","import_seeds_react_mixins","styled","import_jsx_runtime","import_jsx_runtime","styled","Token","Box","Icon","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-token-input",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Seeds React TokenInput",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/TokenInput.stories.tsx

@@ -86,6 +86,21 @@ export const Default: Story = {
   name: "Default",
 };
 
+export const AsTextarea: Story = {
+  render: (args) => (
+    <Fragment>
+      <MinimalStatefulTokenInput
+        style={{ flexDirection: "column", alignItems: "flex-start" }}
+        placeholder="This is a lot of placeholder text. Some might say it is too much placeholder text. I however think it is a good amount of placeholder text."
+        // @ts-expect-error: event isn't used but it's required by the type
+        inputProps={{ as: "textarea", style: { width: "100%" } }}
+        {...args}
+      />
+    </Fragment>
+  ),
+  name: "As Textarea",
+};
+
 export const HighControl: Story = {
   args: {
     tokens: [

package/src/TokenInput.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import styled from "styled-components";
 import { Accessory } from "@sproutsocial/seeds-react-input";
 import Box from "@sproutsocial/seeds-react-box";
 import Icon from "@sproutsocial/seeds-react-icon";
@@ -15,6 +16,9 @@ type TypeState = {
   value: string;
 };
 
+// Simply using a styled input to allow passing the `as` prop
+const StyledInput = styled("input")``;
+
 const DefaultDelimiters = [",", "Enter"];
 const ControlledPropNames: (keyof TypeState)[] = [
   "value",
@@ -274,7 +278,7 @@ export default class TokenInput extends React.Component<
 
         <TokenScreenReaderStatus tokens={tokens} />
 
-        <input
+        <StyledInput
           aria-describedby={ariaDescribedby}
           aria-invalid={!!isInvalid}
           aria-label={ariaLabel}

package/src/styles.ts

@@ -41,7 +41,8 @@ const Container = styled.div<TypeTokenInputContainerProps>`
       ${(props) => props.theme.space[200]} 0 0;
   }
 
-  input {
+  input,
+  textarea {
     ${(props) => props.theme.typography[200]};
     outline: none;
     border: none;
@@ -89,6 +90,10 @@ const Container = styled.div<TypeTokenInputContainerProps>`
       `}
   }
 
+  textarea {
+    font-family: ${(props) => props.theme.fontFamily};
+  }
+
   ${(props) =>
     props.hasBeforeElement &&
     css`