@sproutsocial/seeds-react-textarea 1.0.0 → 1.0.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     7.13 KB
+CJS dist/index.js     7.14 KB
 CJS dist/index.js.map 12.10 KB
-CJS ⚡️ Build success in 189ms
+CJS ⚡️ Build success in 190ms
 ESM dist/esm/index.js     5.09 KB
 ESM dist/esm/index.js.map 12.05 KB
-ESM ⚡️ Build success in 189ms
+ESM ⚡️ Build success in 190ms
 DTS Build start
-DTS ⚡️ Build success in 37155ms
+DTS ⚡️ Build success in 36722ms
 DTS dist/index.d.ts  3.36 KB
 DTS dist/index.d.mts 3.36 KB
-Done in 45.30s.
+Done in 44.96s.

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @sproutsocial/seeds-react-textarea
 
+## 1.0.1
+
+### Patch Changes
+
+- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
+- Updated dependencies [9fd8bac]
+  - @sproutsocial/seeds-react-system-props@3.0.2
+  - @sproutsocial/seeds-react-mixins@4.1.1
+  - @sproutsocial/seeds-react-theme@2.2.1
+
 ## 1.0.0
 
 ### Major Changes

package/dist/esm/index.js

@@ -202,9 +202,9 @@ var Textarea = class extends React.Component {
 import "react";
 
 // src/index.ts
-var src_default = Textarea;
+var index_default = Textarea;
 export {
   Textarea,
-  src_default as default
+  index_default as default
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Textarea.tsx","../../src/styles.ts","../../src/TextareaTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container, { Accessory } from \"./styles\";\nimport type { TypeTextareaProps } from \"./TextareaTypes\";\n\n/**\n * @deprecated Use TypeTextareaProps from root instead\n */\nexport type TypeProps = TypeTextareaProps;\n\nexport default class Textarea extends React.Component<TypeTextareaProps> {\n  static defaultProps = {\n    rows: 4,\n  };\n\n  handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n    if (this.props.onBlur) {\n      this.props.onBlur(e);\n    }\n  };\n\n  handleChange = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onChange) {\n      this.props.onChange(e);\n    }\n  };\n\n  handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(e);\n    }\n  };\n\n  handleKeyDown = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n    }\n  };\n\n  handleKeyUp = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onKeyUp) {\n      this.props.onKeyUp(e);\n    }\n  };\n\n  override render() {\n    const {\n      autoFocus,\n      disabled,\n      readOnly,\n      isInvalid,\n      id,\n      name,\n      placeholder,\n      value,\n      enableSpellcheck,\n      enableResize,\n      required,\n      rows,\n      elemBefore,\n      elemAfter,\n      maxLength,\n      ariaLabel,\n      ariaDescribedby,\n      innerRef,\n      onBlur,\n      onChange,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n      color,\n      qa = {},\n      inputProps = {},\n      ...rest\n    } = this.props;\n\n    return (\n      <Container\n        hasBeforeElement={!!elemBefore}\n        hasAfterElement={!!elemAfter}\n        disabled={disabled}\n        invalid={isInvalid}\n        resizable={enableResize}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n        data-qa-textarea={id}\n        data-qa-textarea-isdisabled={disabled === true}\n        data-qa-textarea-isrequired={required === true}\n        data-qa-textarea-isinvalid={isInvalid === true}\n        {...qa}\n        {...rest}\n      >\n        {elemBefore && <Accessory before>{elemBefore}</Accessory>}\n\n        <textarea\n          id={id}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedby}\n          aria-invalid={isInvalid}\n          value={value}\n          name={name}\n          placeholder={placeholder}\n          rows={rows}\n          disabled={disabled}\n          readOnly={Boolean(readOnly)}\n          autoFocus={autoFocus}\n          spellCheck={enableSpellcheck}\n          required={required}\n          maxLength={maxLength}\n          onChange={this.handleChange}\n          onKeyUp={this.handleKeyUp}\n          onKeyDown={this.handleKeyDown}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          ref={innerRef}\n          data-qa-textarea-input=\"\"\n          data-qa-input={name}\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 {\n  TypeTextareaAccessoryProps,\n  TypeTextareaContainerProps,\n} from \"./TextareaTypes\";\n\nconst Container = styled.div<TypeTextareaContainerProps>`\n  box-sizing: border-box;\n  position: relative;\n\n  textarea {\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    padding: ${(props) => props.theme.space[300]};\n    border: 1px solid ${(props) => props.theme.colors.form.border.base};\n    border-radius: ${(props) => props.theme.radii[500]};\n    background-color: ${(props) => props.theme.colors.form.background.base};\n    color: ${(props) => props.theme.colors.text.body};\n    outline: none;\n    resize: none;\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    font-family: ${(props) => props.theme.fontFamily};\n    ${(props) => props.theme.typography[200]}\n    font-weight: ${(props) => props.theme.fontWeights.normal};\n    appearance: none;\n\n    &:focus {\n      ${focusRing}\n    }\n\n    &::placeholder {\n      color: ${(props) => props.theme.colors.form.placeholder.base};\n      font-style: italic;\n    }\n\n    ${(props) =>\n      props.resizable &&\n      css`\n        resize: vertical;\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      textarea {\n        cursor: not-allowed;\n      }\n    `}\n\n  ${(props) =>\n    props.invalid &&\n    css`\n      textarea {\n        border-color: ${(props) => props.theme.colors.form.border.error};\n      }\n    `}\n\n  ${COMMON}\n`;\n\nexport const Accessory = styled.div<TypeTextareaAccessoryProps>`\n  position: absolute;\n  color: ${(props) => props.theme.colors.icon.base};\n\n  ${(props) =>\n    props.before &&\n    css`\n      top: ${props.theme.space[300]};\n      left: ${props.theme.space[350]};\n    `};\n\n  ${(props) =>\n    props.after &&\n    css`\n      right: ${props.theme.space[350]};\n      bottom: ${props.theme.space[300]};\n    `};\n`;\n\nContainer.displayName = \"TextareaContainer\";\nAccessory.displayName = \"TextareaAccessory\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype CollisionTypes =\n  | \"color\"\n  | \"onChange\"\n  | \"onFocus\"\n  | \"onBlur\"\n  | \"onKeyDown\"\n  | \"onKeyUp\";\n\nexport interface TypeTextareaProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"textarea\">, CollisionTypes> {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n\n  /** Label used to describe the input if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Attribute used to associate other elements that describe the Textarea, like an error */\n  ariaDescribedby?: string;\n\n  /** Current value of the textarea */\n  value?: 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  /** HTML readonly attribute */\n  readOnly?: boolean;\n\n  /** Whether or not the current contents of the input are invalid */\n  isInvalid?: boolean;\n\n  /** Placeholder text for when value is undefined or empty */\n  placeholder?: string;\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 length of the input */\n  maxLength?: number;\n\n  /** HTML spellcheck attribute */\n  enableSpellcheck?: boolean;\n\n  /** Makes the text area vertically resizable */\n  enableResize?: boolean;\n\n  /** The number of visible lines of text without scrolling */\n  rows?: number;\n  qa?: object;\n\n  /** Props to spread onto the underlying textarea element */\n  inputProps?: React.ComponentPropsWithoutRef<\"textarea\">;\n\n  /** Used to get a reference to the underlying element */\n  innerRef?:\n    | {\n        current: null | HTMLTextAreaElement;\n      }\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    | ((arg0: React.ElementRef<any> | HTMLElement) => void);\n  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n  onChange?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n  onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n  onKeyDown?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n  onKeyUp?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n}\n\nexport interface TypeTextareaContainerProps {\n  resizable?: TypeTextareaProps[\"enableResize\"];\n  hasBeforeElement?: boolean;\n  hasAfterElement?: boolean;\n  disabled?: TypeTextareaProps[\"disabled\"];\n  invalid?: TypeTextareaProps[\"isInvalid\"];\n}\n\nexport interface TypeTextareaAccessoryProps {\n  before?: boolean;\n  after?: boolean;\n}\n","import Textarea from \"./Textarea\";\n\nexport default Textarea;\nexport { Textarea };\nexport * from \"./TextareaTypes\";\n"],"mappings":"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","names":["props"]}
+{"version":3,"sources":["../../src/Textarea.tsx","../../src/styles.ts","../../src/TextareaTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container, { Accessory } from \"./styles\";\nimport type { TypeTextareaProps } from \"./TextareaTypes\";\n\n/**\n * @deprecated Use TypeTextareaProps from root instead\n */\nexport type TypeProps = TypeTextareaProps;\n\nexport default class Textarea extends React.Component<TypeTextareaProps> {\n  static defaultProps = {\n    rows: 4,\n  };\n\n  handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n    if (this.props.onBlur) {\n      this.props.onBlur(e);\n    }\n  };\n\n  handleChange = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onChange) {\n      this.props.onChange(e);\n    }\n  };\n\n  handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(e);\n    }\n  };\n\n  handleKeyDown = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n    }\n  };\n\n  handleKeyUp = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onKeyUp) {\n      this.props.onKeyUp(e);\n    }\n  };\n\n  override render() {\n    const {\n      autoFocus,\n      disabled,\n      readOnly,\n      isInvalid,\n      id,\n      name,\n      placeholder,\n      value,\n      enableSpellcheck,\n      enableResize,\n      required,\n      rows,\n      elemBefore,\n      elemAfter,\n      maxLength,\n      ariaLabel,\n      ariaDescribedby,\n      innerRef,\n      onBlur,\n      onChange,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n      color,\n      qa = {},\n      inputProps = {},\n      ...rest\n    } = this.props;\n\n    return (\n      <Container\n        hasBeforeElement={!!elemBefore}\n        hasAfterElement={!!elemAfter}\n        disabled={disabled}\n        invalid={isInvalid}\n        resizable={enableResize}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n        data-qa-textarea={id}\n        data-qa-textarea-isdisabled={disabled === true}\n        data-qa-textarea-isrequired={required === true}\n        data-qa-textarea-isinvalid={isInvalid === true}\n        {...qa}\n        {...rest}\n      >\n        {elemBefore && <Accessory before>{elemBefore}</Accessory>}\n\n        <textarea\n          id={id}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedby}\n          aria-invalid={isInvalid}\n          value={value}\n          name={name}\n          placeholder={placeholder}\n          rows={rows}\n          disabled={disabled}\n          readOnly={Boolean(readOnly)}\n          autoFocus={autoFocus}\n          spellCheck={enableSpellcheck}\n          required={required}\n          maxLength={maxLength}\n          onChange={this.handleChange}\n          onKeyUp={this.handleKeyUp}\n          onKeyDown={this.handleKeyDown}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          ref={innerRef}\n          data-qa-textarea-input=\"\"\n          data-qa-input={name}\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 {\n  TypeTextareaAccessoryProps,\n  TypeTextareaContainerProps,\n} from \"./TextareaTypes\";\n\nconst Container = styled.div<TypeTextareaContainerProps>`\n  box-sizing: border-box;\n  position: relative;\n\n  textarea {\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    padding: ${(props) => props.theme.space[300]};\n    border: 1px solid ${(props) => props.theme.colors.form.border.base};\n    border-radius: ${(props) => props.theme.radii[500]};\n    background-color: ${(props) => props.theme.colors.form.background.base};\n    color: ${(props) => props.theme.colors.text.body};\n    outline: none;\n    resize: none;\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    font-family: ${(props) => props.theme.fontFamily};\n    ${(props) => props.theme.typography[200]}\n    font-weight: ${(props) => props.theme.fontWeights.normal};\n    appearance: none;\n\n    &:focus {\n      ${focusRing}\n    }\n\n    &::placeholder {\n      color: ${(props) => props.theme.colors.form.placeholder.base};\n      font-style: italic;\n    }\n\n    ${(props) =>\n      props.resizable &&\n      css`\n        resize: vertical;\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      textarea {\n        cursor: not-allowed;\n      }\n    `}\n\n  ${(props) =>\n    props.invalid &&\n    css`\n      textarea {\n        border-color: ${(props) => props.theme.colors.form.border.error};\n      }\n    `}\n\n  ${COMMON}\n`;\n\nexport const Accessory = styled.div<TypeTextareaAccessoryProps>`\n  position: absolute;\n  color: ${(props) => props.theme.colors.icon.base};\n\n  ${(props) =>\n    props.before &&\n    css`\n      top: ${props.theme.space[300]};\n      left: ${props.theme.space[350]};\n    `};\n\n  ${(props) =>\n    props.after &&\n    css`\n      right: ${props.theme.space[350]};\n      bottom: ${props.theme.space[300]};\n    `};\n`;\n\nContainer.displayName = \"TextareaContainer\";\nAccessory.displayName = \"TextareaAccessory\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype CollisionTypes =\n  | \"color\"\n  | \"onChange\"\n  | \"onFocus\"\n  | \"onBlur\"\n  | \"onKeyDown\"\n  | \"onKeyUp\";\n\nexport interface TypeTextareaProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"textarea\">, CollisionTypes> {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n\n  /** Label used to describe the input if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Attribute used to associate other elements that describe the Textarea, like an error */\n  ariaDescribedby?: string;\n\n  /** Current value of the textarea */\n  value?: 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  /** HTML readonly attribute */\n  readOnly?: boolean;\n\n  /** Whether or not the current contents of the input are invalid */\n  isInvalid?: boolean;\n\n  /** Placeholder text for when value is undefined or empty */\n  placeholder?: string;\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 length of the input */\n  maxLength?: number;\n\n  /** HTML spellcheck attribute */\n  enableSpellcheck?: boolean;\n\n  /** Makes the text area vertically resizable */\n  enableResize?: boolean;\n\n  /** The number of visible lines of text without scrolling */\n  rows?: number;\n  qa?: object;\n\n  /** Props to spread onto the underlying textarea element */\n  inputProps?: React.ComponentPropsWithoutRef<\"textarea\">;\n\n  /** Used to get a reference to the underlying element */\n  innerRef?:\n    | {\n        current: null | HTMLTextAreaElement;\n      }\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    | ((arg0: React.ElementRef<any> | HTMLElement) => void);\n  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n  onChange?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n  onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n  onKeyDown?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n  onKeyUp?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n}\n\nexport interface TypeTextareaContainerProps {\n  resizable?: TypeTextareaProps[\"enableResize\"];\n  hasBeforeElement?: boolean;\n  hasAfterElement?: boolean;\n  disabled?: TypeTextareaProps[\"disabled\"];\n  invalid?: TypeTextareaProps[\"isInvalid\"];\n}\n\nexport interface TypeTextareaAccessoryProps {\n  before?: boolean;\n  after?: boolean;\n}\n","import Textarea from \"./Textarea\";\n\nexport default Textarea;\nexport { Textarea };\nexport * from \"./TextareaTypes\";\n"],"mappings":"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","names":["props"]}

