@sproutsocial/seeds-react-token-input 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-token-input/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     14.75 KB
+CJS dist/index.js.map 26.41 KB
+CJS ⚡️ Build success in 232ms
+ESM dist/esm/index.js     12.11 KB
+ESM dist/esm/index.js.map 26.25 KB
+ESM ⚡️ Build success in 231ms
+DTS Build start
+DTS ⚡️ Build success in 32286ms
+DTS dist/index.d.ts  5.00 KB
+DTS dist/index.d.mts 5.00 KB
+Done in 37.80s.

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @sproutsocial/seeds-react-token-input
+
+## 1.0.0
+
+### Major Changes
+
+- bd8d03d: Migrate TokenInput from Racine to seeds-react-token-input
+
+### Patch Changes
+
+- Updated dependencies [bd8d03d]
+  - @sproutsocial/seeds-react-token@1.0.0
+  - @sproutsocial/seeds-react-input@1.3.0

package/dist/esm/index.js

@@ -0,0 +1,441 @@
+// src/TokenInput.tsx
+import * as React2 from "react";
+import { Accessory } from "@sproutsocial/seeds-react-input";
+import Box from "@sproutsocial/seeds-react-box";
+import Icon from "@sproutsocial/seeds-react-icon";
+import Token from "@sproutsocial/seeds-react-token";
+
+// src/styles.ts
+import styled, { css } from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
+var Container = styled.div`
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  align-content: center;
+  cursor: text;
+  width: 100%;
+  border: 1px solid ${(props) => props.theme.colors.form.border.base};
+  border-radius: ${(props) => props.theme.radii[500]};
+  margin: 0;
+  padding: ${(props) => props.theme.space[300]};
+  padding-top: ${(props) => props.theme.space[200]};
+  background-color: ${(props) => props.theme.colors.form.background.base};
+  color: ${(props) => props.theme.colors.text.body};
+  transition: border-color ${(props) => props.theme.duration.fast}
+      ${(props) => props.theme.easing.ease_in},
+    box-shadow ${(props) => props.theme.duration.fast}
+      ${(props) => props.theme.easing.ease_in};
+  ${(props) => props.theme.typography[200]};
+  font-family: ${(props) => props.theme.fontFamily};
+  font-weight: ${(props) => props.theme.fontWeights.normal};
+  appearance: none;
+
+  button {
+    margin: ${(props) => props.theme.space[200]}
+      ${(props) => props.theme.space[200]} 0 0;
+  }
+
+  input {
+    ${(props) => props.theme.typography[200]};
+    outline: none;
+    border: none;
+    flex: 1;
+    padding: 0;
+    padding-top: ${(props) => props.theme.space[100]};
+    margin: ${(props) => props.theme.space[200]}
+      ${(props) => props.theme.space[300]} ${(props) => props.theme.space[100]}
+      0;
+    color: ${(props) => props.theme.colors.text.body};
+    background-color: ${(props) => props.theme.colors.form.background.base};
+    /** This matches the height of the token so size does not change as tokens are added */
+    min-height: 20px;
+
+    &::-webkit-search-cancel-button {
+      appearance: none;
+    }
+
+    /* 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. */
+    &:focus {
+      box-shadow: none;
+    }
+
+    /* https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs */
+    &::-ms-clear {
+      display: none;
+    }
+
+    /* Fix for red ring when input is marked required in Firefox */
+    &:not(output):not(:focus):-moz-ui-invalid {
+      box-shadow: none;
+    }
+
+    &::placeholder {
+      color: ${(props) => props.theme.colors.form.placeholder.base};
+      font-style: italic;
+    }
+
+    ${(props) => props.disabled && css`
+        opacity: 0.4;
+
+        cursor: not-allowed;
+      `}
+  }
+
+  ${(props) => props.hasBeforeElement && css`
+      padding-left: 40px;
+    `}
+
+  ${(props) => props.hasAfterElement && css`
+      padding-right: 40px;
+    `}
+
+
+  ${(props) => props.disabled && css`
+      opacity: 0.4;
+
+      cursor: not-allowed;
+    `}
+
+  ${(props) => props.focused && css`
+      ${focusRing}
+    `}
+
+  ${(props) => props.invalid && css`
+      border-color: ${(props2) => props2.theme.colors.form.border.error};
+    `}
+
+	${(props) => props.warning && css`
+      border-color: ${(props2) => props2.theme.colors.form.border.warning};
+    `}
+
+  ${COMMON}
+`;
+Container.displayName = "TokenInputContainer";
+var styles_default = Container;
+
+// src/util.ts
+import uniqueId from "lodash.uniqueid";
+var asTokenSpec = (text) => ({
+  id: uniqueId(`${text}-`),
+  value: text.trim()
+});
+var KeyNameToRegExpChar = {
+  Enter: "\\n"
+};
+var delimitersAsRegExp = (delimiters) => {
+  if (!delimiters)
+    return /[,\n]/;
+  const chars = delimiters.map(
+    (key) => KeyNameToRegExpChar[key] || key
+  ).join("");
+  return RegExp(`[${chars}]`);
+};
+
+// src/TokenScreenReaderStatus.tsx
+import "react";
+import { useEffect, useRef, useState } from "react";
+
+// ../seeds-react-visually-hidden/dist/esm/index.js
+import styled2 from "styled-components";
+import { visuallyHidden } from "@sproutsocial/seeds-react-mixins";
+import { jsx } from "react/jsx-runtime";
+var StyledVisuallyHidden = styled2.span`
+  ${visuallyHidden}
+`;
+var VisuallyHidden = (props) => {
+  return /* @__PURE__ */ jsx(StyledVisuallyHidden, { ...props });
+};
+
+// src/TokenScreenReaderStatus.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+var TokenScreenReaderStatus = ({
+  tokens
+}) => {
+  const prevTokens = usePrevious(tokens);
+  const [tokenStatus, setTokenStatus] = useState("");
+  useEffect(() => {
+    if (prevTokens && tokens) {
+      if (prevTokens.length > tokens.length) {
+        setTokenStatus(
+          `${prevTokens.filter((item) => tokens.indexOf(item) === -1)[0]?.value} has been removed`
+        );
+      }
+      if (prevTokens.length < tokens.length) {
+        setTokenStatus(`${tokens[tokens.length - 1]?.value} has been added.`);
+      }
+    }
+  }, [prevTokens, tokens, tokenStatus]);
+  return /* @__PURE__ */ jsx2(VisuallyHidden, { as: "div", role: "status", children: tokenStatus });
+};
+
+// src/TokenInput.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var DefaultDelimiters = [",", "Enter"];
+var ControlledPropNames = [
+  "value",
+  "hasFocus",
+  "activeToken"
+];
+var TokenInput = class extends React2.Component {
+  delimiterMatcher;
+  constructor(props) {
+    super(props);
+    const { hasFocus, activeToken, value, delimiters } = props;
+    this.delimiterMatcher = delimitersAsRegExp(delimiters || DefaultDelimiters);
+    this.state = {
+      prevProps: props,
+      hasFocus: hasFocus || false,
+      activeToken,
+      value: value || ""
+    };
+  }
+  static getDerivedStateFromProps(props, state) {
+    const { prevProps } = state;
+    const modifiedState = { prevProps: props };
+    ControlledPropNames.forEach((propName) => {
+      const currentProp = props[propName];
+      if (currentProp !== prevProps[propName]) {
+        modifiedState[propName] = currentProp;
+      }
+    });
+    modifiedState.prevProps = props;
+    return modifiedState;
+  }
+  isDelimiter(keyName) {
+    const { delimiters = DefaultDelimiters } = this.props;
+    return delimiters.includes(keyName);
+  }
+  spawnNewTokens(texts) {
+    const {
+      onAddToken,
+      onChangeTokens,
+      tokenMaxLength: max = Infinity,
+      tokens = []
+    } = this.props;
+    const tokenSpecs = texts.map((text) => asTokenSpec(text.slice(0, max)));
+    if (onAddToken) {
+      tokenSpecs.forEach(onAddToken);
+    } else if (onChangeTokens) {
+      onChangeTokens(tokens.concat(tokenSpecs));
+    }
+    this.setState({
+      value: ""
+    });
+  }
+  deleteToken(tokenId) {
+    const { onRemoveToken, onChangeTokens, tokens = [] } = this.props;
+    const count = tokens.length;
+    if (count === 0)
+      return;
+    const id = tokenId ?? tokens[count - 1]?.id;
+    if (onRemoveToken) {
+      onRemoveToken(id ? id : "");
+    } else if (onChangeTokens) {
+      onChangeTokens(tokens.filter((tokenSpec) => tokenSpec.id !== id));
+    }
+    this.setState({
+      value: ""
+    });
+  }
+  handleChangeText = (e) => {
+    const { value } = e.currentTarget;
+    const { onChange } = this.props;
+    this.setState({
+      value
+    });
+    onChange?.(e, value);
+  };
+  handleFocus = (e) => {
+    const { onFocus } = this.props;
+    this.setState({
+      hasFocus: true
+    });
+    onFocus?.(e);
+  };
+  handleBlur = (e) => {
+    const { onBlur } = this.props;
+    if (onBlur)
+      onBlur(e);
+    this.setState({
+      hasFocus: false
+    });
+  };
+  handleKeyUp = (e) => {
+    this.props.onKeyUp?.(e, e.currentTarget.value);
+  };
+  handleKeyDown = (e) => {
+    const { onKeyDown } = this.props;
+    const { key, currentTarget } = e;
+    const text = currentTarget.value;
+    if (onKeyDown)
+      onKeyDown(e, text);
+    if (this.isDelimiter(key)) {
+      if (text) {
+        this.spawnNewTokens([text]);
+        e.preventDefault();
+      }
+    } else if (key === "Backspace") {
+      if (text === "") {
+        this.deleteToken();
+      }
+    }
+  };
+  handlePaste = (e) => {
+    const text = e.clipboardData.getData("text");
+    const { onPaste } = this.props;
+    if (onPaste)
+      onPaste(e, text);
+    const subtexts = text.split(this.delimiterMatcher);
+    const texts = subtexts.filter((subtext) => subtext.length);
+    if (texts.length > 1) {
+      this.spawnNewTokens(texts);
+      e.preventDefault();
+    }
+  };
+  handleClickToken = (e, token) => {
+    const { onClickToken, disabled } = this.props;
+    if (onClickToken)
+      onClickToken(e, token.id);
+    if (!disabled) {
+      this.deleteToken(token.id);
+    }
+  };
+  renderToken(token) {
+    const { iconName: defaultIconName, disabled } = this.props;
+    const activeId = this.state.activeToken;
+    const {
+      id,
+      iconName: tokenIconName,
+      iconProps = { "aria-hidden": true },
+      value,
+      valid
+    } = token;
+    const iconName = tokenIconName || defaultIconName;
+    const isActive = activeId === id;
+    return /* @__PURE__ */ jsx3(
+      Token,
+      {
+        id,
+        onClick: (e) => this.handleClickToken(e, token),
+        valid,
+        active: isActive,
+        disabled,
+        children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
+          iconName && /* @__PURE__ */ jsx3(Icon, { name: iconName, size: "mini", pr: 300, ...iconProps }),
+          value
+        ] })
+      }
+    );
+  }
+  renderTokens(tokens) {
+    return tokens.map((token) => /* @__PURE__ */ jsx3("div", { className: "TokenInput-token", children: this.renderToken(token) }, token.id));
+  }
+  render() {
+    const {
+      autoFocus,
+      autocomplete,
+      disabled,
+      isInvalid,
+      hasWarning,
+      id,
+      name,
+      placeholder,
+      required,
+      elemBefore,
+      elemAfter,
+      maxLength,
+      ariaDescribedby,
+      ariaLabel,
+      innerRef,
+      // These functions are used in the class functions above, but need to be extracted in order for `rest` to be correct
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      value,
+      onAddToken,
+      onRemoveToken,
+      onChangeTokens,
+      onClickToken,
+      onBlur,
+      onChange,
+      onFocus,
+      onKeyDown,
+      onKeyUp,
+      onPaste,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      inputProps = {},
+      qa = {},
+      tokens,
+      ...rest
+    } = this.props;
+    const { state } = this;
+    return /* @__PURE__ */ jsxs(
+      styles_default,
+      {
+        hasBeforeElement: !!elemBefore,
+        hasAfterElement: !!elemAfter,
+        disabled,
+        invalid: !!isInvalid,
+        warning: hasWarning,
+        focused: state.hasFocus,
+        ...rest,
+        children: [
+          elemBefore && /* @__PURE__ */ jsx3(Accessory, { before: true, children: elemBefore }),
+          tokens && this.renderTokens(tokens),
+          /* @__PURE__ */ jsx3(TokenScreenReaderStatus, { tokens }),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              "aria-describedby": ariaDescribedby,
+              "aria-invalid": !!isInvalid,
+              "aria-label": ariaLabel,
+              autoFocus,
+              autoComplete: autocomplete,
+              disabled,
+              id,
+              name,
+              placeholder,
+              type: "text",
+              required,
+              value: state.value,
+              maxLength,
+              onBlur: this.handleBlur,
+              onChange: this.handleChangeText,
+              onFocus: this.handleFocus,
+              onKeyDown: this.handleKeyDown,
+              onKeyUp: this.handleKeyUp,
+              onPaste: this.handlePaste,
+              ref: innerRef,
+              "data-qa-input": name || "",
+              "data-qa-input-isdisabled": !!disabled,
+              "data-qa-input-isrequired": !!required,
+              ...qa,
+              ...inputProps
+            }
+          ),
+          elemAfter && /* @__PURE__ */ jsx3(Accessory, { after: true, children: elemAfter })
+        ]
+      }
+    );
+  }
+};
+
+// src/TokenInputTypes.ts
+import "react";
+
+// src/index.ts
+var src_default = TokenInput;
+export {
+  TokenInput,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +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<HTMLButtonElement>,\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    } = token;\n    const iconName = tokenIconName || defaultIconName;\n    const isActive = activeId === id;\n    return (\n      <Token\n        id={id}\n        onClick={(e) => this.handleClickToken(e, token)}\n        valid={valid}\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        active={isActive}\n        disabled={disabled}\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\";\n\nexport interface TypeTokenSpec {\n  id: string;\n  iconName?: TypeIconName;\n  iconProps?: Omit<TypeIconProps, \"name\">;\n  value: string;\n  valid?: boolean;\n}\n\nexport interface TypeBaseTokenInputProps {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n  iconName?: TypeIconName;\n\n  /** Array of delimiter key names */\n  delimiters?: string[];\n\n  /** Current input text. Required when controlling the input text */\n  value?: string;\n\n  /** Current focus state. Required when controlling the focus via onFocus and onBlur */\n  hasFocus?: boolean;\n\n  /** Id of the currently selected token */\n  activeToken?: string;\n\n  /** Array of current tokens */\n  tokens?: TypeTokenSpec[];\n\n  /** Standard control of changing tokens. For fine-grain control use onAddToken and onRemoveToken, instead */\n  onChangeTokens?: (tokens: TypeTokenSpec[]) => void;\n\n  /** Fine-grained control of adding tokens. Use with onRemoveToken instead of onChangeTokens */\n  onAddToken?: (tokenSpec: TypeTokenSpec) => void;\n\n  /** Fine-grained control of removing tokens. Use with onAddToken instead of onChangeTokens */\n  onRemoveToken?: (tokenId: string) => void;\n\n  /** Controls clicking on a token. When absent, clicking a token removes itself */\n  onClickToken?: (\n    e: React.SyntheticEvent<HTMLButtonElement>,\n    tokenId: string\n  ) => void;\n\n  /** Fine-grained control of the input text used to create tokens */\n  onChange?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;\n\n  /** Fine-grained control of pasted text */\n  onPaste?: (e: React.ClipboardEvent<HTMLInputElement>, value: string) => void;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;\n\n  /** Attribute used to associate other elements that describe the Input, like an error */\n  ariaDescribedby?: string;\n\n  /** Label used to describe the input if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Placeholder text for when value is undefined or empty */\n  placeholder?: string;\n\n  /** Will autofocus the element when mounted to the DOM */\n  autoFocus?: boolean;\n\n  /** HTML disabled attribute */\n  disabled?: boolean;\n\n  /** Whether or not the current contents of the input are invalid */\n  isInvalid?: boolean;\n\n  /** Whether or not the current contents of the input has any warnings */\n  hasWarning?: boolean;\n\n  /** HTML required attribute */\n  required?: boolean;\n\n  /** 16x16 element, such as an icon */\n  elemBefore?: React.ReactNode;\n\n  /** 16x16 element, such as an icon */\n  elemAfter?: React.ReactNode;\n\n  /** Max input text length */\n  maxLength?: number;\n\n  /** Max length of the token */\n  tokenMaxLength?: number;\n\n  /** Props to spread onto the underlying input element */\n  inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n\n  /** Used to get a reference to the underlying element */\n  innerRef?: React.Ref<HTMLInputElement>;\n  qa?: object;\n\n  /** Browser autocomplete support */\n  autocomplete?: string;\n}\n\nexport interface TypeTokenInputProps\n  extends TypeBaseTokenInputProps,\n    TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"div\">,\n      keyof TypeBaseTokenInputProps | \"color\"\n    > {}\n","import TokenInput from \"./TokenInput\";\n\nexport default TokenInput;\nexport { TokenInput };\nexport * from \"./TokenInputTypes\";\n"],"mappings":"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","names":["React","props","styled","jsx","jsx"]}

