@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/common/containers/CollapsibleGrid.tsx

@@ -1,174 +1,185 @@
-import {
-  forwardRef,
-  type ComponentPropsWithoutRef,
-  type CSSProperties,
-} from 'react'
-import { styled } from 'styled-components'
-import {
-  COLLAPSIBLE_GRID_DURATION_MS,
-  useOpenTransition,
-} from './useOpenTransition.js'
-
-export { COLLAPSIBLE_GRID_DURATION_MS } from './useOpenTransition.js'
-
-export type CollapsibleAnimationDirection = 'x' | 'y' | 'xy'
-
-//#region styled-components
-
-const StyledRoot = styled.div<{ $indent?: boolean }>`
-  --collapsible-grid-duration: ${COLLAPSIBLE_GRID_DURATION_MS}ms;
-  --collapsible-grid-easing: ease;
-  --collapsible-grid-track-closed: 0fr;
-  --collapsible-grid-track-open: 1fr;
-
-  position: relative;
-  z-index: var(--platform-z-index-zi-app-menus);
-  display: grid;
-  width: auto;
-  padding-left: ${p =>
-    p.$indent === false ? 0 : 'var(--platform-spacing-sm)'};
-  transition: grid-template-rows var(--collapsible-grid-duration)
-      var(--collapsible-grid-easing),
-    grid-template-columns var(--collapsible-grid-duration)
-      var(--collapsible-grid-easing),
-    padding-block var(--collapsible-grid-duration)
-      var(--collapsible-grid-easing),
-    padding-inline var(--collapsible-grid-duration)
-      var(--collapsible-grid-easing);
-
-  * {
-    transition: all 0.2s ease;
-  }
-
-  &[data-open='true'] {
-    z-index: calc(var(--platform-z-index-zi-app-menus) + 1);
-
-    * {
-      opacity: 1;
-    }
-  }
-
-  &[data-open='false'] {
-    * {
-      opacity: 0;
-    }
-    /* border-color: transparent !important; */
-  }
-
-  &[data-animation-direction='y'] {
-    width: 100%;
-    grid-template-rows: var(--collapsible-grid-track-closed);
-    grid-template-columns: minmax(0, 1fr);
-
-    &[data-open='true'] {
-      grid-template-rows: var(--collapsible-grid-track-open);
-    }
-
-    &[data-open='false'] {
-      padding-block: 0 !important;
-    }
-
-    & > .content {
-      min-height: 0;
-    }
-  }
-
-  &[data-animation-direction='x'] {
-    width: auto;
-    grid-template-columns: var(--collapsible-grid-track-closed);
-    grid-template-rows: auto;
-
-    &[data-open='true'] {
-      grid-template-columns: var(--collapsible-grid-track-open);
-    }
-
-    &[data-open='false'] {
-      padding-inline: 0 !important;
-    }
-
-    & > .content {
-      min-width: 0;
-    }
-
-    & > .content > * {
-      width: max-content;
-    }
-  }
-
-  &[data-animation-direction='xy'] {
-    width: auto;
-    grid-template-rows: var(--collapsible-grid-track-closed);
-    grid-template-columns: var(--collapsible-grid-track-closed);
-
-    &[data-open='true'] {
-      grid-template-rows: var(--collapsible-grid-track-open);
-      grid-template-columns: var(--collapsible-grid-track-open);
-    }
-
-    &[data-open='false'] {
-      padding-block: 0 !important;
-      padding-inline: 0 !important;
-    }
-
-    & > .content {
-      min-height: 0;
-      min-width: 0;
-    }
-
-    & > .content > * {
-      width: max-content;
-      height: max-content;
-    }
-  }
-
-  & > .content {
-    overflow: hidden;
-  }
-`
-
-//#endregion
-
-export type CollapsibleGridProps = {
-  open: boolean
-  animationDirection?: CollapsibleAnimationDirection
-  /** When false, no left indent (e.g. top-level dropdown panel). Default true. */
-  indent?: boolean
-  durationMs?: number
-} & ComponentPropsWithoutRef<'div'>
-
-export const CollapsibleGrid = forwardRef<HTMLDivElement, CollapsibleGridProps>(
-  function CollapsibleGrid(
-    {
-      open,
-      animationDirection = 'y',
-      indent = true,
-      durationMs = COLLAPSIBLE_GRID_DURATION_MS,
-      children,
-      style,
-      ...rest
-    },
-    ref,
-  ) {
-    const { mounted, expanded } = useOpenTransition(open, durationMs)
-
-    const gridStyle = {
-      '--collapsible-grid-duration': `${durationMs}ms`,
-      ...style,
-    } as CSSProperties
-
-    if (!mounted) return null
-
-    return (
-      <StyledRoot
-        ref={ref}
-        data-open={expanded}
-        data-animation-direction={animationDirection}
-        $indent={indent}
-        style={gridStyle}
-        {...rest}
-      >
-        <div className="content">{children}</div>
-      </StyledRoot>
-    )
-  },
-)
+import {
+  forwardRef,
+  useRef,
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+} from 'react'
+import { styled } from 'styled-components'
+import {
+  COLLAPSIBLE_GRID_DURATION_MS,
+  useOpenTransition,
+} from './useOpenTransition.js'
+
+export { COLLAPSIBLE_GRID_DURATION_MS } from './useOpenTransition.js'
+
+export type CollapsibleAnimationDirection = 'x' | 'y' | 'xy'
+
+//#region styled-components
+
+const StyledRoot = styled.div<{ $indent?: boolean }>`
+  --collapsible-grid-duration: ${COLLAPSIBLE_GRID_DURATION_MS}ms;
+  --collapsible-grid-easing: ease;
+  --collapsible-grid-track-closed: 0fr;
+  --collapsible-grid-track-open: 1fr;
+
+  position: relative;
+  z-index: var(--platform-z-index-zi-app-menus);
+  display: grid;
+  width: auto;
+  padding-left: ${p =>
+    p.$indent === false ? 0 : 'var(--platform-spacing-sm)'};
+  transition: grid-template-rows var(--collapsible-grid-duration)
+      var(--collapsible-grid-easing),
+    grid-template-columns var(--collapsible-grid-duration)
+      var(--collapsible-grid-easing),
+    padding-block var(--collapsible-grid-duration)
+      var(--collapsible-grid-easing),
+    padding-inline var(--collapsible-grid-duration)
+      var(--collapsible-grid-easing);
+
+  * {
+    transition: all 0.2s ease;
+  }
+
+  &[data-open='true'] {
+    z-index: calc(var(--platform-z-index-zi-app-menus) + 1);
+
+    * {
+      opacity: 1;
+    }
+  }
+
+  &[data-open='false'] {
+    * {
+      opacity: 0;
+    }
+    /* border-color: transparent !important; */
+  }
+
+  &[data-animation-direction='y'] {
+    width: 100%;
+    grid-template-rows: var(--collapsible-grid-track-closed);
+    grid-template-columns: minmax(0, 1fr);
+
+    &[data-open='true'] {
+      grid-template-rows: var(--collapsible-grid-track-open);
+    }
+
+    &[data-open='false'] {
+      padding-block: 0 !important;
+    }
+
+    & > .content {
+      min-height: 0;
+    }
+  }
+
+  &[data-animation-direction='x'] {
+    width: auto;
+    grid-template-columns: var(--collapsible-grid-track-closed);
+    grid-template-rows: auto;
+
+    &[data-open='true'] {
+      grid-template-columns: var(--collapsible-grid-track-open);
+    }
+
+    &[data-open='false'] {
+      padding-inline: 0 !important;
+    }
+
+    & > .content {
+      min-width: 0;
+    }
+
+    & > .content > * {
+      width: max-content;
+    }
+  }
+
+  &[data-animation-direction='xy'] {
+    width: auto;
+    grid-template-rows: var(--collapsible-grid-track-closed);
+    grid-template-columns: var(--collapsible-grid-track-closed);
+
+    &[data-open='true'] {
+      grid-template-rows: var(--collapsible-grid-track-open);
+      grid-template-columns: var(--collapsible-grid-track-open);
+    }
+
+    &[data-open='false'] {
+      padding-block: 0 !important;
+      padding-inline: 0 !important;
+    }
+
+    & > .content {
+      min-height: 0;
+      min-width: 0;
+    }
+
+    & > .content > * {
+      width: max-content;
+      height: max-content;
+    }
+  }
+
+  & > .content {
+    overflow: hidden;
+  }
+`
+
+//#endregion
+
+export type CollapsibleGridProps = {
+  open: boolean
+  animationDirection?: CollapsibleAnimationDirection
+  /** When false, no left indent (e.g. top-level dropdown panel). Default true. */
+  indent?: boolean
+  durationMs?: number
+  /** Keep the last open children mounted while the close transition runs. */
+  preserveChildrenOnExit?: boolean
+} & ComponentPropsWithoutRef<'div'>
+
+export const CollapsibleGrid = forwardRef<HTMLDivElement, CollapsibleGridProps>(
+  function CollapsibleGrid(
+    {
+      open,
+      animationDirection = 'y',
+      indent = true,
+      durationMs = COLLAPSIBLE_GRID_DURATION_MS,
+      preserveChildrenOnExit = false,
+      children,
+      style,
+      ...rest
+    },
+    ref,
+  ) {
+    const { mounted, expanded } = useOpenTransition(open, durationMs)
+    const preservedChildrenRef = useRef(children)
+
+    if (!preserveChildrenOnExit || open || !mounted) {
+      preservedChildrenRef.current = children
+    }
+
+    const gridStyle = {
+      '--collapsible-grid-duration': `${durationMs}ms`,
+      ...style,
+    } as CSSProperties
+
+    if (!mounted) return null
+    const renderedChildren =
+      preserveChildrenOnExit && !open ? preservedChildrenRef.current : children
+
+    return (
+      <StyledRoot
+        ref={ref}
+        data-open={expanded}
+        data-animation-direction={animationDirection}
+        $indent={indent}
+        style={gridStyle}
+        {...rest}
+      >
+        <div className="content">{renderedChildren}</div>
+      </StyledRoot>
+    )
+  },
+)

