@carbon-labs/react-ui-shell 0.12.0 → 0.13.0

package/lib/components/Link.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import React, { type ElementType, type Ref } from 'react';
+import { type PolymorphicProps } from '../types/common';
+type LinkBaseProps<E extends ElementType> = {
+    /**
+     * @deprecated Use `as` instead
+     */
+    element?: E | undefined;
+    ref?: Ref<E>;
+};
+export type LinkProps<E extends ElementType> = PolymorphicProps<E, LinkBaseProps<E>>;
+/**
+ * Link is a custom component that allows us to supporting rendering elements
+ * other than `a` in our markup. The goal is to allow users to support passing
+ * in their own components to support use-cases like `react-router` or
+ * `@reach/router`
+ */
+declare const Link: (<E extends React.ElementType = "a">(props: LinkProps<E>) => JSX.Element) & {
+    displayName?: string | undefined;
+    propTypes?: React.WeakValidationMap<LinkProps<any>> | undefined;
+};
+declare const LinkPropTypes: {
+    /**
+     * Provide a custom element or component to render the top-level node for the
+     * component.
+     */
+    as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+    /**
+     * The base element to use to build the link. Defaults to `a`, can also accept
+     * alternative tag names or custom components like `Link` from `react-router`.
+     * @deprecated Use `as` instead
+     *
+     */
+    element: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+    /**
+     * Property to indicate if the side nav container is open (or not). Use to
+     * keep local state and styling in step with the SideNav expansion state.
+     */
+    isSideNavExpanded: PropTypes.Requireable<boolean>;
+};
+export { LinkPropTypes };
+export default Link;

package/lib/components/Link.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var deprecate = require('../prop-types/deprecate.js');
+
+// Note: Maybe we should use `as` instead of `element`? `as` appears to be
+// standard and is used in other places in this project.
+
+function LinkRenderFunction(_ref, ref) {
+  let {
+    element,
+    as: BaseComponent,
+    // Captured here to prevent it from being passed into the created element.
+    // See https://github.com/carbon-design-system/carbon/issues/3970
+    isSideNavExpanded: _isSideNavExpanded,
+    ...rest
+  } = _ref;
+  const BaseComponentAsAny = BaseComponent ?? element ?? 'a';
+  return /*#__PURE__*/React.createElement(BaseComponentAsAny, _rollupPluginBabelHelpers.extends({
+    ref: ref
+  }, rest));
+}
+
+/**
+ * Link is a custom component that allows us to supporting rendering elements
+ * other than `a` in our markup. The goal is to allow users to support passing
+ * in their own components to support use-cases like `react-router` or
+ * `@reach/router`
+ */
+const Link = /*#__PURE__*/React.forwardRef(LinkRenderFunction);
+const LinkPropTypes = {
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes.elementType,
+  /**
+   * The base element to use to build the link. Defaults to `a`, can also accept
+   * alternative tag names or custom components like `Link` from `react-router`.
+   * @deprecated Use `as` instead
+   *
+   */
+  element: deprecate.default(PropTypes.elementType, 'The `element` prop for `Link` has been deprecated. Please use `as` ' + 'instead. This will be removed in the next major release.'),
+  /**
+   * Property to indicate if the side nav container is open (or not). Use to
+   * keep local state and styling in step with the SideNav expansion state.
+   */
+  isSideNavExpanded: PropTypes.bool
+};
+Link.displayName = 'Link';
+Link.propTypes = LinkPropTypes;
+
+exports.LinkPropTypes = LinkPropTypes;
+exports.default = Link;

