@launchpad-ui/form 0.1.0 → 0.2.1

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.
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../scripts/react-shim.js", "../src/Checkbox.tsx", "../src/Label.tsx", "../src/RequiredAsterisk.tsx", "../src/CompactTextField.tsx", "../src/TextField.tsx", "../src/utils/index.ts", "../src/FieldError.tsx", "../src/FieldSet.tsx", "../src/Form.tsx", "../src/FormField.tsx", "../src/FormGroup.tsx", "../src/FormHint.tsx", "../src/IconField.tsx", "../src/InputGroup.tsx", "../src/Radio.tsx", "../src/RadioGroup.tsx", "../src/Select.tsx", "../src/TextArea.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Component, createRef, InputHTMLAttributes, RefObject } from 'react';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {\n /**\n * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n */\n 'aria-label'?: string;\n /**\n * id attribute of the label text elsewhere in the app, used for screen reader support\n * Use this for cases where you have a visible label on the page that is not close to\n * the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n */\n 'aria-labelledby'?: string;\n /**\n * Label for the Checkbox\n */\n children?: React.ReactNode;\n /**\n * The className to pass into the Checkbox's Label component\n */\n labelClassName?: string;\n /**\n * The test id for the data-test-id attribute for React Testing Library support\n */\n testId?: string;\n};\n\nclass Checkbox extends Component<CheckboxProps> {\n inputRef: RefObject<HTMLInputElement>;\n\n constructor(props: CheckboxProps) {\n super(props);\n this.inputRef = createRef();\n }\n\n value() {\n return this.inputRef.current?.value;\n }\n\n checked() {\n return this.inputRef.current?.checked;\n }\n\n render() {\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n disabled,\n testId,\n checked,\n labelClassName,\n ...other\n } = this.props;\n\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <Label className={labelClassName}>\n <input\n {...other}\n ref={this.inputRef}\n checked={checked}\n aria-checked={checked ? 'true' : 'false'}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className=\"Form-checkbox\"\n disabled={disabled}\n data-test-id={testId}\n type=\"checkbox\"\n />{' '}\n {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n </Label>\n );\n }\n}\n\nexport { Checkbox };\nexport type { CheckboxProps };\n", "import cx from 'clsx';\n\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/Form.css';\n\nexport type LabelProps = {\n htmlFor?: string;\n required?: boolean;\n optional?: boolean;\n disabled?: boolean;\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n hidden?: boolean;\n};\n\nexport const Label = ({\n htmlFor,\n disabled,\n className,\n children,\n required = false,\n optional = false,\n ...other\n}: LabelProps) => {\n const classes = cx('Form-label', className, { 'Form-label--disabled': disabled });\n return (\n <label {...other} className={classes} htmlFor={htmlFor}>\n {children}\n {optional && !required && <small className=\"Form-labelOptional u-subtle\">(optional)</small>}\n {required && !optional && <RequiredAsterisk />}\n </label>\n );\n};\n", "import type { HTMLAttributes } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/RequiredAsterisk.css';\n\ntype RequiredAsteriskProps = HTMLAttributes<HTMLSpanElement> & {\n testId?: string;\n};\n\nconst RequiredAsterisk = ({ className, testId, ...rest }: RequiredAsteriskProps) => {\n const classes = cx('RequiredAsterisk');\n\n return (\n <span className={classes} data-test-id={testId} {...rest}>\n *\n </span>\n );\n};\n\nexport { RequiredAsterisk };\n", "import cx from 'clsx';\nimport { isBoolean } from 'lodash-es';\nimport { Component, FocusEvent } from 'react';\n\nimport { Label } from './Label';\nimport { TextField, TextFieldProps } from './TextField';\nimport './styles/CompactTextField.css';\nimport './styles/FormInput.css';\n\ntype CompactTextFieldProps = TextFieldProps & {\n label: string;\n needsErrorFeedback?: boolean;\n};\n\nclass CompactTextField extends Component<CompactTextFieldProps, { isActive: boolean }> {\n textField?: TextField | null;\n\n constructor(props: CompactTextFieldProps) {\n super(props);\n const value = props.value;\n\n this.state = {\n isActive: (isBoolean(value) || value ? value.toString() : '').trim().length !== 0,\n };\n }\n\n render() {\n const { className, id, name, label, type, needsErrorFeedback, ...rest } = this.props;\n const isActive = this.state.isActive || needsErrorFeedback;\n\n const classes = cx('CompactTextField', className, {\n 'is-active': isActive,\n });\n\n const placeholder = isActive ? '' : label;\n\n return (\n <div className={classes}>\n <Label htmlFor={id}>{label}</Label>\n <TextField\n {...rest}\n id={id}\n name={name}\n type={type}\n placeholder={placeholder}\n ref={(textField) => {\n this.textField = textField;\n }}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n );\n }\n\n handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n this.setState({ isActive: true });\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n };\n\n handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n const value = event.target.value || '';\n this.setState({ isActive: value.trim().length !== 0 });\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n };\n\n value = () => (this.textField ? this.textField.value() : '');\n\n focus = () => {\n if (this.textField) {\n this.textField.focus();\n }\n };\n}\n\nexport { CompactTextField };\nexport type { CompactTextFieldProps };\n", "import cx from 'clsx';\nimport { Component, createRef, InputHTMLAttributes, RefObject } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n suffix?: string;\n testId?: string;\n tiny?: boolean;\n overrideWidth?: string;\n};\n\nclass TextField extends Component<TextFieldProps> {\n inputRef: RefObject<HTMLInputElement>;\n constructor(props: TextFieldProps) {\n super(props);\n this.inputRef = createRef();\n }\n\n render() {\n const {\n className,\n type = 'text',\n tiny = false,\n readOnly,\n tabIndex = 0,\n testId,\n suffix,\n overrideWidth,\n ...rest\n } = this.props;\n const classes = overrideWidth\n ? className\n : cx('FormInput', `FormInput-${type}`, className, {\n 'FormInput--tiny': tiny,\n });\n if (suffix) {\n return (\n <div className=\"FormInput-suffixContainer\">\n <input\n {...rest}\n type={type}\n className={cx(classes, 'FormInput-suffix')}\n readOnly={readOnly}\n ref={this.inputRef}\n data-test-id={testId}\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n <label className=\"FormInput-suffix\" htmlFor={rest.id}>\n {suffix}\n </label>\n </div>\n );\n }\n\n return (\n <input\n {...rest}\n type={type}\n className={classes}\n readOnly={readOnly}\n tabIndex={tabIndex}\n ref={this.inputRef}\n data-test-id={testId}\n style={\n overrideWidth\n ? {\n width: overrideWidth,\n }\n : undefined\n }\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n );\n }\n\n getElement() {\n return this.inputRef.current;\n }\n\n value() {\n return this.inputRef.current?.value;\n }\n\n focus() {\n this.inputRef.current?.focus();\n }\n\n blur() {\n this.inputRef.current?.blur();\n }\n\n select() {\n this.inputRef.current?.focus();\n }\n}\n\nexport type { TextFieldProps };\nexport { TextField };\n", "type FieldPath = string | string[];\n\nconst createFieldErrorId = (fieldIdentifier?: FieldPath) =>\n fieldIdentifier ? `${[...fieldIdentifier].join('')}-err` : undefined;\n\nexport { createFieldErrorId };\nexport type { FieldPath };\n", "import type { FieldPath } from './utils';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\nimport { createFieldErrorId } from './utils';\n\ntype FieldErrorProps = {\n name: FieldPath;\n errorMessage?: string;\n className?: string;\n};\n\nconst FieldError = ({ name, errorMessage, className }: FieldErrorProps) => {\n if (!errorMessage) {\n return null;\n }\n\n return (\n <span\n className={cx('Form-fieldError', className)}\n aria-live=\"polite\"\n id={createFieldErrorId(name)}\n >\n {`Error - ${errorMessage}`}\n </span>\n );\n};\n\nexport { FieldError };\nexport type { FieldErrorProps };\n", "import type { ReactNode } from 'react';\n\nimport './styles/FieldSet.css';\n\ntype FieldSetProps = {\n children?: ReactNode;\n testId?: string;\n};\n\nconst FieldSet = ({ children, testId }: FieldSetProps) => {\n return (\n <fieldset className=\"FieldSet\" data-test-id={testId}>\n {children}\n </fieldset>\n );\n};\n\nexport { FieldSet };\nexport type { FieldSetProps };\n", "import type { FocusEvent, FormEvent, ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\n\ntype FormProps = {\n id?: string;\n name?: string;\n action?: string;\n className?: string;\n inline?: boolean;\n method?: string;\n // Increases margin between form fields to make room for error messages.\n // This prevents the form from shifting when rendering a field error.\n // This may be desired when the form contains external links that will\n // shift while clicking if the form shifts from validation.\n hasIncreasedErrorMargin?: boolean;\n onBlurCapture?(e: FocusEvent): void;\n onSubmit?(e: FormEvent<EventTarget>): void;\n ariaLabel?: string;\n children: ReactNode;\n};\n\nconst Form = (props: FormProps) => {\n const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } =\n props;\n const classes = cx('Form', className, {\n 'Form--inline': inline,\n 'Form--increasedErrorMargin': !!hasIncreasedErrorMargin,\n });\n\n return (\n <form id={id} name={name} aria-label={ariaLabel} {...rest} className={classes}>\n {children}\n </form>\n );\n};\n\nexport { Form };\nexport type { FormProps };\n", "import cx from 'clsx';\n\nimport { FieldError } from './FieldError';\nimport { FormGroup } from './FormGroup';\nimport { FormHint } from './FormHint';\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/FormField.css';\n\ntype FormFieldProps = {\n isRequired: boolean;\n label?: string;\n name: string;\n htmlFor: string;\n hint?: string;\n errorMessage?: string;\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n children: JSX.Element;\n className?: string;\n onBlur?: (field: string) => void;\n};\n\nconst FormField = ({\n isRequired,\n label,\n name,\n htmlFor,\n hint,\n errorMessage,\n ignoreValidation,\n isInvalid,\n children,\n className,\n onBlur,\n}: FormFieldProps) => {\n const handleBlur = () => {\n onBlur && onBlur(name);\n };\n\n return (\n <FormGroup\n className={cx('FormField', className)}\n name={name}\n ignoreValidation={ignoreValidation}\n isInvalid={isInvalid}\n onBlur={handleBlur}\n >\n {label && (\n <label htmlFor={htmlFor}>\n {label}\n {isRequired && <RequiredAsterisk />}\n </label>\n )}\n {hint && <FormHint className=\"FormField-hint u-subtle\">{hint}</FormHint>}\n {children}\n <FieldError className=\"FormField-errorMessage\" name={name} errorMessage={errorMessage} />\n </FormGroup>\n );\n};\n\nexport type { FormFieldProps };\nexport { FormField };\n", "import type { ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\n\ntype FormGroupProps = {\n name?: string | string[];\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n className?: string;\n onBlur?: () => void;\n testId?: string;\n children: ReactNode;\n};\n\nconst FormGroup = (props: FormGroupProps) => {\n const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;\n\n const classes = cx('Form-group', className, {\n 'is-invalid': !ignoreValidation && isInvalid,\n });\n\n return (\n <div className={classes} data-test-id={testId} {...other}>\n {children}\n </div>\n );\n};\n\nexport { FormGroup };\nexport type { FormGroupProps };\n", "import type { ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/FormHint.css';\n\ntype FormHintProps = {\n children: ReactNode;\n className?: string;\n id?: string;\n};\n\nconst FormHint = ({ className, children, ...rest }: FormHintProps) => {\n const classes = cx('Form-hint', className);\n\n return (\n <div {...rest} className={classes}>\n {children}\n </div>\n );\n};\n\nexport { FormHint };\nexport type { FormHintProps };\n", "import type { IconProps } from '@launchpad-ui/icons';\n\nimport { IconSize } from '@launchpad-ui/icons';\n\nimport './styles/IconField.css';\n\ntype IconFieldProps = {\n icon({ ...other }: IconProps): JSX.Element;\n children: JSX.Element | JSX.Element[];\n};\n\nconst IconField = ({ icon, children }: IconFieldProps) => {\n const Icon = icon;\n\n return (\n <div className=\"IconField\">\n {children}\n <Icon size={IconSize.SMALL} />\n </div>\n );\n};\n\nexport { IconField };\nexport type { IconFieldProps };\n", "import type { ComponentPropsWithRef } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/InputGroup.css';\n\ntype InputGroupProps = ComponentPropsWithRef<'div'>;\n\nexport const InputGroup = ({ className, children, ...other }: InputGroupProps) => {\n const classes = cx('InputGroup', className);\n\n return (\n <div {...other} className={classes}>\n {children}\n </div>\n );\n};\n", "import cx from 'clsx';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype RadioProps = {\n /**\n * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n */\n 'aria-label'?: string;\n /**\n * id attribute of the label text elsewhere in the app, used for screen reader support. Use this for cases where you have a visible label on the page that **is not close to** to the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n */\n 'aria-labelledby'?: string;\n /**\n * Is the Radio checked?\n */\n checked?: boolean;\n /**\n * Label for the Checkbox\n */\n children?: React.ReactNode;\n /**\n * Custom classname(s) to add to the Radio.\n */\n className?: string;\n /**\n * Is the Radio disabled?\n */\n disabled?: boolean;\n /**\n * The id to pair the Radio input with the label for screen reader support.\n */\n id?: string;\n /**\n * The className to pass into the Radio's Label component\n */\n labelClassName?: string;\n /**\n * Name to apply to the underlying Radio. Pass in the same name value to each Radio when grouping in a RadioGroup for screen reader support.\n */\n name?: string;\n /**\n * The function to pass into the Radio onChange synthetic event handler.\n */\n onChange?(e: React.ChangeEvent): void;\n /**\n * Optional inline CSS styles to add to the Radio label.\n */\n labelStyle?: object;\n /**\n * The value passed into Radio.\n */\n value: number | string;\n};\n\nconst Radio = ({\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n checked = false,\n children,\n className,\n disabled = false,\n id,\n labelClassName,\n name,\n onChange = () => undefined,\n labelStyle,\n value,\n ...props\n}: RadioProps) => {\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <>\n <input\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={cx('Form-radio', className)}\n checked={checked}\n disabled={disabled}\n id={id}\n name={name}\n onChange={onChange}\n type=\"radio\"\n value={value}\n {...props}\n />\n <Label className={labelClassName} htmlFor={id} style={labelStyle}>\n {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n </Label>\n </>\n );\n};\n\nexport { Radio };\nexport type { RadioProps };\n", "import { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { Children, cloneElement, isValidElement, useRef } from 'react';\n\nimport { Label } from './Label';\nimport { Radio } from './Radio';\nimport './styles/Form.css';\n\ntype RadioGroupProps = {\n /**\n * The legend that describes this groups of radio buttons. The legend\n * is important for screen reader users.\n */\n legend?: string;\n /**\n * The children passed into the RadioGroup.\n */\n children?: React.ReactNode;\n /**\n * Custom classname(s) passed to the fieldset inner div.\n */\n className?: string;\n /**\n * Set the underlying Radio to disabled if the Radio's disabled prop is undefined.\n */\n disabled?: boolean;\n /**\n * The RadioGroup's id.\n */\n id?: string;\n /**\n * Name to apply to the underlying Radio. The same name value is passed to each Radio when grouping in a RadioGroup for screen reader support.\n */\n name: string;\n /**\n * This function is passed into each Radio onChange synthetic event handler.\n */\n onChange?(e: React.ChangeEvent | React.FormEvent<HTMLInputElement>): void;\n /**\n * The value to compare against the Radio's value to determine if the Radio will be checked.\n */\n value: string;\n};\n\nconst RadioGroup = (props: RadioGroupProps) => {\n const { name, value, onChange, children, disabled, legend, ...other } = props;\n const fieldsetRef = useRef<HTMLFieldSetElement>(null);\n\n function updateRadioElems(elem: React.ReactNode): React.ReactNode {\n if (!isValidElement(elem)) {\n return elem;\n }\n\n if (elem?.type && elem.type === Radio) {\n return cloneElement(elem, {\n ...elem.props,\n name,\n checked: elem.props.value === value,\n onChange,\n disabled: typeof elem.props?.disabled !== 'undefined' ? elem.props.disabled : disabled,\n });\n }\n\n if (elem?.type && elem.type === Label) {\n return cloneElement(elem, {\n ...elem.props,\n onChange,\n disabled,\n });\n }\n\n const elemChildren = elem?.props?.children;\n if (elemChildren) {\n if (Array.isArray(elemChildren)) {\n return cloneElement(elem, {\n children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)),\n });\n }\n return cloneElement(elem, {\n children: updateRadioElems(elemChildren),\n });\n }\n\n if (elem?.type && elem.type !== Radio && elem.type !== Label) {\n return elem;\n }\n\n return null;\n }\n\n const radios = Children.map(children, (child) => updateRadioElems(child));\n return (\n <fieldset ref={fieldsetRef}>\n {legend && (\n <legend>\n <VisuallyHidden>{legend}</VisuallyHidden>\n </legend>\n )}\n <div {...other}>{radios}</div>\n </fieldset>\n );\n};\n\nexport { RadioGroup };\nexport type { RadioGroupProps };\n", "import type { ChangeEvent, ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/FormInput.css';\n\ntype SelectProps = {\n children: ReactNode;\n className?: string;\n disabled?: boolean;\n id?: string;\n name?: string;\n onChange?(event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>): void;\n testId?: string;\n value?: number | string;\n 'aria-label'?: string;\n};\n\nconst Select = ({ className, children, testId, ...rest }: SelectProps) => {\n const classes = cx('FormInput', 'FormInput-select', className);\n\n return (\n <select {...rest} className={classes} data-test-id={testId}>\n {children}\n </select>\n );\n};\n\nexport { Select };\nexport type { SelectProps };\n", "import cx from 'clsx';\nimport { Component, createRef, RefObject, TextareaHTMLAttributes } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nclass TextArea extends Component<TextAreaProps> {\n textareaRef: RefObject<HTMLTextAreaElement>;\n\n constructor(props: TextAreaProps) {\n super(props);\n this.textareaRef = createRef();\n }\n\n render() {\n const { className, ...props } = this.props;\n\n return (\n <textarea\n {...props}\n className={cx('FormInput', className)}\n ref={this.textareaRef}\n aria-describedby={props['aria-describedby'] || createFieldErrorId(props.id)}\n onKeyDown={onKeyDown}\n />\n );\n }\n\n focus() {\n this.textareaRef.current?.focus();\n }\n}\n\nfunction onKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {\n if (\n e.key === 'ArrowRight' ||\n e.key === 'ArrowDown' ||\n e.key === 'ArrowUp' ||\n e.key === 'ArrowLeft'\n ) {\n e.stopPropagation();\n }\n if (e.key === 'Escape') {\n e.nativeEvent.stopImmediatePropagation();\n }\n}\n\nexport { TextArea };\nexport type { TextAreaProps };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { InputHTMLAttributes } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {\n /**\n * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n */\n 'aria-label'?: string;\n /**\n * id attribute of the label text elsewhere in the app, used for screen reader support\n * Use this for cases where you have a visible label on the page that is not close to\n * the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n */\n 'aria-labelledby'?: string;\n /**\n * Label for the Checkbox\n */\n children?: React.ReactNode;\n /**\n * The className to pass into the Checkbox's Label component\n */\n labelClassName?: string;\n /**\n * The test id for the data-test-id attribute for React Testing Library support\n */\n testId?: string;\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n disabled,\n testId,\n checked,\n labelClassName,\n ...other\n },\n ref\n ) => {\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <Label className={labelClassName}>\n <input\n {...other}\n ref={ref}\n checked={checked}\n aria-checked={checked ? 'true' : 'false'}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className=\"Form-checkbox\"\n disabled={disabled}\n data-test-id={testId}\n type=\"checkbox\"\n />{' '}\n {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n </Label>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\nexport type { CheckboxProps };\n", "import cx from 'clsx';\n\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/Form.css';\n\ntype LabelProps = {\n htmlFor?: string;\n required?: boolean;\n optional?: boolean;\n disabled?: boolean;\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n hidden?: boolean;\n};\n\nconst Label = ({\n htmlFor,\n disabled,\n className,\n children,\n required = false,\n optional = false,\n ...other\n}: LabelProps) => {\n const classes = cx('Form-label', className, { 'Form-label--disabled': disabled });\n return (\n <label {...other} className={classes} htmlFor={htmlFor}>\n {children}\n {optional && !required && <small className=\"Form-labelOptional u-subtle\">(optional)</small>}\n {required && !optional && <RequiredAsterisk />}\n </label>\n );\n};\n\nexport { Label };\nexport type { LabelProps };\n", "import type { HTMLAttributes } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/RequiredAsterisk.css';\n\ntype RequiredAsteriskProps = HTMLAttributes<HTMLSpanElement> & {\n testId?: string;\n};\n\nconst RequiredAsterisk = ({ className, testId, ...rest }: RequiredAsteriskProps) => {\n const classes = cx('RequiredAsterisk');\n\n return (\n <span className={classes} data-test-id={testId} {...rest}>\n *\n </span>\n );\n};\n\nexport { RequiredAsterisk };\nexport type { RequiredAsteriskProps };\n", "import type { FocusEvent } from 'react';\n\nimport cx from 'clsx';\nimport { isBoolean } from 'lodash-es';\nimport { forwardRef, useState } from 'react';\n\nimport { Label } from './Label';\nimport { TextField, TextFieldProps } from './TextField';\nimport './styles/CompactTextField.css';\nimport './styles/FormInput.css';\n\ntype CompactTextFieldProps = TextFieldProps & {\n label: string;\n needsErrorFeedback?: boolean;\n};\n\nconst CompactTextField = forwardRef<HTMLInputElement, CompactTextFieldProps>(\n (\n { className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest },\n ref\n ) => {\n const [isActive, setIsActive] = useState(\n (isBoolean(value) || value ? value.toString() : '').trim().length !== 0\n );\n\n const isActiveState = isActive || needsErrorFeedback;\n\n const classes = cx('CompactTextField', className, {\n 'is-active': isActiveState,\n });\n\n const placeholder = isActiveState ? '' : label;\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n setIsActive(true);\n if (onFocus) {\n onFocus(event);\n }\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n const value = event.target.value || '';\n setIsActive(value.trim().length !== 0);\n if (onBlur) {\n onBlur(event);\n }\n };\n\n return (\n <div className={classes}>\n <Label htmlFor={id}>{label}</Label>\n <TextField\n {...rest}\n id={id}\n name={name}\n type={type}\n placeholder={placeholder}\n value={value}\n ref={ref}\n onFocus={handleFocus}\n onBlur={handleBlur}\n />\n </div>\n );\n }\n);\n\nCompactTextField.displayName = 'CompactTextField';\n\nexport { CompactTextField };\nexport type { CompactTextFieldProps };\n", "import type { InputHTMLAttributes } from 'react';\n\nimport cx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n suffix?: string;\n testId?: string;\n tiny?: boolean;\n overrideWidth?: string;\n};\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n (\n {\n className,\n type = 'text',\n tiny = false,\n readOnly,\n tabIndex = 0,\n testId,\n suffix,\n overrideWidth,\n ...rest\n },\n ref\n ) => {\n const classes = overrideWidth\n ? className\n : cx('FormInput', `FormInput-${type}`, className, {\n 'FormInput--tiny': tiny,\n });\n if (suffix) {\n return (\n <div className=\"FormInput-suffixContainer\">\n <input\n {...rest}\n type={type}\n className={cx(classes, 'FormInput-suffix')}\n readOnly={readOnly}\n ref={ref}\n data-test-id={testId}\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n <label className=\"FormInput-suffix\" htmlFor={rest.id}>\n {suffix}\n </label>\n </div>\n );\n }\n\n return (\n <input\n {...rest}\n type={type}\n className={classes}\n readOnly={readOnly}\n tabIndex={tabIndex}\n ref={ref}\n data-test-id={testId}\n style={\n overrideWidth\n ? {\n width: overrideWidth,\n }\n : undefined\n }\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n );\n }\n);\n\nTextField.displayName = 'TextField';\n\nexport { TextField };\nexport type { TextFieldProps };\n", "type FieldPath = string | string[];\n\nconst createFieldErrorId = (fieldIdentifier?: FieldPath) =>\n fieldIdentifier ? `${[...fieldIdentifier].join('')}-err` : undefined;\n\nexport { createFieldErrorId };\nexport type { FieldPath };\n", "import type { FieldPath } from './utils';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\nimport { createFieldErrorId } from './utils';\n\ntype FieldErrorProps = {\n name: FieldPath;\n errorMessage?: string;\n className?: string;\n};\n\nconst FieldError = ({ name, errorMessage, className }: FieldErrorProps) => {\n if (!errorMessage) {\n return null;\n }\n\n return (\n <span\n className={cx('Form-fieldError', className)}\n aria-live=\"polite\"\n id={createFieldErrorId(name)}\n >\n {`Error - ${errorMessage}`}\n </span>\n );\n};\n\nexport { FieldError };\nexport type { FieldErrorProps };\n", "import type { ReactNode } from 'react';\n\nimport './styles/FieldSet.css';\n\ntype FieldSetProps = {\n children?: ReactNode;\n testId?: string;\n};\n\nconst FieldSet = ({ children, testId }: FieldSetProps) => {\n return (\n <fieldset className=\"FieldSet\" data-test-id={testId}>\n {children}\n </fieldset>\n );\n};\n\nexport { FieldSet };\nexport type { FieldSetProps };\n", "import type { FocusEvent, FormEvent, ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\n\ntype FormProps = {\n id?: string;\n name?: string;\n action?: string;\n className?: string;\n inline?: boolean;\n method?: string;\n // Increases margin between form fields to make room for error messages.\n // This prevents the form from shifting when rendering a field error.\n // This may be desired when the form contains external links that will\n // shift while clicking if the form shifts from validation.\n hasIncreasedErrorMargin?: boolean;\n onBlurCapture?(e: FocusEvent): void;\n onSubmit?(e: FormEvent<EventTarget>): void;\n ariaLabel?: string;\n children: ReactNode;\n};\n\nconst Form = (props: FormProps) => {\n const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } =\n props;\n const classes = cx('Form', className, {\n 'Form--inline': inline,\n 'Form--increasedErrorMargin': !!hasIncreasedErrorMargin,\n });\n\n return (\n <form id={id} name={name} aria-label={ariaLabel} {...rest} className={classes}>\n {children}\n </form>\n );\n};\n\nexport { Form };\nexport type { FormProps };\n", "import cx from 'clsx';\n\nimport { FieldError } from './FieldError';\nimport { FormGroup } from './FormGroup';\nimport { FormHint } from './FormHint';\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/FormField.css';\n\ntype FormFieldProps = {\n isRequired: boolean;\n label?: string;\n name: string;\n htmlFor: string;\n hint?: string;\n errorMessage?: string;\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n children: JSX.Element;\n className?: string;\n onBlur?: (field: string) => void;\n};\n\nconst FormField = ({\n isRequired,\n label,\n name,\n htmlFor,\n hint,\n errorMessage,\n ignoreValidation,\n isInvalid,\n children,\n className,\n onBlur,\n}: FormFieldProps) => {\n const handleBlur = () => {\n onBlur && onBlur(name);\n };\n\n return (\n <FormGroup\n className={cx('FormField', className)}\n name={name}\n ignoreValidation={ignoreValidation}\n isInvalid={isInvalid}\n onBlur={handleBlur}\n >\n {label && (\n <label htmlFor={htmlFor}>\n {label}\n {isRequired && <RequiredAsterisk />}\n </label>\n )}\n {hint && <FormHint className=\"FormField-hint u-subtle\">{hint}</FormHint>}\n {children}\n <FieldError className=\"FormField-errorMessage\" name={name} errorMessage={errorMessage} />\n </FormGroup>\n );\n};\n\nexport type { FormFieldProps };\nexport { FormField };\n", "import type { ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\n\ntype FormGroupProps = {\n name?: string | string[];\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n className?: string;\n onBlur?: () => void;\n testId?: string;\n children: ReactNode;\n};\n\nconst FormGroup = (props: FormGroupProps) => {\n const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;\n\n const classes = cx('Form-group', className, {\n 'is-invalid': !ignoreValidation && isInvalid,\n });\n\n return (\n <div className={classes} data-test-id={testId} {...other}>\n {children}\n </div>\n );\n};\n\nexport { FormGroup };\nexport type { FormGroupProps };\n", "import type { ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/FormHint.css';\n\ntype FormHintProps = {\n children: ReactNode;\n className?: string;\n id?: string;\n};\n\nconst FormHint = ({ className, children, ...rest }: FormHintProps) => {\n const classes = cx('Form-hint', className);\n\n return (\n <div {...rest} className={classes}>\n {children}\n </div>\n );\n};\n\nexport { FormHint };\nexport type { FormHintProps };\n", "import type { IconProps } from '@launchpad-ui/icons';\n\nimport { IconSize } from '@launchpad-ui/icons';\n\nimport './styles/IconField.css';\n\ntype IconFieldProps = {\n icon({ ...other }: IconProps): JSX.Element;\n children: JSX.Element | JSX.Element[];\n};\n\nconst IconField = ({ icon, children }: IconFieldProps) => {\n const Icon = icon;\n\n return (\n <div className=\"IconField\">\n {children}\n <Icon size={IconSize.SMALL} />\n </div>\n );\n};\n\nexport { IconField };\nexport type { IconFieldProps };\n", "import type { ComponentPropsWithRef } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/InputGroup.css';\n\ntype InputGroupProps = ComponentPropsWithRef<'div'>;\n\nconst InputGroup = ({ className, children, ...other }: InputGroupProps) => {\n const classes = cx('InputGroup', className);\n\n return (\n <div {...other} className={classes}>\n {children}\n </div>\n );\n};\n\nexport { InputGroup };\nexport type { InputGroupProps };\n", "import cx from 'clsx';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype RadioProps = {\n /**\n * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n */\n 'aria-label'?: string;\n /**\n * id attribute of the label text elsewhere in the app, used for screen reader support. Use this for cases where you have a visible label on the page that **is not close to** to the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n */\n 'aria-labelledby'?: string;\n /**\n * Is the Radio checked?\n */\n checked?: boolean;\n /**\n * Label for the Checkbox\n */\n children?: React.ReactNode;\n /**\n * Custom classname(s) to add to the Radio.\n */\n className?: string;\n /**\n * Is the Radio disabled?\n */\n disabled?: boolean;\n /**\n * The id to pair the Radio input with the label for screen reader support.\n */\n id?: string;\n /**\n * The className to pass into the Radio's Label component\n */\n labelClassName?: string;\n /**\n * Name to apply to the underlying Radio. Pass in the same name value to each Radio when grouping in a RadioGroup for screen reader support.\n */\n name?: string;\n /**\n * The function to pass into the Radio onChange synthetic event handler.\n */\n onChange?(e: React.ChangeEvent): void;\n /**\n * Optional inline CSS styles to add to the Radio label.\n */\n labelStyle?: object;\n /**\n * The value passed into Radio.\n */\n value: number | string;\n};\n\nconst Radio = ({\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n checked = false,\n children,\n className,\n disabled = false,\n id,\n labelClassName,\n name,\n onChange = () => undefined,\n labelStyle,\n value,\n ...props\n}: RadioProps) => {\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <>\n <input\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={cx('Form-radio', className)}\n checked={checked}\n disabled={disabled}\n id={id}\n name={name}\n onChange={onChange}\n type=\"radio\"\n value={value}\n {...props}\n />\n <Label className={labelClassName} htmlFor={id} style={labelStyle}>\n {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n </Label>\n </>\n );\n};\n\nexport { Radio };\nexport type { RadioProps };\n", "import { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { Children, cloneElement, isValidElement, useRef } from 'react';\n\nimport { Label } from './Label';\nimport { Radio } from './Radio';\nimport './styles/Form.css';\n\ntype RadioGroupProps = {\n /**\n * The legend that describes this groups of radio buttons. The legend\n * is important for screen reader users.\n */\n legend?: string;\n /**\n * The children passed into the RadioGroup.\n */\n children?: React.ReactNode;\n /**\n * Custom classname(s) passed to the fieldset inner div.\n */\n className?: string;\n /**\n * Set the underlying Radio to disabled if the Radio's disabled prop is undefined.\n */\n disabled?: boolean;\n /**\n * The RadioGroup's id.\n */\n id?: string;\n /**\n * Name to apply to the underlying Radio. The same name value is passed to each Radio when grouping in a RadioGroup for screen reader support.\n */\n name: string;\n /**\n * This function is passed into each Radio onChange synthetic event handler.\n */\n onChange?(e: React.ChangeEvent | React.FormEvent<HTMLInputElement>): void;\n /**\n * The value to compare against the Radio's value to determine if the Radio will be checked.\n */\n value: string;\n};\n\nconst RadioGroup = (props: RadioGroupProps) => {\n const { name, value, onChange, children, disabled, legend, ...other } = props;\n const fieldsetRef = useRef<HTMLFieldSetElement>(null);\n\n function updateRadioElems(elem: React.ReactNode): React.ReactNode {\n if (!isValidElement(elem)) {\n return elem;\n }\n\n if (elem?.type && elem.type === Radio) {\n return cloneElement(elem, {\n ...elem.props,\n name,\n checked: elem.props.value === value,\n onChange,\n disabled: typeof elem.props?.disabled !== 'undefined' ? elem.props.disabled : disabled,\n });\n }\n\n if (elem?.type && elem.type === Label) {\n return cloneElement(elem, {\n ...elem.props,\n onChange,\n disabled,\n });\n }\n\n const elemChildren = elem?.props?.children;\n if (elemChildren) {\n if (Array.isArray(elemChildren)) {\n return cloneElement(elem, {\n children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)),\n });\n }\n return cloneElement(elem, {\n children: updateRadioElems(elemChildren),\n });\n }\n\n if (elem?.type && elem.type !== Radio && elem.type !== Label) {\n return elem;\n }\n\n return null;\n }\n\n const radios = Children.map(children, (child) => updateRadioElems(child));\n return (\n <fieldset ref={fieldsetRef}>\n {legend && (\n <legend>\n <VisuallyHidden>{legend}</VisuallyHidden>\n </legend>\n )}\n <div {...other}>{radios}</div>\n </fieldset>\n );\n};\n\nexport { RadioGroup };\nexport type { RadioGroupProps };\n", "import type { ChangeEvent, ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/FormInput.css';\n\ntype SelectProps = {\n children: ReactNode;\n className?: string;\n disabled?: boolean;\n id?: string;\n name?: string;\n onChange?(event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>): void;\n testId?: string;\n value?: number | string;\n 'aria-label'?: string;\n};\n\nconst Select = ({ className, children, testId, ...rest }: SelectProps) => {\n const classes = cx('FormInput', 'FormInput-select', className);\n\n return (\n <select {...rest} className={classes} data-test-id={testId}>\n {children}\n </select>\n );\n};\n\nexport { Select };\nexport type { SelectProps };\n", "import type { TextareaHTMLAttributes } from 'react';\n\nimport cx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({ className, ...props }, ref) => {\n const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (\n e.key === 'ArrowRight' ||\n e.key === 'ArrowDown' ||\n e.key === 'ArrowUp' ||\n e.key === 'ArrowLeft'\n ) {\n e.stopPropagation();\n }\n if (e.key === 'Escape') {\n e.nativeEvent.stopImmediatePropagation();\n }\n };\n\n return (\n <textarea\n {...props}\n className={cx('FormInput', className)}\n ref={ref}\n aria-describedby={props['aria-describedby'] || createFieldErrorId(props.id)}\n onKeyDown={onKeyDown}\n />\n );\n});\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\nexport type { TextAreaProps };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/index.js CHANGED
@@ -86,50 +86,38 @@ var Label = ({
86
86
 
87
87
  // src/Checkbox.tsx
88
88
  var import_Form2 = require("./styles/Form.css");
89
- var Checkbox = class extends import_react.Component {
90
- constructor(props) {
91
- super(props);
92
- this.inputRef = (0, import_react.createRef)();
93
- }
94
- value() {
95
- return this.inputRef.current?.value;
96
- }
97
- checked() {
98
- return this.inputRef.current?.checked;
99
- }
100
- render() {
101
- const {
102
- "aria-label": ariaLabel,
103
- "aria-labelledby": ariaLabelledby,
104
- children,
105
- disabled,
106
- testId,
107
- checked,
108
- labelClassName,
109
- ...other
110
- } = this.props;
111
- const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
112
- if (!children && !hasAriaLabel) {
113
- console.warn("If you do not provide children, you must specify an aria-label for accessibility");
114
- }
115
- return /* @__PURE__ */ React.createElement(Label, {
116
- className: labelClassName
117
- }, /* @__PURE__ */ React.createElement("input", {
118
- ...other,
119
- ref: this.inputRef,
120
- checked,
121
- "aria-checked": checked ? "true" : "false",
122
- "aria-label": ariaLabel,
123
- "aria-labelledby": ariaLabelledby,
124
- className: "Form-checkbox",
125
- disabled,
126
- "data-test-id": testId,
127
- type: "checkbox"
128
- }), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
129
- className: "Form-label--disabled"
130
- }, children) : children);
89
+ var Checkbox = (0, import_react.forwardRef)(({
90
+ "aria-label": ariaLabel,
91
+ "aria-labelledby": ariaLabelledby,
92
+ children,
93
+ disabled,
94
+ testId,
95
+ checked,
96
+ labelClassName,
97
+ ...other
98
+ }, ref) => {
99
+ const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
100
+ if (!children && !hasAriaLabel) {
101
+ console.warn("If you do not provide children, you must specify an aria-label for accessibility");
131
102
  }
132
- };
103
+ return /* @__PURE__ */ React.createElement(Label, {
104
+ className: labelClassName
105
+ }, /* @__PURE__ */ React.createElement("input", {
106
+ ...other,
107
+ ref,
108
+ checked,
109
+ "aria-checked": checked ? "true" : "false",
110
+ "aria-label": ariaLabel,
111
+ "aria-labelledby": ariaLabelledby,
112
+ className: "Form-checkbox",
113
+ disabled,
114
+ "data-test-id": testId,
115
+ type: "checkbox"
116
+ }), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
117
+ className: "Form-label--disabled"
118
+ }, children) : children);
119
+ });
120
+ Checkbox.displayName = "Checkbox";
133
121
 
