@juspay/blend-design-system 0.0.37-beta.7 → 0.0.37

package/lib/components/Charts/Charts.tsx

@@ -29,6 +29,7 @@ const Charts: React.FC<ChartsProps> = ({
     chartHeaderSlot,
     stackedLegends = false,
     stackedLegendsData,
+    showAllLegends = false,
     barsize,
     xAxis,
     yAxis,
@@ -404,6 +405,7 @@ const Charts: React.FC<ChartsProps> = ({
                                               hoveredKey={hoveredKey}
                                               activeKeys={selectedKeys}
                                               stacked={false}
+                                              showAllLegends={showAllLegends}
                                           />
                                       }
                                       <Block
@@ -566,6 +568,7 @@ const Charts: React.FC<ChartsProps> = ({
                                               stackedLegendsData={
                                                   stackedLegendsData
                                               }
+                                              showAllLegends={showAllLegends}
                                           />
                                       </Block>
                                   </Block>
@@ -714,6 +717,9 @@ const Charts: React.FC<ChartsProps> = ({
                                                   hoveredKey={hoveredKey}
                                                   activeKeys={selectedKeys}
                                                   stacked={false}
+                                                  showAllLegends={
+                                                      showAllLegends
+                                                  }
                                               />
                                           </Block>
                                       )}
@@ -827,6 +833,9 @@ const Charts: React.FC<ChartsProps> = ({
                                                           stackedLegendsData={
                                                               stackedLegendsData
                                                           }
+                                                          showAllLegends={
+                                                              showAllLegends
+                                                          }
                                                       />
                                                   )}
                                                   {stackedLegends && (
@@ -987,6 +996,7 @@ const Charts: React.FC<ChartsProps> = ({
                                               stackedLegendsData={
                                                   stackedLegendsData
                                               }
+                                              showAllLegends={showAllLegends}
                                           />
                                       </Block>
                                   </Block>

package/lib/components/Charts/index.ts

@@ -1,14 +1,24 @@
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as Charts } from './Charts'
 
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as CoreChart } from './CoreChart'
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as ChartContainer } from './ChartContainer'
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as ChartHeader } from './ChartHeader'
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as ChartLegends } from './ChartLegend'
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as SankeyNode } from './SankeyNode'
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as SankeyLink } from './SankeyLink'
 
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as BlendChart } from './BlendChart'
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as BlendChartContainer } from './BlendChartContainer'
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as BlendChartHeader } from './BlendChartHeader'
 export * from './chart.tokens'
 export * from './types'

package/lib/components/Charts/types.tsx

