@mui/internal-docs-infra 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Material-UI SAS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,17 @@
+# @mui/internal-docs-infra
+
+This package hosts the tools that help create the documentation.
+
+## Installation
+
+Install the package in your project directory with:
+
+<!-- #npm-tag-reference -->
+
+```bash
+npm install @mui/internal-docs-infra
+```
+
+## Documentation
+
+We have no documentation for these components.

package/esm/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/esm/useCopier/index.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+type OnCopied = () => void;
+type OnCopyError = (error: unknown) => void;
+type OnCopyClick = (event: React.MouseEvent<HTMLButtonElement>) => void;
+export type UseCopierOpts = {
+  onCopied?: OnCopied;
+  onError?: OnCopyError;
+  onClick?: OnCopyClick;
+  timeout?: number;
+};
+export declare function useCopier(contents: (() => string | undefined) | string, opts?: UseCopierOpts): {
+  copy: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
+  disabled: boolean;
+};
+export {};

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/useCopier/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC;AAC3B,KAAK,WAAW,GAAG,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAC5C,KAAK,WAAW,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;AACxE,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,SAAS,CAAC,QAAQ,EAAE,CAAC,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,MAAM,EAAE,IAAI,CAAC,EAAE,aAAa;kBAO3E,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC;;EA0BpD"}

package/esm/useCopier/index.js

@@ -0,0 +1,62 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import copyToClipboard from 'clipboard-copy';
+export function useCopier(contents, opts) {
+  var _ref = opts || {},
+    onCopied = _ref.onCopied,
+    onError = _ref.onError,
+    onClick = _ref.onClick,
+    _ref$timeout = _ref.timeout,
+    timeout = _ref$timeout === void 0 ? 2000 : _ref$timeout;
+  var copyTimeoutRef = React.useRef(undefined);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    disabled = _React$useState2[0],
+    setDisabled = _React$useState2[1];
+  var copy = React.useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
+      var content;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            clearTimeout(copyTimeoutRef.current);
+            setDisabled(true);
+            _context.prev = 2;
+            content = typeof contents === 'function' ? contents() : contents;
+            if (!content) {
+              _context.next = 7;
+              break;
+            }
+            _context.next = 7;
+            return copyToClipboard(content);
+          case 7:
+            onCopied == null || onCopied();
+            _context.next = 13;
+            break;
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](2);
+            onError == null || onError(_context.t0);
+          case 13:
+            onClick == null || onClick(event);
+            copyTimeoutRef.current = setTimeout(function () {
+              clearTimeout(copyTimeoutRef.current);
+              setDisabled(false);
+            }, timeout);
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 10]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [contents, timeout, onCopied, onError, onClick]);
+  return {
+    copy: copy,
+    disabled: disabled
+  };
+}

package/esm/useDemo/index.d.ts

@@ -0,0 +1,51 @@
+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;
+  };
+};
+type UseDemoOpts = {
+  defaultOpen?: boolean;
+  copy?: UseCopierOpts;
+  githubUrlPrefix?: string;
+  codeSandboxUrlPrefix?: string;
+  stackBlitzPrefix?: string;
+};
+export declare function useDemo(demo: Demo, opts?: UseDemoOpts): {
+  component: React.ReactNode;
+  name: string | undefined;
+  slug: string | undefined;
+  description: string | undefined;
+  ref: React.RefObject<HTMLDivElement | null>;
+  variants: string[];
+  selectedVariant: string;
+  selectVariant: React.Dispatch<React.SetStateAction<string>>;
+  files: {
+    name: string;
+    component: JSX.Element;
+  }[];
+  selectedFile: any;
+  selectedFileName: string;
+  selectFileName: React.Dispatch<React.SetStateAction<string>>;
+  expanded: boolean;
+  expand: () => void;
+  setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+  resetFocus: () => void;
+  copy: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
+  copyDisabled: boolean;
+};
+export {};

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,104 @@
+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/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@mui/internal-docs-infra",
+  "version": "0.1.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",
+    "material-ui",
+    "material design",
+    "docs"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mui/mui-public.git",
+    "directory": "packages/mui-docs"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mui/mui-public/issues"
+  },
+  "homepage": "https://github.com/mui/mui-public/tree/master/packages/docs-infra",
+  "dependencies": {
+    "@babel/runtime": "^7.27.6",
+    "@types/hast": "^3.0.4",
+    "clipboard-copy": "^4.0.1",
+    "hast": "^1.0.0",
+    "hast-util-to-jsx-runtime": "^2.3.6",
+    "hast-util-to-text": "^4.0.2",
+    "kebab-case": "^2.0.2"
+  },
+  "peerDependencies": {
+    "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "next": "^13.5.1 || ^14 || ^15.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "build"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "private": false,
+  "module": "./esm/index.js"
+}

