@sproutsocial/seeds-react-input 1.4.0 → 1.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/esm/index.js +2 -2
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.js +2 -2
  4. package/dist/index.js.map +1 -1
  5. package/package.json +2 -2
package/dist/esm/index.js CHANGED
@@ -277,7 +277,7 @@ var Input = class extends React.Component {
277
277
  ariaLabel,
278
278
  ariaDescribedby,
279
279
  clearButtonLabel,
280
- innerRef,
280
+ innerRef = null,
281
281
  // These functions are used in the class functions above, but need to be extracted in order for `rest` to be correct
282
282
  /* eslint-disable @typescript-eslint/no-unused-vars */
283
283
  onBlur,
@@ -345,7 +345,7 @@ var Input = class extends React.Component {
345
345
  onKeyDown: this.handleKeyDown,
346
346
  onKeyUp: this.handleKeyUp,
347
347
  onPaste: this.handlePaste,
348
- ref: mergeRefs([innerRef ?? null, this.inputRef]),
348
+ ref: mergeRefs(innerRef, this.inputRef),
349
349
  "data-qa-input": name || "",
350
350
  "data-qa-input-isdisabled": disabled === true,
351
351
  "data-qa-input-isrequired": required === true,
package/dist/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Input.tsx","../../src/styles.ts","../../src/InputTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport styled from \"styled-components\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { Accessory } from \"./styles\";\nimport type { TypeInputProps } from \"./InputTypes\";\n\ninterface TypeState {\n hasValue: boolean;\n}\n\n// Using Context so that Input's Input.ClearButton-specific props can be passed to Input.ClearButton,\n// regardless of whether it is manually included as elemAfter or automatically included for type=\"search\" Inputs.\ntype TypeInputContext = Partial<{\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n handleClear: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n clearButtonLabel: string;\n hasValue: boolean;\n size: \"large\" | \"small\" | \"default\";\n}>;\n\nconst InputContext = React.createContext<TypeInputContext>({});\n\nconst StyledButton = styled(Button)`\n &:hover,\n &:active {\n color: ${(props) => useInteractiveColor(props.theme.colors.icon.base)};\n }\n`;\n\nconst ClearButton = () => {\n const {\n handleClear,\n clearButtonLabel,\n hasValue,\n size: inputSize,\n } = React.useContext(InputContext);\n\n // Hide the button when there is no text to clear.\n if (!hasValue) {\n return null;\n }\n\n // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.\n if (!clearButtonLabel) {\n // eslint-disable-next-line no-console\n console.warn(\n \"Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.\"\n );\n }\n\n // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.\n // This adjustment is handled automatically for default and large Inputs via Button's size. There is no \"small\" Button.\n const py = inputSize === \"small\" ? 100 : undefined;\n const px = inputSize === \"small\" ? 200 : undefined;\n const buttonSize = inputSize === \"small\" ? \"default\" : inputSize;\n return (\n <StyledButton\n onClick={handleClear}\n size={buttonSize}\n py={py}\n px={px}\n title={clearButtonLabel || \"Clear\"}\n ariaLabel={clearButtonLabel || \"Clear\"}\n color=\"icon.base\"\n >\n <Icon name=\"circle-x-outline\" aria-hidden />\n </StyledButton>\n );\n};\n\nClearButton.displayName = \"Input.ClearButton\";\n\n// Used for positioning elementAfter. This logic will detect if the element is a ClearButton,\n// regardless of whether it was manually passed as elemAfter or automatically added to a search Input.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isClearButton = (elem: any) => {\n if (elem?.type) {\n return elem.type.displayName === \"Input.ClearButton\";\n }\n\n return false;\n};\n\nclass Input extends React.Component<TypeInputProps, TypeState> {\n constructor(props: TypeInputProps) {\n super(props);\n this.state = {\n // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear\n // for both controlled and uncontrolled inputs.\n hasValue: !!props.value,\n };\n }\n\n override componentDidUpdate({ value: prevValue }: TypeInputProps) {\n // Update hasValue state whenever props value changes\n const { value } = this.props;\n if (value !== prevValue) {\n this.updateState(value || \"\");\n }\n }\n\n static defaultProps = {\n autoFocus: false,\n disabled: false,\n type: \"text\",\n size: \"default\",\n appearance: \"primary\",\n };\n\n static ClearButton = ClearButton;\n // Define our own ref for use in handleClear.\n // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.\n inputRef = React.createRef<HTMLInputElement>();\n\n handleBlur = (e: React.FocusEvent<HTMLInputElement>) =>\n this.props.onBlur?.(e);\n\n handleClear = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n const input = this.inputRef.current;\n\n if (input) {\n // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\"\n )?.set;\n\n nativeInputValueSetter?.call(input, \"\");\n const inputEvent = new Event(\"input\", {\n bubbles: true,\n });\n input.dispatchEvent(inputEvent);\n\n // call any onClear callback\n this.props.onClear?.(e);\n\n // wait for next cycle to update focus\n setTimeout(() => {\n input.focus();\n }, 0);\n }\n };\n\n handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n this.props.onChange?.(e, e.currentTarget.value);\n // needed for uncontrolled inputs\n this.updateState(e.currentTarget.value);\n };\n\n handleFocus = (e: React.FocusEvent<HTMLInputElement>) =>\n this.props.onFocus?.(e);\n\n handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) =>\n this.props.onKeyDown?.(e, e.currentTarget.value);\n\n handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) =>\n this.props.onKeyUp?.(e, e.currentTarget.value);\n\n handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) =>\n this.props.onPaste?.(e, e.currentTarget.value);\n\n updateState = (inputValue: string) => {\n const hasValue = inputValue !== \"\";\n const previousHasValue = this.state.hasValue;\n\n // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.\n if (hasValue !== previousHasValue) {\n this.setState({\n hasValue,\n });\n }\n };\n\n override render() {\n const {\n autoComplete,\n autoFocus,\n disabled,\n readOnly,\n isInvalid,\n hasWarning,\n id,\n name,\n placeholder,\n type,\n required,\n value,\n elemBefore,\n elemAfter,\n maxLength,\n ariaLabel,\n ariaDescribedby,\n clearButtonLabel,\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 onBlur,\n onChange,\n onClear,\n onFocus,\n onKeyDown,\n onKeyUp,\n onPaste,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n inputProps = {},\n qa = {},\n appearance,\n size,\n ...rest\n } = this.props;\n\n // Convert autoComplete from a boolean prop to a string value.\n let autoCompleteValue: \"on\" | \"off\" | undefined;\n\n if (autoComplete !== undefined) {\n autoCompleteValue = autoComplete ? \"on\" : \"off\";\n }\n\n // Add default elemBefore and elemAfter elements if type is search.\n const elementBefore =\n type === \"search\" && !elemBefore ? (\n <Icon name=\"magnifying-glass-outline\" aria-hidden color=\"icon.base\" />\n ) : (\n elemBefore\n );\n\n // Do not add a ClearButton if an elemAfter prop was passed.\n const elementAfter =\n type === \"search\" && !elemAfter ? <ClearButton /> : elemAfter;\n\n return (\n <Container\n hasBeforeElement={!!elementBefore}\n hasAfterElement={!!elementAfter}\n disabled={disabled}\n invalid={!!isInvalid}\n warning={hasWarning}\n appearance={appearance}\n size={size}\n {...rest}\n >\n <InputContext.Provider\n value={{\n handleClear: this.handleClear,\n hasValue: this.state.hasValue,\n clearButtonLabel,\n size,\n }}\n >\n {elementBefore && <Accessory before>{elementBefore}</Accessory>}\n\n <input\n aria-invalid={!!isInvalid}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n autoComplete={autoCompleteValue}\n autoFocus={autoFocus}\n disabled={disabled}\n readOnly={readOnly}\n id={id}\n name={name}\n placeholder={placeholder}\n type={type}\n required={required}\n value={value}\n maxLength={maxLength}\n onBlur={this.handleBlur}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n onKeyUp={this.handleKeyUp}\n onPaste={this.handlePaste}\n ref={mergeRefs([innerRef ?? null, this.inputRef])}\n data-qa-input={name || \"\"}\n data-qa-input-isdisabled={disabled === true}\n data-qa-input-isrequired={required === true}\n {...qa}\n {...inputProps}\n />\n\n {elementAfter && (\n <Accessory after isClearButton={isClearButton(elementAfter)}>\n {elementAfter}\n </Accessory>\n )}\n </InputContext.Provider>\n </Container>\n );\n }\n}\n\nexport default Input;\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 \"./InputTypes\";\n\nconst Container = styled.div<TypeInputContainerProps>`\n box-sizing: border-box;\n position: relative;\n\n input {\n box-sizing: border-box;\n width: 100%;\n border: 1px solid transparent;\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 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 font-weight: ${(props) => props.theme.fontWeights.normal};\n appearance: none;\n /** This matches the overall height of Button and Select */\n margin: 0;\n\n padding: ${(props) => {\n switch (props.size) {\n case \"large\":\n return `${props.theme.space[350]} ${props.theme.space[400]}`;\n\n case \"small\":\n return props.theme.space[200];\n\n case \"default\":\n default:\n return props.theme.space[300];\n }\n }};\n\n font-size: ${(props) => {\n switch (props.size) {\n case \"large\":\n return props.theme.typography[300].fontSize;\n\n case \"small\":\n case \"default\":\n default:\n return props.theme.typography[200].fontSize;\n }\n }};\n\n line-height: ${(props) => {\n switch (props.size) {\n case \"large\":\n return props.theme.typography[300].lineHeight;\n\n /* 16px was the value prior to this change to 'large'. Leaving as-is but it is a non-Seeds typography line-height. It may have a big impact though */\n case \"small\":\n case \"default\":\n default:\n return \"16px\";\n }\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 &::-webkit-search-cancel-button {\n appearance: none;\n }\n\n &:focus {\n ${focusRing}\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.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 input {\n cursor: not-allowed;\n }\n `}\n\n ${(props) =>\n props.appearance === \"primary\" &&\n css`\n input {\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n }\n `}\n\n ${(props) =>\n props.invalid &&\n css`\n input {\n border-color: ${(props) => props.theme.colors.form.border.error};\n }\n `}\n\n\t${(props) =>\n props.warning &&\n css`\n input {\n border-color: ${(props) => props.theme.colors.form.border.warning};\n }\n `}\n\n ${COMMON}\n`;\n\nexport const Accessory = styled.div<{\n before?: boolean;\n after?: boolean;\n isClearButton?: boolean;\n}>`\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n color: ${(props) => props.theme.colors.icon.base};\n display: flex;\n align-items: center;\n\n ${(props) =>\n props.before &&\n css`\n left: ${props.theme.space[300]};\n `};\n\n ${(props) =>\n props.after &&\n css`\n right: ${props.isClearButton ? 0 : props.theme.space[300]};\n `};\n`;\n\nContainer.displayName = \"InputContainer\";\nAccessory.displayName = \"InputAccessory\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ninterface TypeBaseInputProps {\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 Input, like an error */\n ariaDescribedby?: string;\n\n /** Label for Input.ClearButton. Required when using Input.ClearButton. */\n clearButtonLabel?: string;\n\n /** Placeholder text for when value is undefined or empty */\n placeholder?: string;\n\n /** Current value of the input */\n value?: string;\n\n /** HTML type attribute */\n type?: \"date\" | \"email\" | \"number\" | \"password\" | \"text\" | \"url\" | \"search\";\n\n /** Set option to display earlier typed values */\n autoComplete?: boolean | \"on\" | \"off\";\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 /** 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 length of the input */\n maxLength?: 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?:\n | {\n current: null | HTMLInputElement;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n | ((arg0: React.ElementRef<any> | HTMLElement) => void)\n | React.Ref<HTMLInputElement>;\n onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n onChange?: (e: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n onClear?: (e: React.SyntheticEvent<HTMLButtonElement>) => 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 onPaste?: (e: React.ClipboardEvent<HTMLInputElement>, value: string) => void;\n size?: \"large\" | \"small\" | \"default\";\n qa?: object;\n\n /**\n Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input.\n Note that this prop should only be used to alter styles and not functionality.\n */\n appearance?: \"primary\" | \"secondary\";\n}\n\nexport interface TypeInputProps\n extends TypeBaseInputProps,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<\n React.ComponentPropsWithoutRef<\"div\">,\n keyof TypeBaseInputProps | \"color\"\n > {}\n\nexport interface TypeInputContainerProps {\n size: TypeInputProps[\"size\"];\n appearance: TypeInputProps[\"appearance\"];\n hasBeforeElement: boolean;\n hasAfterElement: boolean;\n invalid?: boolean;\n warning?: boolean;\n disabled?: boolean;\n}\n","import Input from \"./Input\";\n\nexport default Input;\nexport { Input };\nexport { Accessory } from \"./styles\";\nexport * from \"./InputTypes\";\n"],"mappings":"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","names":["styled","props","styled"]}
1
+ {"version":3,"sources":["../../src/Input.tsx","../../src/styles.ts","../../src/InputTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport styled from \"styled-components\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { Accessory } from \"./styles\";\nimport type { TypeInputProps } from \"./InputTypes\";\n\ninterface TypeState {\n hasValue: boolean;\n}\n\n// Using Context so that Input's Input.ClearButton-specific props can be passed to Input.ClearButton,\n// regardless of whether it is manually included as elemAfter or automatically included for type=\"search\" Inputs.\ntype TypeInputContext = Partial<{\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n handleClear: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n clearButtonLabel: string;\n hasValue: boolean;\n size: \"large\" | \"small\" | \"default\";\n}>;\n\nconst InputContext = React.createContext<TypeInputContext>({});\n\nconst StyledButton = styled(Button)`\n &:hover,\n &:active {\n color: ${(props) => useInteractiveColor(props.theme.colors.icon.base)};\n }\n`;\n\nconst ClearButton = () => {\n const {\n handleClear,\n clearButtonLabel,\n hasValue,\n size: inputSize,\n } = React.useContext(InputContext);\n\n // Hide the button when there is no text to clear.\n if (!hasValue) {\n return null;\n }\n\n // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.\n if (!clearButtonLabel) {\n // eslint-disable-next-line no-console\n console.warn(\n \"Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.\"\n );\n }\n\n // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.\n // This adjustment is handled automatically for default and large Inputs via Button's size. There is no \"small\" Button.\n const py = inputSize === \"small\" ? 100 : undefined;\n const px = inputSize === \"small\" ? 200 : undefined;\n const buttonSize = inputSize === \"small\" ? \"default\" : inputSize;\n return (\n <StyledButton\n onClick={handleClear}\n size={buttonSize}\n py={py}\n px={px}\n title={clearButtonLabel || \"Clear\"}\n ariaLabel={clearButtonLabel || \"Clear\"}\n color=\"icon.base\"\n >\n <Icon name=\"circle-x-outline\" aria-hidden />\n </StyledButton>\n );\n};\n\nClearButton.displayName = \"Input.ClearButton\";\n\n// Used for positioning elementAfter. This logic will detect if the element is a ClearButton,\n// regardless of whether it was manually passed as elemAfter or automatically added to a search Input.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isClearButton = (elem: any) => {\n if (elem?.type) {\n return elem.type.displayName === \"Input.ClearButton\";\n }\n\n return false;\n};\n\nclass Input extends React.Component<TypeInputProps, TypeState> {\n constructor(props: TypeInputProps) {\n super(props);\n this.state = {\n // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear\n // for both controlled and uncontrolled inputs.\n hasValue: !!props.value,\n };\n }\n\n override componentDidUpdate({ value: prevValue }: TypeInputProps) {\n // Update hasValue state whenever props value changes\n const { value } = this.props;\n if (value !== prevValue) {\n this.updateState(value || \"\");\n }\n }\n\n static defaultProps = {\n autoFocus: false,\n disabled: false,\n type: \"text\",\n size: \"default\",\n appearance: \"primary\",\n };\n\n static ClearButton = ClearButton;\n // Define our own ref for use in handleClear.\n // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.\n inputRef = React.createRef<HTMLInputElement>();\n\n handleBlur = (e: React.FocusEvent<HTMLInputElement>) =>\n this.props.onBlur?.(e);\n\n handleClear = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n const input = this.inputRef.current;\n\n if (input) {\n // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\"\n )?.set;\n\n nativeInputValueSetter?.call(input, \"\");\n const inputEvent = new Event(\"input\", {\n bubbles: true,\n });\n input.dispatchEvent(inputEvent);\n\n // call any onClear callback\n this.props.onClear?.(e);\n\n // wait for next cycle to update focus\n setTimeout(() => {\n input.focus();\n }, 0);\n }\n };\n\n handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n this.props.onChange?.(e, e.currentTarget.value);\n // needed for uncontrolled inputs\n this.updateState(e.currentTarget.value);\n };\n\n handleFocus = (e: React.FocusEvent<HTMLInputElement>) =>\n this.props.onFocus?.(e);\n\n handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) =>\n this.props.onKeyDown?.(e, e.currentTarget.value);\n\n handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) =>\n this.props.onKeyUp?.(e, e.currentTarget.value);\n\n handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) =>\n this.props.onPaste?.(e, e.currentTarget.value);\n\n updateState = (inputValue: string) => {\n const hasValue = inputValue !== \"\";\n const previousHasValue = this.state.hasValue;\n\n // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.\n if (hasValue !== previousHasValue) {\n this.setState({\n hasValue,\n });\n }\n };\n\n override render() {\n const {\n autoComplete,\n autoFocus,\n disabled,\n readOnly,\n isInvalid,\n hasWarning,\n id,\n name,\n placeholder,\n type,\n required,\n value,\n elemBefore,\n elemAfter,\n maxLength,\n ariaLabel,\n ariaDescribedby,\n clearButtonLabel,\n innerRef = null,\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 onBlur,\n onChange,\n onClear,\n onFocus,\n onKeyDown,\n onKeyUp,\n onPaste,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n inputProps = {},\n qa = {},\n appearance,\n size,\n ...rest\n } = this.props;\n\n // Convert autoComplete from a boolean prop to a string value.\n let autoCompleteValue: \"on\" | \"off\" | undefined;\n\n if (autoComplete !== undefined) {\n autoCompleteValue = autoComplete ? \"on\" : \"off\";\n }\n\n // Add default elemBefore and elemAfter elements if type is search.\n const elementBefore =\n type === \"search\" && !elemBefore ? (\n <Icon name=\"magnifying-glass-outline\" aria-hidden color=\"icon.base\" />\n ) : (\n elemBefore\n );\n\n // Do not add a ClearButton if an elemAfter prop was passed.\n const elementAfter =\n type === \"search\" && !elemAfter ? <ClearButton /> : elemAfter;\n\n return (\n <Container\n hasBeforeElement={!!elementBefore}\n hasAfterElement={!!elementAfter}\n disabled={disabled}\n invalid={!!isInvalid}\n warning={hasWarning}\n appearance={appearance}\n size={size}\n {...rest}\n >\n <InputContext.Provider\n value={{\n handleClear: this.handleClear,\n hasValue: this.state.hasValue,\n clearButtonLabel,\n size,\n }}\n >\n {elementBefore && <Accessory before>{elementBefore}</Accessory>}\n\n <input\n aria-invalid={!!isInvalid}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n autoComplete={autoCompleteValue}\n autoFocus={autoFocus}\n disabled={disabled}\n readOnly={readOnly}\n id={id}\n name={name}\n placeholder={placeholder}\n type={type}\n required={required}\n value={value}\n maxLength={maxLength}\n onBlur={this.handleBlur}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n onKeyUp={this.handleKeyUp}\n onPaste={this.handlePaste}\n ref={mergeRefs<HTMLInputElement>(innerRef, this.inputRef)}\n data-qa-input={name || \"\"}\n data-qa-input-isdisabled={disabled === true}\n data-qa-input-isrequired={required === true}\n {...qa}\n {...inputProps}\n />\n\n {elementAfter && (\n <Accessory after isClearButton={isClearButton(elementAfter)}>\n {elementAfter}\n </Accessory>\n )}\n </InputContext.Provider>\n </Container>\n );\n }\n}\n\nexport default Input;\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 \"./InputTypes\";\n\nconst Container = styled.div<TypeInputContainerProps>`\n box-sizing: border-box;\n position: relative;\n\n input {\n box-sizing: border-box;\n width: 100%;\n border: 1px solid transparent;\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 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 font-weight: ${(props) => props.theme.fontWeights.normal};\n appearance: none;\n /** This matches the overall height of Button and Select */\n margin: 0;\n\n padding: ${(props) => {\n switch (props.size) {\n case \"large\":\n return `${props.theme.space[350]} ${props.theme.space[400]}`;\n\n case \"small\":\n return props.theme.space[200];\n\n case \"default\":\n default:\n return props.theme.space[300];\n }\n }};\n\n font-size: ${(props) => {\n switch (props.size) {\n case \"large\":\n return props.theme.typography[300].fontSize;\n\n case \"small\":\n case \"default\":\n default:\n return props.theme.typography[200].fontSize;\n }\n }};\n\n line-height: ${(props) => {\n switch (props.size) {\n case \"large\":\n return props.theme.typography[300].lineHeight;\n\n /* 16px was the value prior to this change to 'large'. Leaving as-is but it is a non-Seeds typography line-height. It may have a big impact though */\n case \"small\":\n case \"default\":\n default:\n return \"16px\";\n }\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 &::-webkit-search-cancel-button {\n appearance: none;\n }\n\n &:focus {\n ${focusRing}\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.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 input {\n cursor: not-allowed;\n }\n `}\n\n ${(props) =>\n props.appearance === \"primary\" &&\n css`\n input {\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n }\n `}\n\n ${(props) =>\n props.invalid &&\n css`\n input {\n border-color: ${(props) => props.theme.colors.form.border.error};\n }\n `}\n\n\t${(props) =>\n props.warning &&\n css`\n input {\n border-color: ${(props) => props.theme.colors.form.border.warning};\n }\n `}\n\n ${COMMON}\n`;\n\nexport const Accessory = styled.div<{\n before?: boolean;\n after?: boolean;\n isClearButton?: boolean;\n}>`\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n color: ${(props) => props.theme.colors.icon.base};\n display: flex;\n align-items: center;\n\n ${(props) =>\n props.before &&\n css`\n left: ${props.theme.space[300]};\n `};\n\n ${(props) =>\n props.after &&\n css`\n right: ${props.isClearButton ? 0 : props.theme.space[300]};\n `};\n`;\n\nContainer.displayName = \"InputContainer\";\nAccessory.displayName = \"InputAccessory\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ninterface TypeBaseInputProps {\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 Input, like an error */\n ariaDescribedby?: string;\n\n /** Label for Input.ClearButton. Required when using Input.ClearButton. */\n clearButtonLabel?: string;\n\n /** Placeholder text for when value is undefined or empty */\n placeholder?: string;\n\n /** Current value of the input */\n value?: string;\n\n /** HTML type attribute */\n type?: \"date\" | \"email\" | \"number\" | \"password\" | \"text\" | \"url\" | \"search\";\n\n /** Set option to display earlier typed values */\n autoComplete?: boolean | \"on\" | \"off\";\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 /** 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 length of the input */\n maxLength?: 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?:\n | {\n current: null | HTMLInputElement;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n | ((arg0: React.ElementRef<any> | HTMLElement) => void)\n | React.Ref<HTMLInputElement>;\n onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n onChange?: (e: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n onClear?: (e: React.SyntheticEvent<HTMLButtonElement>) => 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 onPaste?: (e: React.ClipboardEvent<HTMLInputElement>, value: string) => void;\n size?: \"large\" | \"small\" | \"default\";\n qa?: object;\n\n /**\n Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input.\n Note that this prop should only be used to alter styles and not functionality.\n */\n appearance?: \"primary\" | \"secondary\";\n}\n\nexport interface TypeInputProps\n extends TypeBaseInputProps,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<\n React.ComponentPropsWithoutRef<\"div\">,\n keyof TypeBaseInputProps | \"color\"\n > {}\n\nexport interface TypeInputContainerProps {\n size: TypeInputProps[\"size\"];\n appearance: TypeInputProps[\"appearance\"];\n hasBeforeElement: boolean;\n hasAfterElement: boolean;\n invalid?: boolean;\n warning?: boolean;\n disabled?: boolean;\n}\n","import Input from \"./Input\";\n\nexport default Input;\nexport { Input };\nexport { Accessory } from \"./styles\";\nexport * from \"./InputTypes\";\n"],"mappings":"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","names":["styled","props","styled"]}
package/dist/index.js CHANGED
@@ -315,7 +315,7 @@ var Input = class extends React.Component {
315
315
  ariaLabel,
316
316
  ariaDescribedby,
317
317
  clearButtonLabel,
318
- innerRef,
318
+ innerRef = null,
319
319
  // These functions are used in the class functions above, but need to be extracted in order for `rest` to be correct
320
320
  /* eslint-disable @typescript-eslint/no-unused-vars */
321
321
  onBlur,
@@ -383,7 +383,7 @@ var Input = class extends React.Component {
383
383
  onKeyDown: this.handleKeyDown,
384
384
  onKeyUp: this.handleKeyUp,
385
385
  onPaste: this.handlePaste,
386
- ref: (0, import_seeds_react_utilities.mergeRefs)([innerRef ?? null, this.inputRef]),
386
+ ref: (0, import_seeds_react_utilities.mergeRefs)(innerRef, this.inputRef),
387
387
  "data-qa-input": name || "",
388
388
  "data-qa-input-isdisabled": disabled === true,
389
389
  "data-qa-input-isrequired": required === true,
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/Input.tsx","../src/styles.ts","../src/InputTypes.ts"],"sourcesContent":["import Input from \"./Input\";\n\nexport default Input;\nexport { Input };\nexport { Accessory } from \"./styles\";\nexport * from \"./InputTypes\";\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { Accessory } from \"./styles\";\nimport type { TypeInputProps } from \"./InputTypes\";\n\ninterface TypeState {\n hasValue: boolean;\n}\n\n// Using Context so that Input's Input.ClearButton-specific props can be passed to Input.ClearButton,\n// regardless of whether it is manually included as elemAfter or automatically included for type=\"search\" Inputs.\ntype TypeInputContext = Partial<{\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n handleClear: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n clearButtonLabel: string;\n hasValue: boolean;\n size: \"large\" | \"small\" | \"default\";\n}>;\n\nconst InputContext = React.createContext<TypeInputContext>({});\n\nconst StyledButton = styled(Button)`\n &:hover,\n &:active {\n color: ${(props) => useInteractiveColor(props.theme.colors.icon.base)};\n }\n`;\n\nconst ClearButton = () => {\n const {\n handleClear,\n clearButtonLabel,\n hasValue,\n size: inputSize,\n } = React.useContext(InputContext);\n\n // Hide the button when there is no text to clear.\n if (!hasValue) {\n return null;\n }\n\n // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.\n if (!clearButtonLabel) {\n // eslint-disable-next-line no-console\n console.warn(\n \"Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.\"\n );\n }\n\n // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.\n // This adjustment is handled automatically for default and large Inputs via Button's size. There is no \"small\" Button.\n const py = inputSize === \"small\" ? 100 : undefined;\n const px = inputSize === \"small\" ? 200 : undefined;\n const buttonSize = inputSize === \"small\" ? \"default\" : inputSize;\n return (\n <StyledButton\n onClick={handleClear}\n size={buttonSize}\n py={py}\n px={px}\n title={clearButtonLabel || \"Clear\"}\n ariaLabel={clearButtonLabel || \"Clear\"}\n color=\"icon.base\"\n >\n <Icon name=\"circle-x-outline\" aria-hidden />\n </StyledButton>\n );\n};\n\nClearButton.displayName = \"Input.ClearButton\";\n\n// Used for positioning elementAfter. This logic will detect if the element is a ClearButton,\n// regardless of whether it was manually passed as elemAfter or automatically added to a search Input.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isClearButton = (elem: any) => {\n if (elem?.type) {\n return elem.type.displayName === \"Input.ClearButton\";\n }\n\n return false;\n};\n\nclass Input extends React.Component<TypeInputProps, TypeState> {\n constructor(props: TypeInputProps) {\n super(props);\n this.state = {\n // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear\n // for both controlled and uncontrolled inputs.\n hasValue: !!props.value,\n };\n }\n\n override componentDidUpdate({ value: prevValue }: TypeInputProps) {\n // Update hasValue state whenever props value changes\n const { value } = this.props;\n if (value !== prevValue) {\n this.updateState(value || \"\");\n }\n }\n\n static defaultProps = {\n autoFocus: false,\n disabled: false,\n type: \"text\",\n size: \"default\",\n appearance: \"primary\",\n };\n\n static ClearButton = ClearButton;\n // Define our own ref for use in handleClear.\n // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.\n inputRef = React.createRef<HTMLInputElement>();\n\n handleBlur = (e: React.FocusEvent<HTMLInputElement>) =>\n this.props.onBlur?.(e);\n\n handleClear = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n const input = this.inputRef.current;\n\n if (input) {\n // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\"\n )?.set;\n\n nativeInputValueSetter?.call(input, \"\");\n const inputEvent = new Event(\"input\", {\n bubbles: true,\n });\n input.dispatchEvent(inputEvent);\n\n // call any onClear callback\n this.props.onClear?.(e);\n\n // wait for next cycle to update focus\n setTimeout(() => {\n input.focus();\n }, 0);\n }\n };\n\n handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n this.props.onChange?.(e, e.currentTarget.value);\n // needed for uncontrolled inputs\n this.updateState(e.currentTarget.value);\n };\n\n handleFocus = (e: React.FocusEvent<HTMLInputElement>) =>\n this.props.onFocus?.(e);\n\n handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) =>\n this.props.onKeyDown?.(e, e.currentTarget.value);\n\n handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) =>\n this.props.onKeyUp?.(e, e.currentTarget.value);\n\n handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) =>\n this.props.onPaste?.(e, e.currentTarget.value);\n\n updateState = (inputValue: string) => {\n const hasValue = inputValue !== \"\";\n const previousHasValue = this.state.hasValue;\n\n // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.\n if (hasValue !== previousHasValue) {\n this.setState({\n hasValue,\n });\n }\n };\n\n override render() {\n const {\n autoComplete,\n autoFocus,\n disabled,\n readOnly,\n isInvalid,\n hasWarning,\n id,\n name,\n placeholder,\n type,\n required,\n value,\n elemBefore,\n elemAfter,\n maxLength,\n ariaLabel,\n ariaDescribedby,\n clearButtonLabel,\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 onBlur,\n onChange,\n onClear,\n onFocus,\n onKeyDown,\n onKeyUp,\n onPaste,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n inputProps = {},\n qa = {},\n appearance,\n size,\n ...rest\n } = this.props;\n\n // Convert autoComplete from a boolean prop to a string value.\n let autoCompleteValue: \"on\" | \"off\" | undefined;\n\n if (autoComplete !== undefined) {\n autoCompleteValue = autoComplete ? \"on\" : \"off\";\n }\n\n // Add default elemBefore and elemAfter elements if type is search.\n const elementBefore =\n type === \"search\" && !elemBefore ? (\n <Icon name=\"magnifying-glass-outline\" aria-hidden color=\"icon.base\" />\n ) : (\n elemBefore\n );\n\n // Do not add a ClearButton if an elemAfter prop was passed.\n const elementAfter =\n type === \"search\" && !elemAfter ? <ClearButton /> : elemAfter;\n\n return (\n <Container\n hasBeforeElement={!!elementBefore}\n hasAfterElement={!!elementAfter}\n disabled={disabled}\n invalid={!!isInvalid}\n warning={hasWarning}\n appearance={appearance}\n size={size}\n {...rest}\n >\n <InputContext.Provider\n value={{\n handleClear: this.handleClear,\n hasValue: this.state.hasValue,\n clearButtonLabel,\n size,\n }}\n >\n {elementBefore && <Accessory before>{elementBefore}</Accessory>}\n\n <input\n aria-invalid={!!isInvalid}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n autoComplete={autoCompleteValue}\n autoFocus={autoFocus}\n disabled={disabled}\n readOnly={readOnly}\n id={id}\n name={name}\n placeholder={placeholder}\n type={type}\n required={required}\n value={value}\n maxLength={maxLength}\n onBlur={this.handleBlur}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n onKeyUp={this.handleKeyUp}\n onPaste={this.handlePaste}\n ref={mergeRefs([innerRef ?? null, this.inputRef])}\n data-qa-input={name || \"\"}\n data-qa-input-isdisabled={disabled === true}\n data-qa-input-isrequired={required === true}\n {...qa}\n {...inputProps}\n />\n\n {elementAfter && (\n <Accessory after isClearButton={isClearButton(elementAfter)}>\n {elementAfter}\n </Accessory>\n )}\n </InputContext.Provider>\n </Container>\n );\n }\n}\n\nexport default Input;\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 \"./InputTypes\";\n\nconst Container = styled.div<TypeInputContainerProps>`\n box-sizing: border-box;\n position: relative;\n\n input {\n box-sizing: border-box;\n width: 100%;\n border: 1px solid transparent;\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 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 font-weight: ${(props) => props.theme.fontWeights.normal};\n appearance: none;\n /** This matches the overall height of Button and Select */\n margin: 0;\n\n padding: ${(props) => {\n switch (props.size) {\n case \"large\":\n return `${props.theme.space[350]} ${props.theme.space[400]}`;\n\n case \"small\":\n return props.theme.space[200];\n\n case \"default\":\n default:\n return props.theme.space[300];\n }\n }};\n\n font-size: ${(props) => {\n switch (props.size) {\n case \"large\":\n return props.theme.typography[300].fontSize;\n\n case \"small\":\n case \"default\":\n default:\n return props.theme.typography[200].fontSize;\n }\n }};\n\n line-height: ${(props) => {\n switch (props.size) {\n case \"large\":\n return props.theme.typography[300].lineHeight;\n\n /* 16px was the value prior to this change to 'large'. Leaving as-is but it is a non-Seeds typography line-height. It may have a big impact though */\n case \"small\":\n case \"default\":\n default:\n return \"16px\";\n }\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 &::-webkit-search-cancel-button {\n appearance: none;\n }\n\n &:focus {\n ${focusRing}\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.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 input {\n cursor: not-allowed;\n }\n `}\n\n ${(props) =>\n props.appearance === \"primary\" &&\n css`\n input {\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n }\n `}\n\n ${(props) =>\n props.invalid &&\n css`\n input {\n border-color: ${(props) => props.theme.colors.form.border.error};\n }\n `}\n\n\t${(props) =>\n props.warning &&\n css`\n input {\n border-color: ${(props) => props.theme.colors.form.border.warning};\n }\n `}\n\n ${COMMON}\n`;\n\nexport const Accessory = styled.div<{\n before?: boolean;\n after?: boolean;\n isClearButton?: boolean;\n}>`\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n color: ${(props) => props.theme.colors.icon.base};\n display: flex;\n align-items: center;\n\n ${(props) =>\n props.before &&\n css`\n left: ${props.theme.space[300]};\n `};\n\n ${(props) =>\n props.after &&\n css`\n right: ${props.isClearButton ? 0 : props.theme.space[300]};\n `};\n`;\n\nContainer.displayName = \"InputContainer\";\nAccessory.displayName = \"InputAccessory\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ninterface TypeBaseInputProps {\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 Input, like an error */\n ariaDescribedby?: string;\n\n /** Label for Input.ClearButton. Required when using Input.ClearButton. */\n clearButtonLabel?: string;\n\n /** Placeholder text for when value is undefined or empty */\n placeholder?: string;\n\n /** Current value of the input */\n value?: string;\n\n /** HTML type attribute */\n type?: \"date\" | \"email\" | \"number\" | \"password\" | \"text\" | \"url\" | \"search\";\n\n /** Set option to display earlier typed values */\n autoComplete?: boolean | \"on\" | \"off\";\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 /** 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 length of the input */\n maxLength?: 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?:\n | {\n current: null | HTMLInputElement;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n | ((arg0: React.ElementRef<any> | HTMLElement) => void)\n | React.Ref<HTMLInputElement>;\n onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n onChange?: (e: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n onClear?: (e: React.SyntheticEvent<HTMLButtonElement>) => 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 onPaste?: (e: React.ClipboardEvent<HTMLInputElement>, value: string) => void;\n size?: \"large\" | \"small\" | \"default\";\n qa?: object;\n\n /**\n Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input.\n Note that this prop should only be used to alter styles and not functionality.\n */\n appearance?: \"primary\" | \"secondary\";\n}\n\nexport interface TypeInputProps\n extends TypeBaseInputProps,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<\n React.ComponentPropsWithoutRef<\"div\">,\n keyof TypeBaseInputProps | \"color\"\n > {}\n\nexport interface TypeInputContainerProps {\n size: TypeInputProps[\"size\"];\n appearance: TypeInputProps[\"appearance\"];\n hasBeforeElement: boolean;\n hasAfterElement: boolean;\n invalid?: boolean;\n warning?: boolean;\n disabled?: boolean;\n}\n"],"mappings":"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","names":["import_styled_components","styled","props","styled","Button","Icon","React"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/Input.tsx","../src/styles.ts","../src/InputTypes.ts"],"sourcesContent":["import Input from \"./Input\";\n\nexport default Input;\nexport { Input };\nexport { Accessory } from \"./styles\";\nexport * from \"./InputTypes\";\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { Accessory } from \"./styles\";\nimport type { TypeInputProps } from \"./InputTypes\";\n\ninterface TypeState {\n hasValue: boolean;\n}\n\n// Using Context so that Input's Input.ClearButton-specific props can be passed to Input.ClearButton,\n// regardless of whether it is manually included as elemAfter or automatically included for type=\"search\" Inputs.\ntype TypeInputContext = Partial<{\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n handleClear: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n clearButtonLabel: string;\n hasValue: boolean;\n size: \"large\" | \"small\" | \"default\";\n}>;\n\nconst InputContext = React.createContext<TypeInputContext>({});\n\nconst StyledButton = styled(Button)`\n &:hover,\n &:active {\n color: ${(props) => useInteractiveColor(props.theme.colors.icon.base)};\n }\n`;\n\nconst ClearButton = () => {\n const {\n handleClear,\n clearButtonLabel,\n hasValue,\n size: inputSize,\n } = React.useContext(InputContext);\n\n // Hide the button when there is no text to clear.\n if (!hasValue) {\n return null;\n }\n\n // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.\n if (!clearButtonLabel) {\n // eslint-disable-next-line no-console\n console.warn(\n \"Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.\"\n );\n }\n\n // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.\n // This adjustment is handled automatically for default and large Inputs via Button's size. There is no \"small\" Button.\n const py = inputSize === \"small\" ? 100 : undefined;\n const px = inputSize === \"small\" ? 200 : undefined;\n const buttonSize = inputSize === \"small\" ? \"default\" : inputSize;\n return (\n <StyledButton\n onClick={handleClear}\n size={buttonSize}\n py={py}\n px={px}\n title={clearButtonLabel || \"Clear\"}\n ariaLabel={clearButtonLabel || \"Clear\"}\n color=\"icon.base\"\n >\n <Icon name=\"circle-x-outline\" aria-hidden />\n </StyledButton>\n );\n};\n\nClearButton.displayName = \"Input.ClearButton\";\n\n// Used for positioning elementAfter. This logic will detect if the element is a ClearButton,\n// regardless of whether it was manually passed as elemAfter or automatically added to a search Input.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isClearButton = (elem: any) => {\n if (elem?.type) {\n return elem.type.displayName === \"Input.ClearButton\";\n }\n\n return false;\n};\n\nclass Input extends React.Component<TypeInputProps, TypeState> {\n constructor(props: TypeInputProps) {\n super(props);\n this.state = {\n // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear\n // for both controlled and uncontrolled inputs.\n hasValue: !!props.value,\n };\n }\n\n override componentDidUpdate({ value: prevValue }: TypeInputProps) {\n // Update hasValue state whenever props value changes\n const { value } = this.props;\n if (value !== prevValue) {\n this.updateState(value || \"\");\n }\n }\n\n static defaultProps = {\n autoFocus: false,\n disabled: false,\n type: \"text\",\n size: \"default\",\n appearance: \"primary\",\n };\n\n static ClearButton = ClearButton;\n // Define our own ref for use in handleClear.\n // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.\n inputRef = React.createRef<HTMLInputElement>();\n\n handleBlur = (e: React.FocusEvent<HTMLInputElement>) =>\n this.props.onBlur?.(e);\n\n handleClear = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n const input = this.inputRef.current;\n\n if (input) {\n // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\"\n )?.set;\n\n nativeInputValueSetter?.call(input, \"\");\n const inputEvent = new Event(\"input\", {\n bubbles: true,\n });\n input.dispatchEvent(inputEvent);\n\n // call any onClear callback\n this.props.onClear?.(e);\n\n // wait for next cycle to update focus\n setTimeout(() => {\n input.focus();\n }, 0);\n }\n };\n\n handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n this.props.onChange?.(e, e.currentTarget.value);\n // needed for uncontrolled inputs\n this.updateState(e.currentTarget.value);\n };\n\n handleFocus = (e: React.FocusEvent<HTMLInputElement>) =>\n this.props.onFocus?.(e);\n\n handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) =>\n this.props.onKeyDown?.(e, e.currentTarget.value);\n\n handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) =>\n this.props.onKeyUp?.(e, e.currentTarget.value);\n\n handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) =>\n this.props.onPaste?.(e, e.currentTarget.value);\n\n updateState = (inputValue: string) => {\n const hasValue = inputValue !== \"\";\n const previousHasValue = this.state.hasValue;\n\n // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.\n if (hasValue !== previousHasValue) {\n this.setState({\n hasValue,\n });\n }\n };\n\n override render() {\n const {\n autoComplete,\n autoFocus,\n disabled,\n readOnly,\n isInvalid,\n hasWarning,\n id,\n name,\n placeholder,\n type,\n required,\n value,\n elemBefore,\n elemAfter,\n maxLength,\n ariaLabel,\n ariaDescribedby,\n clearButtonLabel,\n innerRef = null,\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 onBlur,\n onChange,\n onClear,\n onFocus,\n onKeyDown,\n onKeyUp,\n onPaste,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n inputProps = {},\n qa = {},\n appearance,\n size,\n ...rest\n } = this.props;\n\n // Convert autoComplete from a boolean prop to a string value.\n let autoCompleteValue: \"on\" | \"off\" | undefined;\n\n if (autoComplete !== undefined) {\n autoCompleteValue = autoComplete ? \"on\" : \"off\";\n }\n\n // Add default elemBefore and elemAfter elements if type is search.\n const elementBefore =\n type === \"search\" && !elemBefore ? (\n <Icon name=\"magnifying-glass-outline\" aria-hidden color=\"icon.base\" />\n ) : (\n elemBefore\n );\n\n // Do not add a ClearButton if an elemAfter prop was passed.\n const elementAfter =\n type === \"search\" && !elemAfter ? <ClearButton /> : elemAfter;\n\n return (\n <Container\n hasBeforeElement={!!elementBefore}\n hasAfterElement={!!elementAfter}\n disabled={disabled}\n invalid={!!isInvalid}\n warning={hasWarning}\n appearance={appearance}\n size={size}\n {...rest}\n >\n <InputContext.Provider\n value={{\n handleClear: this.handleClear,\n hasValue: this.state.hasValue,\n clearButtonLabel,\n size,\n }}\n >\n {elementBefore && <Accessory before>{elementBefore}</Accessory>}\n\n <input\n aria-invalid={!!isInvalid}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n autoComplete={autoCompleteValue}\n autoFocus={autoFocus}\n disabled={disabled}\n readOnly={readOnly}\n id={id}\n name={name}\n placeholder={placeholder}\n type={type}\n required={required}\n value={value}\n maxLength={maxLength}\n onBlur={this.handleBlur}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n onKeyUp={this.handleKeyUp}\n onPaste={this.handlePaste}\n ref={mergeRefs<HTMLInputElement>(innerRef, this.inputRef)}\n data-qa-input={name || \"\"}\n data-qa-input-isdisabled={disabled === true}\n data-qa-input-isrequired={required === true}\n {...qa}\n {...inputProps}\n />\n\n {elementAfter && (\n <Accessory after isClearButton={isClearButton(elementAfter)}>\n {elementAfter}\n </Accessory>\n )}\n </InputContext.Provider>\n </Container>\n );\n }\n}\n\nexport default Input;\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 \"./InputTypes\";\n\nconst Container = styled.div<TypeInputContainerProps>`\n box-sizing: border-box;\n position: relative;\n\n input {\n box-sizing: border-box;\n width: 100%;\n border: 1px solid transparent;\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 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 font-weight: ${(props) => props.theme.fontWeights.normal};\n appearance: none;\n /** This matches the overall height of Button and Select */\n margin: 0;\n\n padding: ${(props) => {\n switch (props.size) {\n case \"large\":\n return `${props.theme.space[350]} ${props.theme.space[400]}`;\n\n case \"small\":\n return props.theme.space[200];\n\n case \"default\":\n default:\n return props.theme.space[300];\n }\n }};\n\n font-size: ${(props) => {\n switch (props.size) {\n case \"large\":\n return props.theme.typography[300].fontSize;\n\n case \"small\":\n case \"default\":\n default:\n return props.theme.typography[200].fontSize;\n }\n }};\n\n line-height: ${(props) => {\n switch (props.size) {\n case \"large\":\n return props.theme.typography[300].lineHeight;\n\n /* 16px was the value prior to this change to 'large'. Leaving as-is but it is a non-Seeds typography line-height. It may have a big impact though */\n case \"small\":\n case \"default\":\n default:\n return \"16px\";\n }\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 &::-webkit-search-cancel-button {\n appearance: none;\n }\n\n &:focus {\n ${focusRing}\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.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 input {\n cursor: not-allowed;\n }\n `}\n\n ${(props) =>\n props.appearance === \"primary\" &&\n css`\n input {\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n }\n `}\n\n ${(props) =>\n props.invalid &&\n css`\n input {\n border-color: ${(props) => props.theme.colors.form.border.error};\n }\n `}\n\n\t${(props) =>\n props.warning &&\n css`\n input {\n border-color: ${(props) => props.theme.colors.form.border.warning};\n }\n `}\n\n ${COMMON}\n`;\n\nexport const Accessory = styled.div<{\n before?: boolean;\n after?: boolean;\n isClearButton?: boolean;\n}>`\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n color: ${(props) => props.theme.colors.icon.base};\n display: flex;\n align-items: center;\n\n ${(props) =>\n props.before &&\n css`\n left: ${props.theme.space[300]};\n `};\n\n ${(props) =>\n props.after &&\n css`\n right: ${props.isClearButton ? 0 : props.theme.space[300]};\n `};\n`;\n\nContainer.displayName = \"InputContainer\";\nAccessory.displayName = \"InputAccessory\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ninterface TypeBaseInputProps {\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 Input, like an error */\n ariaDescribedby?: string;\n\n /** Label for Input.ClearButton. Required when using Input.ClearButton. */\n clearButtonLabel?: string;\n\n /** Placeholder text for when value is undefined or empty */\n placeholder?: string;\n\n /** Current value of the input */\n value?: string;\n\n /** HTML type attribute */\n type?: \"date\" | \"email\" | \"number\" | \"password\" | \"text\" | \"url\" | \"search\";\n\n /** Set option to display earlier typed values */\n autoComplete?: boolean | \"on\" | \"off\";\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 /** 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 length of the input */\n maxLength?: 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?:\n | {\n current: null | HTMLInputElement;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n | ((arg0: React.ElementRef<any> | HTMLElement) => void)\n | React.Ref<HTMLInputElement>;\n onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n onChange?: (e: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n onClear?: (e: React.SyntheticEvent<HTMLButtonElement>) => 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 onPaste?: (e: React.ClipboardEvent<HTMLInputElement>, value: string) => void;\n size?: \"large\" | \"small\" | \"default\";\n qa?: object;\n\n /**\n Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input.\n Note that this prop should only be used to alter styles and not functionality.\n */\n appearance?: \"primary\" | \"secondary\";\n}\n\nexport interface TypeInputProps\n extends TypeBaseInputProps,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<\n React.ComponentPropsWithoutRef<\"div\">,\n keyof TypeBaseInputProps | \"color\"\n > {}\n\nexport interface TypeInputContainerProps {\n size: TypeInputProps[\"size\"];\n appearance: TypeInputProps[\"appearance\"];\n hasBeforeElement: boolean;\n hasAfterElement: boolean;\n invalid?: boolean;\n warning?: boolean;\n disabled?: boolean;\n}\n"],"mappings":"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","names":["import_styled_components","styled","props","styled","Button","Icon","React"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-input",
3
- "version": "1.4.0",
3
+ "version": "1.4.2",
4
4
  "description": "Seeds Input",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -19,7 +19,7 @@
19
19
  "typecheck": "tsc --noEmit"
20
20
  },
21
21
  "dependencies": {
22
- "@sproutsocial/seeds-react-utilities": "^4.0.1",
22
+ "@sproutsocial/seeds-react-utilities": "^4.2.0",
23
23
  "@sproutsocial/seeds-react-hooks": "^3.0.1",
24
24
  "@sproutsocial/seeds-react-box": "^1.1.1",
25
25
  "@sproutsocial/seeds-react-button": "^1.2.0",