@stack-spot/portal-components 2.27.1 → 2.27.2

package/package.json

@@ -1,81 +1,81 @@
-{
-  "name": "@stack-spot/portal-components",
-  "version": "2.27.1",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": "./dist/index.js",
-    "./Breadcrumb": "./dist/components/Breadcrumb/index.js",
-    "./SelectionList": "./dist/components/SelectionList.js",
-    "./LazyMarkdown": "./dist/components/LazyMarkdown/index.js",
-    "./Notifications": "./dist/notifications.js",
-    "./NotificationPage": "./dist/containers/NotificationsPage.js",
-    "./StatusCircle": "./dist/components/StatusCircle.js",
-    "./InfiniteScroll": "./dist/components/InfiniteScroll.js",
-    "./Placeholder": "./dist/components/Placeholder.js",
-    "./ScrollView": "./dist/components/ScrollView.js",
-    "./svg": "./dist/svg/index.js",
-    "./anchor": "./dist/context/anchor.js",
-    "./loading": "./dist/context/loading.js",
-    "./error": "./dist/components/error/index.js",
-    "./AnimatedHeight": "./dist/components/AnimatedHeight.js",
-    "./SearchInput": "./dist/components/form/SearchInput.js",
-    "./Select": "./dist/components/form/Select/index.js",
-    "./Stepper": "./dist/components/Stepper/index.js",
-    "./FileTreeView": "./dist/components/FileTreeView/index.js",
-    "./FadingOverflow": "./dist/components/FadingOverflow.js",
-    "./Table": "./dist/components/Table/index.js",
-    "./ContentValidateFilter": "./dist/components/ContentValidateFilter.js",
-    "./Form": "./dist/components/form/Form/index.js"
-  },
-  "scripts": {
-    "build": "rimraf dist && tsc && tsc-esm-fix --target='dist'",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "check-tree-shaking": "agadoo"
-  },
-  "peerDependencies": {
-    "@citric/core": "^6.5.1",
-    "@citric/icons": "^5.10.0",
-    "@citric/ui": "^6.10.1",
-    "@stack-spot/portal-theme": "^1.1.1",
-    "@stack-spot/portal-translate": "^2.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/lodash": "^4.14.202",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@types/react-syntax-highlighter": "^15.5.13",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "agadoo": "^3.0.0",
-    "eslint": "^8.53.0",
-    "eslint-plugin-filenames": "^1.3.2",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-lodash": "^7.4.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "rimraf": "^5.0.7",
-    "styled-components": "6.1.10",
-    "tsc-esm-fix": "^2.20.26",
-    "typescript": "^5.2.2"
-  },
-  "dependencies": {
-    "date-fns": "^3.6.0",
-    "lodash": "^4.17.21",
-    "react-hook-form": "^7.55.0",
-    "react-infinite-scroll-component": "^6.1.0",
-    "react-markdown": "^9.0.1",
-    "react-select": "^5.10.0",
-    "react-syntax-highlighter": "^15.5.0",
-    "rehype-raw": "^7.0.0",
-    "remark-breaks": "^4.0.0",
-    "remark-gfm": "^4.0.0"
-  }
+{
+  "name": "@stack-spot/portal-components",
+  "version": "2.27.2",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./Breadcrumb": "./dist/components/Breadcrumb/index.js",
+    "./SelectionList": "./dist/components/SelectionList.js",
+    "./LazyMarkdown": "./dist/components/LazyMarkdown/index.js",
+    "./Notifications": "./dist/notifications.js",
+    "./NotificationPage": "./dist/containers/NotificationsPage.js",
+    "./StatusCircle": "./dist/components/StatusCircle.js",
+    "./InfiniteScroll": "./dist/components/InfiniteScroll.js",
+    "./Placeholder": "./dist/components/Placeholder.js",
+    "./ScrollView": "./dist/components/ScrollView.js",
+    "./svg": "./dist/svg/index.js",
+    "./anchor": "./dist/context/anchor.js",
+    "./loading": "./dist/context/loading.js",
+    "./error": "./dist/components/error/index.js",
+    "./AnimatedHeight": "./dist/components/AnimatedHeight.js",
+    "./SearchInput": "./dist/components/form/SearchInput.js",
+    "./Select": "./dist/components/form/Select/index.js",
+    "./Stepper": "./dist/components/Stepper/index.js",
+    "./FileTreeView": "./dist/components/FileTreeView/index.js",
+    "./FadingOverflow": "./dist/components/FadingOverflow.js",
+    "./Table": "./dist/components/Table/index.js",
+    "./ContentValidateFilter": "./dist/components/ContentValidateFilter.js",
+    "./Form": "./dist/components/form/Form/index.js"
+  },
+  "scripts": {
+    "build": "rimraf dist && tsc && tsc-esm-fix --target='dist'",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "check-tree-shaking": "agadoo"
+  },
+  "peerDependencies": {
+    "@citric/core": "^6.5.1",
+    "@citric/icons": "^5.10.0",
+    "@citric/ui": "^6.10.1",
+    "@stack-spot/portal-theme": "^1.1.1",
+    "@stack-spot/portal-translate": "^2.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.202",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "agadoo": "^3.0.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-filenames": "^1.3.2",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-lodash": "^7.4.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rimraf": "^5.0.7",
+    "styled-components": "6.1.10",
+    "tsc-esm-fix": "^2.20.26",
+    "typescript": "^5.2.2"
+  },
+  "dependencies": {
+    "date-fns": "^3.6.0",
+    "lodash": "^4.17.21",
+    "react-hook-form": "^7.55.0",
+    "react-infinite-scroll-component": "^6.1.0",
+    "react-markdown": "^9.0.1",
+    "react-select": "^5.10.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "rehype-raw": "^7.0.0",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.0"
+  }
 }