package/useCopier/index.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+type OnCopied = () => void;
+type OnCopyError = (error: unknown) => void;
+type OnCopyClick = (event: React.MouseEvent<HTMLButtonElement>) => void;
+export type UseCopierOpts = {
+  onCopied?: OnCopied;
+  onError?: OnCopyError;
+  onClick?: OnCopyClick;
+  timeout?: number;
+};
+export declare function useCopier(contents: (() => string | undefined) | string, opts?: UseCopierOpts): {
+  copy: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
+  disabled: boolean;
+};
+export {};

package/useCopier/index.js

@@ -0,0 +1,70 @@
+"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.useCopier = useCopier;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var React = _interopRequireWildcard(require("react"));
+var _clipboardCopy = _interopRequireDefault(require("clipboard-copy"));
+function useCopier(contents, opts) {
+  var _ref = opts || {},
+    onCopied = _ref.onCopied,
+    onError = _ref.onError,
+    onClick = _ref.onClick,
+    _ref$timeout = _ref.timeout,
+    timeout = _ref$timeout === void 0 ? 2000 : _ref$timeout;
+  var copyTimeoutRef = React.useRef(undefined);
+  var _React$useState = React.useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    disabled = _React$useState2[0],
+    setDisabled = _React$useState2[1];
+  var copy = React.useCallback(/*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(event) {
+      var content;
+      return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            clearTimeout(copyTimeoutRef.current);
+            setDisabled(true);
+            _context.prev = 2;
+            content = typeof contents === 'function' ? contents() : contents;
+            if (!content) {
+              _context.next = 7;
+              break;
+            }
+            _context.next = 7;
+            return (0, _clipboardCopy["default"])(content);
+          case 7:
+            onCopied == null || onCopied();
+            _context.next = 13;
+            break;
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](2);
+            onError == null || onError(_context.t0);
+          case 13:
+            onClick == null || onClick(event);
+            copyTimeoutRef.current = setTimeout(function () {
+              clearTimeout(copyTimeoutRef.current);
+              setDisabled(false);
+            }, timeout);
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 10]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [contents, timeout, onCopied, onError, onClick]);
+  return {
+    copy: copy,
+    disabled: disabled
+  };
+}

package/useDemo/index.d.ts

@@ -0,0 +1,51 @@
+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;
+  };
+};
+type UseDemoOpts = {
+  defaultOpen?: boolean;
+  copy?: UseCopierOpts;
+  githubUrlPrefix?: string;
+  codeSandboxUrlPrefix?: string;
+  stackBlitzPrefix?: string;
+};
+export declare function useDemo(demo: Demo, opts?: UseDemoOpts): {
+  component: React.ReactNode;
+  name: string | undefined;
+  slug: string | undefined;
+  description: string | undefined;
+  ref: React.RefObject<HTMLDivElement | null>;
+  variants: string[];
+  selectedVariant: string;
+  selectVariant: React.Dispatch<React.SetStateAction<string>>;
+  files: {
+    name: string;
+    component: JSX.Element;
+  }[];
+  selectedFile: any;
+  selectedFileName: string;
+  selectFileName: React.Dispatch<React.SetStateAction<string>>;
+  expanded: boolean;
+  expand: () => void;
+  setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+  resetFocus: () => void;
+  copy: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
+  copyDisabled: boolean;
+};
+export {};

package/useDemo/index.js

@@ -0,0 +1,112 @@
+"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
+  };
+}