@mui/internal-docs-infra 0.1.0 → 0.1.1-alpha.0

package/{useDemo → build/useDemo}/index.d.ts

@@ -1,44 +1,29 @@
 import * as React from 'react';
-import { Nodes } from 'hast';
 import { UseCopierOpts } from "../useCopier/index.js";
-type Source = Nodes;
-export type Variant = {
-  component: React.ReactNode;
-  fileName: string;
-  source: Source;
-  extraSource?: {
-    [key: string]: Source;
-  };
-};
-export type Demo = {
-  name?: string;
-  slug?: string;
-  description?: string;
-  variants: {
-    [key: string]: Variant;
-  };
-};
+import { ContentProps } from "../CodeHighlighter/types.js";
 type UseDemoOpts = {
   defaultOpen?: boolean;
   copy?: UseCopierOpts;
   githubUrlPrefix?: string;
   codeSandboxUrlPrefix?: string;
   stackBlitzPrefix?: string;
+  initialVariant?: string;
+  initialTransform?: string;
 };
-export declare function useDemo(demo: Demo, opts?: UseDemoOpts): {
-  component: React.ReactNode;
+export declare function useDemo(contentProps: ContentProps, opts?: UseDemoOpts): {
   name: string | undefined;
   slug: string | undefined;
   description: string | undefined;
+  component: React.ReactNode;
   ref: React.RefObject<HTMLDivElement | null>;
   variants: string[];
   selectedVariant: string;
   selectVariant: React.Dispatch<React.SetStateAction<string>>;
-  files: {
+  files: Array<{
     name: string;
-    component: JSX.Element;
-  }[];
-  selectedFile: any;
+    component: React.ReactNode;
+  }>;
+  selectedFile: React.ReactNode;
   selectedFileName: string;
   selectFileName: React.Dispatch<React.SetStateAction<string>>;
   expanded: boolean;
@@ -47,5 +32,8 @@ export declare function useDemo(demo: Demo, opts?: UseDemoOpts): {
   resetFocus: () => void;
   copy: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
   copyDisabled: boolean;
+  availableTransforms: string[];
+  selectedTransform: string | null | undefined;
+  selectTransform: (transformName: string | null) => void;
 };
 export {};

package/build/useDemo/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDemo = useDemo;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var React = _interopRequireWildcard(require("react"));
+var _kebabCase = _interopRequireDefault(require("kebab-case"));
+var _useCode = require("../useCode");
+// TODO: take initialVariant and initialTransforms as parameters
+function useDemo(contentProps, opts) {
+  var codeResult = (0, _useCode.useCode)(contentProps, opts);
+  var slug = React.useMemo(function () {
+    return contentProps.slug || (contentProps.name ? (0, _kebabCase["default"])(contentProps.name, false) : undefined);
+  }, [contentProps.slug, contentProps.name]);
+  return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, codeResult), {}, {
+    // Demo-specific additions
+    name: contentProps.name,
+    slug: slug,
+    description: contentProps.description
+  });
+}

package/build/useOnHydrate/index.d.ts

@@ -0,0 +1 @@
+export * from "./useOnHydrate.js";

package/build/useOnHydrate/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useOnHydrate = require("./useOnHydrate");
+Object.keys(_useOnHydrate).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useOnHydrate[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useOnHydrate[key];
+    }
+  });
+});

package/build/useOnHydrate/useOnHydrate.d.ts

@@ -0,0 +1 @@
+export declare function useOnHydrate(callback?: () => void): boolean;

package/build/useOnHydrate/useOnHydrate.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnHydrate = useOnHydrate;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var React = _interopRequireWildcard(require("react"));
+function useOnHydrate(callback) {
+  var _React$useState = React.useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    isHydrated = _React$useState2[0],
+    setIsHydrated = _React$useState2[1];
+  var callbackRef = React.useRef(callback);
+  callbackRef.current = callback;
+  React.useEffect(function () {
+    if (typeof window !== 'undefined') {
+      var _callbackRef$current;
+      (_callbackRef$current = callbackRef.current) == null || _callbackRef$current.call(callbackRef);
+      setIsHydrated(true);
+    }
+  }, []);
+  return isHydrated;
+}

package/build/useOnIdle/index.d.ts

@@ -0,0 +1 @@
+export * from "./useOnIdle.js";

package/build/useOnIdle/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useOnIdle = require("./useOnIdle");
+Object.keys(_useOnIdle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useOnIdle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useOnIdle[key];
+    }
+  });
+});

package/build/useOnIdle/useOnIdle.d.ts

@@ -0,0 +1 @@
+export declare function useOnIdle(callback?: () => void, timeout?: number): boolean;

