@launchpad-ui/form - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/Checkbox.d.ts

@@ -1,2 +0,2 @@
-import { Component, InputHTMLAttributes, RefObject } from 'react';
+import type { InputHTMLAttributes } from 'react';
 import './styles/Form.css';
@@ -27,11 +27,28 @@ declare type CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
 };
-declare class Checkbox extends Component<CheckboxProps> {
-    inputRef: RefObject<HTMLInputElement>;
-    constructor(props: CheckboxProps);
-    value(): string | undefined;
-    checked(): boolean | undefined;
-    render(): JSX.Element;
-}
+declare const Checkbox: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    /**
+     * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.
+     */
+    'aria-label'?: string | undefined;
+    /**
+     * 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
+     * the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/
+     */
+    'aria-labelledby'?: string | undefined;
+    /**
+     * Label for the Checkbox
+     */
+    children?: React.ReactNode;
+    /**
+     * The className to pass into the Checkbox's Label component
+     */
+    labelClassName?: string | undefined;
+    /**
+     * The test id for the data-test-id attribute for React Testing Library support
+     */
+    testId?: string | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export { Checkbox };
 export type { CheckboxProps };
 //# sourceMappingURL=Checkbox.d.ts.map

dist/CompactTextField.d.ts

@@ -1,3 +0,3 @@
-import { Component, FocusEvent } from 'react';
-import { TextField, TextFieldProps } from './TextField';
+/// <reference types="react" />
+import { TextFieldProps } from './TextField';
 import './styles/CompactTextField.css';
@@ -9,15 +9,13 @@ import './styles/FormInput.css';
 };
-declare class CompactTextField extends Component<CompactTextFieldProps, {
-    isActive: boolean;
-}> {
-    textField?: TextField | null;
-    constructor(props: CompactTextFieldProps);
-    render(): JSX.Element;
-    handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
-    handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
-    value: () => string | undefined;
-    focus: () => void;
-}
+declare const CompactTextField: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
+    suffix?: string | undefined;
+    testId?: string | undefined;
+    tiny?: boolean | undefined;
+    overrideWidth?: string | undefined;
+} & {
+    label: string;
+    needsErrorFeedback?: boolean | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export { CompactTextField };
 export type { CompactTextFieldProps };
 //# sourceMappingURL=CompactTextField.d.ts.map

dist/index.d.ts

 export type { CheckboxProps } from './Checkbox';
 export type { CompactTextFieldProps } from './CompactTextField';
+export type { FieldErrorProps } from './FieldError';
+export type { FieldSetProps } from './FieldSet';
+export type { FormProps } from './Form';
 export type { FormFieldProps } from './FormField';
+export type { FormGroupProps } from './FormGroup';
 export type { FormHintProps } from './FormHint';
-export type { FormProps } from './Form';
 export type { IconFieldProps } from './IconField';
+export type { InputGroupProps } from './InputGroup';
 export type { LabelProps } from './Label';
+export type { RadioProps } from './Radio';
 export type { RadioGroupProps } from './RadioGroup';
-export type { RadioProps } from './Radio';
+export type { RequiredAsteriskProps } from './RequiredAsterisk';
 export type { SelectProps } from './Select';
 export type { TextAreaProps } from './TextArea';
+export type { TextFieldProps } from './TextField';
 export { Checkbox } from './Checkbox';
@@ -13,0 +19,0 @@ export { CompactTextField } from './CompactTextField';

dist/index.es.js

@@ -5,3 +5,3 @@ // ../../scripts/react-shim.js
 // src/Checkbox.tsx
-import { Component, createRef } from "react";
+import { forwardRef } from "react";
 
@@ -46,46 +46,34 @@ // src/Label.tsx
 import "./styles/Form.css";
-var Checkbox = class extends Component {
-  constructor(props) {
-    super(props);
-    this.inputRef = createRef();
+var Checkbox = forwardRef(({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  children,
+  disabled,
+  testId,
+  checked,
+  labelClassName,
+  ...other
+}, ref) => {
+  const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
+  if (!children && !hasAriaLabel) {
+    console.warn("If you do not provide children, you must specify an aria-label for accessibility");
   }
-  value() {
-    return this.inputRef.current?.value;
-  }
-  checked() {
-    return this.inputRef.current?.checked;
-  }
-  render() {
-    const {
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledby,
-      children,
-      disabled,
-      testId,
-      checked,
-      labelClassName,
-      ...other
-    } = this.props;
-    const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
-    if (!children && !hasAriaLabel) {
-      console.warn("If you do not provide children, you must specify an aria-label for accessibility");
-    }
-    return /* @__PURE__ */ React.createElement(Label, {
-      className: labelClassName
-    }, /* @__PURE__ */ React.createElement("input", {
-      ...other,
-      ref: this.inputRef,
-      checked,
-      "aria-checked": checked ? "true" : "false",
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledby,
-      className: "Form-checkbox",
-      disabled,
-      "data-test-id": testId,
-      type: "checkbox"
-    }), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
-      className: "Form-label--disabled"
-    }, children) : children);
-  }
-};
+  return /* @__PURE__ */ React.createElement(Label, {
+    className: labelClassName
+  }, /* @__PURE__ */ React.createElement("input", {
+    ...other,
+    ref,
+    checked,
+    "aria-checked": checked ? "true" : "false",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    className: "Form-checkbox",
+    disabled,
+    "data-test-id": testId,
+    type: "checkbox"
+  }), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
+    className: "Form-label--disabled"
+  }, children) : children);
+});
+Checkbox.displayName = "Checkbox";
 