package/dist/index.d.mts

@@ -0,0 +1,104 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+import { TypeIconName, TypeIconProps } from '@sproutsocial/seeds-react-icon';
+
+interface TypeTokenSpec {
+    id: string;
+    iconName?: TypeIconName;
+    iconProps?: Omit<TypeIconProps, "name">;
+    value: string;
+    valid?: boolean;
+}
+interface TypeBaseTokenInputProps {
+    /** ID of the form element, should match the "for" value of the associated label */
+    id: string;
+    name: string;
+    iconName?: TypeIconName;
+    /** Array of delimiter key names */
+    delimiters?: string[];
+    /** Current input text. Required when controlling the input text */
+    value?: string;
+    /** Current focus state. Required when controlling the focus via onFocus and onBlur */
+    hasFocus?: boolean;
+    /** Id of the currently selected token */
+    activeToken?: string;
+    /** Array of current tokens */
+    tokens?: TypeTokenSpec[];
+    /** Standard control of changing tokens. For fine-grain control use onAddToken and onRemoveToken, instead */
+    onChangeTokens?: (tokens: TypeTokenSpec[]) => void;
+    /** Fine-grained control of adding tokens. Use with onRemoveToken instead of onChangeTokens */
+    onAddToken?: (tokenSpec: TypeTokenSpec) => void;
+    /** Fine-grained control of removing tokens. Use with onAddToken instead of onChangeTokens */
+    onRemoveToken?: (tokenId: string) => void;
+    /** Controls clicking on a token. When absent, clicking a token removes itself */
+    onClickToken?: (e: React.SyntheticEvent<HTMLButtonElement>, tokenId: string) => void;
+    /** Fine-grained control of the input text used to create tokens */
+    onChange?: (e: React.SyntheticEvent<HTMLInputElement>, value: string) => void;
+    /** Fine-grained control of pasted text */
+    onPaste?: (e: React.ClipboardEvent<HTMLInputElement>, value: string) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>, value: string) => void;
+    /** Attribute used to associate other elements that describe the Input, like an error */
+    ariaDescribedby?: string;
+    /** Label used to describe the input if not used with an accompanying visual label */
+    ariaLabel?: string;
+    /** Placeholder text for when value is undefined or empty */
+    placeholder?: string;
+    /** Will autofocus the element when mounted to the DOM */
+    autoFocus?: boolean;
+    /** HTML disabled attribute */
+    disabled?: boolean;
+    /** Whether or not the current contents of the input are invalid */
+    isInvalid?: boolean;
+    /** Whether or not the current contents of the input has any warnings */
+    hasWarning?: boolean;
+    /** HTML required attribute */
+    required?: boolean;
+    /** 16x16 element, such as an icon */
+    elemBefore?: React.ReactNode;
+    /** 16x16 element, such as an icon */
+    elemAfter?: React.ReactNode;
+    /** Max input text length */
+    maxLength?: number;
+    /** Max length of the token */
+    tokenMaxLength?: number;
+    /** Props to spread onto the underlying input element */
+    inputProps?: React.ComponentPropsWithoutRef<"input">;
+    /** Used to get a reference to the underlying element */
+    innerRef?: React.Ref<HTMLInputElement>;
+    qa?: object;
+    /** Browser autocomplete support */
+    autocomplete?: string;
+}
+interface TypeTokenInputProps extends TypeBaseTokenInputProps, TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeBaseTokenInputProps | "color"> {
+}
+
+type TypeState = {
+    prevProps: TypeTokenInputProps;
+    hasFocus: boolean;
+    activeToken: string | null | undefined;
+    value: string;
+};
+declare class TokenInput extends React.Component<TypeTokenInputProps, TypeState> {
+    delimiterMatcher: RegExp;
+    constructor(props: TypeTokenInputProps);
+    static getDerivedStateFromProps(props: Readonly<TypeTokenInputProps>, state: TypeState): Partial<TypeState>;
+    isDelimiter(keyName: string): boolean;
+    spawnNewTokens(texts: string[]): void;
+    deleteToken(tokenId?: string): void;
+    handleChangeText: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    handlePaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
+    handleClickToken: (e: React.SyntheticEvent<HTMLButtonElement>, token: TypeTokenSpec) => void;
+    renderToken(token: TypeTokenSpec): React.ReactNode;
+    renderTokens(tokens: TypeTokenSpec[]): React.ReactNode;
+    render(): react_jsx_runtime.JSX.Element;
+}
+
+export { TokenInput, type TypeBaseTokenInputProps, type TypeTokenInputProps, type TypeTokenSpec, TokenInput as default };