134
122
  // src/CompactTextField.tsx
135
123
  var import_clsx4 = __toESM(require("clsx"));
@@ -145,128 +133,92 @@ var import_FormInput = require("./styles/FormInput.css");
145
133
  var createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
146
134
 
147
135
  // src/TextField.tsx
148
- var TextField = class extends import_react2.Component {
149
- constructor(props) {
150
- super(props);
151
- this.inputRef = (0, import_react2.createRef)();
152
- }
153
- render() {
154
- const {
155
- className,
156
- type = "text",
157
- tiny = false,
158
- readOnly,
159
- tabIndex = 0,
160
- testId,
161
- suffix,
162
- overrideWidth,
163
- ...rest
164
- } = this.props;
165
- const classes = overrideWidth ? className : (0, import_clsx3.default)("FormInput", `FormInput-${type}`, className, {
166
- "FormInput--tiny": tiny
167
- });
168
- if (suffix) {
169
- return /* @__PURE__ */ React.createElement("div", {
170
- className: "FormInput-suffixContainer"
171
- }, /* @__PURE__ */ React.createElement("input", {
172
- ...rest,
173
- type,
174
- className: (0, import_clsx3.default)(classes, "FormInput-suffix"),
175
- readOnly,
176
- ref: this.inputRef,
177
- "data-test-id": testId,
178
- "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
179
- }), /* @__PURE__ */ React.createElement("label", {
180
- className: "FormInput-suffix",
181
- htmlFor: rest.id
182
- }, suffix));
183
- }
184
- return /* @__PURE__ */ React.createElement("input", {
136
+ var TextField = (0, import_react2.forwardRef)(({
137
+ className,
138
+ type = "text",
139
+ tiny = false,
140
+ readOnly,
141
+ tabIndex = 0,
142
+ testId,
143
+ suffix,
144
+ overrideWidth,
145
+ ...rest
146
+ }, ref) => {
147
+ const classes = overrideWidth ? className : (0, import_clsx3.default)("FormInput", `FormInput-${type}`, className, {
148
+ "FormInput--tiny": tiny
149
+ });
150
+ if (suffix) {
151
+ return /* @__PURE__ */ React.createElement("div", {
152
+ className: "FormInput-suffixContainer"
153
+ }, /* @__PURE__ */ React.createElement("input", {
185
154
  ...rest,
186
155
  type,
187
- className: classes,
156
+ className: (0, import_clsx3.default)(classes, "FormInput-suffix"),
188
157
  readOnly,
189
- tabIndex,
190
- ref: this.inputRef,
158
+ ref,
191
159
  "data-test-id": testId,
192
- style: overrideWidth ? {
193
- width: overrideWidth
194
- } : void 0,
195
160
  "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
196
- });
197
- }
198
- getElement() {
199
- return this.inputRef.current;
200
- }
201
- value() {
202
- return this.inputRef.current?.value;
203
- }
204
- focus() {
205
- this.inputRef.current?.focus();
161
+ }), /* @__PURE__ */ React.createElement("label", {
162
+ className: "FormInput-suffix",
163
+ htmlFor: rest.id
164
+ }, suffix));
206
165
  }
207
- blur() {
208
- this.inputRef.current?.blur();
209
- }
210
- select() {
211
- this.inputRef.current?.focus();
212
- }
213
- };
166
+ return /* @__PURE__ */ React.createElement("input", {
167
+ ...rest,
168
+ type,
169
+ className: classes,
170
+ readOnly,
171
+ tabIndex,
172
+ ref,
173
+ "data-test-id": testId,
174
+ style: overrideWidth ? {
175
+ width: overrideWidth
176
+ } : void 0,
177
+ "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
178
+ });
179
+ });
180
+ TextField.displayName = "TextField";
214
181
 
215
182
  // src/CompactTextField.tsx
216
183
  var import_CompactTextField = require("./styles/CompactTextField.css");
217
184
  var import_FormInput2 = require("./styles/FormInput.css");
218
- var CompactTextField = class extends import_react3.Component {
219
- constructor(props) {
220
- super(props);
221
- this.handleFocus = (event) => {
222
- this.setState({ isActive: true });
223
- if (this.props.onFocus) {
224
- this.props.onFocus(event);
225
- }
226
- };
227
- this.handleBlur = (event) => {
228
- const value = event.target.value || "";
229
- this.setState({ isActive: value.trim().length !== 0 });
230
- if (this.props.onBlur) {
231
- this.props.onBlur(event);
232
- }
233
- };
234
- this.value = () => this.textField ? this.textField.value() : "";
235
- this.focus = () => {
236
- if (this.textField) {
237
- this.textField.focus();
238
- }
239
- };
240
- const value = props.value;
241
- this.state = {
242
- isActive: ((0, import_lodash_es.isBoolean)(value) || value ? value.toString() : "").trim().length !== 0
243
- };
244
- }
245
- render() {
246
- const { className, id, name, label, type, needsErrorFeedback, ...rest } = this.props;
247
- const isActive = this.state.isActive || needsErrorFeedback;
248
- const classes = (0, import_clsx4.default)("CompactTextField", className, {
249
- "is-active": isActive
250
- });
251
- const placeholder = isActive ? "" : label;
252
- return /* @__PURE__ */ React.createElement("div", {
253
- className: classes
254
- }, /* @__PURE__ */ React.createElement(Label, {
255
- htmlFor: id
256
- }, label), /* @__PURE__ */ React.createElement(TextField, {
257
- ...rest,
258
- id,
259
- name,
260
- type,
261
- placeholder,
262
- ref: (textField) => {
263
- this.textField = textField;
264
- },
265
- onFocus: this.handleFocus,
266
- onBlur: this.handleBlur
267
- }));
268
- }
269
- };
185
+ var CompactTextField = (0, import_react3.forwardRef)(({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
186
+ const [isActive, setIsActive] = (0, import_react3.useState)(((0, import_lodash_es.isBoolean)(value) || value ? value.toString() : "").trim().length !== 0);
187
+ const isActiveState = isActive || needsErrorFeedback;
188
+ const classes = (0, import_clsx4.default)("CompactTextField", className, {
189
+ "is-active": isActiveState
190
+ });
191
+ const placeholder = isActiveState ? "" : label;
192
+ const handleFocus = (event) => {
193
+ setIsActive(true);
194
+ if (onFocus) {
195
+ onFocus(event);
196
+ }
197
+ };
198
+ const handleBlur = (event) => {
199
+ const value2 = event.target.value || "";
200
+ setIsActive(value2.trim().length !== 0);
201
+ if (onBlur) {
202
+ onBlur(event);
203
+ }
204
+ };
205
+ return /* @__PURE__ */ React.createElement("div", {
206
+ className: classes
207
+ }, /* @__PURE__ */ React.createElement(Label, {
208
+ htmlFor: id
209
+ }, label), /* @__PURE__ */ React.createElement(TextField, {
210
+ ...rest,
211
+ id,
212
+ name,
213
+ type,
214
+ placeholder,
215
+ value,
216
+ ref,
217
+ onFocus: handleFocus,
218
+ onBlur: handleBlur
219
+ }));
220
+ });
221
+ CompactTextField.displayName = "CompactTextField";
270
222
 
271
223
  // src/FieldError.tsx
272
224
  var import_clsx5 = __toESM(require("clsx"));
@@ -506,33 +458,24 @@ var Select = ({ className, children, testId, ...rest }) => {
506
458
  var import_clsx13 = __toESM(require("clsx"));
507
459
  var import_react5 = require("react");
508
460
  var import_FormInput4 = require("./styles/FormInput.css");
509
- var TextArea = class extends import_react5.Component {
510
- constructor(props) {
511
- super(props);
512
- this.textareaRef = (0, import_react5.createRef)();
513
- }
514
- render() {
515
- const { className, ...props } = this.props;
516
- return /* @__PURE__ */ React.createElement("textarea", {
517
- ...props,
518
- className: (0, import_clsx13.default)("FormInput", className),
519
- ref: this.textareaRef,
520
- "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
521
- onKeyDown
522
- });
523
- }
524
- focus() {
525
- this.textareaRef.current?.focus();
526
- }
527
- };
528
- function onKeyDown(e) {
529
- if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
530
- e.stopPropagation();
531
- }
532
- if (e.key === "Escape") {
533
- e.nativeEvent.stopImmediatePropagation();
534
- }
535
- }
461
+ var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
462
+ const onKeyDown = (e) => {
463
+ if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
464
+ e.stopPropagation();
465
+ }
466
+ if (e.key === "Escape") {
467
+ e.nativeEvent.stopImmediatePropagation();
468
+ }
469
+ };
470
+ return /* @__PURE__ */ React.createElement("textarea", {
471
+ ...props,
472
+ className: (0, import_clsx13.default)("FormInput", className),
473
+ ref,
474
+ "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
475
+ onKeyDown
476
+ });
477
+ });
478
+ TextArea.displayName = "TextArea";
536
479
  // Annotate the CommonJS export names for ESM import in node:
537
480
  0 && (module.exports = {
538
481
  Checkbox,