@@ -184,6 +184,7 @@ export type ChartsProps = {
     chartHeaderSlot: ReactNode
     stackedLegends?: boolean
     stackedLegendsData?: StackedLegendsDataPoint[]
+    showAllLegends?: boolean
     barsize?: number
     xAxis?: XAxisConfig
     yAxis?: YAxisConfig
@@ -236,6 +237,7 @@ export type ChartLegendsProps = {
     isSmallScreen?: boolean
     stackedLegendsData?: StackedLegendsDataPoint[]
     legends?: { title: string; total?: string }[]
+    showAllLegends?: boolean
 }
 
 export type CustomTooltipProps = TooltipProps<ValueType, NameType> & {

package/lib/components/ChatInput/index.tsx

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use ChatInputV2 instead. */
 export { default as ChatInput } from './ChatInput'
 export * from './chatInput.tokens'
 export * from './types'

package/lib/components/Checkbox/index.ts

@@ -1,2 +1,3 @@
+/** @deprecated Will be deprecated soon. Use CheckboxV2 instead. */
 export { Checkbox } from './Checkbox'
 export * from './types'

package/lib/components/CodeEditor/MonacoEditorWrapper.tsx

@@ -5,9 +5,13 @@ import Block from '../Primitives/Block/Block'
 import type { CodeBlockTokenType } from '../CodeBlock/codeBlock.token'
 import './monaco-editor.css'
 
+// Monaco registers only `javascript`/`typescript` (VS Code's
+// `javascriptreact`/`typescriptreact` IDs are not registered, so they would
+// fall back to plaintext with no highlighting). Monaco's JS/TS tokenizers
+// handle JSX/TSX syntax fine, so map the ergonomic aliases onto them.
 const LANGUAGE_MAP: Record<string, string> = {
-    jsx: 'javascriptreact',
-    tsx: 'typescriptreact',
+    jsx: 'javascript',
+    tsx: 'typescript',
 }
 
 const mapLanguage = (value: string) => LANGUAGE_MAP[value] ?? value

package/lib/components/CodeEditor/index.ts

@@ -1,2 +1,3 @@
+/** @deprecated Will be deprecated soon. Use CodeEditorV2 instead. */
 export { default as CodeEditor } from './CodeEditor'
 export * from './types'

package/lib/components/CodeEditor/types.ts

@@ -1,11 +1,61 @@
 import type { ReactNode } from 'react'
-import type { SupportedLanguage } from '../CodeBlock/types'
 
 export enum CodeEditorVariant {
     DEFAULT = 'default',
     NO_GUTTER = 'no-gutter',
 }
 
+/**
+ * Common Monaco language IDs, provided purely for IDE autocomplete on the
+ * `language` prop — NOT a runtime constraint. Every entry is verified against
+ * the language IDs monaco-editor actually registers (Monaco does not export a
+ * static union of its built-in IDs; they are only enumerable at runtime via
+ * `monaco.languages.getLanguages()`). Note Monaco's plain-text ID is
+ * `plaintext` and shell scripts are `shell` (there is no `bash` ID). Monaco
+ * also has no distinct `jsx`/`tsx` IDs — those still work through the open
+ * string arm of {@link CodeEditorLanguage}: the editor maps them onto the
+ * `javascript`/`typescript` tokenizers.
+ */
+export type KnownCodeEditorLanguage =
+    | 'javascript'
+    | 'typescript'
+    | 'json'
+    | 'css'
+    | 'scss'
+    | 'less'
+    | 'html'
+    | 'xml'
+    | 'markdown'
+    | 'yaml'
+    | 'ini'
+    | 'graphql'
+    | 'sql'
+    | 'python'
+    | 'rust'
+    | 'go'
+    | 'java'
+    | 'kotlin'
+    | 'swift'
+    | 'c'
+    | 'cpp'
+    | 'csharp'
+    | 'php'
+    | 'ruby'
+    | 'shell'
+    | 'powershell'
+    | 'dockerfile'
+    | 'plaintext'
+
+/**
+ * Language accepted by {@link CodeEditorProps.language}: autocomplete for
+ * {@link KnownCodeEditorLanguage}, while `(string & {})` keeps the prop open
+ * to every other Monaco language ID (the component forwards to Monaco, whose
+ * own `language` option is a plain `string`). Decoupled from `CodeBlock`'s
+ * `SupportedLanguage`, which is scoped to CodeBlock's hand-rolled tokenizer
+ * rather than Monaco.
+ */
+export type CodeEditorLanguage = KnownCodeEditorLanguage | (string & {})
+
 export type CodeEditorProps = {
     value: string
     onChange?: (value: string) => void
@@ -30,7 +80,7 @@ export type CodeEditorProps = {
      */
     showLeftIcon?: boolean
     showCopyButton?: boolean
-    language?: SupportedLanguage
+    language?: CodeEditorLanguage
     placeholder?: string
     readOnly?: boolean
     disabled?: boolean

package/lib/components/CodeEditorV2/MonacoEditor/MonacoEditorWrapper.tsx

@@ -25,9 +25,13 @@ import { CSSObject } from 'styled-components'
 // Language mapping
 // ---------------------------------------------------------------------------
 
+// Monaco registers only `javascript`/`typescript` (VS Code's
+// `javascriptreact`/`typescriptreact` IDs are not registered, so they would
+// fall back to plaintext with no highlighting). Monaco's JS/TS tokenizers
+// handle JSX/TSX syntax fine, so map the ergonomic aliases onto them.
 const LANGUAGE_MAP: Record<string, string> = {
-    jsx: 'javascriptreact',
-    tsx: 'typescriptreact',
+    jsx: 'javascript',
+    tsx: 'typescript',
 }
 
 const mapLanguage = (lang: string) => LANGUAGE_MAP[lang] ?? lang

package/lib/components/CodeEditorV2/codeEditorV2.types.ts

@@ -21,19 +21,58 @@ export type CodeEditorV2DiffLine = {
     type: CodeEditorV2DiffLineType
 }
 
-export type CodeEditorV2SupportedLanguage =
+/**
+ * Common Monaco language IDs, provided purely for IDE autocomplete on the
+ * `language` prop — NOT a runtime constraint. Every entry is verified against
+ * the language IDs monaco-editor actually registers (Monaco does not export a
+ * static union of its built-in IDs; they are only enumerable at runtime via
+ * `monaco.languages.getLanguages()`). Note Monaco's plain-text ID is
+ * `plaintext` and shell scripts are `shell` (there is no `bash` ID). Monaco
+ * also has no distinct `jsx`/`tsx` IDs — those still work through the open
+ * string arm of {@link CodeEditorV2Language}: the editor maps them onto the
+ * `javascript`/`typescript` tokenizers.
+ */
+export type KnownCodeEditorV2Language =
     | 'javascript'
     | 'typescript'
-    | 'jsx'
-    | 'tsx'
     | 'json'
     | 'css'
+    | 'scss'
+    | 'less'
     | 'html'
+    | 'xml'
     | 'markdown'
     | 'yaml'
+    | 'ini'
+    | 'graphql'
+    | 'sql'
     | 'python'
     | 'rust'
-    | 'haskell'
+    | 'go'
+    | 'java'
+    | 'kotlin'
+    | 'swift'
+    | 'c'
+    | 'cpp'
+    | 'csharp'
+    | 'php'
+    | 'ruby'
+    | 'shell'
+    | 'powershell'
+    | 'dockerfile'
+    | 'plaintext'
+
+/**
+ * Language accepted by {@link CodeEditorV2Props.language}: autocomplete for
+ * {@link KnownCodeEditorV2Language}, while `(string & {})` keeps the prop open
+ * to every other Monaco language ID (matching the internal
+ * `MonacoEditorWrapper`'s `language: string` — Monaco itself types the option
+ * as a plain `string`).
+ */
+export type CodeEditorV2Language = KnownCodeEditorV2Language | (string & {})
+
+/** @deprecated Use {@link CodeEditorV2Language} instead. */
+export type CodeEditorV2SupportedLanguage = CodeEditorV2Language
 
 export type CodeEditorV2Dimensions = {
     width?: CSSObject['width']
@@ -56,7 +95,7 @@ export type CodeEditorV2Props = {
         rightSlot?: ReactNode
         showCopyButton?: boolean
     }
-    language?: CodeEditorV2SupportedLanguage
+    language?: CodeEditorV2Language
     placeholder?: string
     readOnly?: boolean
     disabled?: boolean

package/lib/components/DataTable/DataTable.tsx

@@ -155,6 +155,8 @@ const DataTable = forwardRef(
             onInsertRight,
             onDeleteColumn,
             getRowStyle,
+            enableRowAnimation,
+            rowAnimationConfig,
             tableBodyHeight,
             mobileColumnsToShow,
             enablePivotTable = false,
@@ -1997,6 +1999,12 @@ const DataTable = forwardRef(
                                                           ) => boolean)
                                                         | undefined
                                                 }
+                                                enableRowAnimation={
+                                                    enableRowAnimation
+                                                }
+                                                rowAnimationConfig={
+                                                    rowAnimationConfig
+                                                }
                                             />
                                         )}
                                     </table>

package/lib/components/DataTable/TableBody/index.tsx

@@ -1,4 +1,11 @@
-import React, { forwardRef, useMemo, useRef, useEffect, useState } from 'react'
+import React, {
+    forwardRef,
+    useMemo,
+    useRef,
+    useEffect,
+    useState,
+    useCallback,
+} from 'react'
 import {
     Edit,
     Save,
@@ -18,6 +25,7 @@ import Menu from '../../Menu/Menu'
 import { MenuAlignment, MenuSide } from '../../Menu/types'
 import Skeleton from '../../Skeleton/Skeleton'
 import { getSkeletonState } from '../../Skeleton/utils'
+import { useRowFlip } from '../hooks/useRowFlip'
 
 import { Button, ButtonType, ButtonSize, ButtonSubType } from '../../Button'
 import { Checkbox, CheckboxSize } from '../../Checkbox'
@@ -571,6 +579,8 @@ const TableBody = forwardRef<
             isRowLoading,
             focusedCell,
             onCellFocus,
+            enableRowAnimation = false,
+            rowAnimationConfig,
         },
         ref
     ) => {
@@ -650,13 +660,33 @@ const TableBody = forwardRef<
             return `tbody-${len}-${firstId}-${lastId}`
         }, [currentData, dataVersion, idField])
 