package/build/useOnIdle/useOnIdle.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnIdle = useOnIdle;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var React = _interopRequireWildcard(require("react"));
+function useOnIdle(callback) {
+  var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
+  var _React$useState = React.useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    isIdle = _React$useState2[0],
+    setIsIdle = _React$useState2[1];
+  var callbackRef = React.useRef(callback);
+  callbackRef.current = callback;
+  React.useEffect(function () {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+    var handleIdle = function handleIdle() {
+      var _callbackRef$current;
+      (_callbackRef$current = callbackRef.current) == null || _callbackRef$current.call(callbackRef);
+      setIsIdle(true);
+    };
+    var idleCallbackId;
+    var timeoutId;
+    if ('requestIdleCallback' in window) {
+      idleCallbackId = window.requestIdleCallback(handleIdle, {
+        timeout: timeout
+      });
+    } else {
+      timeoutId = setTimeout(handleIdle, timeout);
+    }
+    return function () {
+      if (idleCallbackId && 'cancelIdleCallback' in window) {
+        window.cancelIdleCallback(idleCallbackId);
+      }
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [timeout]);
+  return isIdle;
+}

package/package.json

@@ -1,14 +1,8 @@
 {
   "name": "@mui/internal-docs-infra",
-  "version": "0.1.0",
+  "version": "0.1.1-alpha.0",
   "author": "MUI Team",
   "description": "MUI Infra - internal documentation creation tools.",
-  "main": "./index.js",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": "./index.js",
-    "./*": "./*/index.js"
-  },
   "keywords": [
     "react",
     "react-component",
@@ -28,12 +22,51 @@
   "homepage": "https://github.com/mui/mui-public/tree/master/packages/docs-infra",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@types/hast": "^3.0.4",
+    "@babel/standalone": "^7.28.1",
+    "@wooorm/starry-night": "^3.8.0",
     "clipboard-copy": "^4.0.1",
-    "hast": "^1.0.0",
     "hast-util-to-jsx-runtime": "^2.3.6",
+    "hast-util-to-mdast": "^10.1.2",
     "hast-util-to-text": "^4.0.2",
-    "kebab-case": "^2.0.2"
+    "js-sha256": "^0.11.1",
+    "jsondiffpatch": "^0.7.3",
+    "kebab-case": "^2.0.2",
+    "prettier": "^3.5.3",
+    "rehype-parse": "^9.0.1",
+    "rehype-remark": "^10.0.1",
+    "rehype-sanitize": "^6.0.0",
+    "remark-stringify": "^11.0.0",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0",
+    "vscode-oniguruma": "^2.0.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.27.2",
+    "@babel/core": "^7.27.4",
+    "@babel/plugin-transform-react-constant-elements": "^7.27.1",
+    "@babel/plugin-transform-runtime": "^7.27.4",
+    "@testing-library/react": "^16.3.0",
+    "@types/babel__standalone": "^7.1.9",
+    "@types/babel__traverse": "^7.20.7",
+    "@types/hast": "^3.0.4",
+    "@types/mdast": "^4.0.4",
+    "@types/node": "^24.0.3",
+    "@types/react": "^19.1.8",
+    "babel-plugin-istanbul": "^7.0.0",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "babel-plugin-optimize-clsx": "^2.6.2",
+    "babel-plugin-react-remove-properties": "^0.3.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "csstype": "^3.1.3",
+    "execa": "^7.2.0",
+    "fast-glob": "^3.3.2",
+    "fs-extra": "^11.3.0",
+    "jsonc-parser": "^3.3.1",
+    "next": "^15.3.4",
+    "react": "^19.1.0",
+    "rimraf": "^6.0.1",
+    "yargs": "^17.7.2"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -45,13 +78,52 @@
       "optional": true
     }
   },
+  "exports": {
+    "./*": {
+      "import": "./build/esm/*/index.js",
+      "require": "./build/*/index.js",
+      "types": "./build/*/index.d.ts"
+    },
+    "./*/types": {
+      "import": "./build/esm/*/types.js",
+      "require": "./build/*/types.js",
+      "types": "./build/*/types.d.ts"
+    },
+    "./*/errors": {
+      "import": "./build/esm/*/errors.js",
+      "require": "./build/*/errors.js",
+      "types": "./build/*/errors.d.ts"
+    },
+    "./transformRelativeMarkdownPaths/esm": {
+      "import": "./build/esm/transformRelativeMarkdownPaths/index.js",
+      "require": "./build/esm/transformRelativeMarkdownPaths/index.js",
+      "types": "./build/esm/transformRelativeMarkdownPaths/index.d.ts"
+    },
+    "./loadPrecomputedCodeHighlighter/esm": {
+      "import": "./build/esm/loadPrecomputedCodeHighlighter/index.js",
+      "require": "./build/esm/loadPrecomputedCodeHighlighter/index.js",
+      "types": "./build/esm/loadPrecomputedCodeHighlighter/index.d.ts"
+    }
+  },
+  "files": [
+    "build/**/*"
+  ],
   "publishConfig": {
-    "access": "public",
-    "directory": "build"
+    "access": "public"
   },
   "engines": {
     "node": ">=14.0.0"
   },
-  "private": false,
-  "module": "./esm/index.js"
+  "scripts": {
+    "build": "pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
+    "build:node": "node ./scripts/build.mjs node",
+    "build:stable": "node ./scripts/build.mjs stable",
+    "build:types": "tsx ./scripts/buildTypes.mts",
+    "build:copy-files": "node ./scripts/copyFiles.mjs",
+    "prebuild": "rimraf build",
+    "release": "pnpm build && pnpm publish --no-git-checks",
+    "test": "pnpm -w test --project @mui/internal-docs-infra",
+    "test:watch": "pnpm -w test:watch --project @mui/internal-docs-infra",
+    "typescript": "tsc -p tsconfig.json"
+  }
 }