package/lib/components/SideNav.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ComponentProps, type FocusEvent, type KeyboardEvent, type MouseEventHandler } from 'react';
-import { TranslateWithId } from '@carbon/react/lib/types/common';
+import { TranslateWithId } from '../types/common';
 export declare enum SIDE_NAV_TYPE {
     DEFAULT = "default",
     RAIL = "rail",
@@ -31,8 +31,8 @@ export interface SideNavProps extends ComponentProps<'nav'>, TranslateWithId<Tra
     onSideNavBlur?: () => void;
     enterDelayMs?: number;
     inert?: boolean;
-    isCollapsible: boolean;
-    hideOverlay: boolean;
+    isCollapsible?: boolean;
+    hideOverlay?: boolean;
     navType: SIDE_NAV_TYPE;
 }
 interface SideNavContextData {

package/lib/components/SideNav.js

@@ -11,38 +11,19 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.j
 var React = require('react');
 var index = require('../_virtual/index.js');
 var PropTypes = require('prop-types');
-var AriaPropTypes = require('@carbon/react/lib/prop-types/AriaPropTypes');
+var AriaPropTypes = require('../prop-types/AriaPropTypes.js');
 var _utils = require('./_utils.js');
-var usePrefix = require('@carbon/react/lib/internal/usePrefix');
-var keys = require('@carbon/react/lib/internal/keyboard/keys');
-var match = require('@carbon/react/lib/internal/keyboard/match');
-var useMergedRefs = require('@carbon/react/lib/internal/useMergedRefs');
-var useEvent = require('@carbon/react/lib/internal/useEvent');
-var useDelayedState = require('@carbon/react/lib/internal/useDelayedState');
+var usePrefix = require('../internal/usePrefix.js');
+var keys = require('../internal/keyboard/keys.js');
+var match = require('../internal/keyboard/match.js');
+var useMergedRefs = require('../internal/useMergedRefs.js');
+var useEvent = require('../internal/useEvent.js');
+var useDelayedState = require('../internal/useDelayedState.js');
 var index$1 = require('../node_modules/@carbon/layout/es/index.js');
-var useMatchMedia = require('@carbon/react/lib/internal/useMatchMedia');
+var useMatchMedia = require('../internal/useMatchMedia.js');
 var SideNavToggle = require('./SideNavToggle.js');
 var bucket15 = require('../node_modules/@carbon/icons-react/es/generated/bucket-15.js');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var keys__namespace = /*#__PURE__*/_interopNamespaceDefault(keys);
-
 let SIDE_NAV_TYPE = /*#__PURE__*/function (SIDE_NAV_TYPE) {
   SIDE_NAV_TYPE["DEFAULT"] = "default";
   SIDE_NAV_TYPE["RAIL"] = "rail";
@@ -200,7 +181,7 @@ function SideNavRenderFunction(_ref, ref) {
       event.stopPropagation();
 
       // stops page from scrolling
-      if (match.matches(event, [keys__namespace.ArrowUp, keys__namespace.ArrowDown, keys__namespace.Home, keys__namespace.End,
+      if (match.matches(event, [keys.ArrowUp, keys.ArrowDown, keys.Home, keys.End,
       // @ts-ignore - `matches` doesn't like the object syntax without missing properties
       {
         code: 'KeyA'
@@ -209,7 +190,7 @@ function SideNavRenderFunction(_ref, ref) {
       }
       treeWalker.currentNode = event.target.closest(`li`) ?? treeWalker?.currentNode;
       let nextFocusNode = null;
-      if (match.match(event, keys__namespace.ArrowUp)) {
+      if (match.match(event, keys.ArrowUp)) {
         const parentNode = parentSideNavMenu(treeWalker.currentNode);
         let previousSideNavMenu = parentNode?.previousElementSibling;
 
@@ -230,7 +211,7 @@ function SideNavRenderFunction(_ref, ref) {
           }
         }
       }
-      if (match.match(event, keys__namespace.ArrowDown)) {
+      if (match.match(event, keys.ArrowDown)) {
         if (treeWalker.currentNode.getAttribute('aria-expanded') == 'false') {
           nextFocusNode = treeWalker.nextSibling();
         } else {
@@ -239,19 +220,19 @@ function SideNavRenderFunction(_ref, ref) {
       }
 
       // Home/End functionality
-      if (match.matches(event, [keys__namespace.Home, keys__namespace.End])) {
+      if (match.matches(event, [keys.Home, keys.End])) {
         if (!sideNavRef?.current) {
           return;
         }
         const allItems = Array.from(sideNavRef.current.querySelectorAll('a, button'));
-        if (match.match(event, keys__namespace.Home)) {
+        if (match.match(event, keys.Home)) {
           const firstElement = allItems[0];
           if (firstElement) {
             firstElement.tabIndex = 0;
             firstElement?.focus();
           }
         }
-        if (match.match(event, keys__namespace.End)) {
+        if (match.match(event, keys.End)) {
           const allItems = Array.from(sideNavRef.current.querySelectorAll('li'));
           const lastVisibleItem = allItems.reverse().find(item => getComputedStyle(item).visibility !== 'hidden');
           if (lastVisibleItem) {
@@ -277,7 +258,7 @@ function SideNavRenderFunction(_ref, ref) {
       }
 
       // close menu
-      if (match.match(event, keys__namespace.Escape)) {
+      if (match.match(event, keys.Escape)) {
         if (expanded && !isFixedNav) {
           if (onSideNavBlur) {
             onSideNavBlur();
@@ -310,7 +291,7 @@ function SideNavRenderFunction(_ref, ref) {
     const focusedElement = document.activeElement;
 
     // going from header menu to sideNav
-    if (match.match(event, keys__namespace.Tab) && expanded && !isFixedNav && sideNavRef?.current && focusedElement?.classList.contains(`${prefix}--header__menu-toggle`) && !focusedElement.closest('nav')) {
+    if (match.match(event, keys.Tab) && expanded && !isFixedNav && sideNavRef?.current && focusedElement?.classList.contains(`${prefix}--header__menu-toggle`) && !focusedElement.closest('nav')) {
       sideNavRef.current.focus();
     }
   });

package/lib/components/SideNavItems.js

@@ -11,7 +11,7 @@ var index = require('../_virtual/index.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 var _utils = require('./_utils.js');
-var usePrefix = require('@carbon/react/lib/internal/usePrefix');
+var usePrefix = require('../internal/usePrefix.js');
 
 const SideNavItems = _ref => {
   let {

package/lib/components/SideNavMenu.js

@@ -11,33 +11,14 @@ var index = require('../_virtual/index.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 var _utils = require('./_utils.js');
-var SideNavIcon = require('@carbon/react/es/components/UIShell/SideNavIcon');
-var match = require('@carbon/react/lib/internal/keyboard/match');
-var usePrefix = require('@carbon/react/lib/internal/usePrefix');
+var react = require('@carbon/react');
+var keys = require('../internal/keyboard/keys.js');
+var match = require('../internal/keyboard/match.js');
+var usePrefix = require('../internal/usePrefix.js');
 var SideNav = require('./SideNav.js');
-var useMergedRefs = require('@carbon/react/lib/internal/useMergedRefs');
-var keys = require('@carbon/react/lib/internal/keyboard/keys');
+var useMergedRefs = require('../internal/useMergedRefs.js');
 var bucket3 = require('../node_modules/@carbon/icons-react/es/generated/bucket-3.js');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var keys__namespace = /*#__PURE__*/_interopNamespaceDefault(keys);
-
 var _ChevronDown;
 const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref) {
   let {
@@ -130,14 +111,14 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     return node;
   }
   function handleKeyDown(event) {
-    if (match.match(event, keys__namespace.Escape)) {
+    if (match.match(event, keys.Escape)) {
       setIsExpanded(false);
     }
     const node = event.target;
     const isMenu = node.hasAttribute('aria-expanded');
     const isExpanded = node.getAttribute('aria-expanded');
     const parent = parentSideNavMenu(node);
-    if (match.match(event, keys__namespace.ArrowLeft)) {
+    if (match.match(event, keys.ArrowLeft)) {
       event.stopPropagation();
       if (isMenu) {
         // collapse menu
@@ -160,7 +141,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
         button?.focus();
       }
     }
-    if (match.match(event, keys__namespace.ArrowRight)) {
+    if (match.match(event, keys.ArrowRight)) {
       event.stopPropagation();
 
       // expand menu
@@ -196,9 +177,9 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
       ref: menuRef,
       type: "button",
       tabIndex: -1
-    }, IconElement && /*#__PURE__*/React.createElement(SideNavIcon, null, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement("span", {
+    }, IconElement && /*#__PURE__*/React.createElement(react.SideNavIcon, null, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement("span", {
       className: `${prefix}--side-nav__submenu-title`
-    }, title), /*#__PURE__*/React.createElement(SideNavIcon, {
+    }, title), /*#__PURE__*/React.createElement(react.SideNavIcon, {
       className: `${prefix}--side-nav__submenu-chevron`,
       small: true
     }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(bucket3.ChevronDown, {

package/lib/components/SideNavMenuItem.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ElementType, ComponentProps } from 'react';
-import Link from '@carbon/react/es/components/UIShell/Link';
+import Link from './Link';
 export interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
     /**
      * Specify the children to be rendered inside of the `SideNavMenuItem`

package/lib/components/SideNavMenuItem.js

@@ -11,10 +11,10 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.j
 var index = require('../_virtual/index.js');
 var PropTypes = require('prop-types');
 var React = require('react');
-var SideNavLinkText = require('@carbon/react/es/components/UIShell/SideNavLinkText');
-var Link = require('@carbon/react/es/components/UIShell/Link');
-var usePrefix = require('@carbon/react/lib/internal/usePrefix');
-var useMergedRefs = require('@carbon/react/lib/internal/useMergedRefs');
+var react = require('@carbon/react');
+var Link = require('./Link.js');
+var usePrefix = require('../internal/usePrefix.js');
+var useMergedRefs = require('../internal/useMergedRefs.js');
 
 const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(props, ref) {
   const prefix = usePrefix.usePrefix();
@@ -22,7 +22,7 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
     children,
     className: customClassName,
     depth: propDepth,
-    as: Component = Link,
+    as: Component = Link.default,
     isActive,
     ...rest
   } = props;
@@ -50,7 +50,7 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
     className: linkClassName,
     tabIndex: -1,
     ref: itemRef
-  }), /*#__PURE__*/React.createElement(SideNavLinkText, null, children)));
+  }), /*#__PURE__*/React.createElement(react.SideNavLinkText, null, children)));
 });
 SideNavMenuItem.displayName = 'SideNavMenuItem';
 SideNavMenuItem.propTypes = {

package/lib/components/SideNavToggle.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.j
 var PropTypes = require('prop-types');
 var React = require('react');
 var react = require('@carbon/react');
-var usePrefix = require('@carbon/react/lib/internal/usePrefix');
+var usePrefix = require('../internal/usePrefix.js');
 
 const SideNavToggle = /*#__PURE__*/React.forwardRef(function SideNavToggle(_ref, ref) {
   let {

package/lib/internal/environment.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Indicate whether current execution environment can access the DOM.
+ *
+ * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
+ */
+export const canUseDOM: boolean;

package/lib/internal/environment.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+/**
+ * Indicate whether current execution environment can access the DOM.
+ *
+ * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
+ */
+const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+
+exports.canUseDOM = canUseDOM;

package/lib/internal/keyboard/index.d.ts

@@ -0,0 +1,3 @@
+export * as keys from "./keys";
+export { getNextIndex } from "./navigation";
+export { match, matches, getCharacterFor } from "./match";

package/lib/internal/keyboard/keys.d.ts

@@ -0,0 +1,126 @@
+export namespace Tab {
+    let key: string;
+    let which: number;
+    let keyCode: number;
+    let code: string;
+}
+export namespace Enter {
+    let key_1: string;
+    export { key_1 as key };
+    let which_1: number;
+    export { which_1 as which };
+    let keyCode_1: number;
+    export { keyCode_1 as keyCode };
+    let code_1: string;
+    export { code_1 as code };
+}
+export namespace Escape {
+    let key_2: string[];
+    export { key_2 as key };
+    let which_2: number;
+    export { which_2 as which };
+    let keyCode_2: number;
+    export { keyCode_2 as keyCode };
+    let code_2: string;
+    export { code_2 as code };
+}
+export namespace Space {
+    let key_3: string;
+    export { key_3 as key };
+    let which_3: number;
+    export { which_3 as which };
+    let keyCode_3: number;
+    export { keyCode_3 as keyCode };
+    let code_3: string;
+    export { code_3 as code };
+}
+export namespace PageUp {
+    let key_4: string;
+    export { key_4 as key };
+    let which_4: number;
+    export { which_4 as which };
+    let keyCode_4: number;
+    export { keyCode_4 as keyCode };
+    let code_4: string;
+    export { code_4 as code };
+}
+export namespace PageDown {
+    let key_5: string;
+    export { key_5 as key };
+    let which_5: number;
+    export { which_5 as which };
+    let keyCode_5: number;
+    export { keyCode_5 as keyCode };
+    let code_5: string;
+    export { code_5 as code };
+}
+export namespace End {
+    let key_6: string;
+    export { key_6 as key };
+    let which_6: number;
+    export { which_6 as which };
+    let keyCode_6: number;
+    export { keyCode_6 as keyCode };
+    let code_6: string;
+    export { code_6 as code };
+}
+export namespace Home {
+    let key_7: string;
+    export { key_7 as key };
+    let which_7: number;
+    export { which_7 as which };
+    let keyCode_7: number;
+    export { keyCode_7 as keyCode };
+    let code_7: string;
+    export { code_7 as code };
+}
+export namespace ArrowLeft {
+    let key_8: string;
+    export { key_8 as key };
+    let which_8: number;
+    export { which_8 as which };
+    let keyCode_8: number;
+    export { keyCode_8 as keyCode };
+    let code_8: string;
+    export { code_8 as code };
+}
+export namespace ArrowUp {
+    let key_9: string;
+    export { key_9 as key };
+    let which_9: number;
+    export { which_9 as which };
+    let keyCode_9: number;
+    export { keyCode_9 as keyCode };
+    let code_9: string;
+    export { code_9 as code };
+}
+export namespace ArrowRight {
+    let key_10: string;
+    export { key_10 as key };
+    let which_10: number;
+    export { which_10 as which };
+    let keyCode_10: number;
+    export { keyCode_10 as keyCode };
+    let code_10: string;
+    export { code_10 as code };
+}
+export namespace ArrowDown {
+    let key_11: string;
+    export { key_11 as key };
+    let which_11: number;
+    export { which_11 as which };
+    let keyCode_11: number;
+    export { keyCode_11 as keyCode };
+    let code_11: string;
+    export { code_11 as code };
+}
+export namespace Delete {
+    let key_12: string;
+    export { key_12 as key };
+    let which_12: number;
+    export { which_12 as which };
+    let keyCode_12: number;
+    export { keyCode_12 as keyCode };
+    let code_12: string;
+    export { code_12 as code };
+}

package/lib/internal/keyboard/keys.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+/* eslint-disable jsdoc/require-jsdoc */
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const Tab = {
+  key: 'Tab',
+  which: 9,
+  keyCode: 9,
+  code: 'Tab'
+};
+const Escape = {
+  key: ['Escape',
+  // IE11 Escape
+  'Esc'],
+  which: 27,
+  keyCode: 27,
+  code: 'Esc'
+};
+const End = {
+  key: 'End',
+  which: 35,
+  keyCode: 35,
+  code: 'Numpad1'
+};
+const Home = {
+  key: 'Home',
+  which: 36,
+  keyCode: 36,
+  code: 'Numpad7'
+};
+const ArrowLeft = {
+  key: 'ArrowLeft',
+  which: 37,
+  keyCode: 37,
+  code: 'ArrowLeft'
+};
+const ArrowUp = {
+  key: 'ArrowUp',
+  which: 38,
+  keyCode: 38,
+  code: 'ArrowUp'
+};
+const ArrowRight = {
+  key: 'ArrowRight',
+  which: 39,
+  keyCode: 39,
+  code: 'ArrowRight'
+};
+const ArrowDown = {
+  key: 'ArrowDown',
+  which: 40,
+  keyCode: 40,
+  code: 'ArrowDown'
+};
+
+exports.ArrowDown = ArrowDown;
+exports.ArrowLeft = ArrowLeft;
+exports.ArrowRight = ArrowRight;
+exports.ArrowUp = ArrowUp;
+exports.End = End;
+exports.Escape = Escape;
+exports.Home = Home;
+exports.Tab = Tab;