@kaizen/components 1.67.2 → 1.67.4

package/dist/types/Filter/FilterBar/context/FilterBarContext.d.ts

@@ -14,6 +14,8 @@ export type FilterBarContextValue<Value, ValuesMap extends FiltersValues = Recor
     hideFilter: <Id extends keyof ValuesMap>(id: Id) => void;
     getInactiveFilters: () => Array<FilterAttributes<ValuesMap>>;
     clearAllFilters: () => void;
+    setFocus: <Id extends keyof ValuesMap>(id: Id | undefined) => void;
+    focusId?: keyof ValuesMap;
 };
 export declare const useFilterBarContext: <Value, Values extends FiltersValues = Record<string, Value>>() => FilterBarContextValue<Value, Values>;
 export type FilterBarProviderProps<ValuesMap extends FiltersValues> = {

package/dist/types/Filter/FilterBar/context/reducer/filterBarStateReducer.d.ts

@@ -18,6 +18,9 @@ type Actions<ValuesMap extends FiltersValues> = {
 } | {
     type: "update_filter_labels";
     data: Filters<ValuesMap>;
+} | {
+    type: "set_focus";
+    id: keyof ValuesMap | undefined;
 };
 export declare const filterBarStateReducer: <ValuesMap extends FiltersValues>(state: FilterBarState<ValuesMap>, action: Actions<ValuesMap>) => FilterBarState<ValuesMap>;
 export {};

package/dist/types/Filter/FilterBar/context/types.d.ts

@@ -24,5 +24,6 @@ export type FilterBarState<ValuesMap extends FiltersValues> = {
     activeFilterIds: Set<keyof ValuesMap>;
     values: Partial<ValuesMap>;
     dependentFilterIds: Set<keyof ValuesMap>;
+    focusId?: keyof ValuesMap;
 };
 export type ActiveFiltersArray<ValuesMap extends FiltersValues> = Array<FilterAttributes<ValuesMap>>;

package/dist/types/Filter/FilterMultiSelect/FilterMultiSelect.d.ts

@@ -15,9 +15,10 @@ type SelectionProps = {
 export type FilterMultiSelectProps = {
     trigger: (value?: MenuTriggerProviderContextType) => React.ReactNode;
     children: (value?: SelectionProviderContextType) => React.ReactNode;
+    triggerRef?: React.RefObject<HTMLButtonElement>;
 } & Omit<MenuPopupProps, "children"> & Omit<MenuTriggerProviderProps, "children"> & SelectionProps;
 export declare const FilterMultiSelect: {
-    ({ trigger, children, isOpen, defaultOpen, onOpenChange, isLoading, loadingSkeleton, label, items, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionMode, onSearchInputChange, }: FilterMultiSelectProps): JSX.Element;
+    ({ trigger, children, isOpen, defaultOpen, onOpenChange, isLoading, loadingSkeleton, label, items, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionMode, onSearchInputChange, triggerRef, }: FilterMultiSelectProps): JSX.Element;
     displayName: string;
     TriggerButton: {
         ({ selectedOptionLabels, label, classNameOverride, labelCharacterLimitBeforeTruncate, }: import("./subcomponents/Trigger").FilterTriggerButtonProps): JSX.Element;

package/dist/types/Filter/FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.d.ts

@@ -7,6 +7,7 @@ export type MenuTriggerProviderProps = {
     defaultOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     children: React.ReactNode;
+    triggerRef?: React.RefObject<HTMLButtonElement>;
 };
 export type MenuTriggerProviderContextType = {
     menuTriggerProps: HTMLAttributes<HTMLElement>;
@@ -15,6 +16,6 @@ export type MenuTriggerProviderContextType = {
     menuTriggerState: MenuTriggerState;
     buttonRef: React.RefObject<HTMLButtonElement>;
 };
-export declare function MenuTriggerProvider({ isOpen, defaultOpen, onOpenChange, children, }: MenuTriggerProviderProps): JSX.Element;
+export declare function MenuTriggerProvider({ isOpen, defaultOpen, onOpenChange, children, triggerRef, }: MenuTriggerProviderProps): JSX.Element;
 export declare const useMenuTriggerContext: () => MenuTriggerProviderContextType;
 export declare const MenuTriggerConsumer: ({ children, }: React.ConsumerProps<MenuTriggerProviderContextType>) => JSX.Element;

package/dist/types/TextArea/TextArea.d.ts

@@ -3,6 +3,10 @@ import { OverrideClassName } from "../types/OverrideClassName";
 export type TextAreaProps = {
     textAreaRef?: React.RefObject<HTMLTextAreaElement>;
     status?: "default" | "error" | "caution";
+    /**
+     * Grows the input height as more content is added
+     * Replace with CSS field-sizing once it's supported by all major browsers
+     */
     autogrow?: boolean;
     reversed?: boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.67.2",
+  "version": "1.67.4",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Filter/FilterBar/FilterBar.spec.tsx

@@ -65,6 +65,7 @@ const simpleFilters = [
 type ValuesRemovable = {
   flavour: string
   topping: string
+  others: string
 }
 
 const filtersRemovable = [
@@ -86,6 +87,37 @@ const filtersRemovable = [
     ),
     isRemovable: true,
   },
+  {
+    id: "others",
+    name: "Others",
+    Component: (
+      <FilterBar.MultiSelect
+        items={[
+          { value: "gluten-free", label: "Gluten Free" },
+          { value: "no-sugar", label: "No Sugar" },
+          { value: "dairy-free", label: "Dairy Free" },
+        ]}
+      >
+        {(): JSX.Element => (
+          <>
+            <FilterMultiSelect.SearchInput />
+            <FilterMultiSelect.ListBox>
+              {({ allItems }): JSX.Element | JSX.Element[] =>
+                allItems.map(item => (
+                  <FilterMultiSelect.Option key={item.key} item={item} />
+                ))
+              }
+            </FilterMultiSelect.ListBox>
+            <FilterMultiSelect.MenuFooter>
+              <FilterMultiSelect.SelectAllButton />
+              <FilterMultiSelect.ClearButton />
+            </FilterMultiSelect.MenuFooter>
+          </>
+        )}
+      </FilterBar.MultiSelect>
+    ),
+    isRemovable: true,
+  },
 ] satisfies Filters<ValuesRemovable>
 
 type ValuesDependent = {
@@ -288,6 +320,61 @@ describe("<FilterBar />", () => {
       expect(filters[1]).toHaveTextContent("Flavour")
       expect(filters[2]).toHaveTextContent("Sugar Level")
     })
+
+    it("moves focus to recently added filter button", async () => {
+      const { getByRole } = render(
+        <FilterBarWrapper<ValuesSimple>
+          filters={simpleFilters.map(filter => ({
+            ...filter,
+            isRemovable: true,
+          }))}
+        />
+      )
+      await waitForI18nContent()
+
+      const addFiltersButton = getByRole("button", { name: "Add Filters" })
+      await user.click(addFiltersButton)
+
+      const menuOptionIceLevel = getByRole("button", { name: "Ice Level" })
+      await user.click(menuOptionIceLevel)
+
+      expect(getByRole("button", { name: "Ice Level" })).toHaveFocus()
+    })
+
+    it("moves focus to recently added filter button in the FilterMultiSelect case", async () => {
+      const { getByRole } = render(
+        <FilterBarWrapper<ValuesRemovable> filters={filtersRemovable} />
+      )
+      await waitForI18nContent()
+
+      const addFiltersButton = getByRole("button", { name: "Add Filters" })
+      await user.click(addFiltersButton)
+
+      const menuOptionOthers = getByRole("button", { name: "Others" })
+      await user.click(menuOptionOthers)
+
+      expect(getByRole("button", { name: "Others" })).toHaveFocus()
+    })
+
+    it("restores focus to the add filter button after remove", async () => {
+      const { getByRole } = render(
+        <FilterBarWrapper<ValuesRemovable>
+          filters={filtersRemovable}
+          defaultValues={{ topping: "pearls" }}
+        />
+      )
+      await waitForI18nContent()
+
+      const filterButton = getByRole("button", { name: "Topping : Pearls" })
+      expect(filterButton).toBeVisible()
+
+      await user.click(getByRole("button", { name: "Remove filter - Topping" }))
+      await waitFor(() => {
+        expect(filterButton).not.toBeInTheDocument()
+      })
+
+      expect(getByRole("button", { name: "Add Filters" })).toHaveFocus()
+    })
   })
 
   describe("Dependent filters", () => {

package/src/Filter/FilterBar/context/FilterBarContext.tsx

@@ -43,6 +43,8 @@ export type FilterBarContextValue<
   hideFilter: <Id extends keyof ValuesMap>(id: Id) => void
   getInactiveFilters: () => Array<FilterAttributes<ValuesMap>>
   clearAllFilters: () => void
+  setFocus: <Id extends keyof ValuesMap>(id: Id | undefined) => void
+  focusId?: keyof ValuesMap
 }
 
 const FilterBarContext = React.createContext<FilterBarContextValue<any> | null>(
@@ -119,10 +121,13 @@ export const FilterBarProvider = <ValuesMap extends FiltersValues>({
         values: { ...values, [id]: getValidValue(newValue) },
       })
     },
-    showFilter: <Id extends keyof ValuesMap>(id: Id): void =>
-      dispatch({ type: "activate_filter", id }),
+    showFilter: <Id extends keyof ValuesMap>(id: Id): void => {
+      dispatch({ type: "activate_filter", id })
+      dispatch({ type: "set_focus", id })
+    },
     hideFilter: <Id extends keyof ValuesMap>(id: Id): void => {
       dispatch({ type: "deactivate_filter", id })
+      dispatch({ type: "set_focus", id: "add_filter" })
     },
     getInactiveFilters: () => getInactiveFilters<ValuesMap>(state),
     clearAllFilters: () => {
@@ -132,6 +137,10 @@ export const FilterBarProvider = <ValuesMap extends FiltersValues>({
       })
       dispatch({ type: "update_values", values: {} })
     },
+    setFocus: <Id extends keyof ValuesMap>(id: Id | undefined) => {
+      dispatch({ type: "set_focus", id })
+    },
+    focusId: state.focusId,
   } satisfies FilterBarContextValue<any, ValuesMap>
 
   useEffect(() => {

package/src/Filter/FilterBar/context/reducer/filterBarStateReducer.ts

@@ -15,12 +15,19 @@ type Actions<ValuesMap extends FiltersValues> =
   | { type: "activate_filter"; id: keyof ValuesMap }
   | { type: "deactivate_filter"; id: keyof ValuesMap }
   | { type: "update_filter_labels"; data: Filters<ValuesMap> }
+  | { type: "set_focus"; id: keyof ValuesMap | undefined }
 
 export const filterBarStateReducer = <ValuesMap extends FiltersValues>(
   state: FilterBarState<ValuesMap>,
   action: Actions<ValuesMap>
 ): FilterBarState<ValuesMap> => {
   switch (action.type) {
+    case "set_focus":
+      return {
+        ...state,
+        focusId: action.id,
+      }
+
     case "update_values":
       return { ...updateValues(state, action.values) }
 

package/src/Filter/FilterBar/context/reducer/setupFilterBarState.ts

@@ -35,6 +35,7 @@ export const setupFilterBarState = <ValuesMap extends FiltersValues>(
       values,
       dependentFilterIds: new Set(),
       hasUpdatedValues: false,
+      focusId: undefined,
     } as FilterBarState<ValuesMap>
   )
 

package/src/Filter/FilterBar/context/types.ts

@@ -32,6 +32,7 @@ export type FilterBarState<ValuesMap extends FiltersValues> = {
   activeFilterIds: Set<keyof ValuesMap>
   values: Partial<ValuesMap>
   dependentFilterIds: Set<keyof ValuesMap>
+  focusId?: keyof ValuesMap
 }
 
 export type ActiveFiltersArray<ValuesMap extends FiltersValues> = Array<

package/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect, useRef } from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
 import { Menu, MenuList, MenuItem, Button } from "~components/__actions__/v2"
 import { Icon } from "~components/__future__/Icon"
@@ -6,6 +6,7 @@ import { useFilterBarContext } from "../../context/FilterBarContext"
 
 export const AddFiltersMenu = (): JSX.Element => {
   const { formatMessage } = useIntl()
+  const buttonRef = useRef<HTMLButtonElement>(null)
 
   const menuButtonLabel = formatMessage({
     id: "filterBar.addFiltersMenu.buttonLabel",
@@ -14,13 +15,22 @@ export const AddFiltersMenu = (): JSX.Element => {
       "Menu button label to show additional available filter options",
   })
 
-  const { getInactiveFilters, showFilter } = useFilterBarContext()
+  const { getInactiveFilters, showFilter, focusId, setFocus } =
+    useFilterBarContext()
   const inactiveFilters = getInactiveFilters()
 
+  useEffect(() => {
+    if (focusId === "add_filter") {
+      buttonRef.current?.focus()
+      setFocus(undefined)
+    }
+  }, [focusId])
+
   return (
     <Menu
       button={
         <Button
+          ref={buttonRef}
           label={menuButtonLabel}
           secondary
           disabled={inactiveFilters.length === 0}

package/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react"
+import React, { forwardRef, useEffect } from "react"
 import { FilterTriggerRef } from "~components/Filter/Filter"
 import { useFilterBarContext } from "~components/Filter/FilterBar/context/FilterBarContext"
 import {
@@ -6,6 +6,7 @@ import {
   FilterButtonProps,
   FilterButtonRemovable,
 } from "~components/Filter/FilterButton"
+import { isRefObject } from "~components/utils/isRefObject"
 
 export type FilterBarButtonProps = FilterButtonProps & {
   filterId: string
@@ -16,7 +17,14 @@ export const FilterBarButton = forwardRef<
   FilterTriggerRef,
   FilterBarButtonProps
 >(({ filterId, isRemovable = false, ...props }, ref): JSX.Element => {
-  const { hideFilter } = useFilterBarContext()
+  const { hideFilter, focusId, setFocus } = useFilterBarContext()
+
+  useEffect(() => {
+    if (focusId === filterId && isRefObject(ref)) {
+      ref?.current?.triggerRef?.current?.focus()
+      setFocus(undefined)
+    }
+  }, [focusId])
 
   return isRemovable ? (
     <FilterButtonRemovable

package/src/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import { Selection, Key } from "@react-types/shared"
 import {
   FilterMultiSelect,
@@ -43,9 +43,16 @@ export const FilterBarMultiSelect = ({
   onSelectionChange,
   ...props
 }: FilterBarMultiSelectProps): JSX.Element | null => {
-  const { getFilterState, setFilterOpenState, updateValue, hideFilter } =
-    useFilterBarContext<ConsumableSelection>()
+  const {
+    getFilterState,
+    setFilterOpenState,
+    updateValue,
+    hideFilter,
+    focusId,
+    setFocus,
+  } = useFilterBarContext<ConsumableSelection>()
   const [items, setItems] = useState<ItemType[]>(propsItems)
+  const buttonRef = useRef<HTMLButtonElement>(null)
 
   if (!id) throw Error("Missing `id` prop in FilterBarMultiSelect")
 
@@ -70,6 +77,13 @@ export const FilterBarMultiSelect = ({
     }
   }, [items])
 
+  useEffect(() => {
+    if (focusId === id) {
+      buttonRef.current?.focus()
+      setFocus(undefined)
+    }
+  }, [focusId])
+
   return (
     <FilterMultiSelect
       label={filterState.name}
@@ -103,6 +117,7 @@ export const FilterBarMultiSelect = ({
           <FilterMultiSelect.TriggerButton {...triggerProps} />
         )
       }}
+      triggerRef={buttonRef}
       {...props}
     >
       {children}

package/src/Filter/FilterMultiSelect/FilterMultiSelect.tsx

@@ -41,6 +41,7 @@ type SelectionProps = {
 export type FilterMultiSelectProps = {
   trigger: (value?: MenuTriggerProviderContextType) => React.ReactNode
   children: (value?: SelectionProviderContextType) => React.ReactNode // the content of the menu
+  triggerRef?: React.RefObject<HTMLButtonElement>
 } & Omit<MenuPopupProps, "children"> &
   Omit<MenuTriggerProviderProps, "children"> &
   SelectionProps
@@ -60,8 +61,9 @@ export const FilterMultiSelect = ({
   onSelectionChange,
   selectionMode = "multiple",
   onSearchInputChange,
+  triggerRef,
 }: FilterMultiSelectProps): JSX.Element => {
-  const menuTriggerProps = { isOpen, defaultOpen, onOpenChange }
+  const menuTriggerProps = { isOpen, defaultOpen, onOpenChange, triggerRef }
   const menuPopupProps = { isLoading, loadingSkeleton }
   const disabledKeys: Selection = new Set(
     items

package/src/Filter/FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.tsx

@@ -14,6 +14,7 @@ export type MenuTriggerProviderProps = {
   defaultOpen?: boolean
   onOpenChange?: (isOpen: boolean) => void
   children: React.ReactNode
+  triggerRef?: React.RefObject<HTMLButtonElement>
 }
 
 export type MenuTriggerProviderContextType = {
@@ -32,12 +33,14 @@ export function MenuTriggerProvider({
   defaultOpen,
   onOpenChange,
   children,
+  triggerRef,
 }: MenuTriggerProviderProps): JSX.Element {
   // Create state based on the incoming props to manage the open/close
   const state = useMenuTriggerState({ isOpen, defaultOpen, onOpenChange })
 
   // Get A11y attributes and events for the menu trigger and menu elements
-  const ref = useRef<HTMLButtonElement>(null)
+  const fallbackRef = useRef<HTMLButtonElement>(null)
+  const ref = triggerRef || fallbackRef
   const { menuTriggerProps, menuProps } = useMenuTrigger<ItemType>(
     {},
     state,

package/src/TextArea/TextArea.module.css

@@ -0,0 +1,142 @@
+.wrapper {
+  font-family: var(--typography-paragraph-body-font-family);
+  font-size: var(--typography-paragraph-body-font-size);
+  font-weight: var(--typography-paragraph-body-font-weight);
+  line-height: var(--typography-paragraph-body-line-height);
+  letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  color: var(--color-purple-800-rgb);
+}
+
+.wrapperAutogrow {
+  display: grid;
+}
+
+.wrapperAutogrow::after {
+  content: attr(data-value) " ";
+  white-space: pre-wrap;
+  visibility: hidden;
+}
+
+/* these properties need to be set on both for autogrow to work properly */
+.textarea,
+.wrapperAutogrow::after {
+  border: var(--border-solid-border-width) var(--border-solid-border-style)
+    var(--color-gray-500);
+  border-radius: var(--border-solid-border-radius);
+  padding: var(--spacing-sm);
+  box-sizing: border-box;
+  width: 100%;
+  font: inherit;
+}
+
+.textareaAutogrow,
+.wrapperAutogrow::after {
+  grid-area: 2 / 1;
+}
+
+.textarea {
+  display: block;
+  border: var(--border-solid-border-width) var(--border-solid-border-style)
+    var(--color-gray-500);
+  border-radius: var(--border-solid-border-radius);
+  padding: var(--spacing-sm);
+  resize: vertical;
+
+  &:focus {
+    outline: var(--border-focus-ring-border-width)
+      var(--border-focus-ring-border-style) var(--color-blue-500);
+    outline-offset: 1px;
+  }
+
+  &:disabled {
+    resize: none;
+  }
+}
+
+.textareaAutogrow {
+  overflow: hidden;
+}
+
+.default {
+  &:not(.error, .caution) {
+    &:disabled {
+      border-color: rgba(var(--color-gray-500-rgb), 0.3);
+    }
+  }
+
+  &:focus:not([disabled]),
+  &:hover:not([disabled]),
+  &:hover:focus:not([disabled]) {
+    background-color: var(--color-gray-200);
+    border-color: var(--color-gray-600);
+  }
+
+  &.error {
+    border-color: var(--color-red-500);
+
+    &:focus:not([disabled]),
+    &:hover:not([disabled]),
+    &:hover:focus:not([disabled]) {
+      border-color: var(--color-red-500);
+    }
+  }
+
+  &.caution {
+    border-color: var(--color-yellow-600);
+
+    &:focus:not([disabled]),
+    &:hover:not([disabled]),
+    &:hover:focus:not([disabled]) {
+      border-color: var(--color-yellow-600);
+    }
+  }
+
+  &.disabled {
+    background-color: var(--color-white);
+    border-color: rgba(var(--color-gray-500-rgb), 0.3);
+    color: rgba(var(--color-purple-800-rgb), 0.3);
+  }
+}
+
+.reversed {
+  border-color: rgba(var(--color-white-rgb), 0.65);
+  background: transparent;
+  color: var(--color-white);
+
+  &:focus {
+    outline-color: var(--color-blue-300);
+  }
+
+  &:focus:not([disabled]),
+  &:hover:not([disabled]),
+  &:hover:focus:not([disabled]) {
+    background: rgba(var(--color-white-rgb), 0.1);
+    border-color: var(--color-white);
+  }
+
+  &.error {
+    border-color: var(--color-red-300);
+
+    &:focus:not([disabled]),
+    &:hover:not([disabled]),
+    &:hover:focus:not([disabled]) {
+      border-color: var(--color-red-300);
+    }
+  }
+
+  &.caution {
+    border-color: var(--color-yellow-400);
+
+    &:focus:not([disabled]),
+    &:hover:not([disabled]),
+    &:hover:focus:not([disabled]) {
+      border-color: var(--color-yellow-400);
+    }
+  }
+
+  &.disabled {
+    background: transparent;
+    border-color: rgba(var(--color-white-rgb), 0.3);
+    color: rgba(var(--color-white-rgb), 0.3);
+  }
+}

package/src/TextArea/TextArea.tsx

@@ -1,16 +1,15 @@
-import React, {
-  TextareaHTMLAttributes,
-  useEffect,
-  useRef,
-  useState,
-} from "react"
+import React, { TextareaHTMLAttributes, useRef, useState } from "react"
 import classnames from "classnames"
 import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./TextArea.module.scss"
+import styles from "./TextArea.module.css"
 
 export type TextAreaProps = {
   textAreaRef?: React.RefObject<HTMLTextAreaElement>
   status?: "default" | "error" | "caution"
+  /**
+   * Grows the input height as more content is added
+   * Replace with CSS field-sizing once it's supported by all major browsers
+   */
   autogrow?: boolean
   reversed?: boolean
   /**
@@ -32,73 +31,46 @@ export const TextArea = ({
   onChange: propsOnChange,
   ...restProps
 }: TextAreaProps): JSX.Element => {
-  const [textAreaHeight, setTextAreaHeight] = useState<string>("auto")
-  const [parentHeight, setParentHeight] = useState<string>("auto")
   const [internalValue, setInternalValue] = useState<
     string | number | readonly string[] | undefined
-  >(autogrow ? defaultValue : undefined)
+  >(autogrow && !value ? defaultValue : undefined)
   // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas
-  // essentially forces the textarea into an (interally) controlled mode if autogrow is true
-  const textAreaRef = propsTextAreaRef || useRef(null)
-
-  useEffect(() => {
-    if (!autogrow) return
-
-    const scrollHeight = textAreaRef.current!.scrollHeight
-    if (scrollHeight < 1) return
-
-    const borderWidth = textAreaRef.current
-      ? parseInt(getComputedStyle(textAreaRef.current).borderTopWidth, 10)
-      : 0
-    const newHeight = scrollHeight + borderWidth * 2
-    setParentHeight(`${newHeight}px`)
-    setTextAreaHeight(`${newHeight}px`)
-  }, [internalValue])
-
-  const onChange = !autogrow
-    ? undefined
-    : (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
-        setTextAreaHeight("auto")
-        // ^ this is required to avoid the textarea height from building up indefinitely
-        // see https://medium.com/@lucasalgus/creating-a-custom-auto-resize-textarea-component-for-your-react-web-application-6959c0ad68bc#2dee
-
-        setInternalValue(event.target.value)
-        if (propsOnChange) {
-          propsOnChange(event)
-        }
-      }
-
-  const getWrapperStyle = (): { minHeight: string } | undefined =>
-    autogrow ? { minHeight: parentHeight } : undefined
-
-  const getTextAreaStyle = (): { height: string } | undefined =>
-    autogrow ? { height: textAreaHeight } : undefined
+  // essentially forces the textarea into an (interally) controlled mode if autogrow is true and mode is uncontrolled
 
   const controlledValue = value || internalValue
+  const textAreaRef = propsTextAreaRef || useRef(null)
+
+  const onChange = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
+    propsOnChange && propsOnChange(event)
+    setInternalValue(event.target.value)
+  }
 
   return (
-    <div className={styles.wrapper} style={getWrapperStyle()}>
+    <div
+      className={classnames(styles.wrapper, {
+        [styles.wrapperAutogrow]: autogrow,
+      })}
+      data-value={autogrow ? controlledValue : undefined}
+    >
       <textarea
         className={classnames(
           styles.textarea,
           styles[status],
           reversed ? styles.reversed : styles.default,
-          disabled && styles.disabled
+          {
+            [styles.disabled]: disabled,
+            [styles.textareaAutogrow]: autogrow,
+          }
         )}
         rows={rows}
-        onChange={onChange || propsOnChange}
+        onChange={onChange}
         value={controlledValue}
         defaultValue={controlledValue ? undefined : defaultValue}
         // ^ React throws a warning if you specify both a value and a defaultValue
         ref={textAreaRef}
-        style={getTextAreaStyle()}
         disabled={disabled}
         {...restProps}
       />
-
-      {/* Textareas aren't able to have pseudo elements like ::after on them,
-          so we have to create an element ourselves for the focus ring */}
-      <div className={styles.focusRing} />
     </div>
   )
 }