package/esm/useDemo/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/useDemo/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAK7B,OAAO,EAAa,aAAa,EAAE,MAAM,cAAc,CAAC;AAExD,KAAK,MAAM,GAAG,KAAK,CAAC;AACpB,MAAM,MAAM,OAAO,GAAG;IACpB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACzC,CAAC;AACF,MAAM,MAAM,IAAI,GAAG;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;CACtC,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAMF,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;EA0ErD"}

package/esm/useDemo/index.js

@@ -1,104 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import * as React from 'react';
-import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
-import { toText } from 'hast-util-to-text';
-import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
-import kebabCase from 'kebab-case';
-import { useCopier } from "../useCopier/index.js";
-function toComponent(source) {
-  return toJsxRuntime(source, {
-    Fragment: Fragment,
-    jsx: jsx,
-    jsxs: jsxs
-  });
-}
-export function useDemo(demo, opts) {
-  var _ref = opts || {},
-    copyOpts = _ref.copy,
-    _ref$defaultOpen = _ref.defaultOpen,
-    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen;
-  var slug = React.useMemo(function () {
-    return demo.slug || (demo.name ? kebabCase(demo.name, false) : undefined);
-  }, [demo.slug, demo.name]);
-  var _React$useState = React.useState(defaultOpen),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    expanded = _React$useState2[0],
-    setExpanded = _React$useState2[1];
-  var expand = React.useCallback(function () {
-    return setExpanded(true);
-  }, []);
-  var ref = React.useRef(null);
-  var resetFocus = React.useCallback(function () {
-    var _ref$current;
-    (_ref$current = ref.current) == null || _ref$current.focus();
-  }, []);
-  var variantKeys = React.useMemo(function () {
-    return Object.keys(demo.variants);
-  }, [demo.variants]);
-  var _React$useState3 = React.useState(variantKeys[0]),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    selectedVariantKey = _React$useState4[0],
-    setSelectedVariantKey = _React$useState4[1];
-  var selectedVariant = demo.variants[selectedVariantKey];
-  var _React$useState5 = React.useState(selectedVariant.fileName),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    selectedFileName = _React$useState6[0],
-    setSelectedFileName = _React$useState6[1];
-  var selectedFile = React.useMemo(function () {
-    var _selectedVariant$extr;
-    return selectedFileName === selectedVariant.fileName ? selectedVariant.source : (_selectedVariant$extr = selectedVariant.extraSource) == null ? void 0 : _selectedVariant$extr[selectedFileName];
-  }, [selectedFileName, selectedVariant]);
-
-  // if copying, convert the selected file's hast to text
-  var sourceFileToText = React.useCallback(function () {
-    return selectedFile && toText(selectedFile, {
-      whitespace: 'pre'
-    });
-  },
-  // TODO: allow passing the filename to copy
-  [selectedFile]);
-  var _useCopier = useCopier(sourceFileToText, copyOpts),
-    copy = _useCopier.copy,
-    copyDisabled = _useCopier.disabled;
-
-  // transform hast source to React components
-  var files = React.useMemo(function () {
-    var extraSource = selectedVariant.extraSource;
-    return [{
-      name: selectedVariant.fileName,
-      component: toComponent(selectedVariant.source)
-    }].concat(_toConsumableArray(extraSource ? Object.keys(extraSource).map(function (name) {
-      return {
-        name: name,
-        component: toComponent(extraSource[name])
-      };
-    }) : []));
-  }, [selectedVariant]);
-  var selectedFileComponent = React.useMemo(function () {
-    var matchedFile = files.find(function (file) {
-      return file.name === selectedFileName;
-    });
-    return matchedFile ? matchedFile.component : null;
-  }, [files, selectedFileName]);
-  return {
-    component: selectedVariant.component,
-    name: demo.name,
-    slug: slug,
-    description: demo.description,
-    ref: ref,
-    variants: variantKeys,
-    selectedVariant: selectedVariantKey,
-    selectVariant: setSelectedVariantKey,
-    files: files,
-    selectedFile: selectedFileComponent,
-    selectedFileName: selectedFileName,
-    selectFileName: setSelectedFileName,
-    expanded: expanded,
-    expand: expand,
-    setExpanded: setExpanded,
-    resetFocus: resetFocus,
-    copy: copy,
-    copyDisabled: copyDisabled
-  };
-}