@@ -95,7 +83,7 @@ // src/CompactTextField.tsx
 import { isBoolean } from "lodash-es";
-import { Component as Component3 } from "react";
+import { forwardRef as forwardRef3, useState } from "react";
 
 // src/TextField.tsx
 import cx3 from "clsx";
-import { Component as Component2, createRef as createRef2 } from "react";
+import { forwardRef as forwardRef2 } from "react";
 import "./styles/FormInput.css";
@@ -107,68 +95,47 @@
 // src/TextField.tsx
-var TextField = class extends Component2 {
-  constructor(props) {
-    super(props);
-    this.inputRef = createRef2();
-  }
-  render() {
-    const {
-      className,
-      type = "text",
-      tiny = false,
-      readOnly,
-      tabIndex = 0,
-      testId,
-      suffix,
-      overrideWidth,
-      ...rest
-    } = this.props;
-    const classes = overrideWidth ? className : cx3("FormInput", `FormInput-${type}`, className, {
-      "FormInput--tiny": tiny
-    });
-    if (suffix) {
-      return /* @__PURE__ */ React.createElement("div", {
-        className: "FormInput-suffixContainer"
-      }, /* @__PURE__ */ React.createElement("input", {
-        ...rest,
-        type,
-        className: cx3(classes, "FormInput-suffix"),
-        readOnly,
-        ref: this.inputRef,
-        "data-test-id": testId,
-        "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-      }), /* @__PURE__ */ React.createElement("label", {
-        className: "FormInput-suffix",
-        htmlFor: rest.id
-      }, suffix));
-    }
-    return /* @__PURE__ */ React.createElement("input", {
+var TextField = forwardRef2(({
+  className,
+  type = "text",
+  tiny = false,
+  readOnly,
+  tabIndex = 0,
+  testId,
+  suffix,
+  overrideWidth,
+  ...rest
+}, ref) => {
+  const classes = overrideWidth ? className : cx3("FormInput", `FormInput-${type}`, className, {
+    "FormInput--tiny": tiny
+  });
+  if (suffix) {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: "FormInput-suffixContainer"
+    }, /* @__PURE__ */ React.createElement("input", {
       ...rest,
       type,
-      className: classes,
+      className: cx3(classes, "FormInput-suffix"),
       readOnly,
-      tabIndex,
-      ref: this.inputRef,
+      ref,
       "data-test-id": testId,
-      style: overrideWidth ? {
-        width: overrideWidth
-      } : void 0,
       "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-    });
+    }), /* @__PURE__ */ React.createElement("label", {
+      className: "FormInput-suffix",
+      htmlFor: rest.id
+    }, suffix));
   }
-  getElement() {
-    return this.inputRef.current;
-  }
-  value() {
-    return this.inputRef.current?.value;
-  }
-  focus() {
-    this.inputRef.current?.focus();
-  }
-  blur() {
-    this.inputRef.current?.blur();
-  }
-  select() {
-    this.inputRef.current?.focus();
-  }
-};
+  return /* @__PURE__ */ React.createElement("input", {
+    ...rest,
+    type,
+    className: classes,
+    readOnly,
+    tabIndex,
+    ref,
+    "data-test-id": testId,
+    style: overrideWidth ? {
+      width: overrideWidth
+    } : void 0,
+    "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
+  });
+});
+TextField.displayName = "TextField";
 
@@ -178,54 +145,39 @@ // src/CompactTextField.tsx
 import "./styles/FormInput.css";
-var CompactTextField = class extends Component3 {
-  constructor(props) {
-    super(props);
-    this.handleFocus = (event) => {
-      this.setState({ isActive: true });
-      if (this.props.onFocus) {
-        this.props.onFocus(event);
-      }
-    };
-    this.handleBlur = (event) => {
-      const value = event.target.value || "";
-      this.setState({ isActive: value.trim().length !== 0 });
-      if (this.props.onBlur) {
-        this.props.onBlur(event);
-      }
-    };
-    this.value = () => this.textField ? this.textField.value() : "";
-    this.focus = () => {
-      if (this.textField) {
-        this.textField.focus();
-      }
-    };
-    const value = props.value;
-    this.state = {
-      isActive: (isBoolean(value) || value ? value.toString() : "").trim().length !== 0
-    };
-  }
-  render() {
-    const { className, id, name, label, type, needsErrorFeedback, ...rest } = this.props;
-    const isActive = this.state.isActive || needsErrorFeedback;
-    const classes = cx4("CompactTextField", className, {
-      "is-active": isActive
-    });
-    const placeholder = isActive ? "" : label;
-    return /* @__PURE__ */ React.createElement("div", {
-      className: classes
-    }, /* @__PURE__ */ React.createElement(Label, {
-      htmlFor: id
-    }, label), /* @__PURE__ */ React.createElement(TextField, {
-      ...rest,
-      id,
-      name,
-      type,
-      placeholder,
-      ref: (textField) => {
-        this.textField = textField;
-      },
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur
-    }));
-  }
-};
+var CompactTextField = forwardRef3(({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
+  const [isActive, setIsActive] = useState((isBoolean(value) || value ? value.toString() : "").trim().length !== 0);
+  const isActiveState = isActive || needsErrorFeedback;
+  const classes = cx4("CompactTextField", className, {
+    "is-active": isActiveState
+  });
+  const placeholder = isActiveState ? "" : label;
+  const handleFocus = (event) => {
+    setIsActive(true);
+    if (onFocus) {
+      onFocus(event);
+    }
+  };
+  const handleBlur = (event) => {
+    const value2 = event.target.value || "";
+    setIsActive(value2.trim().length !== 0);
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    className: classes
+  }, /* @__PURE__ */ React.createElement(Label, {
+    htmlFor: id
+  }, label), /* @__PURE__ */ React.createElement(TextField, {
+    ...rest,
+    id,
+    name,
+    type,
+    placeholder,
+    value,
+    ref,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }));
+});
+CompactTextField.displayName = "CompactTextField";
 
@@ -468,31 +420,22 @@ // src/FieldError.tsx
 import cx13 from "clsx";
-import { Component as Component4, createRef as createRef3 } from "react";
+import { forwardRef as forwardRef4 } from "react";
 import "./styles/FormInput.css";
-var TextArea = class extends Component4 {
-  constructor(props) {
-    super(props);
-    this.textareaRef = createRef3();
-  }
-  render() {
-    const { className, ...props } = this.props;
-    return /* @__PURE__ */ React.createElement("textarea", {
-      ...props,
-      className: cx13("FormInput", className),
-      ref: this.textareaRef,
-      "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
-      onKeyDown
-    });
-  }
-  focus() {
-    this.textareaRef.current?.focus();
-  }
-};
-function onKeyDown(e) {
-  if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
-    e.stopPropagation();
-  }
-  if (e.key === "Escape") {
-    e.nativeEvent.stopImmediatePropagation();
-  }
-}
+var TextArea = forwardRef4(({ className, ...props }, ref) => {
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
+      e.stopPropagation();
+    }
+    if (e.key === "Escape") {
+      e.nativeEvent.stopImmediatePropagation();
+    }
+  };
+  return /* @__PURE__ */ React.createElement("textarea", {
+    ...props,
+    className: cx13("FormInput", className),
+    ref,
+    "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
+    onKeyDown
+  });
+});
+TextArea.displayName = "TextArea";
 export {
@@ -499,0 +442,0 @@ Checkbox,

dist/index.js

@@ -89,46 +89,34 @@ var __create = Object.create;
 var import_Form2 = require("./styles/Form.css");
-var Checkbox = class extends import_react.Component {
-  constructor(props) {
-    super(props);
-    this.inputRef = (0, import_react.createRef)();
+var Checkbox = (0, import_react.forwardRef)(({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  children,
+  disabled,
+  testId,
+  checked,
+  labelClassName,
+  ...other
+}, ref) => {
+  const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
+  if (!children && !hasAriaLabel) {
+    console.warn("If you do not provide children, you must specify an aria-label for accessibility");
   }
-  value() {
-    return this.inputRef.current?.value;
-  }
-  checked() {
-    return this.inputRef.current?.checked;
-  }
-  render() {
-    const {
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledby,
-      children,
-      disabled,
-      testId,
-      checked,
-      labelClassName,
-      ...other
-    } = this.props;
-    const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
-    if (!children && !hasAriaLabel) {
-      console.warn("If you do not provide children, you must specify an aria-label for accessibility");
-    }
-    return /* @__PURE__ */ React.createElement(Label, {
-      className: labelClassName
-    }, /* @__PURE__ */ React.createElement("input", {
-      ...other,
-      ref: this.inputRef,
-      checked,
-      "aria-checked": checked ? "true" : "false",
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledby,
-      className: "Form-checkbox",
-      disabled,
-      "data-test-id": testId,
-      type: "checkbox"
-    }), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
-      className: "Form-label--disabled"
-    }, children) : children);
-  }
-};
+  return /* @__PURE__ */ React.createElement(Label, {
+    className: labelClassName
+  }, /* @__PURE__ */ React.createElement("input", {
+    ...other,
+    ref,
+    checked,
+    "aria-checked": checked ? "true" : "false",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    className: "Form-checkbox",
+    disabled,
+    "data-test-id": testId,
+    type: "checkbox"
+  }), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
+    className: "Form-label--disabled"
+  }, children) : children);
+});
+Checkbox.displayName = "Checkbox";
 
