<commit_before>import * as React from 'react';
import PropTypes from 'prop-types';
import copy from 'clipboard-copy';
import LZString from 'lz-string';
import { useTheme, styled } from '@mui/material/styles';
import IconButton from '@mui/material/IconButton';
import useMediaQuery from '@mui/material/useMediaQuery';
import Fade from '@mui/material/Fade';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { JavaScript as JavaScriptIcon, TypeScript as TypeScriptIcon } from '@mui/docs';
import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
import SvgIcon from '@mui/material/SvgIcon';
import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
import Snackbar from '@mui/material/Snackbar';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import Tooltip from '@mui/material/Tooltip';
import RefreshRoundedIcon from '@mui/icons-material/RefreshRounded';
import ResetFocusIcon from '@mui/icons-material/CenterFocusWeak';
import getDemoConfig from 'docs/src/modules/utils/getDemoConfig';
import { getCookie } from 'docs/src/modules/utils/helpers';
import { CODE_VARIANTS } from 'docs/src/modules/constants';
import { useSetCodeVariant } from 'docs/src/modules/utils/codeVariant';
import { useTranslate } from 'docs/src/modules/utils/i18n';
import { useRouter } from 'next/router';

function compress(object) {
  return LZString.compressToBase64(JSON.stringify(object))
    .replace(/\+/g, '-') // Convert '+' to '-'
    .replace(/\//g, '_') // Convert '/' to '_'
    .replace(/=+$/, ''); // Remove ending '='
}

function addHiddenInput(form, name, value) {
  const input = document.createElement('input');
  input.type = 'hidden';
  input.name = name;
  input.value = value;
  form.appendChild(input);
}

const Root = styled('div')(({ theme }) => ({
  display: 'none',
  [theme.breakpoints.up('sm')]: {
    display: 'flex',
    top: 0,
    height: theme.spacing(8),
    ...(theme.direction === 'rtl' && {
      left: theme.spacing(1),
    }),
    ...(theme.direction !== 'rtl' && {
      right: theme.spacing(1),
    }),
  },
  justifyContent: 'space-between',
  alignItems: 'center',
  '& .MuiSvgIcon-root': {
    fontSize: 17,
    color: theme.palette.mode === 'dark' ? theme.palette.grey[400] : theme.palette.grey[800],
  },
}));

const DemoTooltip = styled(Tooltip)(({ theme }) => ({
  zIndex: theme.zIndex.appBar - 1,
}));

function ToggleCodeTooltip(props) {
  const { showSourceHint, ...other } = props;
  const atLeastSmallViewport = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  const [open, setOpen] = React.useState(false);

  return (
    <DemoTooltip
      {...other}
      onClose={() => setOpen(false)}
      onOpen={() => setOpen(true)}
      open={showSourceHint && atLeastSmallViewport ? true : open}
    />
  );
}
ToggleCodeTooltip.propTypes = {
  showSourceHint: PropTypes.bool,
};

export function DemoToolbarFallback() {
  const t = useTranslate();

  return <Root aria-busy aria-label={t('demoToolbarLabel')} role="toolbar" />;
}

const alwaysTrue = () => true;

/**
 * @param {React.Ref<HTMLElement>[]} controlRefs
 * @param {object} [options]
 * @param {(index: number) => boolean} [options.isFocusableControl] In case certain controls become unfocusable
 * @param {number} [options.defaultActiveIndex]<commit_msg>[docs] Apply the z-index on the right DOM element (#29934)<commit_after>import * as React from 'react';
import PropTypes from 'prop-types';
import copy from 'clipboard-copy';
import LZString from 'lz-string';
import { useTheme, styled } from '@mui/material/styles';
import IconButton from '@mui/material/IconButton';
import useMediaQuery from '@mui/material/useMediaQuery';
import Fade from '@mui/material/Fade';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { JavaScript as JavaScriptIcon, TypeScript as TypeScriptIcon } from '@mui/docs';
import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
import SvgIcon from '@mui/material/SvgIcon';
import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
import Snackbar from '@mui/material/Snackbar';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import Tooltip from '@mui/material/Tooltip';
import RefreshRoundedIcon from '@mui/icons-material/RefreshRounded';
import ResetFocusIcon from '@mui/icons-material/CenterFocusWeak';
import getDemoConfig from 'docs/src/modules/utils/getDemoConfig';
import { getCookie } from 'docs/src/modules/utils/helpers';
import { CODE_VARIANTS } from 'docs/src/modules/constants';
import { useSetCodeVariant } from 'docs/src/modules/utils/codeVariant';
import { useTranslate } from 'docs/src/modules/utils/i18n';
import { useRouter } from 'next/router';

function compress(object) {
  return LZString.compressToBase64(JSON.stringify(object))
    .replace(/\+/g, '-') // Convert '+' to '-'
    .replace(/\//g, '_') // Convert '/' to '_'
    .replace(/=+$/, ''); // Remove ending '='
}

function addHiddenInput(form, name, value) {
  const input = document.createElement('input');
  input.type = 'hidden';
  input.name = name;
  input.value = value;
  form.appendChild(input);
}

const Root = styled('div')(({ theme }) => ({
  display: 'none',
  [theme.breakpoints.up('sm')]: {
    display: 'flex',
    top: 0,
    height: theme.spacing(8),
    ...(theme.direction === 'rtl' && {
      left: theme.spacing(1),
    }),
    ...(theme.direction !== 'rtl' && {
      right: theme.spacing(1),
    }),
  },
  justifyContent: 'space-between',
  alignItems: 'center',
  '& .MuiSvgIcon-root': {
    fontSize: 17,
    color: theme.palette.mode === 'dark' ? theme.palette.grey[400] : theme.palette.grey[800],
  },
}));

function DemoTooltip(props) {
  return (
    <Tooltip
      componentsProps={{
        popper: {
          sx: {
            zIndex: (theme) => theme.zIndex.appBar - 1,
          },
        },
      }}
      {...props}
    />
  );
}

function ToggleCodeTooltip(props) {
  const { showSourceHint, ...other } = props;
  const atLeastSmallViewport = useMediaQuery((theme) => theme.breakpoints.up('sm'));
  const [open, setOpen] = React.useState(false);

  return (
    <DemoTooltip
      {...other}
      onClose={() => setOpen(false)}
      onOpen={() => setOpen(true)}
      open={showSourceHint && atLeastSmallViewport ? true : open}
    />
  );
}
ToggleCodeTooltip.propTypes = {
  showSourceHint: PropTypes.bool,
};

export function DemoToolbarFallback() {
  const t = useTranslate();

  return <Root aria-busy aria-label={t('demoToolbarLabel')} role="toolbar" />;
}

const alwaysTrue = () => true;

/**
 * @param {React.Ref<HTMLElement>[]} controlRefs
 * @param {object} [options]
 * @param {(index: number) => boolean} [options.isFocusableControl] In case certain controls become unfocusable
 * @param {number} [options.defaultActiveIndex]
{'fraction_non_alphanumeric': 0.1619330224671471, 'fraction_numerical': 0.005510809665112336, 'mean_word_length': 4.278150633855332, 'pattern_counts': {'":': 0, '<': 10, '<?xml version=': 0, '>': 24, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3858529', 'n_tokens_mistral': 2294, 'n_tokens_neox': 2266, 'n_words': 501}