@terasky/backstage-plugin-devpod/dist/components/VisuallyHidden/VisuallyHidden.esm.js

Automatically launch Devpod workspaces for your Backstage services

import { jsx, Fragment } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';

const visuallyHiddenStyles = {
  display: "inline-block",
  position: "absolute",
  overflow: "hidden",
  clip: "rect(0 0 0 0)",
  height: 1,
  width: 1,
  margin: -1,
  padding: 0,
  border: 0
};
const VisuallyHidden = ({
  children,
  ...delegatedProps
}) => {
  const [forceShow, setForceShow] = useState(false);
  useEffect(() => {
    if (process.env.NODE_ENV === "production") {
      return void 0;
    }
    const handleKeyDown = (event) => {
      if (event.shiftKey && event.key === "Alt") {
        setForceShow(true);
      }
    };
    const handleKeyUp = (event) => {
      if (event.key === "Alt") {
        setForceShow(false);
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    window.addEventListener("keyup", handleKeyUp);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
      window.removeEventListener("keyup", handleKeyUp);
    };
  }, []);
  if (forceShow) {
    return /* @__PURE__ */ jsx(Fragment, { children });
  }
  return /* @__PURE__ */ jsx("span", { style: visuallyHiddenStyles, ...delegatedProps, children });
};

export { VisuallyHidden };
//# sourceMappingURL=VisuallyHidden.esm.js.map