@@ -149,68 +137,47 @@ // src/CompactTextField.tsx
 // src/TextField.tsx
-var TextField = class extends import_react2.Component {
-  constructor(props) {
-    super(props);
-    this.inputRef = (0, import_react2.createRef)();
-  }
-  render() {
-    const {
-      className,
-      type = "text",
-      tiny = false,
-      readOnly,
-      tabIndex = 0,
-      testId,
-      suffix,
-      overrideWidth,
-      ...rest
-    } = this.props;
-    const classes = overrideWidth ? className : (0, import_clsx3.default)("FormInput", `FormInput-${type}`, className, {
-      "FormInput--tiny": tiny
-    });
-    if (suffix) {
-      return /* @__PURE__ */ React.createElement("div", {
-        className: "FormInput-suffixContainer"
-      }, /* @__PURE__ */ React.createElement("input", {
-        ...rest,
-        type,
-        className: (0, import_clsx3.default)(classes, "FormInput-suffix"),
-        readOnly,
-        ref: this.inputRef,
-        "data-test-id": testId,
-        "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-      }), /* @__PURE__ */ React.createElement("label", {
-        className: "FormInput-suffix",
-        htmlFor: rest.id
-      }, suffix));
-    }
-    return /* @__PURE__ */ React.createElement("input", {
+var TextField = (0, import_react2.forwardRef)(({
+  className,
+  type = "text",
+  tiny = false,
+  readOnly,
+  tabIndex = 0,
+  testId,
+  suffix,
+  overrideWidth,
+  ...rest
+}, ref) => {
+  const classes = overrideWidth ? className : (0, import_clsx3.default)("FormInput", `FormInput-${type}`, className, {
+    "FormInput--tiny": tiny
+  });
+  if (suffix) {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: "FormInput-suffixContainer"
+    }, /* @__PURE__ */ React.createElement("input", {
       ...rest,
       type,
-      className: classes,
+      className: (0, import_clsx3.default)(classes, "FormInput-suffix"),
       readOnly,
-      tabIndex,
-      ref: this.inputRef,
+      ref,
       "data-test-id": testId,
-      style: overrideWidth ? {
-        width: overrideWidth
-      } : void 0,
       "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-    });
+    }), /* @__PURE__ */ React.createElement("label", {
+      className: "FormInput-suffix",
+      htmlFor: rest.id
+    }, suffix));
   }
-  getElement() {
-    return this.inputRef.current;
-  }
-  value() {
-    return this.inputRef.current?.value;
-  }
-  focus() {
-    this.inputRef.current?.focus();
-  }
-  blur() {
-    this.inputRef.current?.blur();
-  }
-  select() {
-    this.inputRef.current?.focus();
-  }
-};
+  return /* @__PURE__ */ React.createElement("input", {
+    ...rest,
+    type,
+    className: classes,
+    readOnly,
+    tabIndex,
+    ref,
+    "data-test-id": testId,
+    style: overrideWidth ? {
+      width: overrideWidth
+    } : void 0,
+    "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
+  });
+});
+TextField.displayName = "TextField";
 
@@ -220,54 +187,39 @@ // src/CompactTextField.tsx
 var import_FormInput2 = require("./styles/FormInput.css");
-var CompactTextField = class extends import_react3.Component {
-  constructor(props) {
-    super(props);
-    this.handleFocus = (event) => {
-      this.setState({ isActive: true });
-      if (this.props.onFocus) {
-        this.props.onFocus(event);
-      }
-    };
-    this.handleBlur = (event) => {
-      const value = event.target.value || "";
-      this.setState({ isActive: value.trim().length !== 0 });
-      if (this.props.onBlur) {
-        this.props.onBlur(event);
-      }
-    };
-    this.value = () => this.textField ? this.textField.value() : "";
-    this.focus = () => {
-      if (this.textField) {
-        this.textField.focus();
-      }
-    };
-    const value = props.value;
-    this.state = {
-      isActive: ((0, import_lodash_es.isBoolean)(value) || value ? value.toString() : "").trim().length !== 0
-    };
-  }
-  render() {
-    const { className, id, name, label, type, needsErrorFeedback, ...rest } = this.props;
-    const isActive = this.state.isActive || needsErrorFeedback;
-    const classes = (0, import_clsx4.default)("CompactTextField", className, {
-      "is-active": isActive
-    });
-    const placeholder = isActive ? "" : label;
-    return /* @__PURE__ */ React.createElement("div", {
-      className: classes
-    }, /* @__PURE__ */ React.createElement(Label, {
-      htmlFor: id
-    }, label), /* @__PURE__ */ React.createElement(TextField, {
-      ...rest,
-      id,
-      name,
-      type,
-      placeholder,
-      ref: (textField) => {
-        this.textField = textField;
-      },
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur
-    }));
-  }
-};
+var CompactTextField = (0, import_react3.forwardRef)(({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
+  const [isActive, setIsActive] = (0, import_react3.useState)(((0, import_lodash_es.isBoolean)(value) || value ? value.toString() : "").trim().length !== 0);
+  const isActiveState = isActive || needsErrorFeedback;
+  const classes = (0, import_clsx4.default)("CompactTextField", className, {
+    "is-active": isActiveState
+  });
+  const placeholder = isActiveState ? "" : label;
+  const handleFocus = (event) => {
+    setIsActive(true);
+    if (onFocus) {
+      onFocus(event);
+    }
+  };
+  const handleBlur = (event) => {
+    const value2 = event.target.value || "";
+    setIsActive(value2.trim().length !== 0);
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    className: classes
+  }, /* @__PURE__ */ React.createElement(Label, {
+    htmlFor: id
+  }, label), /* @__PURE__ */ React.createElement(TextField, {
+    ...rest,
+    id,
+    name,
+    type,
+    placeholder,
+    value,
+    ref,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }));
+});
+CompactTextField.displayName = "CompactTextField";
 
@@ -512,29 +464,20 @@ // src/FieldError.tsx
 var import_FormInput4 = require("./styles/FormInput.css");
-var TextArea = class extends import_react5.Component {
-  constructor(props) {
-    super(props);
-    this.textareaRef = (0, import_react5.createRef)();
-  }
-  render() {
-    const { className, ...props } = this.props;
-    return /* @__PURE__ */ React.createElement("textarea", {
-      ...props,
-      className: (0, import_clsx13.default)("FormInput", className),
-      ref: this.textareaRef,
-      "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
-      onKeyDown
-    });
-  }
-  focus() {
-    this.textareaRef.current?.focus();
-  }
-};
-function onKeyDown(e) {
-  if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
-    e.stopPropagation();
-  }
-  if (e.key === "Escape") {
-    e.nativeEvent.stopImmediatePropagation();
-  }
-}
+var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
+      e.stopPropagation();
+    }
+    if (e.key === "Escape") {
+      e.nativeEvent.stopImmediatePropagation();
+    }
+  };
+  return /* @__PURE__ */ React.createElement("textarea", {
+    ...props,
+    className: (0, import_clsx13.default)("FormInput", className),
+    ref,
+    "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
+    onKeyDown
+  });
+});
+TextArea.displayName = "TextArea";
 // Annotate the CommonJS export names for ESM import in node:
