@readme/markdown 15.4.0 → 15.5.0

package/components/Accordion/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 
+import { useRestartAnimatedImagesOnReveal } from '../../hooks/useRestartAnimatedImages';
 import Icon from '../Icon';
 
 import './style.scss';
@@ -8,6 +9,7 @@ interface Props extends React.PropsWithChildren<{ icon?: string; iconColor?: str
 
 const Accordion = ({ children, icon, iconColor, title }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
+  const contentRef = useRestartAnimatedImagesOnReveal<HTMLDivElement>(isOpen);
 
   return (
     <details className="Accordion" onToggle={() => setIsOpen(!isOpen)}>
@@ -16,7 +18,9 @@ const Accordion = ({ children, icon, iconColor, title }: Props) => {
         {icon && <Icon className="Accordion-icon" icon={icon} iconColor={iconColor} />}
         {title}
       </summary>
-      <div className="Accordion-content">{children}</div>
+      <div ref={contentRef} className="Accordion-content">
+        {children}
+      </div>
     </details>
   );
 };

package/components/Tabs/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 
+import useRestartAnimatedImages from '../../hooks/useRestartAnimatedImages';
 import Icon from '../Icon';
 
 import './style.scss';
@@ -14,6 +15,7 @@ interface TabsProps {
 
 const Tabs = ({ children }: TabsProps) => {
   const [activeTab, setActiveTab] = useState(0);
+  const panelRefs = useRestartAnimatedImages(activeTab);
   // React passes `children` as a single element when there's only one child, so normalize.
   const tabs = React.Children.toArray(children) as React.ReactElement[];
 
@@ -38,7 +40,13 @@ const Tabs = ({ children }: TabsProps) => {
       <section>
         {/* Keep every panel mounted so runtime Tailwind can scan inactive tabs' classes on first paint */}
         {tabs.map((tab, index: number) => (
-          <div key={tab.key} hidden={index !== activeTab}>
+          <div
+            key={tab.key}
+            ref={el => {
+              panelRefs.current[index] = el;
+            }}
+            hidden={index !== activeTab}
+          >
             {tab}
           </div>
         ))}

package/dist/hooks/useRestartAnimatedImages/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Restarts GIF playback inside the panel that just became active.
+ *
+ * Tabs keep every panel mounted, so an <img> is never re-created and a GIF is
+ * shown mid-loop (or frozen on its last frame) when its tab is re-selected.
+ *
+ * @returns a ref to attach to each panel element, indexed by tab.
+ */
+export default function useRestartAnimatedImages(activeIndex: number): import("react").MutableRefObject<HTMLDivElement[]>;
+/**
+ * Restarts GIF playback inside an element that has just been revealed after being hidden —
+ * a collapsed <details>, whose images have been animating out of sight since page load.
+ */
+export declare function useRestartAnimatedImagesOnReveal<T extends HTMLElement>(isRevealed: boolean): import("react").MutableRefObject<T>;

package/dist/lib/utils/mdxish/mdxish-expression.d.ts

@@ -1,3 +1,10 @@
+/**
+ * Collect the capitalized names an expression uses as JSX tags. Parsed rather than pattern
+ * matched: `{count < Max ? <Foo/> : <Bar/>}` puts a capitalized name straight after a `<` without
+ * it being a tag, and only the parser can tell the two apart. Unparseable input yields nothing —
+ * evaluation is about to throw on it anyway.
+ */
+export declare const jsxComponentNames: (expression: string) => string[];
 /**
  * Evaluate an expression body, transforming JSX to `React.createElement` only when the
  * parsed estree actually contains a JSX node. The raw `Function()` evaluator can't parse

package/dist/lib/utils/mdxish/mdxish-get-component-name.d.ts

@@ -1,4 +1,6 @@
 import type { CustomComponents } from '../../../types';
+/** Convert a string to PascalCase */
+export declare function toPascalCase(str: string): string;
 /**
  * Find a component in the components hash using case-insensitive matching.
  * Returns the actual key from the map, or null if not found.