+        const orderedRowIds = useMemo(
+            () => currentData.map((row) => String(row[idField])),
+            [currentData, idField]
+        )
+
+        const { register } = useRowFlip(
+            enableRowAnimation ? orderedRowIds : [],
+            rowAnimationConfig
+        )
+
+        const getFlipRefCallback = useCallback(
+            (rowId: string) => (el: HTMLTableRowElement | null) => {
+                if (!enableRowAnimation) return
+                register(rowId, el)
+            },
+            [enableRowAnimation, register]
+        )
+
+        const isPageTransition = !enableRowAnimation
+
         return (
             <motion.tbody
-                key={tbodyKey}
+                key={isPageTransition ? tbodyKey : undefined}
                 ref={ref}
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                transition={{ duration: 0.3 }}
+                initial={isPageTransition ? { opacity: 0 } : undefined}
+                animate={isPageTransition ? { opacity: 1 } : undefined}
+                transition={isPageTransition ? { duration: 0.3 } : undefined}
                 style={{
                     backgroundColor: FOUNDATION_THEME.colors.gray[0],
                 }}
@@ -685,7 +715,6 @@ const TableBody = forwardRef<
                           const isSelected = selectedRows[rowId] || false
                           const rowAriaLabel = `Row ${index + 1}${isSelected ? ', selected' : ''}${isExpanded ? ', expanded' : ''}`
 
-                          // Helper to calculate absolute column index
                           const getAbsoluteColIndex = (
                               relativeColIndex: number
                           ) => {
@@ -695,11 +724,18 @@ const TableBody = forwardRef<
                               return colIndex
                           }
 
-                          const rowKey = `${rowId}-${index}`
+                          const rowKey = enableRowAnimation
+                              ? rowId
+                              : `${rowId}-${index}`
 
                           return (
                               <React.Fragment key={rowKey}>
                                   <TableRow
+                                      ref={
+                                          enableRowAnimation
+                                              ? getFlipRefCallback(rowId)
+                                              : undefined
+                                      }
                                       $isClickable={!!onRowClick}
                                       $customBackgroundColor={
                                           rowStyling.backgroundColor
@@ -1156,6 +1192,9 @@ const TableBody = forwardRef<
                                                           $hasCustomBackground={
                                                               hasCustomBackground
                                                           }
+                                                          $isFirstRow={
+                                                              index === 0
+                                                          }
                                                           data-row-index={index}
                                                           data-col-index={
                                                               absoluteColIndex
@@ -1188,9 +1227,6 @@ const TableBody = forwardRef<
                                                                   getFrozenBodyStyles()),
                                                               outline: 'none',
                                                           }}
-                                                          $isFirstRow={
-                                                              index === 0
-                                                          }
                                                       >
                                                           <Skeleton
                                                               variant={
@@ -1537,6 +1573,7 @@ const TableBody = forwardRef<
                                                       $hasCustomBackground={
                                                           hasCustomBackground
                                                       }
+                                                      $isFirstRow={index === 0}
                                                       data-row-index={index}
                                                       data-col-index={
                                                           columnManagerColIndex
@@ -1562,7 +1599,6 @@ const TableBody = forwardRef<
                                                           )
                                                       }
                                                       role="gridcell"
-                                                      $isFirstRow={index === 0}
                                                       style={{
                                                           minWidth:
                                                               FOUNDATION_THEME

package/lib/components/DataTable/TableBody/types.ts

@@ -1,4 +1,8 @@
-import { ColumnDefinition, RowActionsConfig } from '../types'
+import {
+    ColumnDefinition,
+    RowActionsConfig,
+    RowAnimationConfig,
+} from '../types'
 import { MobileDataTableConfig } from '../hooks/useMobileDataTable'
 import type { SkeletonVariant } from '../../Skeleton/skeleton.tokens'
 
@@ -57,4 +61,6 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
     isRowLoading?: (row: T, index: number) => boolean
     focusedCell?: { rowIndex: number; colIndex: number } | null
     onCellFocus?: (rowIndex: number, colIndex: number) => void
+    enableRowAnimation?: boolean
+    rowAnimationConfig?: RowAnimationConfig
 }

package/lib/components/DataTable/TableCell/index.tsx

@@ -576,8 +576,8 @@ const TableCell = forwardRef<
                     column.type === ColumnType.REACT_ELEMENT ||
                     (isEditing && column.isEditable)
                 }
-                $isFirstRow={isFirstRow}
                 $customBackgroundColor={customBackgroundColor}
+                $isFirstRow={isFirstRow}
                 $hasCustomBackground={hasCustomBackground}
                 data-row-index={dataRowIndex}
                 data-col-index={dataColIndex}

package/lib/components/DataTable/hooks/index.ts

@@ -1,2 +1,4 @@
 export { useMobileDataTable } from './useMobileDataTable'
 export type { MobileDataTableConfig } from './useMobileDataTable'
+export { useReducedMotion } from './useReducedMotion'
+export { useRowFlip } from './useRowFlip'

package/lib/components/DataTable/hooks/useReducedMotion.ts

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react'
+
+export function useReducedMotion(): boolean {
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+        if (typeof window === 'undefined') return false
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    })
+
+    useEffect(() => {
+        const mql = window.matchMedia('(prefers-reduced-motion: reduce)')
+        const handler = (e: MediaQueryListEvent) => {
+            setPrefersReducedMotion(e.matches)
+        }
+        mql.addEventListener('change', handler)
+        return () => mql.removeEventListener('change', handler)
+    }, [])
+
+    return prefersReducedMotion
+}