@@ -541,0 +484,0 @@ 0 && (module.exports = {

dist/InputGroup.d.ts

 import type { ComponentPropsWithRef } from 'react';
 import './styles/InputGroup.css';
 declare type InputGroupProps = ComponentPropsWithRef<'div'>;
-export declare const InputGroup: ({ className, children, ...other }: InputGroupProps) => JSX.Element;
-export {};
+declare const InputGroup: ({ className, children, ...other }: InputGroupProps) => JSX.Element;
+export { InputGroup };
+export type { InputGroupProps };
 //# sourceMappingURL=InputGroup.d.ts.map

dist/Label.d.ts

 /// <reference types="react" />
 import './styles/Form.css';
-export declare type LabelProps = {
+declare type LabelProps = {
     htmlFor?: string;
@@ -13,3 +13,5 @@ required?: boolean;
 };
-export declare const Label: ({ htmlFor, disabled, className, children, required, optional, ...other }: LabelProps) => JSX.Element;
+declare const Label: ({ htmlFor, disabled, className, children, required, optional, ...other }: LabelProps) => JSX.Element;
+export { Label };
+export type { LabelProps };
 //# sourceMappingURL=Label.d.ts.map

dist/RequiredAsterisk.d.ts

@@ -8,2 +8,3 @@ import type { HTMLAttributes } from 'react';
 export { RequiredAsterisk };
+export type { RequiredAsteriskProps };
 //# sourceMappingURL=RequiredAsterisk.d.ts.map

dist/TextArea.d.ts

@@ -1,12 +0,7 @@
-import { Component, RefObject, TextareaHTMLAttributes } from 'react';
+import type { TextareaHTMLAttributes } from 'react';
 import './styles/FormInput.css';
 declare type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
-declare class TextArea extends Component<TextAreaProps> {
-    textareaRef: RefObject<HTMLTextAreaElement>;
-    constructor(props: TextAreaProps);
-    render(): JSX.Element;
-    focus(): void;
-}
+declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export { TextArea };
 export type { TextAreaProps };
 //# sourceMappingURL=TextArea.d.ts.map

dist/TextField.d.ts

@@ -1,2 +0,2 @@
-import { Component, InputHTMLAttributes, RefObject } from 'react';
+import type { InputHTMLAttributes } from 'react';
 import './styles/FormInput.css';
@@ -9,14 +9,10 @@ declare type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
 };
-declare class TextField extends Component<TextFieldProps> {
-    inputRef: RefObject<HTMLInputElement>;
-    constructor(props: TextFieldProps);
-    render(): JSX.Element;
-    getElement(): HTMLInputElement | null;
-    value(): string | undefined;
-    focus(): void;
-    blur(): void;
-    select(): void;
-}
+declare const TextField: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    suffix?: string | undefined;
+    testId?: string | undefined;
+    tiny?: boolean | undefined;
+    overrideWidth?: string | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export { TextField };
 export type { TextFieldProps };
-export { TextField };
 //# sourceMappingURL=TextField.d.ts.map

package.json

 {
   "name": "@launchpad-ui/form",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "publishConfig": {
@@ -40,4 +40,4 @@ "access": "public"
     "@types/lodash-es": "^4.17.6",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
@@ -44,0 +44,0 @@ "scripts": {

No alert changes

Worsened metrics

Total package byte prevSize

144087

decreased by-3.87%

Lines of code

1328

decreased by-6.87%

No dependency changes