@sproutsocial/seeds-react-form-field 1.0.5 → 1.1.0

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-ESM dist/esm/index.js     2.55 KB
-ESM dist/esm/index.js.map 14.21 KB
-ESM ⚡️ Build success in 339ms
-CJS dist/index.js     4.56 KB
-CJS dist/index.js.map 14.29 KB
-CJS ⚡️ Build success in 363ms
+CJS dist/index.js     5.00 KB
+CJS dist/index.js.map 14.96 KB
+CJS ⚡️ Build success in 240ms
+ESM dist/esm/index.js     2.99 KB
+ESM dist/esm/index.js.map 14.90 KB
+ESM ⚡️ Build success in 244ms
 DTS Build start
-DTS ⚡️ Build success in 16798ms
+DTS ⚡️ Build success in 22692ms
 DTS dist/index.d.ts  1.35 KB
 DTS dist/index.d.mts 1.35 KB
-Done in 23.04s.
+Done in 30.05s.

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @sproutsocial/seeds-react-form-field
 
+## 1.1.0
+
+### Minor Changes
+
+- 81584cb: Add helper text to input element's `aria-describedby`
+  Bug fix: only add `aria-describedby` if error or helper text exists
+
+## 1.0.7
+
+### Patch Changes
+
+- Updated dependencies [750d1ea]
+  - @sproutsocial/seeds-react-theme@3.3.0
+  - @sproutsocial/seeds-react-visually-hidden@1.0.8
+  - @sproutsocial/seeds-react-box@1.1.8
+  - @sproutsocial/seeds-react-label@1.0.7
+
+## 1.0.6
+
+### Patch Changes
+
+- Updated dependencies [fa7579a]
+  - @sproutsocial/seeds-react-theme@3.2.1
+  - @sproutsocial/seeds-react-box@1.1.7
+  - @sproutsocial/seeds-react-label@1.0.6
+  - @sproutsocial/seeds-react-visually-hidden@1.0.7
+
 ## 1.0.5
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,11 +1,11 @@
 // src/FormField.tsx
-import { useState as useState2 } from "react";
+import { useMemo as useMemo2, useState as useState2 } from "react";
 
 // ../seeds-react-hooks/dist/index.mjs
 import { useState, useLayoutEffect, useCallback, useReducer, useRef, useEffect, useMemo } from "react";
 import { useTheme } from "styled-components";
 var v = Object.freeze({ x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 });
