feat: Update component

[pqoqubbw]

ENG-5527: Update

summary

refactor Update component to be generic by removing our specific dependencies and replacing them with callback props

changes

removed internal dependencies:

• useMDXContent context
• useSelectedLocale context
• useTop hook (depends on DocsConfigContext)
• scrollElementIntoView utility

new callback props for dependency injection:

prop	type	purpose
hasContext	boolean	controls whether ToC registration is enabled
isVisible	boolean	controls visibility (filtering logic moved to consumer)
onRegisterHeading	(id, rect) => void	passes rect instead of top — consumer computes position
onUnregisterHeading	(id) => void	cleanup callback
onCopyAnchorLink	(id) => void	custom behavior after copying anchor link
aria-label	string	replaces locale['aria.navigateToChangelog']

usage in our app

const { docsConfig } = useContext(DocsConfigContext);
const [context, dispatch] = useMDXContent();
const locale = useSelectedLocale();

const handleRegisterHeading = useCallback((id: string, rect: Rect) => {
  const top = docsConfig?.theme === 'almond'
    ? rect.top + document.getElementById(Ids.ContentContainer)?.scrollTop
    : rect.top + window.pageYOffset;
    
  if (typeof top !== 'undefined') {
    dispatch({ type: 'register_heading', payload: { id, top } });
  }
}, [docsConfig, dispatch]);

const isVisible = useMemo(() => {
  if (!context.changelogFilters.length) return true;
  const activeFilters = context.changelogFilters.filter((f) => f.active);
  if (!activeFilters.length) return true;
  return tags?.some((tag) => activeFilters.some((f) => f.tag === tag));
}, [context.changelogFilters, tags]);

<Update
  id="2024-01-15"
  label="January 15, 2024"
  hasContext={Boolean(context)}
  isVisible={isVisible}
  aria-label={locale['aria.navigateToChangelog']}
  onRegisterHeading={handleRegisterHeading}
  onUnregisterHeading={(id) => dispatch({ type: 'unregister_heading', payload: id })}
  onCopyAnchorLink={(id) => scrollElementIntoView({ id })}
>
  {children}
</Update>

---

Note

Implements a generic, fully featured Update component and updates stories/examples.

• Replaces placeholder with a ref-forwarding Update supporting id, label, description, tags, isVisible, hasContext, and callbacks: onRegisterHeading(id, rect), onUnregisterHeading(id), onCopyAnchorLink(id)
• Uses react-use-rect to capture element Rect for external ToC registration; dedupes/normalizes tags; copies anchor links and updates window.location.hash; hides when isVisible is false
• Storybook: switches layout to padded, sets default isVisible, and adds examples (WithDescription, WithTags, WithAllFeatures, Changelog)
• Adds react-use-rect dependency

^{Written by Cursor Bugbot for commit 6d9000f. This will update automatically on new commits. Configure here.}

[linear]

ENG-5527 Update

Move the update component into the OSS components package repository.

Check general rules and specifics in https://www.notion.so/mintlify/Docs-Components-rules-audit-2d1aa841023480ba93b7e1a8676522db

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}