package/useDemo/index.js

@@ -1,112 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useDemo = useDemo;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var React = _interopRequireWildcard(require("react"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _hastUtilToText = require("hast-util-to-text");
-var _hastUtilToJsxRuntime = require("hast-util-to-jsx-runtime");
-var _kebabCase = _interopRequireDefault(require("kebab-case"));
-var _useCopier2 = require("../useCopier");
-function toComponent(source) {
-  return (0, _hastUtilToJsxRuntime.toJsxRuntime)(source, {
-    Fragment: _jsxRuntime.Fragment,
-    jsx: _jsxRuntime.jsx,
-    jsxs: _jsxRuntime.jsxs
-  });
-}
-function useDemo(demo, opts) {
-  var _ref = opts || {},
-    copyOpts = _ref.copy,
-    _ref$defaultOpen = _ref.defaultOpen,
-    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen;
-  var slug = React.useMemo(function () {
-    return demo.slug || (demo.name ? (0, _kebabCase["default"])(demo.name, false) : undefined);
-  }, [demo.slug, demo.name]);
-  var _React$useState = React.useState(defaultOpen),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    expanded = _React$useState2[0],
-    setExpanded = _React$useState2[1];
-  var expand = React.useCallback(function () {
-    return setExpanded(true);
-  }, []);
-  var ref = React.useRef(null);
-  var resetFocus = React.useCallback(function () {
-    var _ref$current;
-    (_ref$current = ref.current) == null || _ref$current.focus();
-  }, []);
-  var variantKeys = React.useMemo(function () {
-    return Object.keys(demo.variants);
-  }, [demo.variants]);
-  var _React$useState3 = React.useState(variantKeys[0]),
-    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-    selectedVariantKey = _React$useState4[0],
-    setSelectedVariantKey = _React$useState4[1];
-  var selectedVariant = demo.variants[selectedVariantKey];
-  var _React$useState5 = React.useState(selectedVariant.fileName),
-    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
-    selectedFileName = _React$useState6[0],
-    setSelectedFileName = _React$useState6[1];
-  var selectedFile = React.useMemo(function () {
-    var _selectedVariant$extr;
-    return selectedFileName === selectedVariant.fileName ? selectedVariant.source : (_selectedVariant$extr = selectedVariant.extraSource) == null ? void 0 : _selectedVariant$extr[selectedFileName];
-  }, [selectedFileName, selectedVariant]);
-
-  // if copying, convert the selected file's hast to text
-  var sourceFileToText = React.useCallback(function () {
-    return selectedFile && (0, _hastUtilToText.toText)(selectedFile, {
-      whitespace: 'pre'
-    });
-  },
-  // TODO: allow passing the filename to copy
-  [selectedFile]);
-  var _useCopier = (0, _useCopier2.useCopier)(sourceFileToText, copyOpts),
-    copy = _useCopier.copy,
-    copyDisabled = _useCopier.disabled;
-
-  // transform hast source to React components
-  var files = React.useMemo(function () {
-    var extraSource = selectedVariant.extraSource;
-    return [{
-      name: selectedVariant.fileName,
-      component: toComponent(selectedVariant.source)
-    }].concat((0, _toConsumableArray2["default"])(extraSource ? Object.keys(extraSource).map(function (name) {
-      return {
-        name: name,
-        component: toComponent(extraSource[name])
-      };
-    }) : []));
-  }, [selectedVariant]);
-  var selectedFileComponent = React.useMemo(function () {
-    var matchedFile = files.find(function (file) {
-      return file.name === selectedFileName;
-    });
-    return matchedFile ? matchedFile.component : null;
-  }, [files, selectedFileName]);
-  return {
-    component: selectedVariant.component,
-    name: demo.name,
-    slug: slug,
-    description: demo.description,
-    ref: ref,
-    variants: variantKeys,
-    selectedVariant: selectedVariantKey,
-    selectVariant: setSelectedVariantKey,
-    files: files,
-    selectedFile: selectedFileComponent,
-    selectedFileName: selectedFileName,
-    selectFileName: setSelectedFileName,
-    expanded: expanded,
-    expand: expand,
-    setExpanded: setExpanded,
-    resetFocus: resetFocus,
-    copy: copy,
-    copyDisabled: copyDisabled
-  };
-}