package/readme.md

@@ -1,66 +1,66 @@
-# Components
-A collection of UI components, hooks, SVG images, utilities and variables shared among Stackspot web projects.
-
-What about the Design System (DS)? Some components here may be upgraded to the design system level eventually. But this is a place where we
-can have any kind of component, despite it belonging to a DS or not.
-
-## Presentation components
-These are pure functions, i.e. they rely only in their inputs to render the UI. Furthermore, they don't have any collateral effect.
-
-Exceptions: translations are the only exception here. These components can access the current language without having it passed as
-parameter.
-
-- `BreadcrumbList`: renders a list of breadcrumb navigation items. Must be imported from `@stack-spot/portal-components/Breadcrumb`.
-- `BannerWarning`: a yellow alert box with an exclamation icon and the content passed as parameter. Used for warning messages.
-- `ChatBot`: an orange circular button that can toggle the chat window from Service Now. The button has a chat icon when the window is
-closed and a close icon when it's open.
-- `ErrorFeedback`: a box with an icon and an error message. This is used for giving error feedbacks to the user.
-- `SelectionList`: a selection UI that allows the selection of one single item. These items can be divided in sections (groups). This
-component is highly customizable and has lots of accessibility features implemented.
-- `AnchorProvider`: a way to provide an anchor component (links) to be used by Stackspot libraries. This allows these libraries not to be
-coupled with an specific React navigators. To retrieve the component, use `useLinkComponent`. Must be imported from
-`@stack-spot/portal-components/anchor`.
-
-## Hooks
-
-These are useful react hooks shared among the StackSpot portals.
-
-- `useEffectOnce()`: runs an effect only once, when the component is mounted. This prevents React from running the effect twice when in
-development mode.
-- `useTitleEffect(title)`: changes the title for the current page. The title is returned to its original value as soon as the component is
-unmounted.
-- `useCheckTextOverflow()`: checks if the text fits completely in the space available.
-- `useLinkComponent()`: retrieves the anchor component declared at the closest `AnchorProvider`. If no component was provided, returns a
-component that renders the HTML `<a>` tag directly. This is useful for integration with navigators for React. Must be imported from
-`@stack-spot/portal-components/anchor`.
-- `useKeyboardControls(options)`: creates listeners for controlling a Menu UI through the keyboard (up, down, tab, esc, enter).
-- `useServiceNowEffect(options)`, `useServiceNowChatButtonVisibility()`: Service Now hooks (chat capabilities).
-
-## SVG images
-Some SVG images are exported as React components at `@stack-spot/portal-components/svg`.
-
-## Utilities and variables
-These are useful functions shared among the StackSpot portals.
-
-#### Accessibility
-- `focusNextIgnoringChildren(element)`: focus the next element in the hierarchy, ignoring the children of the element passed as parameter.
-- `focusFirstChild(element, options)`: focus the first child of element that is focusable according to the options.
-- `isFocusable(element)`: checks if the element can receive focus.
-- `focusAccessibleElement(element)`: tries to focus the element passed as parameter, but if it's not focusable, finds another element to
-focus according to accessibility rules.
-
-#### Cookie
-- `setupCookies(domainRegex)`: setup a domain regex for the cookies. Use this if the domain is different than localhost or *.stackspot.com.
-- `getCookies()`: retrieves an object with all the cookies.
-- `getCookie(name)`: same as `getCookies()[name]`.
-- `setCookie(name, value)`: sets the value of a cookie.
-- `removeCookie(name)`: removes a cookie.
-
-#### Other
-- `isNewTourStep(step)`, `hasFinishedTourStep(key)`, `tourStepBuilder(options)`, `defaultTourConfig`: related to React Tour (tutorial).
-- `openServiceNowChat()`, `serviceNowDictionary`: related to Service Now chat service.
-
-# Developer notes
-- Since not every component in this library will be used by every project. This library must be tree-shakeable! Before committing, make sure
-`pnpm check-tree-shaking` passes.
-
+# Components
+A collection of UI components, hooks, SVG images, utilities and variables shared among Stackspot web projects.
+
+What about the Design System (DS)? Some components here may be upgraded to the design system level eventually. But this is a place where we
+can have any kind of component, despite it belonging to a DS or not.
+
+## Presentation components
+These are pure functions, i.e. they rely only in their inputs to render the UI. Furthermore, they don't have any collateral effect.
+
+Exceptions: translations are the only exception here. These components can access the current language without having it passed as
+parameter.
+
+- `BreadcrumbList`: renders a list of breadcrumb navigation items. Must be imported from `@stack-spot/portal-components/Breadcrumb`.
+- `BannerWarning`: a yellow alert box with an exclamation icon and the content passed as parameter. Used for warning messages.
+- `ChatBot`: an orange circular button that can toggle the chat window from Service Now. The button has a chat icon when the window is
+closed and a close icon when it's open.
+- `ErrorFeedback`: a box with an icon and an error message. This is used for giving error feedbacks to the user.
+- `SelectionList`: a selection UI that allows the selection of one single item. These items can be divided in sections (groups). This
+component is highly customizable and has lots of accessibility features implemented.
+- `AnchorProvider`: a way to provide an anchor component (links) to be used by Stackspot libraries. This allows these libraries not to be
+coupled with an specific React navigators. To retrieve the component, use `useLinkComponent`. Must be imported from
+`@stack-spot/portal-components/anchor`.
+
+## Hooks
+
+These are useful react hooks shared among the StackSpot portals.
+
+- `useEffectOnce()`: runs an effect only once, when the component is mounted. This prevents React from running the effect twice when in
+development mode.
+- `useTitleEffect(title)`: changes the title for the current page. The title is returned to its original value as soon as the component is
+unmounted.
+- `useCheckTextOverflow()`: checks if the text fits completely in the space available.
+- `useLinkComponent()`: retrieves the anchor component declared at the closest `AnchorProvider`. If no component was provided, returns a
+component that renders the HTML `<a>` tag directly. This is useful for integration with navigators for React. Must be imported from
+`@stack-spot/portal-components/anchor`.
+- `useKeyboardControls(options)`: creates listeners for controlling a Menu UI through the keyboard (up, down, tab, esc, enter).
+- `useServiceNowEffect(options)`, `useServiceNowChatButtonVisibility()`: Service Now hooks (chat capabilities).
+
+## SVG images
+Some SVG images are exported as React components at `@stack-spot/portal-components/svg`.
+
+## Utilities and variables
+These are useful functions shared among the StackSpot portals.
+
+#### Accessibility
+- `focusNextIgnoringChildren(element)`: focus the next element in the hierarchy, ignoring the children of the element passed as parameter.
+- `focusFirstChild(element, options)`: focus the first child of element that is focusable according to the options.
+- `isFocusable(element)`: checks if the element can receive focus.
+- `focusAccessibleElement(element)`: tries to focus the element passed as parameter, but if it's not focusable, finds another element to
+focus according to accessibility rules.
+
+#### Cookie
+- `setupCookies(domainRegex)`: setup a domain regex for the cookies. Use this if the domain is different than localhost or *.stackspot.com.
+- `getCookies()`: retrieves an object with all the cookies.
+- `getCookie(name)`: same as `getCookies()[name]`.
+- `setCookie(name, value)`: sets the value of a cookie.
+- `removeCookie(name)`: removes a cookie.
+
+#### Other
+- `isNewTourStep(step)`, `hasFinishedTourStep(key)`, `tourStepBuilder(options)`, `defaultTourConfig`: related to React Tour (tutorial).
+- `openServiceNowChat()`, `serviceNowDictionary`: related to Service Now chat service.
+
+# Developer notes
+- Since not every component in this library will be used by every project. This library must be tree-shakeable! Before committing, make sure
+`pnpm check-tree-shaking` passes.
+

