import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import React__default from 'react';
import _pt from 'prop-types';
import { visuallyHiddenCss } from '../../stylesheets/a11y.esm.js';

var triggerCss = function triggerCss(theme) {
  return [visuallyHiddenCss, {
    position: "fixed",
    zIndex: 9999999,
    top: theme.space[7],
    left: theme.space[7],
    padding: theme.space[5],
    borderRadius: theme.radii[2],
    background: theme.colors.white,
    color: theme.colors.blue[80],
    textDecoration: "none",
    "&:focus": {
      width: "auto",
      height: "auto",
      clip: "auto"
    }
  }];
};

var SKIP_TARGET_ID = "gatsby-skip-here";
function SkipNavTrigger(_ref) {
  var _ref$children = _ref.children,
      children = _ref$children === void 0 ? "Skip to content" : _ref$children,
      _ref$targetId = _ref.targetId,
      targetId = _ref$targetId === void 0 ? SKIP_TARGET_ID : _ref$targetId;

  var _React$useState = React__default.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      hasAValidTarget = _React$useState2[0],
      setHasAValidTarget = _React$useState2[1];

  React__default.useLayoutEffect(function () {
    var target = document.getElementById(targetId);

    if (!!target !== hasAValidTarget) {
      setHasAValidTarget(!!target);
    }
  }); // If we've rendered the trigger, but there is no target available, we don't
  // want to show the trigger. Doing so would just be frustrating, since it
  // wouldn't skip anything.

  if (!hasAValidTarget) {
    return null;
  }

  return jsx("a", {
    href: "#".concat(targetId),
    css: triggerCss
  }, children);
}
SkipNavTrigger.propTypes = {
  children: _pt.node,
  targetId: _pt.string
};
function SkipNavTarget(_ref2) {
  var _ref2$targetId = _ref2.targetId,
      targetId = _ref2$targetId === void 0 ? SKIP_TARGET_ID : _ref2$targetId;
  return jsx("div", {
    id: targetId,
    style: {
      contain: "none"
    }
  });
}
SkipNavTarget.propTypes = {
  targetId: _pt.string
};
SkipNavTrigger.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "SkipNavTrigger",
  "props": {
    "children": {
      "defaultValue": {
        "value": "`Skip to content`",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "targetId": {
      "defaultValue": {
        "value": "`gatsby-skip-here`",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/SkipNav/SkipNav.tsx"] = {
    name: "SkipNavTrigger",
    docgenInfo: SkipNavTrigger.__docgenInfo,
    path: "src/components/SkipNav/SkipNav.tsx"
  };
}

SkipNavTarget.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "SkipNavTarget",
  "props": {
    "targetId": {
      "defaultValue": {
        "value": "`gatsby-skip-here`",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/SkipNav/SkipNav.tsx"] = {
    name: "SkipNavTarget",
    docgenInfo: SkipNavTarget.__docgenInfo,
    path: "src/components/SkipNav/SkipNav.tsx"
  };
}

export { SkipNavTarget, SkipNavTrigger };
//# sourceMappingURL=SkipNav.esm.js.map
