@mui/internal-docs-infra 0.2.1 → 0.2.3-canary.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Versions
 
+## 2.0.8
+
+Test release
+
 ## 2.0.7
 
 Test release

package/esm/useCode/useCode.js

@@ -67,7 +67,8 @@ export function useCode(contentProps, opts) {
   var variantSelection = useVariantSelection({
     effectiveCode: effectiveCode,
     initialVariant: initialVariant,
-    variantType: contentProps.variantType
+    variantType: contentProps.variantType,
+    mainSlug: userProps.slug
   });
 
   // Sub-hook: Transform Management

package/esm/useCode/useFileNavigation.d.ts

@@ -1,6 +1,20 @@
 import * as React from 'react';
 import type { VariantCode, VariantSource, Code } from "../CodeHighlighter/types.js";
 import type { TransformedFiles } from "./useCodeUtils.js";
+/**
+ * Converts a string to kebab-case
+ * @param str - The string to convert
+ * @returns kebab-case string
+ */
+export declare function toKebabCase(str: string): string;
+/**
+ * Checks if the URL hash is relevant to a specific demo
+ * Hash format is: {mainSlug}:{variantName}:{fileName} or {mainSlug}:{fileName}
+ * @param urlHash - The URL hash (without '#')
+ * @param mainSlug - The main slug for the demo
+ * @returns true if the hash starts with the demo's slug
+ */
+export declare function isHashRelevantToDemo(urlHash: string | null, mainSlug?: string): boolean;
 interface UseFileNavigationProps {
   selectedVariant: VariantCode | null;
   transformedFiles: TransformedFiles | undefined;

package/esm/useCode/useFileNavigation.js

@@ -14,12 +14,27 @@ import { Pre } from "./Pre.js";
  * @returns kebab-case string
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-function toKebabCase(str) {
+export function toKebabCase(str) {
   return str
   // Insert a dash before any uppercase letter that follows a lowercase letter or digit
   .replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase().replace(/[^a-z0-9.]+/g, '-').replace(/^-+|-+$/g, '');
 }
 
+/**
+ * Checks if the URL hash is relevant to a specific demo
+ * Hash format is: {mainSlug}:{variantName}:{fileName} or {mainSlug}:{fileName}
+ * @param urlHash - The URL hash (without '#')
+ * @param mainSlug - The main slug for the demo
+ * @returns true if the hash starts with the demo's slug
+ */
+export function isHashRelevantToDemo(urlHash, mainSlug) {
+  if (!urlHash || !mainSlug) {
+    return false;
+  }
+  var kebabSlug = toKebabCase(mainSlug);
+  return urlHash.startsWith("".concat(kebabSlug, ":"));
+}
+
 /**
  * Generates a file slug based on main slug, file name, and variant name
  * @param mainSlug - The main component/demo slug
@@ -274,8 +289,7 @@ export function useFileNavigation(_ref) {
     if (fileSlug && hash !== fileSlug) {
       // Only update if current hash is for the same demo (starts with mainSlug)
       // Don't set hash if there's no existing hash - variant changes shouldn't add hashes
-      var expectedBaseSlug = toKebabCase(mainSlug);
-      if (hash && hash.startsWith("".concat(expectedBaseSlug, ":"))) {
+      if (isHashRelevantToDemo(hash, mainSlug)) {
         setHash(fileSlug);
       }
       // Otherwise, don't update - either no hash exists or hash is for a different demo

package/esm/useCode/useVariantSelection.d.ts

@@ -4,6 +4,7 @@ interface UseVariantSelectionProps {
   effectiveCode: Code;
   initialVariant?: string;
   variantType?: string;
+  mainSlug?: string;
 }
 export interface UseVariantSelectionResult {
   variantKeys: string[];
@@ -19,6 +20,7 @@ export interface UseVariantSelectionResult {
 export declare function useVariantSelection({
   effectiveCode,
   initialVariant,
-  variantType
+  variantType,
+  mainSlug
 }: UseVariantSelectionProps): UseVariantSelectionResult;
 export {};

package/esm/useCode/useVariantSelection.js

@@ -2,6 +2,8 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import * as React from 'react';
 import { usePreference } from "../usePreference/index.js";
+import { useUrlHashState } from "../useUrlHashState/index.js";
+import { isHashRelevantToDemo } from "./useFileNavigation.js";
 /**
  * Hook for managing variant selection and providing variant-related data
  * Uses React state as source of truth, with localStorage for persistence
@@ -9,7 +11,8 @@ import { usePreference } from "../usePreference/index.js";
 export function useVariantSelection(_ref) {
   var effectiveCode = _ref.effectiveCode,
     initialVariant = _ref.initialVariant,
-    variantType = _ref.variantType;
+    variantType = _ref.variantType,
+    mainSlug = _ref.mainSlug;
   // Get variant keys from effective code
   var variantKeys = React.useMemo(function () {
     return Object.keys(effectiveCode).filter(function (key) {
@@ -18,6 +21,15 @@ export function useVariantSelection(_ref) {
     });
   }, [effectiveCode]);
 
+  // Check if there's a URL hash present that's relevant to this demo
+  // Only override localStorage if hash starts with this demo's slug
+  var _useUrlHashState = useUrlHashState(),
+    _useUrlHashState2 = _slicedToArray(_useUrlHashState, 1),
+    urlHash = _useUrlHashState2[0];
+  var hasRelevantUrlHash = React.useMemo(function () {
+    return isHashRelevantToDemo(urlHash, mainSlug);
+  }, [urlHash, mainSlug]);
+
   // Use localStorage hook for variant persistence
   var _usePreference = usePreference('variant', variantType || variantKeys, function () {
       return null;
@@ -26,14 +38,9 @@ export function useVariantSelection(_ref) {
     storedValue = _usePreference2[0],
     setStoredValue = _usePreference2[1];
 
-  // Initialize state from localStorage or initialVariant
+  // Initialize state - will be updated by effect if localStorage should be used
   var _React$useState = React.useState(function () {
-      // First priority: use stored value if it exists and is valid
-      if (storedValue && variantKeys.includes(storedValue)) {
-        return storedValue;
-      }
-
-      // Second priority: use initial variant if provided and valid
+      // Use initial variant if provided and valid
       if (initialVariant && variantKeys.includes(initialVariant)) {
         return initialVariant;
       }
@@ -45,17 +52,44 @@ export function useVariantSelection(_ref) {
     selectedVariantKey = _React$useState2[0],
     setSelectedVariantKeyState = _React$useState2[1];
 
-  // Sync with localStorage changes (but don't override programmatic changes)
+  // On mount, check if we should restore from localStorage
+  // This needs to be in an effect because we need to check hasRelevantUrlHash which depends on urlHash
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    hasInitialized = _React$useState4[0],
+    setHasInitialized = _React$useState4[1];
+  React.useEffect(function () {
+    if (hasInitialized) {
+      return;
+    }
+    setHasInitialized(true);
+
+    // If there's a relevant URL hash, don't use localStorage - hash takes priority
+    if (hasRelevantUrlHash) {
+      return;
+    }
+
+    // If we have a stored value, use it (localStorage takes priority over initialVariant)
+    if (storedValue && variantKeys.includes(storedValue)) {
+      setSelectedVariantKeyState(storedValue);
+    }
+  }, [hasInitialized, hasRelevantUrlHash, storedValue, variantKeys]);
+
+  // Sync with localStorage changes (but don't override programmatic changes or when hash is present)
   // Only sync when storedValue changes, not when selectedVariantKey changes
   var prevStoredValue = React.useRef(storedValue);
   React.useEffect(function () {
+    // Don't sync from localStorage when a relevant URL hash is present - hash takes absolute priority
+    if (hasRelevantUrlHash) {
+      return;
+    }
     if (storedValue !== prevStoredValue.current) {
       prevStoredValue.current = storedValue;
       if (storedValue && variantKeys.includes(storedValue) && storedValue !== selectedVariantKey) {
         setSelectedVariantKeyState(storedValue);
       }
     }
-  }, [storedValue, variantKeys, selectedVariantKey]);
+  }, [storedValue, variantKeys, selectedVariantKey, hasRelevantUrlHash]);
   var setSelectedVariantKeyProgrammatic = React.useCallback(function (value) {
     var resolvedValue = typeof value === 'function' ? value(selectedVariantKey) : value;
     if (variantKeys.includes(resolvedValue)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-docs-infra",
-  "version": "0.2.1",
+  "version": "0.2.3-canary.0",
   "author": "MUI Team",
   "description": "MUI Infra - internal documentation creation tools.",
   "keywords": [
@@ -53,6 +53,7 @@
   "engines": {
     "node": ">=22.12.0"
   },
+  "gitSha": "ac83e0cbcf905f4d7a2023de4c7dc600105f86e8",
   "type": "commonjs",
   "exports": {
     "./package.json": "./package.json",