package/src/components/AnimatedHeight.tsx

@@ -1,174 +1,174 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { useCallback, useEffect, useLayoutEffect, useRef } from 'react'
-import styled from 'styled-components'
-import { useManualRender } from '../hooks/manual-render'
-
-interface Props {
-  /**
-   * A header with fixed height.
-   */
-  header?: React.ReactElement,
-  /**
-   * The content. This may change its height whenever. When the height changes, the animation will play making a fluid transition from the
-   * previous height to the next.
-   */
-  children: React.ReactElement,
-  /**
-   * A footer with fixed height.
-   */
-  footer?: React.ReactElement,
-  /**
-   * Whether or not this panel is visible. Changing this value, animates the panel's height.
-   * @default true
-   */
-  visible?: boolean,
-  /**
-   * The duration of the animations in milliseconds.
-   * @default 300
-   */
-  duration?: number,
-  /**
-   * This component wraps its content in a div that changes its height from zero to the size of its content. It is not recommended to add
-   * styles to it, but if you need to, use this property.
-   */
-  outerStyle?: React.CSSProperties,
-  /**
-   * This component wraps its content in a div that changes its height from zero to the size of its content. It is not recommended to add
-   * classes to it, but if you need to, use this property.
-   */
-  outerClassName?: string,
-  /**
-   * The style to apply to the whole panel.
-   * 
-   * Attention: this is not the outer-most div, use `outerStyle` if you need to style it.
-   */
-  style?: React.CSSProperties,
-  /**
-   * The class to apply to the whole panel.
-   * 
-   * Attention: this is not the outer-most div, use `outerClassName` if you need to add a class to it.
-   */
-  className?: string,
-}
-
-interface Heights {
-  header: number,
-  content: number,
-  footer: number,
-  extra: number,
-}
-
-type ComponentStatus = 'initial' | 'hidden' | 'visible'
-
-const Box = styled.div<{ $animationMs: number }>`
-  overflow-y: clip; // <-- do not use hidden, it's buggy in Chrome.
-  transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
-
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &.initial {
-    opacity: 0;
-    pointer-events: none;
-    overflow: inherit;
-    transition: none;
-
-    &.content {
-      overflow: inherit;
-      transition: none;
-    }
-  }
-
-  .content {
-    overflow: hidden;
-    transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
-  }
-`
-
-function getActualContent(wrapper: HTMLElement) {
-  const firstChild = wrapper.firstChild
-  if (!firstChild || !('tagName' in firstChild)) throw new Error('AnimatedHeight could not find any content to animate')
-  return firstChild as HTMLElement
-}
-
-function onChangeHeight(element: HTMLElement, callback: (height: number) => void) {
-  const resizeObserver = new ResizeObserver((entries) => {
-    const entry = entries[0]
-    const newHeight = entry.borderBoxSize[0].blockSize
-    callback(newHeight)
-  })
-  resizeObserver.observe(element)
-  return () => resizeObserver.disconnect()
-}
-
-/**
- * This is a generic component for animating the height of a panel whenever its content changes.
- * 
- * You can provide a header and a footer with fixed height, these won't change during the animations and will always be visible.
- * 
- * This panel can also be hidden or visible and transitions between these two state will be animated.
- * @param props the React props for this component. {@link Props}.
- */
-export const AnimatedHeight = (
-  { children, footer, header, visible = true, duration = 300, className, style, outerClassName, outerStyle } : Props,
-) => {
-  const { repaint } = useManualRender()
-  const boxRef = useRef<HTMLDivElement>(null)
-  const wrapperRef = useRef<HTMLDivElement>(null)
-  const headerRef = useRef<HTMLDivElement>(null)
-  const contentRef = useRef<HTMLDivElement>(null)
-  const footerRef = useRef<HTMLDivElement>(null)
-  const heights = useRef<Heights>({ content: 0, footer: 0, header: 0, extra: 0 })
-  const status = useRef<ComponentStatus>('initial')
-
-  const updateHeight = useCallback(() => {
-    if (boxRef.current) {
-      boxRef.current.style.height = `${heights.current.content + heights.current.header + heights.current.footer + heights.current.extra}px`
-    }
-    if (contentRef.current) contentRef.current.style.height = `${heights.current.content}px`
-  }, [])
-
-  useLayoutEffect(() => {
-    let unsubscribe: (() => void) | undefined
-    if (headerRef.current) heights.current.header = headerRef.current.getBoundingClientRect().height
-    if (contentRef.current) {
-      heights.current.content = contentRef.current.getBoundingClientRect().height
-      unsubscribe = onChangeHeight(getActualContent(contentRef.current), (height) => {
-        heights.current.content = height
-        if (status.current === 'visible' && boxRef.current) updateHeight()
-      })
-    }
-    if (footerRef.current) heights.current.footer = footerRef.current.getBoundingClientRect().height
-    if (wrapperRef.current) heights.current.extra = wrapperRef.current.getBoundingClientRect().height
-      - heights.current.header
-      - heights.current.footer
-      - heights.current.content
-    status.current = visible ? 'visible' : 'hidden'
-    repaint()
-    return unsubscribe
-  }, [])
-
-  useEffect(() => {
-    if (status.current === 'initial') return
-    status.current = visible ? 'visible' : 'hidden'
-    if (visible) updateHeight()
-    else if (boxRef.current) boxRef.current.style.height = '0'
-  }, [visible])
-
-  return (
-    <Box
-      ref={boxRef}
-      $animationMs={duration}
-      className={listToClass([outerClassName, status.current === 'initial' && 'initial'])}
-      style={outerStyle}
-    >
-      <div ref={wrapperRef} className={listToClass(['wrapper', className])} style={style}>
-        {header && <div ref={headerRef}>{header}</div>}
-        <div ref={contentRef} className="content">{children}</div>
-        {footer && <div ref={footerRef}>{footer}</div>}
-      </div>
-    </Box>
-  )
-}
+import { listToClass } from '@stack-spot/portal-theme'
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react'
+import styled from 'styled-components'
+import { useManualRender } from '../hooks/manual-render'
+
+interface Props {
+  /**
+   * A header with fixed height.
+   */
+  header?: React.ReactElement,
+  /**
+   * The content. This may change its height whenever. When the height changes, the animation will play making a fluid transition from the
+   * previous height to the next.
+   */
+  children: React.ReactElement,
+  /**
+   * A footer with fixed height.
+   */
+  footer?: React.ReactElement,
+  /**
+   * Whether or not this panel is visible. Changing this value, animates the panel's height.
+   * @default true
+   */
+  visible?: boolean,
+  /**
+   * The duration of the animations in milliseconds.
+   * @default 300
+   */
+  duration?: number,
+  /**
+   * This component wraps its content in a div that changes its height from zero to the size of its content. It is not recommended to add
+   * styles to it, but if you need to, use this property.
+   */
+  outerStyle?: React.CSSProperties,
+  /**
+   * This component wraps its content in a div that changes its height from zero to the size of its content. It is not recommended to add
+   * classes to it, but if you need to, use this property.
+   */
+  outerClassName?: string,
+  /**
+   * The style to apply to the whole panel.
+   * 
+   * Attention: this is not the outer-most div, use `outerStyle` if you need to style it.
+   */
+  style?: React.CSSProperties,
+  /**
+   * The class to apply to the whole panel.
+   * 
+   * Attention: this is not the outer-most div, use `outerClassName` if you need to add a class to it.
+   */
+  className?: string,
+}
+
+interface Heights {
+  header: number,
+  content: number,
+  footer: number,
+  extra: number,
+}
+
+type ComponentStatus = 'initial' | 'hidden' | 'visible'
+
+const Box = styled.div<{ $animationMs: number }>`
+  overflow-y: clip; // <-- do not use hidden, it's buggy in Chrome.
+  transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &.initial {
+    opacity: 0;
+    pointer-events: none;
+    overflow: inherit;
+    transition: none;
+
+    &.content {
+      overflow: inherit;
+      transition: none;
+    }
+  }
+
+  .content {
+    overflow: hidden;
+    transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
+  }
+`
+
+function getActualContent(wrapper: HTMLElement) {
+  const firstChild = wrapper.firstChild
+  if (!firstChild || !('tagName' in firstChild)) throw new Error('AnimatedHeight could not find any content to animate')
+  return firstChild as HTMLElement
+}
+
+function onChangeHeight(element: HTMLElement, callback: (height: number) => void) {
+  const resizeObserver = new ResizeObserver((entries) => {
+    const entry = entries[0]
+    const newHeight = entry.borderBoxSize[0].blockSize
+    callback(newHeight)
+  })
+  resizeObserver.observe(element)
+  return () => resizeObserver.disconnect()
+}
+
+/**
+ * This is a generic component for animating the height of a panel whenever its content changes.
+ * 
+ * You can provide a header and a footer with fixed height, these won't change during the animations and will always be visible.
+ * 
+ * This panel can also be hidden or visible and transitions between these two state will be animated.
+ * @param props the React props for this component. {@link Props}.
+ */
+export const AnimatedHeight = (
+  { children, footer, header, visible = true, duration = 300, className, style, outerClassName, outerStyle } : Props,
+) => {
+  const { repaint } = useManualRender()
+  const boxRef = useRef<HTMLDivElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const headerRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const footerRef = useRef<HTMLDivElement>(null)
+  const heights = useRef<Heights>({ content: 0, footer: 0, header: 0, extra: 0 })
+  const status = useRef<ComponentStatus>('initial')
+
+  const updateHeight = useCallback(() => {
+    if (boxRef.current) {
+      boxRef.current.style.height = `${heights.current.content + heights.current.header + heights.current.footer + heights.current.extra}px`
+    }
+    if (contentRef.current) contentRef.current.style.height = `${heights.current.content}px`
+  }, [])
+
+  useLayoutEffect(() => {
+    let unsubscribe: (() => void) | undefined
+    if (headerRef.current) heights.current.header = headerRef.current.getBoundingClientRect().height
+    if (contentRef.current) {
+      heights.current.content = contentRef.current.getBoundingClientRect().height
+      unsubscribe = onChangeHeight(getActualContent(contentRef.current), (height) => {
+        heights.current.content = height
+        if (status.current === 'visible' && boxRef.current) updateHeight()
+      })
+    }
+    if (footerRef.current) heights.current.footer = footerRef.current.getBoundingClientRect().height
+    if (wrapperRef.current) heights.current.extra = wrapperRef.current.getBoundingClientRect().height
+      - heights.current.header
+      - heights.current.footer
+      - heights.current.content
+    status.current = visible ? 'visible' : 'hidden'
+    repaint()
+    return unsubscribe
+  }, [])
+
+  useEffect(() => {
+    if (status.current === 'initial') return
+    status.current = visible ? 'visible' : 'hidden'
+    if (visible) updateHeight()
+    else if (boxRef.current) boxRef.current.style.height = '0'
+  }, [visible])
+
+  return (
+    <Box
+      ref={boxRef}
+      $animationMs={duration}
+      className={listToClass([outerClassName, status.current === 'initial' && 'initial'])}
+      style={outerStyle}
+    >
+      <div ref={wrapperRef} className={listToClass(['wrapper', className])} style={style}>
+        {header && <div ref={headerRef}>{header}</div>}
+        <div ref={contentRef} className="content">{children}</div>
+        {footer && <div ref={footerRef}>{footer}</div>}
+      </div>
+    </Box>
+  )
+}