package/src/components/common/containers/MotionScope.tsx

@@ -1,32 +1,32 @@
-import type { ReactNode } from 'react'
-import { styled } from 'styled-components'
-
-export interface MotionScopeProps {
-  children: ReactNode
-  className?: string
-}
-
-//#region styled-components
-
-const StyledScope = styled.div`
-  display: contents;
-
-  @media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-      animation-duration: 1ms !important;
-      scroll-behavior: auto !important;
-      transition-duration: 1ms !important;
-    }
-  }
-`
-
-//#endregion
-
-export function MotionScope({
-  children,
-  className,
-}: MotionScopeProps): React.ReactElement {
-  return <StyledScope className={className}>{children}</StyledScope>
-}
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export interface MotionScopeProps {
+  children: ReactNode
+  className?: string
+}
+
+//#region styled-components
+
+const StyledScope = styled.div`
+  display: contents;
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 1ms !important;
+      scroll-behavior: auto !important;
+      transition-duration: 1ms !important;
+    }
+  }
+`
+
+//#endregion
+
+export function MotionScope({
+  children,
+  className,
+}: MotionScopeProps): React.ReactElement {
+  return <StyledScope className={className}>{children}</StyledScope>
+}

package/src/components/common/containers/PageHeader.tsx

@@ -1,35 +1,35 @@
-import { FlexCol, FlexRow } from './flex.js'
-import { Heading } from '../typography/Heading.js'
-import { Kicker } from '../typography/Kicker.js'
-import { Text } from '../typography/Text.js'
-
-export interface PageHeaderProps {
-  title: string
-  description?: string
-  kicker?: string
-  actions?: React.ReactNode
-}
-
-export function PageHeader({
-  title,
-  description,
-  kicker,
-  actions,
-}: PageHeaderProps): React.ReactElement {
-  return (
-    <header style={{ maxWidth: '48rem', width: '100%' }}>
-      <FlexRow $justify="between" $align="start" $gap="md">
-        <FlexCol $gap="xs">
-          {kicker ? <Kicker>{kicker}</Kicker> : null}
-          <Heading level={1}>{title}</Heading>
-          {description ? (
-            <Text as="p" tone="secondary">
-              {description}
-            </Text>
-          ) : null}
-        </FlexCol>
-        {actions ? <FlexRow $flex="0 0 auto">{actions}</FlexRow> : null}
-      </FlexRow>
-    </header>
-  )
-}
+import { FlexCol, FlexRow } from './flex.js'
+import { Heading } from '../typography/Heading.js'
+import { Kicker } from '../typography/Kicker.js'
+import { Text } from '../typography/Text.js'
+
+export interface PageHeaderProps {
+  title: string
+  description?: string
+  kicker?: string
+  actions?: React.ReactNode
+}
+
+export function PageHeader({
+  title,
+  description,
+  kicker,
+  actions,
+}: PageHeaderProps): React.ReactElement {
+  return (
+    <header style={{ maxWidth: '48rem', width: '100%' }}>
+      <FlexRow $justify="between" $align="start" $gap="md">
+        <FlexCol $gap="xs">
+          {kicker ? <Kicker>{kicker}</Kicker> : null}
+          <Heading level={1}>{title}</Heading>
+          {description ? (
+            <Text as="p" tone="secondary">
+              {description}
+            </Text>
+          ) : null}
+        </FlexCol>
+        {actions ? <FlexRow $flex="0 0 auto">{actions}</FlexRow> : null}
+      </FlexRow>
+    </header>
+  )
+}