@mui/internal-docs-infra/useCode/useVariantSelection.js

MUI Infra - internal documentation creation tools.

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";
/**
 * Hook for managing variant selection and providing variant-related data
 * Uses the useLocalStorage hook for local storage persistence of variant preferences
 */
export function useVariantSelection(_ref) {
  var effectiveCode = _ref.effectiveCode,
    initialVariant = _ref.initialVariant,
    variantType = _ref.variantType;
  // Get variant keys from effective code
  var variantKeys = React.useMemo(function () {
    return Object.keys(effectiveCode).filter(function (key) {
      var variant = effectiveCode[key];
      return variant && _typeof(variant) === 'object' && 'source' in variant;
    });
  }, [effectiveCode]);

  // Use localStorage hook for variant persistence - this is our single source of truth
  var _usePreference = usePreference('variant', variantType || variantKeys, function () {
      // Don't use initialVariant as the fallback - localStorage should take precedence
      // We'll handle the initial variant separately in the selectedVariantKey logic
      return null;
    }),
    _usePreference2 = _slicedToArray(_usePreference, 2),
    storedValue = _usePreference2[0],
    setStoredValue = _usePreference2[1];

  // Handle validation manually - localStorage should take precedence over initialVariant
  var selectedVariantKey = React.useMemo(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 (only when no localStorage value)
    if (initialVariant && variantKeys.includes(initialVariant)) {
      return initialVariant;
    }

    // Final fallback: use first available variant
    return variantKeys[0] || '';
  }, [storedValue, variantKeys, initialVariant]);
  var setSelectedVariantKey = React.useCallback(function (value) {
    setStoredValue(value);
  }, [setStoredValue]);
  var setSelectedVariantKeyAsUser = React.useCallback(function (value) {
    var resolvedValue = typeof value === 'function' ? value(selectedVariantKey) : value;
    setStoredValue(resolvedValue);
  }, [setStoredValue, selectedVariantKey]);
  var selectedVariant = React.useMemo(function () {
    var variant = effectiveCode[selectedVariantKey];
    if (variant && _typeof(variant) === 'object' && 'source' in variant) {
      return variant;
    }
    return null;
  }, [effectiveCode, selectedVariantKey]);

  // Safety check: if selectedVariant doesn't exist, fall back to first variant
  React.useEffect(function () {
    if (!selectedVariant && variantKeys.length > 0) {
      // Don't mark this as a user selection - it's just a fallback
      // Use setValue instead of setValueAsUserSelection to avoid localStorage save
      setSelectedVariantKey(variantKeys[0]);
    }
  }, [selectedVariant, variantKeys, setSelectedVariantKey]);
  return {
    variantKeys: variantKeys,
    selectedVariantKey: selectedVariantKey,
    selectedVariant: selectedVariant,
    selectVariant: setSelectedVariantKeyAsUser
  };
}