@stack-spot/portal-components 2.26.0 → 2.27.0

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>
+  )
+}

package/src/components/AsyncContent.tsx

@@ -1,78 +1,78 @@
-import { Flex } from '@citric/core'
-import { LoadingCircular } from '@citric/ui'
-import { MutableRefObject, useEffect, useLayoutEffect } from 'react'
-
-export interface ErrorProps {
-  /**
-   * The error component to be rendered in case of error. It should receive error props
-   */
-  errorComponent:  React.FC<{ error: any }>,
-  /**
-   * The function to report the error.
-   */
-  reportError: (error: any) => void,
-}
-
-interface Props {
-  /**
-   * Whether or not to show the loading feedback.
-   */
-  loading: boolean,
-  /**
-   * A javascript error. Used to show error feedbacks.
-   */
-  error?: any,
-  /**
-   * If provided, this element will receive focus as soon as the content is loaded and has no errors.
-   * Can be either a React Ref Object or a query selector.
-   */
-  autofocus?: string | MutableRefObject<HTMLElement>,
-  /**
-   * The content to show if it's not loading or has errors.
-   */
-  children: React.ReactNode,
-  /**
-   * The error details component.
-  */
-  errorDetails: ErrorProps,
-}
-
-/**
- * Renders a component that provides user feedback on async requests.
- * It renders either a loading component, an error component (which is received as prop)
- * or the received children props.
- * 
- * @param options the props for rendering the component: {@link Props}. 
- */
-
-export const AsyncContent = ({ loading, error, autofocus, children, errorDetails }: Props) => {
-  const ErrorComponent = errorDetails.errorComponent
-
-  useEffect(() => {
-    if (error) {
-      errorDetails.reportError(error)
-      // eslint-disable-next-line no-console
-      console.error(error)
-    }
-  }, [error])
-
-  useLayoutEffect(() => {
-    if (!loading && !error) {
-      typeof autofocus === 'string' ? (document.querySelector(autofocus) as HTMLElement)?.focus?.() : autofocus?.current?.focus()
-    }
-  }, [loading, error])
-
-  if (loading) {
-    return (
-      <Flex alignItems="center" justifyContent="center" flex={1} style={{ padding: '80px' }} data-test-hint="loading">
-        <LoadingCircular />
-      </Flex>
-    )
-  }
-
-  if (error) {
-    return <ErrorComponent error={error} />
-  }
-
-  return children
-}
+import { Flex } from '@citric/core'
+import { LoadingCircular } from '@citric/ui'
+import { MutableRefObject, useEffect, useLayoutEffect } from 'react'
+
+export interface ErrorProps {
+  /**
+   * The error component to be rendered in case of error. It should receive error props
+   */
+  errorComponent:  React.FC<{ error: any }>,
+  /**
+   * The function to report the error.
+   */
+  reportError: (error: any) => void,
+}
+
+interface Props {
+  /**
+   * Whether or not to show the loading feedback.
+   */
+  loading: boolean,
+  /**
+   * A javascript error. Used to show error feedbacks.
+   */
+  error?: any,
+  /**
+   * If provided, this element will receive focus as soon as the content is loaded and has no errors.
+   * Can be either a React Ref Object or a query selector.
+   */
+  autofocus?: string | MutableRefObject<HTMLElement>,
+  /**
+   * The content to show if it's not loading or has errors.
+   */
+  children: React.ReactNode,
+  /**
+   * The error details component.
+  */
+  errorDetails: ErrorProps,
+}
+
+/**
+ * Renders a component that provides user feedback on async requests.
+ * It renders either a loading component, an error component (which is received as prop)
+ * or the received children props.
+ * 
+ * @param options the props for rendering the component: {@link Props}. 
+ */
+
+export const AsyncContent = ({ loading, error, autofocus, children, errorDetails }: Props) => {
+  const ErrorComponent = errorDetails.errorComponent
+
+  useEffect(() => {
+    if (error) {
+      errorDetails.reportError(error)
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }, [error])
+
+  useLayoutEffect(() => {
+    if (!loading && !error) {
+      typeof autofocus === 'string' ? (document.querySelector(autofocus) as HTMLElement)?.focus?.() : autofocus?.current?.focus()
+    }
+  }, [loading, error])
+
+  if (loading) {
+    return (
+      <Flex alignItems="center" justifyContent="center" flex={1} style={{ padding: '80px' }} data-test-hint="loading">
+        <LoadingCircular />
+      </Flex>
+    )
+  }
+
+  if (error) {
+    return <ErrorComponent error={error} />
+  }
+
+  return children
+}