package/dist/index.js

@@ -28,12 +28,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Textarea: () => Textarea,
-  default: () => src_default
+  default: () => index_default
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/Textarea.tsx
 var React = __toESM(require("react"));
@@ -239,7 +239,7 @@ var Textarea = class extends React.Component {
 var React2 = require("react");
 
 // src/index.ts
-var src_default = Textarea;
+var index_default = Textarea;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Textarea

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Textarea.tsx","../src/styles.ts","../src/TextareaTypes.ts"],"sourcesContent":["import Textarea from \"./Textarea\";\n\nexport default Textarea;\nexport { Textarea };\nexport * from \"./TextareaTypes\";\n","import * as React from \"react\";\nimport Container, { Accessory } from \"./styles\";\nimport type { TypeTextareaProps } from \"./TextareaTypes\";\n\n/**\n * @deprecated Use TypeTextareaProps from root instead\n */\nexport type TypeProps = TypeTextareaProps;\n\nexport default class Textarea extends React.Component<TypeTextareaProps> {\n  static defaultProps = {\n    rows: 4,\n  };\n\n  handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n    if (this.props.onBlur) {\n      this.props.onBlur(e);\n    }\n  };\n\n  handleChange = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onChange) {\n      this.props.onChange(e);\n    }\n  };\n\n  handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(e);\n    }\n  };\n\n  handleKeyDown = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n    }\n  };\n\n  handleKeyUp = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onKeyUp) {\n      this.props.onKeyUp(e);\n    }\n  };\n\n  override render() {\n    const {\n      autoFocus,\n      disabled,\n      readOnly,\n      isInvalid,\n      id,\n      name,\n      placeholder,\n      value,\n      enableSpellcheck,\n      enableResize,\n      required,\n      rows,\n      elemBefore,\n      elemAfter,\n      maxLength,\n      ariaLabel,\n      ariaDescribedby,\n      innerRef,\n      onBlur,\n      onChange,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n      color,\n      qa = {},\n      inputProps = {},\n      ...rest\n    } = this.props;\n\n    return (\n      <Container\n        hasBeforeElement={!!elemBefore}\n        hasAfterElement={!!elemAfter}\n        disabled={disabled}\n        invalid={isInvalid}\n        resizable={enableResize}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n        data-qa-textarea={id}\n        data-qa-textarea-isdisabled={disabled === true}\n        data-qa-textarea-isrequired={required === true}\n        data-qa-textarea-isinvalid={isInvalid === true}\n        {...qa}\n        {...rest}\n      >\n        {elemBefore && <Accessory before>{elemBefore}</Accessory>}\n\n        <textarea\n          id={id}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedby}\n          aria-invalid={isInvalid}\n          value={value}\n          name={name}\n          placeholder={placeholder}\n          rows={rows}\n          disabled={disabled}\n          readOnly={Boolean(readOnly)}\n          autoFocus={autoFocus}\n          spellCheck={enableSpellcheck}\n          required={required}\n          maxLength={maxLength}\n          onChange={this.handleChange}\n          onKeyUp={this.handleKeyUp}\n          onKeyDown={this.handleKeyDown}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          ref={innerRef}\n          data-qa-textarea-input=\"\"\n          data-qa-input={name}\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 {\n  TypeTextareaAccessoryProps,\n  TypeTextareaContainerProps,\n} from \"./TextareaTypes\";\n\nconst Container = styled.div<TypeTextareaContainerProps>`\n  box-sizing: border-box;\n  position: relative;\n\n  textarea {\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    padding: ${(props) => props.theme.space[300]};\n    border: 1px solid ${(props) => props.theme.colors.form.border.base};\n    border-radius: ${(props) => props.theme.radii[500]};\n    background-color: ${(props) => props.theme.colors.form.background.base};\n    color: ${(props) => props.theme.colors.text.body};\n    outline: none;\n    resize: none;\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    font-family: ${(props) => props.theme.fontFamily};\n    ${(props) => props.theme.typography[200]}\n    font-weight: ${(props) => props.theme.fontWeights.normal};\n    appearance: none;\n\n    &:focus {\n      ${focusRing}\n    }\n\n    &::placeholder {\n      color: ${(props) => props.theme.colors.form.placeholder.base};\n      font-style: italic;\n    }\n\n    ${(props) =>\n      props.resizable &&\n      css`\n        resize: vertical;\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      textarea {\n        cursor: not-allowed;\n      }\n    `}\n\n  ${(props) =>\n    props.invalid &&\n    css`\n      textarea {\n        border-color: ${(props) => props.theme.colors.form.border.error};\n      }\n    `}\n\n  ${COMMON}\n`;\n\nexport const Accessory = styled.div<TypeTextareaAccessoryProps>`\n  position: absolute;\n  color: ${(props) => props.theme.colors.icon.base};\n\n  ${(props) =>\n    props.before &&\n    css`\n      top: ${props.theme.space[300]};\n      left: ${props.theme.space[350]};\n    `};\n\n  ${(props) =>\n    props.after &&\n    css`\n      right: ${props.theme.space[350]};\n      bottom: ${props.theme.space[300]};\n    `};\n`;\n\nContainer.displayName = \"TextareaContainer\";\nAccessory.displayName = \"TextareaAccessory\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype CollisionTypes =\n  | \"color\"\n  | \"onChange\"\n  | \"onFocus\"\n  | \"onBlur\"\n  | \"onKeyDown\"\n  | \"onKeyUp\";\n\nexport interface TypeTextareaProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"textarea\">, CollisionTypes> {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n\n  /** Label used to describe the input if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Attribute used to associate other elements that describe the Textarea, like an error */\n  ariaDescribedby?: string;\n\n  /** Current value of the textarea */\n  value?: 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  /** HTML readonly attribute */\n  readOnly?: boolean;\n\n  /** Whether or not the current contents of the input are invalid */\n  isInvalid?: boolean;\n\n  /** Placeholder text for when value is undefined or empty */\n  placeholder?: string;\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 length of the input */\n  maxLength?: number;\n\n  /** HTML spellcheck attribute */\n  enableSpellcheck?: boolean;\n\n  /** Makes the text area vertically resizable */\n  enableResize?: boolean;\n\n  /** The number of visible lines of text without scrolling */\n  rows?: number;\n  qa?: object;\n\n  /** Props to spread onto the underlying textarea element */\n  inputProps?: React.ComponentPropsWithoutRef<\"textarea\">;\n\n  /** Used to get a reference to the underlying element */\n  innerRef?:\n    | {\n        current: null | HTMLTextAreaElement;\n      }\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    | ((arg0: React.ElementRef<any> | HTMLElement) => void);\n  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n  onChange?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n  onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n  onKeyDown?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n  onKeyUp?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n}\n\nexport interface TypeTextareaContainerProps {\n  resizable?: TypeTextareaProps[\"enableResize\"];\n  hasBeforeElement?: boolean;\n  hasAfterElement?: boolean;\n  disabled?: TypeTextareaProps[\"disabled\"];\n  invalid?: TypeTextareaProps[\"isInvalid\"];\n}\n\nexport interface TypeTextareaAccessoryProps {\n  before?: boolean;\n  after?: boolean;\n}\n"],"mappings":"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","names":["styled","props","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Textarea.tsx","../src/styles.ts","../src/TextareaTypes.ts"],"sourcesContent":["import Textarea from \"./Textarea\";\n\nexport default Textarea;\nexport { Textarea };\nexport * from \"./TextareaTypes\";\n","import * as React from \"react\";\nimport Container, { Accessory } from \"./styles\";\nimport type { TypeTextareaProps } from \"./TextareaTypes\";\n\n/**\n * @deprecated Use TypeTextareaProps from root instead\n */\nexport type TypeProps = TypeTextareaProps;\n\nexport default class Textarea extends React.Component<TypeTextareaProps> {\n  static defaultProps = {\n    rows: 4,\n  };\n\n  handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n    if (this.props.onBlur) {\n      this.props.onBlur(e);\n    }\n  };\n\n  handleChange = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onChange) {\n      this.props.onChange(e);\n    }\n  };\n\n  handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(e);\n    }\n  };\n\n  handleKeyDown = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n    }\n  };\n\n  handleKeyUp = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onKeyUp) {\n      this.props.onKeyUp(e);\n    }\n  };\n\n  override render() {\n    const {\n      autoFocus,\n      disabled,\n      readOnly,\n      isInvalid,\n      id,\n      name,\n      placeholder,\n      value,\n      enableSpellcheck,\n      enableResize,\n      required,\n      rows,\n      elemBefore,\n      elemAfter,\n      maxLength,\n      ariaLabel,\n      ariaDescribedby,\n      innerRef,\n      onBlur,\n      onChange,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n      color,\n      qa = {},\n      inputProps = {},\n      ...rest\n    } = this.props;\n\n    return (\n      <Container\n        hasBeforeElement={!!elemBefore}\n        hasAfterElement={!!elemAfter}\n        disabled={disabled}\n        invalid={isInvalid}\n        resizable={enableResize}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n        data-qa-textarea={id}\n        data-qa-textarea-isdisabled={disabled === true}\n        data-qa-textarea-isrequired={required === true}\n        data-qa-textarea-isinvalid={isInvalid === true}\n        {...qa}\n        {...rest}\n      >\n        {elemBefore && <Accessory before>{elemBefore}</Accessory>}\n\n        <textarea\n          id={id}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedby}\n          aria-invalid={isInvalid}\n          value={value}\n          name={name}\n          placeholder={placeholder}\n          rows={rows}\n          disabled={disabled}\n          readOnly={Boolean(readOnly)}\n          autoFocus={autoFocus}\n          spellCheck={enableSpellcheck}\n          required={required}\n          maxLength={maxLength}\n          onChange={this.handleChange}\n          onKeyUp={this.handleKeyUp}\n          onKeyDown={this.handleKeyDown}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          ref={innerRef}\n          data-qa-textarea-input=\"\"\n          data-qa-input={name}\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 {\n  TypeTextareaAccessoryProps,\n  TypeTextareaContainerProps,\n} from \"./TextareaTypes\";\n\nconst Container = styled.div<TypeTextareaContainerProps>`\n  box-sizing: border-box;\n  position: relative;\n\n  textarea {\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    padding: ${(props) => props.theme.space[300]};\n    border: 1px solid ${(props) => props.theme.colors.form.border.base};\n    border-radius: ${(props) => props.theme.radii[500]};\n    background-color: ${(props) => props.theme.colors.form.background.base};\n    color: ${(props) => props.theme.colors.text.body};\n    outline: none;\n    resize: none;\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    font-family: ${(props) => props.theme.fontFamily};\n    ${(props) => props.theme.typography[200]}\n    font-weight: ${(props) => props.theme.fontWeights.normal};\n    appearance: none;\n\n    &:focus {\n      ${focusRing}\n    }\n\n    &::placeholder {\n      color: ${(props) => props.theme.colors.form.placeholder.base};\n      font-style: italic;\n    }\n\n    ${(props) =>\n      props.resizable &&\n      css`\n        resize: vertical;\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      textarea {\n        cursor: not-allowed;\n      }\n    `}\n\n  ${(props) =>\n    props.invalid &&\n    css`\n      textarea {\n        border-color: ${(props) => props.theme.colors.form.border.error};\n      }\n    `}\n\n  ${COMMON}\n`;\n\nexport const Accessory = styled.div<TypeTextareaAccessoryProps>`\n  position: absolute;\n  color: ${(props) => props.theme.colors.icon.base};\n\n  ${(props) =>\n    props.before &&\n    css`\n      top: ${props.theme.space[300]};\n      left: ${props.theme.space[350]};\n    `};\n\n  ${(props) =>\n    props.after &&\n    css`\n      right: ${props.theme.space[350]};\n      bottom: ${props.theme.space[300]};\n    `};\n`;\n\nContainer.displayName = \"TextareaContainer\";\nAccessory.displayName = \"TextareaAccessory\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype CollisionTypes =\n  | \"color\"\n  | \"onChange\"\n  | \"onFocus\"\n  | \"onBlur\"\n  | \"onKeyDown\"\n  | \"onKeyUp\";\n\nexport interface TypeTextareaProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"textarea\">, CollisionTypes> {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n\n  /** Label used to describe the input if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Attribute used to associate other elements that describe the Textarea, like an error */\n  ariaDescribedby?: string;\n\n  /** Current value of the textarea */\n  value?: 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  /** HTML readonly attribute */\n  readOnly?: boolean;\n\n  /** Whether or not the current contents of the input are invalid */\n  isInvalid?: boolean;\n\n  /** Placeholder text for when value is undefined or empty */\n  placeholder?: string;\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 length of the input */\n  maxLength?: number;\n\n  /** HTML spellcheck attribute */\n  enableSpellcheck?: boolean;\n\n  /** Makes the text area vertically resizable */\n  enableResize?: boolean;\n\n  /** The number of visible lines of text without scrolling */\n  rows?: number;\n  qa?: object;\n\n  /** Props to spread onto the underlying textarea element */\n  inputProps?: React.ComponentPropsWithoutRef<\"textarea\">;\n\n  /** Used to get a reference to the underlying element */\n  innerRef?:\n    | {\n        current: null | HTMLTextAreaElement;\n      }\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    | ((arg0: React.ElementRef<any> | HTMLElement) => void);\n  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n  onChange?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n  onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n  onKeyDown?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n  onKeyUp?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n}\n\nexport interface TypeTextareaContainerProps {\n  resizable?: TypeTextareaProps[\"enableResize\"];\n  hasBeforeElement?: boolean;\n  hasAfterElement?: boolean;\n  disabled?: TypeTextareaProps[\"disabled\"];\n  invalid?: TypeTextareaProps[\"isInvalid\"];\n}\n\nexport interface TypeTextareaAccessoryProps {\n  before?: boolean;\n  after?: boolean;\n}\n"],"mappings":"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","names":["styled","props","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-textarea",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Seeds React Textarea",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,9 +18,9 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "*",
-    "@sproutsocial/seeds-react-system-props": "*",
-    "@sproutsocial/seeds-react-mixins": "*"
+    "@sproutsocial/seeds-react-theme": "^2.2.0",
+    "@sproutsocial/seeds-react-system-props": "^3.0.1",
+    "@sproutsocial/seeds-react-mixins": "^4.1.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
@@ -33,7 +33,7 @@
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-testing": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
-    "@sproutsocial/seeds-react-text": "*"
+    "@sproutsocial/seeds-react-text": "^1.3.0"
   },
   "peerDependencies": {
     "styled-components": "^5.2.3"