-function X(r) {
+function H(r) {
   let [t, e] = useState(r), s = useCallback((n) => {
     n && n.textContent !== null && e(n.textContent);
   }, []);
@@ -34,8 +34,16 @@ var FormField = ({
 }) => {
   const [id] = useState2(identifier || `FormField-${idCounter++}`);
   const errorId = `Error-${id}`;
-  const containerText = X("");
-  const errorContainerText = X("");
+  const helperTextId = `HelperText-${id}`;
+  const containerText = H("");
+  const errorContainerText = H("");
+  const ariaDescribedby = useMemo2(() => {
+    const ids = [
+      helperText && helperTextId,
+      isInvalid && error && errorId
+    ].filter(Boolean);
+    return ids.length > 0 ? ids.join(" ") : void 0;
+  }, [helperText, helperTextId, isInvalid, error, errorId]);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -46,11 +54,21 @@ var FormField = ({
       "data-qa-formfield-isinvalid": isInvalid === true,
       children: [
         isLabelHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { "data-testid": "visually-hidden", children: /* @__PURE__ */ jsx(Label, { htmlFor: id, required, children: label }) }) : /* @__PURE__ */ jsx(Label, { mb: helperText ? 100 : 300, htmlFor: id, required, children: label }),
-        helperText && /* @__PURE__ */ jsx(Text, { as: "p", fontSize: 200, mb: 300, color: "text.subtext", children: helperText }),
+        helperText && /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "p",
+            fontSize: 200,
+            mb: 300,
+            color: "text.subtext",
+            id: helperTextId,
+            children: helperText
+          }
+        ),
         children({
           id,
           isInvalid,
-          ariaDescribedby: errorId,
+          ariaDescribedby,
           ...required !== void 0 && { required }
         }),
         isInvalid && error && /* @__PURE__ */ jsx(

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormField.tsx","../../../seeds-react-hooks/src/useMeasure/useMeasure.ts","../../../seeds-react-hooks/src/useSelect/useSelect.ts","../../../seeds-react-hooks/src/useMultiselect/useMultiselect.ts","../../../seeds-react-hooks/src/useMutationObserver/useMutationObserver.ts","../../../seeds-react-hooks/src/useTextContent/useTextContent.ts","../../../seeds-react-hooks/src/useWhyDidYouUpdate/useWhyDidYouUpdate.ts","../../../seeds-react-hooks/src/useInteractiveColor/useInteractiveColor.ts","../../src/FormFieldTypes.ts","../../src/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Label from \"@sproutsocial/seeds-react-label\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport type { TypeFormFieldProps } from \"./FormFieldTypes\";\n\nlet idCounter = 0;\n\nconst FormField = ({\n  children,\n  error,\n  helperText,\n  id: identifier,\n  isInvalid = false,\n  label,\n  mb = 400,\n  qa,\n  isLabelHidden = false,\n  required,\n  ...rest\n}: TypeFormFieldProps) => {\n  const [id] = useState(identifier || `FormField-${idCounter++}`);\n  const errorId = `Error-${id}`;\n  const containerText = useTextContent(\"\");\n  const errorContainerText = useTextContent(\"\");\n\n  return (\n    <Box\n      {...rest}\n      {...qa}\n      mb={mb}\n      data-qa-formfield={\n        (qa && qa[\"data-qa-formfield\"]) || id || containerText.current\n      }\n      data-qa-formfield-isinvalid={isInvalid === true}\n    >\n      {isLabelHidden ? (\n        <VisuallyHidden data-testid=\"visually-hidden\">\n          <Label htmlFor={id} required={required}>\n            {label}\n          </Label>\n        </VisuallyHidden>\n      ) : (\n        <Label mb={helperText ? 100 : 300} htmlFor={id} required={required}>\n          {label}\n        </Label>\n      )}\n      {helperText && (\n        <Text as=\"p\" fontSize={200} mb={300} color=\"text.subtext\">\n          {helperText}\n        </Text>\n      )}\n      {children({\n        id,\n        isInvalid,\n        ariaDescribedby: errorId,\n        ...(required !== undefined && { required }),\n      })}\n      {isInvalid && error && (\n        <Text\n          as=\"div\"\n          fontSize={200}\n          color=\"text.error\"\n          mt={300}\n          id={errorId}\n          data-qa-formfield-error={\n            (qa && qa[\"data-qa-formfield-error\"]) || errorContainerText.current\n          }\n        >\n          {error}\n        </Text>\n      )}\n    </Box>\n  );\n};\n\nexport default FormField;\n","import { useState, useLayoutEffect, type RefObject } from \"react\";\n\ninterface DOMRectObject {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\nconst initialBounds = Object.freeze({\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n});\n\nexport function useMeasure<TElement extends Element>(ref: RefObject<TElement>) {\n  const [bounds, setContentRect] =\n    useState<Readonly<DOMRectObject>>(initialBounds);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (\n      !element ||\n      // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined\n      !(\"ResizeObserver\" in window)\n    ) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const { x, y, width, height, top, right, bottom, left } =\n        entry.contentRect;\n      setContentRect({\n        x,\n        y,\n        width,\n        height,\n        top,\n        right,\n        bottom,\n        left,\n      });\n    });\n    resizeObserver.observe(ref.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [ref]);\n\n  return bounds;\n}\n","import { useState, useCallback } from \"react\";\n\ntype TypeSingleSelectProps<T extends string> = {\n  initialValue?: T | \"\";\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (value: string | T) => any;\n};\n\nexport const useSelect = <T extends string>(\n  {\n    initialValue = \"\",\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: userOnChange = () => {},\n  }: TypeSingleSelectProps<T> = {\n    initialValue: \"\",\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: () => {},\n  }\n) => {\n  const [value, setValue] = useState<string | T>(initialValue);\n\n  const onChange = useCallback(\n    (newValue: string) => {\n      if (newValue !== value) {\n        setValue(newValue);\n        userOnChange(newValue);\n      }\n    },\n    [userOnChange, value]\n  );\n\n  return { value, onChange };\n};\n","import { useCallback, useEffect, useReducer, useRef } from \"react\";\n\ntype TypeMultiSelectProps<T extends string> = {\n  initialValue?: T[];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (value: Array<string | T>) => any;\n};\n\nconst valueReducer = (\n  state: Set<string>,\n  action: { type: string; value?: string }\n): Set<string> => {\n  const newState = new Set(state);\n  switch (action.type) {\n    case \"reset\": {\n      return new Set();\n    }\n    case \"toggle_item\":\n    default: {\n      if (action.value) {\n        if (newState.has(action.value)) {\n          newState.delete(action.value);\n        } else {\n          newState.add(action.value);\n        }\n      }\n      return newState;\n    }\n  }\n};\n\nexport const useMultiselect = <T extends string>(\n  {\n    initialValue = [],\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: userOnChange = () => {},\n  }: TypeMultiSelectProps<T> = {\n    initialValue: [],\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: () => {},\n  }\n) => {\n  const [value, dispatch] = useReducer(valueReducer, new Set(initialValue));\n\n  const getArrayValue = (value: Set<string | T>) =>\n    Array.from<string | T>(value);\n\n  const onChange = useCallback(\n    (newValue: string) => {\n      dispatch({ type: \"toggle_item\", value: newValue });\n    },\n    [dispatch]\n  );\n\n  const isFirstRun = useRef(true);\n\n  useEffect(() => {\n    if (isFirstRun.current) {\n      isFirstRun.current = false;\n      return;\n    }\n    userOnChange(getArrayValue(value));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [userOnChange, value]);\n\n  const onClear = useCallback(() => {\n    dispatch({ type: \"reset\" });\n  }, [dispatch]);\n\n  return { value: getArrayValue(value), onChange, onClear };\n};\n","import { canUseDOM } from \"@sproutsocial/seeds-react-utilities\";\nimport { useEffect, useMemo, useState } from \"react\";\n\ntype TypeMutationObserverInitRequired =\n  | {\n      childList: true;\n    }\n  | {\n      attributes: true;\n    }\n  | {\n      characterData: true;\n    };\n\ntype TypeMutationObserverInit = {\n  subtree?: boolean;\n  attributeOldValue?: boolean;\n  characterDataOldValue?: boolean;\n  attributeFilter?: Array<string>;\n} & TypeMutationObserverInitRequired;\n\ntype TypeMutationObserverCallback = (\n  mutationList?: MutationRecord[],\n  observer?: MutationObserver\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n) => any;\n\nconst defaultCallback: TypeMutationObserverCallback = (mutationList) =>\n  mutationList;\n\nexport function useMutationObserver(\n  targetNode: Node | null,\n  config: TypeMutationObserverInit,\n  callback: TypeMutationObserverCallback = defaultCallback\n) {\n  if (!canUseDOM()) {\n    return;\n  }\n  /* eslint-disable-next-line */\n  const [value, setValue] = useState(undefined);\n  /* eslint-disable-next-line */\n  const observer = useMemo(\n    () =>\n      new MutationObserver((mutationList, observer) => {\n        const result = callback(mutationList, observer);\n        setValue(result);\n      }),\n    [callback]\n  );\n  /* eslint-disable-next-line */\n  useEffect(() => {\n    if (targetNode) {\n      observer.observe(targetNode, config);\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, [targetNode, config, observer]);\n\n  return value;\n}\n\nexport function useMutationObserverOnce(\n  targetNode: Node | null,\n  config: TypeMutationObserverInit,\n  callback: TypeMutationObserverCallback\n) {\n  const [isObserving, setObserving] = useState(true);\n  const node = isObserving ? targetNode : null;\n  const value = useMutationObserver(node, config, callback);\n  if (value !== undefined && isObserving) {\n    setObserving(false);\n  }\n  return value;\n}\n","import { useCallback, useState } from \"react\";\n\nexport type textContentRef = ((node: Node) => void) & { current?: string };\nexport function useTextContent(initial: string) {\n  const [textContent, setTextContent] = useState(initial);\n\n  const ref: textContentRef = useCallback((node: Node) => {\n    if (node && node.textContent !== null) {\n      setTextContent(node.textContent);\n    }\n  }, []);\n\n  ref.current = textContent;\n  return ref;\n}\n","import { useRef, useEffect } from \"react\";\n\nexport function useWhyDidYouUpdate(\n  name: string,\n  props: { [key: string]: any }\n) {\n  // Get a mutable ref object where we can store props ...\n  // ... for comparison next time this hook runs.\n  const previousProps = useRef<typeof props>({});\n\n  useEffect(() => {\n    if (previousProps.current) {\n      // Get all keys from previous and current props\n      const allKeys = Object.keys({ ...previousProps.current, ...props });\n      // Use this object to keep track of changed props\n      const changesObj: typeof props = {};\n      // Iterate through keys\n      allKeys.forEach((key) => {\n        // If previous is different from current\n\n        if (previousProps.current[key] !== props[key]) {\n          // Add to changesObj\n\n          changesObj[key] = {\n            from: previousProps.current[key],\n\n            to: props[key],\n          };\n        }\n      });\n\n      // If changesObj not empty then output to console\n      if (Object.keys(changesObj).length) {\n        // eslint-disable-next-line no-console\n        console.log(\"[why-did-you-update]\", name, changesObj);\n      }\n    }\n\n    // Finally update previousProps with current props for next hook call\n    previousProps.current = props;\n  });\n}\n","import { darken, lighten } from \"polished\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * The useInteractiveColor hook has context of theme mode (light or dark)\n * and can be used to lighten or darken a color dynamically\n *\n * note: colors are limited to our theme colors\n */\nconst useInteractiveColor = (themeColor: string): string => {\n  // Throw error if used outside of a ThemeProvider (styled-components)\n  if (!useTheme()) {\n    throw new Error(\n      \"useInteractiveColor() must be used within a Styled Components ThemeProvider\"\n    );\n  }\n\n  // Get the current theme mode ie. 'light' or 'dark'\n  const theme: TypeTheme = useTheme() as TypeTheme;\n  const themeMode = theme.mode;\n\n  // If the theme mode is dark, return a lightened version of the themeValue\n  if (themeMode === \"dark\") {\n    return lighten(0.2, themeColor);\n  } else {\n    // If the theme mode is light, return a darkened version of the themeValue\n    return darken(0.2, themeColor);\n  }\n};\n\nexport { useInteractiveColor };\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeFormFieldProps extends Omit<TypeBoxProps, \"children\"> {\n  /** A function that receives props that need to be spread onto the child element */\n  children: (options: {\n    id: string;\n    isInvalid: boolean;\n    ariaDescribedby: string;\n    required?: boolean;\n  }) => React.ReactNode;\n\n  /** Text describing any error with the field's content */\n  error?: React.ReactNode;\n\n  /** Text acting as a description blurb below the main label **/\n  helperText?: React.ReactNode;\n\n  /** ID of the form element (will be auto-generated if not provided) */\n  id?: string;\n\n  /** Whether the current contents of the field are invalid */\n  isInvalid?: boolean;\n\n  /** Label text to display above the form field */\n  label: React.ReactNode;\n  qa?: Record<string, any>;\n\n  /** Whether the label text should be visually hidden */\n  isLabelHidden?: boolean;\n\n  /** Whether the form element is required */\n  required?: boolean;\n}\n","import FormField from \"./FormField\";\n\nexport default FormField;\nexport { FormField };\nexport * from \"./FormFieldTypes\";\n"],"mappings":";AAAA,SAAgB,YAAAA,iBAAgB;A;;;;ACYhC,IAAMC,IAAgB,OAAO,OAAO,EAClC,GAAG,GACH,GAAG,GACH,OAAO,GACP,QAAQ,GACR,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,EACR,CAAC;AIlBM,SAASC,EAAeC,GAAiB;AAC9C,MAAM,CAACC,GAAaC,CAAc,IAAIC,SAASH,CAAO,GAEhDI,IAAsBC,YAAaC,OAAe;AAClDA,SAAQA,EAAK,gBAAgB,QAC/BJ,EAAeI,EAAK,WAAW;EAEnC,GAAG,CAAA,CAAE;AAEL,SAAAF,EAAI,UAAUH,GACPG;AACT;;;ALZA,OAAO,SAAS;AAChB,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,sBAAsB;AAwB3B,SAWM,KAXN;AArBJ,IAAI,YAAY;AAEhB,IAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ;AAAA,EACA,KAAK;AAAA,EACL;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,CAAC,EAAE,IAAIG,UAAS,cAAc,aAAa,WAAW,EAAE;AAC9D,QAAM,UAAU,SAAS,EAAE;AAC3B,QAAM,gBAAgB,EAAe,EAAE;AACvC,QAAM,qBAAqB,EAAe,EAAE;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,qBACG,MAAM,GAAG,mBAAmB,KAAM,MAAM,cAAc;AAAA,MAEzD,+BAA6B,cAAc;AAAA,MAE1C;AAAA,wBACC,oBAAC,kBAAe,eAAY,mBAC1B,8BAAC,SAAM,SAAS,IAAI,UACjB,iBACH,GACF,IAEA,oBAAC,SAAM,IAAI,aAAa,MAAM,KAAK,SAAS,IAAI,UAC7C,iBACH;AAAA,QAED,cACC,oBAAC,QAAK,IAAG,KAAI,UAAU,KAAK,IAAI,KAAK,OAAM,gBACxC,sBACH;AAAA,QAED,SAAS;AAAA,UACR;AAAA,UACA;AAAA,UACA,iBAAiB;AAAA,UACjB,GAAI,aAAa,UAAa,EAAE,SAAS;AAAA,QAC3C,CAAC;AAAA,QACA,aAAa,SACZ;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,UAAU;AAAA,YACV,OAAM;AAAA,YACN,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,2BACG,MAAM,GAAG,yBAAyB,KAAM,mBAAmB;AAAA,YAG7D;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,oBAAQ;;;AQ9Ef,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["useState","initialBounds","useTextContent","initial","textContent","setTextContent","useState","ref","useCallback","node","useState"]}
+{"version":3,"sources":["../../src/FormField.tsx","../../../seeds-react-hooks/src/useMeasure/useMeasure.ts","../../../seeds-react-hooks/src/useSelect/useSelect.ts","../../../seeds-react-hooks/src/useMultiselect/useMultiselect.ts","../../../seeds-react-hooks/src/useMutationObserver/useMutationObserver.ts","../../../seeds-react-hooks/src/useTextContent/useTextContent.ts","../../../seeds-react-hooks/src/useWhyDidYouUpdate/useWhyDidYouUpdate.ts","../../../seeds-react-hooks/src/useInteractiveColor/useInteractiveColor.ts","../../src/FormFieldTypes.ts","../../src/index.ts"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Label from \"@sproutsocial/seeds-react-label\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport type { TypeFormFieldProps } from \"./FormFieldTypes\";\n\nlet idCounter = 0;\n\nconst FormField = ({\n  children,\n  error,\n  helperText,\n  id: identifier,\n  isInvalid = false,\n  label,\n  mb = 400,\n  qa,\n  isLabelHidden = false,\n  required,\n  ...rest\n}: TypeFormFieldProps) => {\n  const [id] = useState(identifier || `FormField-${idCounter++}`);\n  const errorId = `Error-${id}`;\n  const helperTextId = `HelperText-${id}`;\n  const containerText = useTextContent(\"\");\n  const errorContainerText = useTextContent(\"\");\n\n  const ariaDescribedby = useMemo(() => {\n    const ids = [\n      helperText && helperTextId,\n      isInvalid && error && errorId,\n    ].filter(Boolean);\n    return ids.length > 0 ? ids.join(\" \") : undefined;\n  }, [helperText, helperTextId, isInvalid, error, errorId]);\n\n  return (\n    <Box\n      {...rest}\n      {...qa}\n      mb={mb}\n      data-qa-formfield={\n        (qa && qa[\"data-qa-formfield\"]) || id || containerText.current\n      }\n      data-qa-formfield-isinvalid={isInvalid === true}\n    >\n      {isLabelHidden ? (\n        <VisuallyHidden data-testid=\"visually-hidden\">\n          <Label htmlFor={id} required={required}>\n            {label}\n          </Label>\n        </VisuallyHidden>\n      ) : (\n        <Label mb={helperText ? 100 : 300} htmlFor={id} required={required}>\n          {label}\n        </Label>\n      )}\n      {helperText && (\n        <Text\n          as=\"p\"\n          fontSize={200}\n          mb={300}\n          color=\"text.subtext\"\n          id={helperTextId}\n        >\n          {helperText}\n        </Text>\n      )}\n      {children({\n        id,\n        isInvalid,\n        ariaDescribedby,\n        ...(required !== undefined && { required }),\n      })}\n      {isInvalid && error && (\n        <Text\n          as=\"div\"\n          fontSize={200}\n          color=\"text.error\"\n          mt={300}\n          id={errorId}\n          data-qa-formfield-error={\n            (qa && qa[\"data-qa-formfield-error\"]) || errorContainerText.current\n          }\n        >\n          {error}\n        </Text>\n      )}\n    </Box>\n  );\n};\n\nexport default FormField;\n","import { useState, useLayoutEffect, type RefObject } from \"react\";\n\ninterface DOMRectObject {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\nconst initialBounds = Object.freeze({\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n});\n\nexport function useMeasure<TElement extends Element>(ref: RefObject<TElement>) {\n  const [bounds, setContentRect] =\n    useState<Readonly<DOMRectObject>>(initialBounds);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (\n      !element ||\n      // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined\n      !(\"ResizeObserver\" in window)\n    ) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const { x, y, width, height, top, right, bottom, left } =\n        entry.contentRect;\n      setContentRect({\n        x,\n        y,\n        width,\n        height,\n        top,\n        right,\n        bottom,\n        left,\n      });\n    });\n    resizeObserver.observe(ref.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [ref]);\n\n  return bounds;\n}\n","import { useState, useCallback } from \"react\";\n\ntype TypeSingleSelectProps<T extends string> = {\n  initialValue?: T | \"\";\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (value: string | T) => any;\n};\n\nexport const useSelect = <T extends string>(\n  {\n    initialValue = \"\",\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: userOnChange = () => {},\n  }: TypeSingleSelectProps<T> = {\n    initialValue: \"\",\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: () => {},\n  }\n) => {\n  const [value, setValue] = useState<string | T>(initialValue);\n\n  const onChange = useCallback(\n    (newValue: string) => {\n      if (newValue !== value) {\n        setValue(newValue);\n        userOnChange(newValue);\n      }\n    },\n    [userOnChange, value]\n  );\n\n  return { value, onChange };\n};\n","import { useCallback, useEffect, useReducer, useRef } from \"react\";\n\ntype TypeMultiSelectProps<T extends string> = {\n  initialValue?: T[];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (value: Array<string | T>) => any;\n};\n\nconst valueReducer = (\n  state: Set<string>,\n  action: { type: string; value?: string }\n): Set<string> => {\n  const newState = new Set(state);\n  switch (action.type) {\n    case \"reset\": {\n      return new Set();\n    }\n    case \"toggle_item\":\n    default: {\n      if (action.value) {\n        if (newState.has(action.value)) {\n          newState.delete(action.value);\n        } else {\n          newState.add(action.value);\n        }\n      }\n      return newState;\n    }\n  }\n};\n\nexport const useMultiselect = <T extends string>(\n  {\n    initialValue = [],\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: userOnChange = () => {},\n  }: TypeMultiSelectProps<T> = {\n    initialValue: [],\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: () => {},\n  }\n) => {\n  const [value, dispatch] = useReducer(valueReducer, new Set(initialValue));\n\n  const getArrayValue = (value: Set<string | T>) =>\n    Array.from<string | T>(value);\n\n  const onChange = useCallback(\n    (newValue: string) => {\n      dispatch({ type: \"toggle_item\", value: newValue });\n    },\n    [dispatch]\n  );\n\n  const isFirstRun = useRef(true);\n\n  useEffect(() => {\n    if (isFirstRun.current) {\n      isFirstRun.current = false;\n      return;\n    }\n    userOnChange(getArrayValue(value));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [userOnChange, value]);\n\n  const onClear = useCallback(() => {\n    dispatch({ type: \"reset\" });\n  }, [dispatch]);\n\n  return { value: getArrayValue(value), onChange, onClear };\n};\n","import { canUseDOM } from \"@sproutsocial/seeds-react-utilities\";\nimport { useEffect, useMemo, useState } from \"react\";\n\ntype TypeMutationObserverInitRequired =\n  | {\n      childList: true;\n    }\n  | {\n      attributes: true;\n    }\n  | {\n      characterData: true;\n    };\n\ntype TypeMutationObserverInit = {\n  subtree?: boolean;\n  attributeOldValue?: boolean;\n  characterDataOldValue?: boolean;\n  attributeFilter?: Array<string>;\n} & TypeMutationObserverInitRequired;\n\ntype TypeMutationObserverCallback = (\n  mutationList?: MutationRecord[],\n  observer?: MutationObserver\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n) => any;\n\nconst defaultCallback: TypeMutationObserverCallback = (mutationList) =>\n  mutationList;\n\nexport function useMutationObserver(\n  targetNode: Node | null,\n  config: TypeMutationObserverInit,\n  callback: TypeMutationObserverCallback = defaultCallback\n) {\n  if (!canUseDOM()) {\n    return;\n  }\n  /* eslint-disable-next-line */\n  const [value, setValue] = useState(undefined);\n  /* eslint-disable-next-line */\n  const observer = useMemo(\n    () =>\n      new MutationObserver((mutationList, observer) => {\n        const result = callback(mutationList, observer);\n        setValue(result);\n      }),\n    [callback]\n  );\n  /* eslint-disable-next-line */\n  useEffect(() => {\n    if (targetNode) {\n      observer.observe(targetNode, config);\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, [targetNode, config, observer]);\n\n  return value;\n}\n\nexport function useMutationObserverOnce(\n  targetNode: Node | null,\n  config: TypeMutationObserverInit,\n  callback: TypeMutationObserverCallback\n) {\n  const [isObserving, setObserving] = useState(true);\n  const node = isObserving ? targetNode : null;\n  const value = useMutationObserver(node, config, callback);\n  if (value !== undefined && isObserving) {\n    setObserving(false);\n  }\n  return value;\n}\n","import { useCallback, useState } from \"react\";\n\nexport type textContentRef = ((node: Node) => void) & { current?: string };\nexport function useTextContent(initial: string) {\n  const [textContent, setTextContent] = useState(initial);\n\n  const ref: textContentRef = useCallback((node: Node) => {\n    if (node && node.textContent !== null) {\n      setTextContent(node.textContent);\n    }\n  }, []);\n\n  ref.current = textContent;\n  return ref;\n}\n","import { useRef, useEffect } from \"react\";\n\nexport function useWhyDidYouUpdate(\n  name: string,\n  props: { [key: string]: any }\n) {\n  // Get a mutable ref object where we can store props ...\n  // ... for comparison next time this hook runs.\n  const previousProps = useRef<typeof props>({});\n\n  useEffect(() => {\n    if (previousProps.current) {\n      // Get all keys from previous and current props\n      const allKeys = Object.keys({ ...previousProps.current, ...props });\n      // Use this object to keep track of changed props\n      const changesObj: typeof props = {};\n      // Iterate through keys\n      allKeys.forEach((key) => {\n        // If previous is different from current\n\n        if (previousProps.current[key] !== props[key]) {\n          // Add to changesObj\n\n          changesObj[key] = {\n            from: previousProps.current[key],\n\n            to: props[key],\n          };\n        }\n      });\n\n      // If changesObj not empty then output to console\n      if (Object.keys(changesObj).length) {\n        // eslint-disable-next-line no-console\n        console.log(\"[why-did-you-update]\", name, changesObj);\n      }\n    }\n\n    // Finally update previousProps with current props for next hook call\n    previousProps.current = props;\n  });\n}\n","import { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * The useInteractiveColor hook has context of theme mode (light or dark)\n * and can be used to lighten or darken a color dynamically\n *\n * note: colors are limited to our theme colors\n */\nconst useInteractiveColor = (themeColor: string): string => {\n  // Throw error if used outside of a ThemeProvider (styled-components)\n  if (!useTheme()) {\n    throw new Error(\n      \"useInteractiveColor() must be used within a Styled Components ThemeProvider\"\n    );\n  }\n\n  // Get the current theme mode ie. 'light' or 'dark'\n  const theme: TypeTheme = useTheme() as TypeTheme;\n  const themeMode = theme.mode;\n\n  // If the theme mode is dark, return a lightened version of the themeValue\n  if (themeMode === \"dark\") {\n    return `color-mix(in srgb, ${themeColor}, white 20%)`;\n  } else {\n    // If the theme mode is light, return a darkened version of the themeValue\n    return `color-mix(in srgb, ${themeColor}, black 20%)`;\n  }\n};\n\nexport { useInteractiveColor };\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeFormFieldProps extends Omit<TypeBoxProps, \"children\"> {\n  /** A function that receives props that need to be spread onto the child element */\n  children: (options: {\n    id: string;\n    isInvalid: boolean;\n    ariaDescribedby?: string;\n    required?: boolean;\n  }) => React.ReactNode;\n\n  /** Text describing any error with the field's content */\n  error?: React.ReactNode;\n\n  /** Text acting as a description blurb below the main label **/\n  helperText?: React.ReactNode;\n\n  /** ID of the form element (will be auto-generated if not provided) */\n  id?: string;\n\n  /** Whether the current contents of the field are invalid */\n  isInvalid?: boolean;\n\n  /** Label text to display above the form field */\n  label: React.ReactNode;\n  qa?: Record<string, any>;\n\n  /** Whether the label text should be visually hidden */\n  isLabelHidden?: boolean;\n\n  /** Whether the form element is required */\n  required?: boolean;\n}\n","import FormField from \"./FormField\";\n\nexport default FormField;\nexport { FormField };\nexport * from \"./FormFieldTypes\";\n"],"mappings":";AAAA,SAAgB,WAAAA,UAAS,YAAAC,iBAAgB;A;;;;ACYzC,IAAMC,IAAgB,OAAO,OAAO,EAClC,GAAG,GACH,GAAG,GACH,OAAO,GACP,QAAQ,GACR,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,EACR,CAAC;AIlBM,SAASC,EAAeC,GAAiB;AAC9C,MAAM,CAACC,GAAaC,CAAc,IAAIC,SAASH,CAAO,GAEhDI,IAAsBC,YAAaC,OAAe;AAClDA,SAAQA,EAAK,gBAAgB,QAC/BJ,EAAeI,EAAK,WAAW;EAEnC,GAAG,CAAA,CAAE;AAEL,SAAAF,EAAI,UAAUH,GACPG;AACT;;;ALZA,OAAO,SAAS;AAChB,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,sBAAsB;AAiC3B,SAWM,KAXN;AA9BJ,IAAI,YAAY;AAEhB,IAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ;AAAA,EACA,KAAK;AAAA,EACL;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,CAAC,EAAE,IAAIG,UAAS,cAAc,aAAa,WAAW,EAAE;AAC9D,QAAM,UAAU,SAAS,EAAE;AAC3B,QAAM,eAAe,cAAc,EAAE;AACrC,QAAM,gBAAgB,EAAe,EAAE;AACvC,QAAM,qBAAqB,EAAe,EAAE;AAE5C,QAAM,kBAAkBC,SAAQ,MAAM;AACpC,UAAM,MAAM;AAAA,MACV,cAAc;AAAA,MACd,aAAa,SAAS;AAAA,IACxB,EAAE,OAAO,OAAO;AAChB,WAAO,IAAI,SAAS,IAAI,IAAI,KAAK,GAAG,IAAI;AAAA,EAC1C,GAAG,CAAC,YAAY,cAAc,WAAW,OAAO,OAAO,CAAC;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,qBACG,MAAM,GAAG,mBAAmB,KAAM,MAAM,cAAc;AAAA,MAEzD,+BAA6B,cAAc;AAAA,MAE1C;AAAA,wBACC,oBAAC,kBAAe,eAAY,mBAC1B,8BAAC,SAAM,SAAS,IAAI,UACjB,iBACH,GACF,IAEA,oBAAC,SAAM,IAAI,aAAa,MAAM,KAAK,SAAS,IAAI,UAC7C,iBACH;AAAA,QAED,cACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,UAAU;AAAA,YACV,IAAI;AAAA,YACJ,OAAM;AAAA,YACN,IAAI;AAAA,YAEH;AAAA;AAAA,QACH;AAAA,QAED,SAAS;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAI,aAAa,UAAa,EAAE,SAAS;AAAA,QAC3C,CAAC;AAAA,QACA,aAAa,SACZ;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,UAAU;AAAA,YACV,OAAM;AAAA,YACN,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,2BACG,MAAM,GAAG,yBAAyB,KAAM,mBAAmB;AAAA,YAG7D;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,oBAAQ;;;AQ7Ff,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["useMemo","useState","initialBounds","useTextContent","initial","textContent","setTextContent","useState","ref","useCallback","node","useState","useMemo"]}

package/dist/index.d.mts

@@ -7,7 +7,7 @@ interface TypeFormFieldProps extends Omit<TypeBoxProps, "children"> {
     children: (options: {
         id: string;
         isInvalid: boolean;
-        ariaDescribedby: string;
+        ariaDescribedby?: string;
         required?: boolean;
     }) => React.ReactNode;
     /** Text describing any error with the field's content */

package/dist/index.d.ts

@@ -7,7 +7,7 @@ interface TypeFormFieldProps extends Omit<TypeBoxProps, "children"> {
     children: (options: {
         id: string;
         isInvalid: boolean;
-        ariaDescribedby: string;
+        ariaDescribedby?: string;
         required?: boolean;
     }) => React.ReactNode;
     /** Text describing any error with the field's content */

package/dist/index.js

@@ -42,7 +42,7 @@ var import_react2 = require("react");
 var import_react = require("react");
 var import_styled_components = require("styled-components");
 var v = Object.freeze({ x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 });
-function X(r) {
+function H(r) {
   let [t, e] = (0, import_react.useState)(r), s = (0, import_react.useCallback)((n) => {
     n && n.textContent !== null && e(n.textContent);
   }, []);
@@ -71,8 +71,16 @@ var FormField = ({
 }) => {
   const [id] = (0, import_react2.useState)(identifier || `FormField-${idCounter++}`);
   const errorId = `Error-${id}`;
-  const containerText = X("");
-  const errorContainerText = X("");
+  const helperTextId = `HelperText-${id}`;
+  const containerText = H("");
+  const errorContainerText = H("");
+  const ariaDescribedby = (0, import_react2.useMemo)(() => {
+    const ids = [
+      helperText && helperTextId,
+      isInvalid && error && errorId
+    ].filter(Boolean);
+    return ids.length > 0 ? ids.join(" ") : void 0;
+  }, [helperText, helperTextId, isInvalid, error, errorId]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_seeds_react_box.default,
     {
@@ -83,11 +91,21 @@ var FormField = ({
       "data-qa-formfield-isinvalid": isInvalid === true,
       children: [
         isLabelHidden ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_visually_hidden.VisuallyHidden, { "data-testid": "visually-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_label.default, { htmlFor: id, required, children: label }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_label.default, { mb: helperText ? 100 : 300, htmlFor: id, required, children: label }),
-        helperText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.default, { as: "p", fontSize: 200, mb: 300, color: "text.subtext", children: helperText }),
+        helperText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_seeds_react_text.default,
+          {
+            as: "p",
+            fontSize: 200,
+            mb: 300,
+            color: "text.subtext",
+            id: helperTextId,
+            children: helperText
+          }
+        ),
         children({
           id,
           isInvalid,
-          ariaDescribedby: errorId,
+          ariaDescribedby,
           ...required !== void 0 && { required }
         }),
         isInvalid && error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/FormField.tsx","../../seeds-react-hooks/src/useMeasure/useMeasure.ts","../../seeds-react-hooks/src/useSelect/useSelect.ts","../../seeds-react-hooks/src/useMultiselect/useMultiselect.ts","../../seeds-react-hooks/src/useMutationObserver/useMutationObserver.ts","../../seeds-react-hooks/src/useTextContent/useTextContent.ts","../../seeds-react-hooks/src/useWhyDidYouUpdate/useWhyDidYouUpdate.ts","../../seeds-react-hooks/src/useInteractiveColor/useInteractiveColor.ts","../src/FormFieldTypes.ts"],"sourcesContent":["import FormField from \"./FormField\";\n\nexport default FormField;\nexport { FormField };\nexport * from \"./FormFieldTypes\";\n","import React, { useState } from \"react\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Label from \"@sproutsocial/seeds-react-label\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport type { TypeFormFieldProps } from \"./FormFieldTypes\";\n\nlet idCounter = 0;\n\nconst FormField = ({\n  children,\n  error,\n  helperText,\n  id: identifier,\n  isInvalid = false,\n  label,\n  mb = 400,\n  qa,\n  isLabelHidden = false,\n  required,\n  ...rest\n}: TypeFormFieldProps) => {\n  const [id] = useState(identifier || `FormField-${idCounter++}`);\n  const errorId = `Error-${id}`;\n  const containerText = useTextContent(\"\");\n  const errorContainerText = useTextContent(\"\");\n\n  return (\n    <Box\n      {...rest}\n      {...qa}\n      mb={mb}\n      data-qa-formfield={\n        (qa && qa[\"data-qa-formfield\"]) || id || containerText.current\n      }\n      data-qa-formfield-isinvalid={isInvalid === true}\n    >\n      {isLabelHidden ? (\n        <VisuallyHidden data-testid=\"visually-hidden\">\n          <Label htmlFor={id} required={required}>\n            {label}\n          </Label>\n        </VisuallyHidden>\n      ) : (\n        <Label mb={helperText ? 100 : 300} htmlFor={id} required={required}>\n          {label}\n        </Label>\n      )}\n      {helperText && (\n        <Text as=\"p\" fontSize={200} mb={300} color=\"text.subtext\">\n          {helperText}\n        </Text>\n      )}\n      {children({\n        id,\n        isInvalid,\n        ariaDescribedby: errorId,\n        ...(required !== undefined && { required }),\n      })}\n      {isInvalid && error && (\n        <Text\n          as=\"div\"\n          fontSize={200}\n          color=\"text.error\"\n          mt={300}\n          id={errorId}\n          data-qa-formfield-error={\n            (qa && qa[\"data-qa-formfield-error\"]) || errorContainerText.current\n          }\n        >\n          {error}\n        </Text>\n      )}\n    </Box>\n  );\n};\n\nexport default FormField;\n","import { useState, useLayoutEffect, type RefObject } from \"react\";\n\ninterface DOMRectObject {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\nconst initialBounds = Object.freeze({\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n});\n\nexport function useMeasure<TElement extends Element>(ref: RefObject<TElement>) {\n  const [bounds, setContentRect] =\n    useState<Readonly<DOMRectObject>>(initialBounds);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (\n      !element ||\n      // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined\n      !(\"ResizeObserver\" in window)\n    ) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const { x, y, width, height, top, right, bottom, left } =\n        entry.contentRect;\n      setContentRect({\n        x,\n        y,\n        width,\n        height,\n        top,\n        right,\n        bottom,\n        left,\n      });\n    });\n    resizeObserver.observe(ref.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [ref]);\n\n  return bounds;\n}\n","import { useState, useCallback } from \"react\";\n\ntype TypeSingleSelectProps<T extends string> = {\n  initialValue?: T | \"\";\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (value: string | T) => any;\n};\n\nexport const useSelect = <T extends string>(\n  {\n    initialValue = \"\",\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: userOnChange = () => {},\n  }: TypeSingleSelectProps<T> = {\n    initialValue: \"\",\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: () => {},\n  }\n) => {\n  const [value, setValue] = useState<string | T>(initialValue);\n\n  const onChange = useCallback(\n    (newValue: string) => {\n      if (newValue !== value) {\n        setValue(newValue);\n        userOnChange(newValue);\n      }\n    },\n    [userOnChange, value]\n  );\n\n  return { value, onChange };\n};\n","import { useCallback, useEffect, useReducer, useRef } from \"react\";\n\ntype TypeMultiSelectProps<T extends string> = {\n  initialValue?: T[];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (value: Array<string | T>) => any;\n};\n\nconst valueReducer = (\n  state: Set<string>,\n  action: { type: string; value?: string }\n): Set<string> => {\n  const newState = new Set(state);\n  switch (action.type) {\n    case \"reset\": {\n      return new Set();\n    }\n    case \"toggle_item\":\n    default: {\n      if (action.value) {\n        if (newState.has(action.value)) {\n          newState.delete(action.value);\n        } else {\n          newState.add(action.value);\n        }\n      }\n      return newState;\n    }\n  }\n};\n\nexport const useMultiselect = <T extends string>(\n  {\n    initialValue = [],\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: userOnChange = () => {},\n  }: TypeMultiSelectProps<T> = {\n    initialValue: [],\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: () => {},\n  }\n) => {\n  const [value, dispatch] = useReducer(valueReducer, new Set(initialValue));\n\n  const getArrayValue = (value: Set<string | T>) =>\n    Array.from<string | T>(value);\n\n  const onChange = useCallback(\n    (newValue: string) => {\n      dispatch({ type: \"toggle_item\", value: newValue });\n    },\n    [dispatch]\n  );\n\n  const isFirstRun = useRef(true);\n\n  useEffect(() => {\n    if (isFirstRun.current) {\n      isFirstRun.current = false;\n      return;\n    }\n    userOnChange(getArrayValue(value));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [userOnChange, value]);\n\n  const onClear = useCallback(() => {\n    dispatch({ type: \"reset\" });\n  }, [dispatch]);\n\n  return { value: getArrayValue(value), onChange, onClear };\n};\n","import { canUseDOM } from \"@sproutsocial/seeds-react-utilities\";\nimport { useEffect, useMemo, useState } from \"react\";\n\ntype TypeMutationObserverInitRequired =\n  | {\n      childList: true;\n    }\n  | {\n      attributes: true;\n    }\n  | {\n      characterData: true;\n    };\n\ntype TypeMutationObserverInit = {\n  subtree?: boolean;\n  attributeOldValue?: boolean;\n  characterDataOldValue?: boolean;\n  attributeFilter?: Array<string>;\n} & TypeMutationObserverInitRequired;\n\ntype TypeMutationObserverCallback = (\n  mutationList?: MutationRecord[],\n  observer?: MutationObserver\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n) => any;\n\nconst defaultCallback: TypeMutationObserverCallback = (mutationList) =>\n  mutationList;\n\nexport function useMutationObserver(\n  targetNode: Node | null,\n  config: TypeMutationObserverInit,\n  callback: TypeMutationObserverCallback = defaultCallback\n) {\n  if (!canUseDOM()) {\n    return;\n  }\n  /* eslint-disable-next-line */\n  const [value, setValue] = useState(undefined);\n  /* eslint-disable-next-line */\n  const observer = useMemo(\n    () =>\n      new MutationObserver((mutationList, observer) => {\n        const result = callback(mutationList, observer);\n        setValue(result);\n      }),\n    [callback]\n  );\n  /* eslint-disable-next-line */\n  useEffect(() => {\n    if (targetNode) {\n      observer.observe(targetNode, config);\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, [targetNode, config, observer]);\n\n  return value;\n}\n\nexport function useMutationObserverOnce(\n  targetNode: Node | null,\n  config: TypeMutationObserverInit,\n  callback: TypeMutationObserverCallback\n) {\n  const [isObserving, setObserving] = useState(true);\n  const node = isObserving ? targetNode : null;\n  const value = useMutationObserver(node, config, callback);\n  if (value !== undefined && isObserving) {\n    setObserving(false);\n  }\n  return value;\n}\n","import { useCallback, useState } from \"react\";\n\nexport type textContentRef = ((node: Node) => void) & { current?: string };\nexport function useTextContent(initial: string) {\n  const [textContent, setTextContent] = useState(initial);\n\n  const ref: textContentRef = useCallback((node: Node) => {\n    if (node && node.textContent !== null) {\n      setTextContent(node.textContent);\n    }\n  }, []);\n\n  ref.current = textContent;\n  return ref;\n}\n","import { useRef, useEffect } from \"react\";\n\nexport function useWhyDidYouUpdate(\n  name: string,\n  props: { [key: string]: any }\n) {\n  // Get a mutable ref object where we can store props ...\n  // ... for comparison next time this hook runs.\n  const previousProps = useRef<typeof props>({});\n\n  useEffect(() => {\n    if (previousProps.current) {\n      // Get all keys from previous and current props\n      const allKeys = Object.keys({ ...previousProps.current, ...props });\n      // Use this object to keep track of changed props\n      const changesObj: typeof props = {};\n      // Iterate through keys\n      allKeys.forEach((key) => {\n        // If previous is different from current\n\n        if (previousProps.current[key] !== props[key]) {\n          // Add to changesObj\n\n          changesObj[key] = {\n            from: previousProps.current[key],\n\n            to: props[key],\n          };\n        }\n      });\n\n      // If changesObj not empty then output to console\n      if (Object.keys(changesObj).length) {\n        // eslint-disable-next-line no-console\n        console.log(\"[why-did-you-update]\", name, changesObj);\n      }\n    }\n\n    // Finally update previousProps with current props for next hook call\n    previousProps.current = props;\n  });\n}\n","import { darken, lighten } from \"polished\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * The useInteractiveColor hook has context of theme mode (light or dark)\n * and can be used to lighten or darken a color dynamically\n *\n * note: colors are limited to our theme colors\n */\nconst useInteractiveColor = (themeColor: string): string => {\n  // Throw error if used outside of a ThemeProvider (styled-components)\n  if (!useTheme()) {\n    throw new Error(\n      \"useInteractiveColor() must be used within a Styled Components ThemeProvider\"\n    );\n  }\n\n  // Get the current theme mode ie. 'light' or 'dark'\n  const theme: TypeTheme = useTheme() as TypeTheme;\n  const themeMode = theme.mode;\n\n  // If the theme mode is dark, return a lightened version of the themeValue\n  if (themeMode === \"dark\") {\n    return lighten(0.2, themeColor);\n  } else {\n    // If the theme mode is light, return a darkened version of the themeValue\n    return darken(0.2, themeColor);\n  }\n};\n\nexport { useInteractiveColor };\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeFormFieldProps extends Omit<TypeBoxProps, \"children\"> {\n  /** A function that receives props that need to be spread onto the child element */\n  children: (options: {\n    id: string;\n    isInvalid: boolean;\n    ariaDescribedby: string;\n    required?: boolean;\n  }) => React.ReactNode;\n\n  /** Text describing any error with the field's content */\n  error?: React.ReactNode;\n\n  /** Text acting as a description blurb below the main label **/\n  helperText?: React.ReactNode;\n\n  /** ID of the form element (will be auto-generated if not provided) */\n  id?: string;\n\n  /** Whether the current contents of the field are invalid */\n  isInvalid?: boolean;\n\n  /** Label text to display above the form field */\n  label: React.ReactNode;\n  qa?: Record<string, any>;\n\n  /** Whether the label text should be visually hidden */\n  isLabelHidden?: boolean;\n\n  /** Whether the form element is required */\n  required?: boolean;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAgC;A;;;;ACYhC,IAAMC,IAAgB,OAAO,OAAO,EAClC,GAAG,GACH,GAAG,GACH,OAAO,GACP,QAAQ,GACR,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,EACR,CAAC;AIlBM,SAASC,EAAeC,GAAiB;AAC9C,MAAM,CAACC,GAAaC,CAAc,QAAIC,uBAASH,CAAO,GAEhDI,QAAsBC,0BAAaC,OAAe;AAClDA,SAAQA,EAAK,gBAAgB,QAC/BJ,EAAeI,EAAK,WAAW;EAEnC,GAAG,CAAA,CAAE;AAEL,SAAAF,EAAI,UAAUH,GACPG;AACT;;;ALZA,6BAAgB;AAChB,+BAAkB;AAClB,8BAAiB;AACjB,yCAA+B;AAwB3B;AArBJ,IAAI,YAAY;AAEhB,IAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ;AAAA,EACA,KAAK;AAAA,EACL;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,CAAC,EAAE,QAAI,wBAAS,cAAc,aAAa,WAAW,EAAE;AAC9D,QAAM,UAAU,SAAS,EAAE;AAC3B,QAAM,gBAAgB,EAAe,EAAE;AACvC,QAAM,qBAAqB,EAAe,EAAE;AAE5C,SACE;AAAA,IAAC,uBAAAG;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,qBACG,MAAM,GAAG,mBAAmB,KAAM,MAAM,cAAc;AAAA,MAEzD,+BAA6B,cAAc;AAAA,MAE1C;AAAA,wBACC,4CAAC,qDAAe,eAAY,mBAC1B,sDAAC,yBAAAC,SAAA,EAAM,SAAS,IAAI,UACjB,iBACH,GACF,IAEA,4CAAC,yBAAAA,SAAA,EAAM,IAAI,aAAa,MAAM,KAAK,SAAS,IAAI,UAC7C,iBACH;AAAA,QAED,cACC,4CAAC,wBAAAC,SAAA,EAAK,IAAG,KAAI,UAAU,KAAK,IAAI,KAAK,OAAM,gBACxC,sBACH;AAAA,QAED,SAAS;AAAA,UACR;AAAA,UACA;AAAA,UACA,iBAAiB;AAAA,UACjB,GAAI,aAAa,UAAa,EAAE,SAAS;AAAA,QAC3C,CAAC;AAAA,QACA,aAAa,SACZ;AAAA,UAAC,wBAAAA;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,UAAU;AAAA,YACV,OAAM;AAAA,YACN,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,2BACG,MAAM,GAAG,yBAAyB,KAAM,mBAAmB;AAAA,YAG7D;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,oBAAQ;;;AQ9Ef,IAAAC,SAAuB;;;ATEvB,IAAO,gBAAQ;","names":["import_react","initialBounds","useTextContent","initial","textContent","setTextContent","useState","ref","useCallback","node","Box","Label","Text","React"]}
+{"version":3,"sources":["../src/index.ts","../src/FormField.tsx","../../seeds-react-hooks/src/useMeasure/useMeasure.ts","../../seeds-react-hooks/src/useSelect/useSelect.ts","../../seeds-react-hooks/src/useMultiselect/useMultiselect.ts","../../seeds-react-hooks/src/useMutationObserver/useMutationObserver.ts","../../seeds-react-hooks/src/useTextContent/useTextContent.ts","../../seeds-react-hooks/src/useWhyDidYouUpdate/useWhyDidYouUpdate.ts","../../seeds-react-hooks/src/useInteractiveColor/useInteractiveColor.ts","../src/FormFieldTypes.ts"],"sourcesContent":["import FormField from \"./FormField\";\n\nexport default FormField;\nexport { FormField };\nexport * from \"./FormFieldTypes\";\n","import React, { useMemo, useState } from \"react\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Label from \"@sproutsocial/seeds-react-label\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport type { TypeFormFieldProps } from \"./FormFieldTypes\";\n\nlet idCounter = 0;\n\nconst FormField = ({\n  children,\n  error,\n  helperText,\n  id: identifier,\n  isInvalid = false,\n  label,\n  mb = 400,\n  qa,\n  isLabelHidden = false,\n  required,\n  ...rest\n}: TypeFormFieldProps) => {\n  const [id] = useState(identifier || `FormField-${idCounter++}`);\n  const errorId = `Error-${id}`;\n  const helperTextId = `HelperText-${id}`;\n  const containerText = useTextContent(\"\");\n  const errorContainerText = useTextContent(\"\");\n\n  const ariaDescribedby = useMemo(() => {\n    const ids = [\n      helperText && helperTextId,\n      isInvalid && error && errorId,\n    ].filter(Boolean);\n    return ids.length > 0 ? ids.join(\" \") : undefined;\n  }, [helperText, helperTextId, isInvalid, error, errorId]);\n\n  return (\n    <Box\n      {...rest}\n      {...qa}\n      mb={mb}\n      data-qa-formfield={\n        (qa && qa[\"data-qa-formfield\"]) || id || containerText.current\n      }\n      data-qa-formfield-isinvalid={isInvalid === true}\n    >\n      {isLabelHidden ? (\n        <VisuallyHidden data-testid=\"visually-hidden\">\n          <Label htmlFor={id} required={required}>\n            {label}\n          </Label>\n        </VisuallyHidden>\n      ) : (\n        <Label mb={helperText ? 100 : 300} htmlFor={id} required={required}>\n          {label}\n        </Label>\n      )}\n      {helperText && (\n        <Text\n          as=\"p\"\n          fontSize={200}\n          mb={300}\n          color=\"text.subtext\"\n          id={helperTextId}\n        >\n          {helperText}\n        </Text>\n      )}\n      {children({\n        id,\n        isInvalid,\n        ariaDescribedby,\n        ...(required !== undefined && { required }),\n      })}\n      {isInvalid && error && (\n        <Text\n          as=\"div\"\n          fontSize={200}\n          color=\"text.error\"\n          mt={300}\n          id={errorId}\n          data-qa-formfield-error={\n            (qa && qa[\"data-qa-formfield-error\"]) || errorContainerText.current\n          }\n        >\n          {error}\n        </Text>\n      )}\n    </Box>\n  );\n};\n\nexport default FormField;\n","import { useState, useLayoutEffect, type RefObject } from \"react\";\n\ninterface DOMRectObject {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\nconst initialBounds = Object.freeze({\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n});\n\nexport function useMeasure<TElement extends Element>(ref: RefObject<TElement>) {\n  const [bounds, setContentRect] =\n    useState<Readonly<DOMRectObject>>(initialBounds);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (\n      !element ||\n      // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined\n      !(\"ResizeObserver\" in window)\n    ) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const { x, y, width, height, top, right, bottom, left } =\n        entry.contentRect;\n      setContentRect({\n        x,\n        y,\n        width,\n        height,\n        top,\n        right,\n        bottom,\n        left,\n      });\n    });\n    resizeObserver.observe(ref.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [ref]);\n\n  return bounds;\n}\n","import { useState, useCallback } from \"react\";\n\ntype TypeSingleSelectProps<T extends string> = {\n  initialValue?: T | \"\";\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (value: string | T) => any;\n};\n\nexport const useSelect = <T extends string>(\n  {\n    initialValue = \"\",\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: userOnChange = () => {},\n  }: TypeSingleSelectProps<T> = {\n    initialValue: \"\",\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: () => {},\n  }\n) => {\n  const [value, setValue] = useState<string | T>(initialValue);\n\n  const onChange = useCallback(\n    (newValue: string) => {\n      if (newValue !== value) {\n        setValue(newValue);\n        userOnChange(newValue);\n      }\n    },\n    [userOnChange, value]\n  );\n\n  return { value, onChange };\n};\n","import { useCallback, useEffect, useReducer, useRef } from \"react\";\n\ntype TypeMultiSelectProps<T extends string> = {\n  initialValue?: T[];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (value: Array<string | T>) => any;\n};\n\nconst valueReducer = (\n  state: Set<string>,\n  action: { type: string; value?: string }\n): Set<string> => {\n  const newState = new Set(state);\n  switch (action.type) {\n    case \"reset\": {\n      return new Set();\n    }\n    case \"toggle_item\":\n    default: {\n      if (action.value) {\n        if (newState.has(action.value)) {\n          newState.delete(action.value);\n        } else {\n          newState.add(action.value);\n        }\n      }\n      return newState;\n    }\n  }\n};\n\nexport const useMultiselect = <T extends string>(\n  {\n    initialValue = [],\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: userOnChange = () => {},\n  }: TypeMultiSelectProps<T> = {\n    initialValue: [],\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: () => {},\n  }\n) => {\n  const [value, dispatch] = useReducer(valueReducer, new Set(initialValue));\n\n  const getArrayValue = (value: Set<string | T>) =>\n    Array.from<string | T>(value);\n\n  const onChange = useCallback(\n    (newValue: string) => {\n      dispatch({ type: \"toggle_item\", value: newValue });\n    },\n    [dispatch]\n  );\n\n  const isFirstRun = useRef(true);\n\n  useEffect(() => {\n    if (isFirstRun.current) {\n      isFirstRun.current = false;\n      return;\n    }\n    userOnChange(getArrayValue(value));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [userOnChange, value]);\n\n  const onClear = useCallback(() => {\n    dispatch({ type: \"reset\" });\n  }, [dispatch]);\n\n  return { value: getArrayValue(value), onChange, onClear };\n};\n","import { canUseDOM } from \"@sproutsocial/seeds-react-utilities\";\nimport { useEffect, useMemo, useState } from \"react\";\n\ntype TypeMutationObserverInitRequired =\n  | {\n      childList: true;\n    }\n  | {\n      attributes: true;\n    }\n  | {\n      characterData: true;\n    };\n\ntype TypeMutationObserverInit = {\n  subtree?: boolean;\n  attributeOldValue?: boolean;\n  characterDataOldValue?: boolean;\n  attributeFilter?: Array<string>;\n} & TypeMutationObserverInitRequired;\n\ntype TypeMutationObserverCallback = (\n  mutationList?: MutationRecord[],\n  observer?: MutationObserver\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n) => any;\n\nconst defaultCallback: TypeMutationObserverCallback = (mutationList) =>\n  mutationList;\n\nexport function useMutationObserver(\n  targetNode: Node | null,\n  config: TypeMutationObserverInit,\n  callback: TypeMutationObserverCallback = defaultCallback\n) {\n  if (!canUseDOM()) {\n    return;\n  }\n  /* eslint-disable-next-line */\n  const [value, setValue] = useState(undefined);\n  /* eslint-disable-next-line */\n  const observer = useMemo(\n    () =>\n      new MutationObserver((mutationList, observer) => {\n        const result = callback(mutationList, observer);\n        setValue(result);\n      }),\n    [callback]\n  );\n  /* eslint-disable-next-line */\n  useEffect(() => {\n    if (targetNode) {\n      observer.observe(targetNode, config);\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, [targetNode, config, observer]);\n\n  return value;\n}\n\nexport function useMutationObserverOnce(\n  targetNode: Node | null,\n  config: TypeMutationObserverInit,\n  callback: TypeMutationObserverCallback\n) {\n  const [isObserving, setObserving] = useState(true);\n  const node = isObserving ? targetNode : null;\n  const value = useMutationObserver(node, config, callback);\n  if (value !== undefined && isObserving) {\n    setObserving(false);\n  }\n  return value;\n}\n","import { useCallback, useState } from \"react\";\n\nexport type textContentRef = ((node: Node) => void) & { current?: string };\nexport function useTextContent(initial: string) {\n  const [textContent, setTextContent] = useState(initial);\n\n  const ref: textContentRef = useCallback((node: Node) => {\n    if (node && node.textContent !== null) {\n      setTextContent(node.textContent);\n    }\n  }, []);\n\n  ref.current = textContent;\n  return ref;\n}\n","import { useRef, useEffect } from \"react\";\n\nexport function useWhyDidYouUpdate(\n  name: string,\n  props: { [key: string]: any }\n) {\n  // Get a mutable ref object where we can store props ...\n  // ... for comparison next time this hook runs.\n  const previousProps = useRef<typeof props>({});\n\n  useEffect(() => {\n    if (previousProps.current) {\n      // Get all keys from previous and current props\n      const allKeys = Object.keys({ ...previousProps.current, ...props });\n      // Use this object to keep track of changed props\n      const changesObj: typeof props = {};\n      // Iterate through keys\n      allKeys.forEach((key) => {\n        // If previous is different from current\n\n        if (previousProps.current[key] !== props[key]) {\n          // Add to changesObj\n\n          changesObj[key] = {\n            from: previousProps.current[key],\n\n            to: props[key],\n          };\n        }\n      });\n\n      // If changesObj not empty then output to console\n      if (Object.keys(changesObj).length) {\n        // eslint-disable-next-line no-console\n        console.log(\"[why-did-you-update]\", name, changesObj);\n      }\n    }\n\n    // Finally update previousProps with current props for next hook call\n    previousProps.current = props;\n  });\n}\n","import { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * The useInteractiveColor hook has context of theme mode (light or dark)\n * and can be used to lighten or darken a color dynamically\n *\n * note: colors are limited to our theme colors\n */\nconst useInteractiveColor = (themeColor: string): string => {\n  // Throw error if used outside of a ThemeProvider (styled-components)\n  if (!useTheme()) {\n    throw new Error(\n      \"useInteractiveColor() must be used within a Styled Components ThemeProvider\"\n    );\n  }\n\n  // Get the current theme mode ie. 'light' or 'dark'\n  const theme: TypeTheme = useTheme() as TypeTheme;\n  const themeMode = theme.mode;\n\n  // If the theme mode is dark, return a lightened version of the themeValue\n  if (themeMode === \"dark\") {\n    return `color-mix(in srgb, ${themeColor}, white 20%)`;\n  } else {\n    // If the theme mode is light, return a darkened version of the themeValue\n    return `color-mix(in srgb, ${themeColor}, black 20%)`;\n  }\n};\n\nexport { useInteractiveColor };\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeFormFieldProps extends Omit<TypeBoxProps, \"children\"> {\n  /** A function that receives props that need to be spread onto the child element */\n  children: (options: {\n    id: string;\n    isInvalid: boolean;\n    ariaDescribedby?: string;\n    required?: boolean;\n  }) => React.ReactNode;\n\n  /** Text describing any error with the field's content */\n  error?: React.ReactNode;\n\n  /** Text acting as a description blurb below the main label **/\n  helperText?: React.ReactNode;\n\n  /** ID of the form element (will be auto-generated if not provided) */\n  id?: string;\n\n  /** Whether the current contents of the field are invalid */\n  isInvalid?: boolean;\n\n  /** Label text to display above the form field */\n  label: React.ReactNode;\n  qa?: Record<string, any>;\n\n  /** Whether the label text should be visually hidden */\n  isLabelHidden?: boolean;\n\n  /** Whether the form element is required */\n  required?: boolean;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAyC;A;;;;ACYzC,IAAMC,IAAgB,OAAO,OAAO,EAClC,GAAG,GACH,GAAG,GACH,OAAO,GACP,QAAQ,GACR,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,EACR,CAAC;AIlBM,SAASC,EAAeC,GAAiB;AAC9C,MAAM,CAACC,GAAaC,CAAc,QAAIC,uBAASH,CAAO,GAEhDI,QAAsBC,0BAAaC,OAAe;AAClDA,SAAQA,EAAK,gBAAgB,QAC/BJ,EAAeI,EAAK,WAAW;EAEnC,GAAG,CAAA,CAAE;AAEL,SAAAF,EAAI,UAAUH,GACPG;AACT;;;ALZA,6BAAgB;AAChB,+BAAkB;AAClB,8BAAiB;AACjB,yCAA+B;AAiC3B;AA9BJ,IAAI,YAAY;AAEhB,IAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ;AAAA,EACA,KAAK;AAAA,EACL;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,CAAC,EAAE,QAAI,wBAAS,cAAc,aAAa,WAAW,EAAE;AAC9D,QAAM,UAAU,SAAS,EAAE;AAC3B,QAAM,eAAe,cAAc,EAAE;AACrC,QAAM,gBAAgB,EAAe,EAAE;AACvC,QAAM,qBAAqB,EAAe,EAAE;AAE5C,QAAM,sBAAkB,uBAAQ,MAAM;AACpC,UAAM,MAAM;AAAA,MACV,cAAc;AAAA,MACd,aAAa,SAAS;AAAA,IACxB,EAAE,OAAO,OAAO;AAChB,WAAO,IAAI,SAAS,IAAI,IAAI,KAAK,GAAG,IAAI;AAAA,EAC1C,GAAG,CAAC,YAAY,cAAc,WAAW,OAAO,OAAO,CAAC;AAExD,SACE;AAAA,IAAC,uBAAAG;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,qBACG,MAAM,GAAG,mBAAmB,KAAM,MAAM,cAAc;AAAA,MAEzD,+BAA6B,cAAc;AAAA,MAE1C;AAAA,wBACC,4CAAC,qDAAe,eAAY,mBAC1B,sDAAC,yBAAAC,SAAA,EAAM,SAAS,IAAI,UACjB,iBACH,GACF,IAEA,4CAAC,yBAAAA,SAAA,EAAM,IAAI,aAAa,MAAM,KAAK,SAAS,IAAI,UAC7C,iBACH;AAAA,QAED,cACC;AAAA,UAAC,wBAAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,UAAU;AAAA,YACV,IAAI;AAAA,YACJ,OAAM;AAAA,YACN,IAAI;AAAA,YAEH;AAAA;AAAA,QACH;AAAA,QAED,SAAS;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAI,aAAa,UAAa,EAAE,SAAS;AAAA,QAC3C,CAAC;AAAA,QACA,aAAa,SACZ;AAAA,UAAC,wBAAAA;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,UAAU;AAAA,YACV,OAAM;AAAA,YACN,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,2BACG,MAAM,GAAG,yBAAyB,KAAM,mBAAmB;AAAA,YAG7D;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,oBAAQ;;;AQ7Ff,IAAAC,SAAuB;;;ATEvB,IAAO,gBAAQ;","names":["import_react","initialBounds","useTextContent","initial","textContent","setTextContent","useState","ref","useCallback","node","Box","Label","Text","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-form-field",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "Seeds React FormField",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,12 +18,12 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^3.2.0",
+    "@sproutsocial/seeds-react-theme": "^3.3.0",
     "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-box": "^1.1.6",
+    "@sproutsocial/seeds-react-box": "^1.1.8",
     "@sproutsocial/seeds-react-text": "^1.3.2",
-    "@sproutsocial/seeds-react-visually-hidden": "^1.0.6",
-    "@sproutsocial/seeds-react-label": "^1.0.5"
+    "@sproutsocial/seeds-react-visually-hidden": "^1.0.8",
+    "@sproutsocial/seeds-react-label": "^1.0.7"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
@@ -36,7 +36,7 @@
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-testing": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
-    "@sproutsocial/seeds-react-input": "^1.4.10"
+    "@sproutsocial/seeds-react-input": "^1.4.15"
   },
   "peerDependencies": {
     "styled-components": "^5.2.3"

package/src/FormField.stories.tsx

@@ -18,8 +18,28 @@ const meta: Meta<FormFieldStoryArgs> = {
   args: {
     value: "",
     mb: 100,
-    isInvalid: true,
+    isInvalid: false,
     required: false,
+    helperText: "This is a line of helper text",
+    error: "",
+  },
+  argTypes: {
+    helperText: {
+      control: "text",
+      description: "Text acting as a description blurb below the main label",
+    },
+    error: {
+      control: "text",
+      description: "Text describing any error with the field's content",
+    },
+    isInvalid: {
+      control: "boolean",
+      description: "Whether the current contents of the field are invalid",
+    },
+    value: {
+      control: "text",
+      description: "Input value",
+    },
   },
 };
 export default meta;
@@ -28,9 +48,11 @@ export const Default: Story = {
   render: (args) => (
     <Box width="443px" margin="0 auto">
       <FormField
-        label="Title"
-        helperText="This is a line of helper text"
+        label="Form label"
+        helperText={args.helperText}
         required={args.required}
+        error={args.error}
+        isInvalid={args.isInvalid}
       >
         {(props) => <Input {...props} name="title" value={args.value} />}
       </FormField>
@@ -58,12 +80,16 @@ export const Default: Story = {
 };
 
 export const Error: Story = {
+  args: {
+    isInvalid: true,
+    error: "There is an error associated with this input",
+  },
   render: (args) => (
     <Box width="443px" margin="0 auto">
       <FormField
         label="Title"
         helperText="This is a line of helper text"
-        error="There is an error associated with this input"
+        error={args.error}
         isInvalid={args.isInvalid}
         required={args.required}
       >

package/src/FormField.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { useTextContent } from "@sproutsocial/seeds-react-hooks";
 import Box from "@sproutsocial/seeds-react-box";
 import Label from "@sproutsocial/seeds-react-label";
@@ -23,9 +23,18 @@ const FormField = ({
 }: TypeFormFieldProps) => {
   const [id] = useState(identifier || `FormField-${idCounter++}`);
   const errorId = `Error-${id}`;
+  const helperTextId = `HelperText-${id}`;
   const containerText = useTextContent("");
   const errorContainerText = useTextContent("");
 
+  const ariaDescribedby = useMemo(() => {
+    const ids = [
+      helperText && helperTextId,
+      isInvalid && error && errorId,
+    ].filter(Boolean);
+    return ids.length > 0 ? ids.join(" ") : undefined;
+  }, [helperText, helperTextId, isInvalid, error, errorId]);
+
   return (
     <Box
       {...rest}
@@ -48,14 +57,20 @@ const FormField = ({
         </Label>
       )}
       {helperText && (
-        <Text as="p" fontSize={200} mb={300} color="text.subtext">
+        <Text
+          as="p"
+          fontSize={200}
+          mb={300}
+          color="text.subtext"
+          id={helperTextId}
+        >
           {helperText}
         </Text>
       )}
       {children({
         id,
         isInvalid,
-        ariaDescribedby: errorId,
+        ariaDescribedby,
         ...(required !== undefined && { required }),
       })}
       {isInvalid && error && (

package/src/FormFieldTypes.ts

@@ -6,7 +6,7 @@ export interface TypeFormFieldProps extends Omit<TypeBoxProps, "children"> {
   children: (options: {
     id: string;
     isInvalid: boolean;
-    ariaDescribedby: string;
+    ariaDescribedby?: string;
     required?: boolean;
   }) => React.ReactNode;
 

package/src/__tests__/FormField.test.tsx

@@ -7,12 +7,9 @@ describe("FormField", () => {
   const label = "Label";
   const inputVal = "value";
   it("passes the autogenerated id down", () => {
+    const errorText = "There is an error associated with this input";
     render(
-      <FormField
-        label={label}
-        error="There is an error associated with this input"
-        isInvalid={true}
-      >
+      <FormField label={label} error={errorText} isInvalid={true}>
         {(props) => (
           <Input
             {...props}
@@ -23,7 +20,12 @@ describe("FormField", () => {
         )}
       </FormField>
     );
-    expect(screen.getByLabelText(label)).toHaveValue(inputVal);
+    const input = screen.getByLabelText(label);
+    expect(input).toHaveValue(inputVal);
+    // Verify aria-describedby is set to error ID
+    const describedBy = input.getAttribute("aria-describedby");
+    expect(describedBy).toContain("Error-");
+    expect(screen.getByText(errorText)).toHaveAttribute("id", describedBy);
   });
   it("passes the id passed in down to the input field", () => {
     const manualId = "manualId";
@@ -65,6 +67,10 @@ describe("FormField", () => {
       </FormField>
     );
     expect(screen.getByTestId("visually-hidden")).toBeInTheDocument();
+    // Verify aria-describedby is not set when no helper text or error
+    expect(screen.getByLabelText(label)).not.toHaveAttribute(
+      "aria-describedby"
+    );
   });
   it("should be required when required is true", () => {
     render(
@@ -74,4 +80,36 @@ describe("FormField", () => {
     );
     expect(screen.getByLabelText(`${label}*`)).toBeRequired();
   });
+  it("should set aria-describedby to helper text ID when helper text is provided", () => {
+    const helperText = "This is helper text";
+    render(
+      <FormField label={label} helperText={helperText}>
+        {(props) => <Input {...props} name="title" />}
+      </FormField>
+    );
+    const input = screen.getByLabelText(label);
+    const describedBy = input.getAttribute("aria-describedby");
+    expect(describedBy).toContain("HelperText-");
+    expect(screen.getByText(helperText)).toHaveAttribute("id", describedBy);
+  });
+  it("should set aria-describedby to both helper text and error IDs when both are provided", () => {
+    const helperText = "This is helper text";
+    const errorText = "This is an error";
+    render(
+      <FormField
+        label={label}
+        helperText={helperText}
+        error={errorText}
+        isInvalid={true}
+      >
+        {(props) => <Input {...props} name="title" />}
+      </FormField>
+    );
+    const input = screen.getByLabelText(label);
+    const describedBy = input.getAttribute("aria-describedby");
+    const ids = describedBy!.split(" ");
+    expect(ids).toHaveLength(2);
+    expect(ids[0]).toContain("HelperText-");
+    expect(ids[1]).toContain("Error-");
+  });
 });