package/lib/components/DataTable/hooks/useRowFlip.ts

@@ -0,0 +1,170 @@
+import { useRef, useLayoutEffect, useCallback, useMemo } from 'react'
+import { useReducedMotion } from './useReducedMotion'
+import type { RowAnimationConfig } from '../types'
+
+function toCssTransition(config: RowAnimationConfig): {
+    transition: string
+    duration: number
+} {
+    if (config.transitionType === 'bezier') {
+        const [p0, p1, p2, p3] = config.bezier
+        const cssBezier = `cubic-bezier(${p0}, ${p1}, ${p2}, ${p3})`
+        return {
+            duration: config.duration,
+            transition: `transform ${config.duration}s ${cssBezier}, opacity ${config.duration}s ${cssBezier}`,
+        }
+    }
+
+    const cssBezier = `cubic-bezier(0.32, 0.72, 0, 1)`
+    const transition = `transform 0.35s ${cssBezier}, opacity 0.35s ${cssBezier}`
+    return {
+        duration: 0.35,
+        transition,
+    }
+}
+
+interface UseRowFlipReturn {
+    register: (id: string, el: HTMLTableRowElement | null) => void
+}
+
+export function useRowFlip(
+    orderedIds: string[],
+    animationConfig?: RowAnimationConfig
+): UseRowFlipReturn {
+    const elementsRef = useRef<Map<string, HTMLTableRowElement>>(new Map())
+    const prevTopsRef = useRef<Map<string, number>>(new Map())
+    const prevIdsRef = useRef<Set<string>>(new Set())
+    const configRef = useRef<RowAnimationConfig | undefined>(animationConfig)
+    const orderedIdsRef = useRef(orderedIds)
+    const prefersReducedMotion = useReducedMotion()
+    const cleanupTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+    const serializedOrderedIds = useMemo(
+        () => JSON.stringify(orderedIds),
+        [orderedIds]
+    )
+
+    configRef.current = animationConfig
+    orderedIdsRef.current = orderedIds
+
+    const register = useCallback(
+        (id: string, el: HTMLTableRowElement | null) => {
+            if (el === null) {
+                elementsRef.current.delete(id)
+            } else {
+                elementsRef.current.set(id, el)
+            }
+        },
+        []
+    )
+
+    useLayoutEffect(() => {
+        const currentOrderedIds = orderedIdsRef.current
+        const currentConfig = configRef.current
+
+        if (prefersReducedMotion) {
+            const newTops = new Map<string, number>()
+            for (const id of currentOrderedIds) {
+                const el = elementsRef.current.get(id)
+                if (el) {
+                    newTops.set(id, el.getBoundingClientRect().top)
+                }
+            }
+            prevTopsRef.current = newTops
+            prevIdsRef.current = new Set(currentOrderedIds)
+            return
+        }
+
+        const currentTops = new Map<string, number>()
+        for (const id of currentOrderedIds) {
+            const el = elementsRef.current.get(id)
+            if (el) {
+                currentTops.set(id, el.getBoundingClientRect().top)
+            }
+        }
+
+        if (!currentConfig) {
+            prevTopsRef.current = currentTops
+            prevIdsRef.current = new Set(currentOrderedIds)
+            return
+        }
+
+        const { transition: cssTransition, duration } =
+            toCssTransition(currentConfig)
+        const enterDuration = currentConfig.enterDuration
+        const enterOffset = currentConfig.enterOffset
+
+        const prevIds = prevIdsRef.current
+        const newRowIdSet = new Set(
+            currentOrderedIds.filter((id) => !prevIds.has(id))
+        )
+
+        for (const [id, newTop] of currentTops) {
+            if (newRowIdSet.has(id)) continue
+
+            const prevTop = prevTopsRef.current.get(id)
+            if (prevTop === undefined) continue
+
+            const delta = prevTop - newTop
+            if (Math.abs(delta) < 1) continue
+
+            const el = elementsRef.current.get(id)
+            if (!el) continue
+
+            el.style.transition = 'none'
+            el.style.transform = `translateY(${delta}px)`
+
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    el.style.transition = cssTransition
+                    el.style.transform = ''
+                })
+            })
+        }
+
+        for (const id of newRowIdSet) {
+            const el = elementsRef.current.get(id)
+            if (!el) continue
+
+            el.style.transition = 'none'
+            el.style.transform = `translateY(${enterOffset}px)`
+            el.style.opacity = '0'
+
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    el.style.transition = `transform ${enterDuration}s cubic-bezier(0.32, 0.72, 0, 1), opacity ${enterDuration}s cubic-bezier(0.32, 0.72, 0, 1)`
+                    el.style.transform = ''
+                    el.style.opacity = '1'
+                })
+            })
+        }
+
+        const cleanupTimeout = Math.max(duration, enterDuration) * 1000 + 50
+
+        if (cleanupTimeoutRef.current) {
+            clearTimeout(cleanupTimeoutRef.current)
+        }
+
+        cleanupTimeoutRef.current = setTimeout(() => {
+            for (const id of currentOrderedIds) {
+                const el = elementsRef.current.get(id)
+                if (el) {
+                    el.style.transition = ''
+                    el.style.transform = ''
+                    el.style.opacity = ''
+                }
+            }
+        }, cleanupTimeout)
+
+        prevTopsRef.current = currentTops
+        prevIdsRef.current = new Set(currentOrderedIds)
+
+        return () => {
+            if (cleanupTimeoutRef.current) {
+                clearTimeout(cleanupTimeoutRef.current)
+                cleanupTimeoutRef.current = null
+            }
+        }
+    }, [serializedOrderedIds, prefersReducedMotion])
+
+    return { register }
+}