@carbon/ibm-products 2.43.2-canary.19 → 2.43.2-canary.191

package/lib/components/WebTerminal/WebTerminal.js

@@ -10,15 +10,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var react = require('@carbon/react');
+var icons = require('@carbon/react/icons');
 var React = require('react');
-var index$1 = require('../../node_modules/prop-types/index.js');
+var index = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
-var settings = require('../../settings.js');
-var icons = require('@carbon/react/icons');
-var react = require('@carbon/react');
-var carbonMotion = require('@carbon/motion');
-var index = require('./hooks/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
+var carbonMotion = require('@carbon/motion');
+var settings = require('../../settings.js');
+var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
+var index$1 = require('./hooks/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -57,7 +58,7 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
     _ref$webTerminalAriaL = _ref.webTerminalAriaLabel,
     webTerminalAriaLabel = _ref$webTerminalAriaL === void 0 ? defaults.webTerminalAriaLabel : _ref$webTerminalAriaL,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useWebTerminal = index.useWebTerminal(),
+  var _useWebTerminal = index$1.useWebTerminal(),
     open = _useWebTerminal.open,
     closeWebTerminal = _useWebTerminal.closeWebTerminal,
     openWebTerminal = _useWebTerminal.openWebTerminal;
@@ -65,10 +66,7 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     shouldRender = _useState2[0],
     setRender = _useState2[1];
-  var _ref2 = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
-      matches: true
-    },
-    prefersReducedMotion = _ref2.matches;
+  var shouldReduceMotion = usePrefersReducedMotion["default"]();
   var webTerminalAnimationName = "".concat(open ? 'web-terminal-entrance' : 'web-terminal-exit forwards', " ").concat(carbonMotion.moderate02);
   var showDocumentationLinks = React.useMemo(function () {
     return documentationLinks.length > 0;
@@ -101,7 +99,7 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
       If the user prefers reduced motion, we have to manually set render to false
       because onAnimationEnd will never be called.
     */
-    if (prefersReducedMotion) {
+    if (shouldReduceMotion) {
       setRender(false);
     }
     closeWebTerminal === null || closeWebTerminal === void 0 || closeWebTerminal();
@@ -110,7 +108,7 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
     ref: ref,
     className: cx__default["default"]([blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
     style: {
-      animation: !prefersReducedMotion ? webTerminalAnimationName : ''
+      animation: !shouldReduceMotion ? webTerminalAnimationName : ''
     },
     onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/React__default["default"].createElement("header", {
@@ -128,15 +126,15 @@ exports.WebTerminal = /*#__PURE__*/React__default["default"].forwardRef(function
     "aria-label": documentationLinksIconDescription,
     menuOptionsClass: "".concat(blockClass, "__documentation-overflow"),
     size: "lg"
-  }, documentationLinks.map(function (_ref4, i) {
-    var rest = _rollupPluginBabelHelpers["extends"]({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_ref4), _ref4));
+  }, documentationLinks.map(function (_ref3, i) {
+    var rest = _rollupPluginBabelHelpers["extends"]({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_ref3), _ref3));
     return /*#__PURE__*/React__default["default"].createElement(react.OverflowMenuItem, _rollupPluginBabelHelpers["extends"]({
       key: i
     }, rest));
-  })), actions.map(function (_ref5) {
-    var renderIcon = _ref5.renderIcon,
-      onClick = _ref5.onClick,
-      iconDescription = _ref5.iconDescription;
+  })), actions.map(function (_ref4) {
+    var renderIcon = _ref4.renderIcon,
+      onClick = _ref4.onClick,
+      iconDescription = _ref4.iconDescription;
     return /*#__PURE__*/React__default["default"].createElement(react.Button, {
       key: iconDescription,
       hasIconOnly: true,
@@ -181,37 +179,37 @@ exports.WebTerminal.propTypes = {
    * An array of actions to be displayed in the web terminal header bar
    */
   /**@ts-ignore */
-  actions: index$1["default"].arrayOf(index$1["default"].shape({
-    renderIcon: index$1["default"].func.isRequired,
-    onClick: index$1["default"].func.isRequired,
-    iconDescription: index$1["default"].string.isRequired
+  actions: index["default"].arrayOf(index["default"].shape({
+    renderIcon: index["default"].func.isRequired,
+    onClick: index["default"].func.isRequired,
+    iconDescription: index["default"].string.isRequired
   })),
   /**
    * Provide your own terminal component as children to show up in the web terminal
    */
-  children: index$1["default"].oneOfType([index$1["default"].arrayOf(index$1["default"].node), index$1["default"].node]).isRequired,
+  children: index["default"].oneOfType([index["default"].arrayOf(index["default"].node), index["default"].node]).isRequired,
   /**
    * Custom classname for additional styling of the web terminal
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * Icon description for the close button
    */
-  closeIconDescription: index$1["default"].string.isRequired,
+  closeIconDescription: index["default"].string.isRequired,
   /**
    * Array of objects for each documentation link. Each documentation link uses the prop types of OverflowMenuItems. See more: https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default
    */
-  documentationLinks: index$1["default"].arrayOf(index$1["default"].shape(_rollupPluginBabelHelpers.objectSpread2({}, react.OverflowMenuItem.propTypes))),
+  documentationLinks: index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2({}, react.OverflowMenuItem.propTypes))),
   /**
    * Description for the documentation link overflow menu tooltip
    */
-  documentationLinksIconDescription: index$1["default"].string,
+  documentationLinksIconDescription: index["default"].string,
   /**
    * Optionally pass if the web terminal should be open by default
    */
-  isInitiallyOpen: index$1["default"].bool,
+  isInitiallyOpen: index["default"].bool,
   /**
    * Specifies aria label for Web terminal
    */
-  webTerminalAriaLabel: index$1["default"].string
+  webTerminalAriaLabel: index["default"].string
 };

package/lib/components/WebTerminal/WebTerminalContentWrapper.d.ts

@@ -5,11 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface WebTerminalContentWrapperProps {
+export interface WebTerminalContentWrapperProps {
     /**
      * Pass in content as children.
      */
-    children: ReactNode | ReactNode[];
+    children: ReactNode;
 }
 export declare let WebTerminalContentWrapper: React.ForwardRefExoticComponent<WebTerminalContentWrapperProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/WebTerminal/WebTerminalContentWrapper.js

@@ -11,10 +11,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../node_modules/prop-types/index.js');
+var index = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
 var settings = require('../../settings.js');
-var index = require('./hooks/index.js');
+var index$1 = require('./hooks/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,7 +29,7 @@ var blockClass = "".concat(settings.pkg.prefix, "--web-terminal-content-wrapper"
 exports.WebTerminalContentWrapper = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var children = _ref.children,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useWebTerminal = index.useWebTerminal(),
+  var _useWebTerminal = index$1.useWebTerminal(),
     open = _useWebTerminal.open;
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     ref: ref,
@@ -51,5 +51,5 @@ exports.WebTerminalContentWrapper.propTypes = {
   /**
    * Pass in content as children.
    */
-  children: index$1["default"].oneOfType([index$1["default"].arrayOf(index$1["default"].node), index$1["default"].node]).isRequired
+  children: index["default"].oneOfType([index["default"].arrayOf(index["default"].node), index["default"].node]).isRequired
 };

package/lib/components/WebTerminal/index.d.ts

@@ -1,3 +1,11 @@
-export { WebTerminal } from "./WebTerminal";
-export { WebTerminalContentWrapper } from "./WebTerminalContentWrapper";
-export { useWebTerminal, WebTerminalProvider } from "./hooks";
+/**
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { WebTerminal } from './WebTerminal';
+export { WebTerminalContentWrapper } from './WebTerminalContentWrapper';
+export { useWebTerminal, WebTerminalProvider } from './hooks';
+export type { WebTerminalProps } from './WebTerminal';
+export type { WebTerminalContentWrapperProps } from './WebTerminalContentWrapper';

package/lib/components/index.d.ts

@@ -1,72 +1,73 @@
-export { AboutModal } from "./AboutModal";
-export { APIKeyModal } from "./APIKeyModal";
-export { Cascade } from "./Cascade";
-export { CreateModal } from "./CreateModal";
-export { CreateSidePanel } from "./CreateSidePanel";
-export { CreateTearsheetNarrow } from "./CreateTearsheetNarrow";
-export { ExportModal } from "./ExportModal";
-export { ExpressiveCard } from "./ExpressiveCard";
-export { ImportModal } from "./ImportModal";
-export { MultiAddSelect } from "./MultiAddSelect";
-export { NotificationsPanel } from "./NotificationsPanel";
-export { PageHeader } from "./PageHeader";
-export { ProductiveCard } from "./ProductiveCard";
-export { RemoveModal } from "./RemoveModal";
-export { Saving } from "./Saving";
-export { SidePanel } from "./SidePanel";
-export { SingleAddSelect } from "./SingleAddSelect";
-export { StatusIcon } from "./StatusIcon";
-export { TagSet } from "./TagSet";
-export { UserProfileImage } from "./UserProfileImage";
-export { EditSidePanel } from "./EditSidePanel";
-export { OptionsTile } from "./OptionsTile";
-export { EditInPlace } from "./EditInPlace";
-export { DataSpreadsheet } from "./DataSpreadsheet";
-export { EditTearsheetNarrow } from "./EditTearsheetNarrow";
-export { EditFullPage } from "./EditFullPage";
-export { EditUpdateCards } from "./EditUpdateCards";
-export { Checklist } from "./Checklist";
-export { Coachmark } from "./Coachmark";
-export { CoachmarkBeacon } from "./CoachmarkBeacon";
-export { CoachmarkButton } from "./CoachmarkButton";
-export { CoachmarkFixed } from "./CoachmarkFixed";
-export { CoachmarkOverlayElement } from "./CoachmarkOverlayElement";
-export { CoachmarkOverlayElements } from "./CoachmarkOverlayElements";
-export { CoachmarkStack } from "./CoachmarkStack";
-export { NonLinearReading } from "./NonLinearReading";
-export { BigNumbers } from "./BigNumbers";
-export { TruncatedList } from "./TruncatedList";
-export { InterstitialScreen } from "./InterstitialScreen";
-export { InterstitialScreenView } from "./InterstitialScreenView";
-export { InterstitialScreenViewModule } from "./InterstitialScreenViewModule";
-export { DelimitedList } from "./DelimitedList";
-export { Decorator } from "./Decorator";
-export { DecoratorLink } from "./DecoratorLink";
-export { DecoratorSingleButton } from "./DecoratorSingleButton";
-export { DecoratorDualButton } from "./DecoratorDualButton";
-export { FullPageError } from "./FullPageError";
-export { SearchBar } from "./SearchBar";
-export { Nav } from "./Nav";
-export { StringFormatter } from "./StringFormatter";
-export { UserAvatar } from "./UserAvatar";
-export { ScrollGradient } from "./ScrollGradient";
-export { StatusIndicator } from "./StatusIndicator";
-export { TagOverflow } from "./TagOverflow";
-export { ActionBar } from "./ActionBar";
-export { ConditionBuilder } from "./ConditionBuilder";
-export { GetStartedCard } from "./GetStartedCard";
-export { ComboButton, ComboButtonItem } from "./ComboButton";
-export { CreateFullPage, CreateFullPageStep } from "./CreateFullPage";
-export { CreateTearsheet, CreateTearsheetStep, CreateTearsheetDivider } from "./CreateTearsheet";
-export { EmptyState, EmptyStateV2, ErrorEmptyState, NoDataEmptyState, NoTagsEmptyState, NotFoundEmptyState, NotificationsEmptyState, UnauthorizedEmptyState } from "./EmptyStates";
-export { HTTPError403, HTTPError404, HTTPErrorOther } from "./HTTPErrors";
-export { Tearsheet, TearsheetNarrow } from "./Tearsheet";
-export { Toolbar, ToolbarButton, ToolbarGroup } from "./Toolbar";
-export { WebTerminal, WebTerminalContentWrapper, useWebTerminal, WebTerminalProvider } from "./WebTerminal";
-export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth, useFilterContext, useEditableCell } from "./Datagrid";
-export { EditTearsheet, EditTearsheetForm } from "./EditTearsheet";
-export { Guidebanner, GuidebannerElement, GuidebannerElementButton, GuidebannerElementLink } from "./Guidebanner";
-export { InlineTip, InlineTipButton, InlineTipLink } from "./InlineTip";
-export { DescriptionList, DescriptionListBody, DescriptionListCell, DescriptionListRow } from "./DescriptionList";
-export { FilterPanel, FilterPanelAccordion, FilterPanelAccordionItem, FilterPanelCheckbox, FilterPanelCheckboxWithOverflow, FilterPanelGroup, FilterPanelLabel, FilterPanelSearch } from "./FilterPanel";
-export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from "./FeatureFlags";
+import '../feature-flags';
+export * from './AboutModal';
+export * from './APIKeyModal';
+export * from './Cascade';
+export * from './ComboButton';
+export * from './CreateFullPage';
+export * from './CreateModal';
+export * from './CreateSidePanel';
+export * from './CreateTearsheet';
+export * from './CreateTearsheetNarrow';
+export * from './EmptyStates';
+export * from './ExportModal';
+export * from './ExpressiveCard';
+export * from './HTTPErrors';
+export * from './ImportModal';
+export * from './MultiAddSelect';
+export * from './NotificationsPanel';
+export * from './PageHeader';
+export * from './ProductiveCard';
+export * from './RemoveModal';
+export * from './Saving';
+export * from './SidePanel';
+export * from './SingleAddSelect';
+export * from './StatusIcon';
+export * from './TagSet';
+export * from './Tearsheet';
+export * from './Toolbar';
+export * from './UserProfileImage';
+export * from './WebTerminal';
+export * from './EditSidePanel';
+export * from './OptionsTile';
+export * from './EditInPlace';
+export * from './DataSpreadsheet';
+export * from './Datagrid';
+export * from './EditTearsheet';
+export * from './EditTearsheetNarrow';
+export * from './EditFullPage';
+export * from './EditUpdateCards';
+export * from './Checklist';
+export { Coachmark } from './Coachmark';
+export * from './CoachmarkBeacon';
+export * from './CoachmarkButton';
+export * from './CoachmarkFixed';
+export * from './CoachmarkOverlayElement';
+export * from './CoachmarkOverlayElements';
+export * from './CoachmarkStack';
+export * from './Guidebanner';
+export * from './InlineTip';
+export * from './NonLinearReading';
+export * from './BigNumbers';
+export * from './TruncatedList';
+export * from './InterstitialScreen';
+export * from './InterstitialScreenView';
+export * from './InterstitialScreenViewModule';
+export * from './DelimitedList';
+export * from './Decorator';
+export * from './DecoratorLink';
+export * from './DecoratorSingleButton';
+export * from './DecoratorDualButton';
+export * from './DescriptionList';
+export * from './FullPageError';
+export * from './SearchBar';
+export * from './Nav';
+export * from './StringFormatter';
+export * from './UserAvatar';
+export * from './ScrollGradient';
+export * from './StatusIndicator';
+export * from './TagOverflow';
+export { ActionBar } from './ActionBar';
+export * from './FilterPanel';
+export * from './ConditionBuilder';
+export * from './GetStartedCard';
+export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, } from './FeatureFlags';

package/lib/global/js/hooks/useFocus.d.ts

@@ -1,13 +1,14 @@
+export function getSpecificElement(parentEl: any, elementId: any): any;
 export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
     firstElement: any;
     lastElement: any;
     allElements: any;
     specifiedElement: any;
-    keyDownListener: (event: any) => void;
+    keyDownListener: (event: any) => Promise<void>;
     getFocusable: () => {
         first: any;
         last: any;
         all: any;
-        specifiedElement: any;
+        specified: any;
     };
 };

package/lib/global/js/hooks/useFocus.js

@@ -9,17 +9,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var react = require('@carbon/react');
 var settings = require('../../../settings.js');
 var React = require('react');
+var wait = require('../utils/wait.js');
 
+var getSpecificElement = function getSpecificElement(parentEl, elementId) {
+  var element = parentEl === null || parentEl === void 0 ? void 0 : parentEl.querySelector(elementId);
+  return elementId && !(element !== null && element !== void 0 && element.disabled) ? element : null;
+};
 var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   var carbonPrefix = react.usePrefix();
   var tearsheetBaseClass = "".concat(settings.pkg.prefix, "--tearsheet");
+  var sidePanelBaseClass = "".concat(settings.pkg.prefix, "--side-panel");
   // Querying focusable element in the modal
   // Query to exclude hidden elements in the modal from querySelectorAll() method
   // feel free to include more if needed :)
-  var notQuery = ":not(.".concat(carbonPrefix, "--visually-hidden,.").concat(tearsheetBaseClass, "__header--no-close-icon,.").concat(carbonPrefix, "--btn--disabled,[aria-hidden=\"true\"],[tabindex=\"-1\"])");
+  var notQuery = ":not(.".concat(carbonPrefix, "--visually-hidden,.").concat(tearsheetBaseClass, "__header--no-close-icon,.").concat(carbonPrefix, "--btn--disabled,[aria-hidden=\"true\"],[tabindex=\"-1\"],[disabled])");
   // Queries to include element types button, input, select, textarea
   var queryButton = "button".concat(notQuery);
   var queryInput = "input".concat(notQuery);
@@ -27,8 +34,9 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   var queryTextarea = "textarea".concat(notQuery);
   var queryLink = "[href]".concat(notQuery);
   var queryTabIndex = "[tabindex=\"0\"]".concat(notQuery);
+  var querySidePanelScroll = ".".concat(sidePanelBaseClass, "--scrolls");
   // Final query
-  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ", ").concat(queryTabIndex);
+  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ",").concat(queryTabIndex, ",").concat(querySidePanelScroll);
   var modalEl = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current;
   var getFocusable = React.useCallback(function () {
     var _focusableElements, _focusableElements2, _focusableElements3, _focusableElements4;
@@ -43,41 +51,53 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
     var first = (_focusableElements2 = focusableElements) === null || _focusableElements2 === void 0 ? void 0 : _focusableElements2[0];
     var last = (_focusableElements3 = focusableElements) === null || _focusableElements3 === void 0 ? void 0 : _focusableElements3[((_focusableElements4 = focusableElements) === null || _focusableElements4 === void 0 ? void 0 : _focusableElements4.length) - 1];
     var all = focusableElements;
-    var specifiedElement = selectorPrimaryFocus ? modalEl === null || modalEl === void 0 ? void 0 : modalEl.querySelector(selectorPrimaryFocus) : null;
+    var specified = getSpecificElement(modalEl, selectorPrimaryFocus);
     return {
       first: first,
       last: last,
       all: all,
-      specifiedElement: specifiedElement
+      specified: specified
     };
   }, [modalEl, query, selectorPrimaryFocus]);
   React.useEffect(function () {
     getFocusable();
   }, [getFocusable]);
-  var handleKeyDown = function handleKeyDown(event) {
-    // Checking whether the key is tab or not
-    if (event.key === 'Tab') {
-      // updating the focusable elements list
-      var _getFocusable = getFocusable(),
-        first = _getFocusable.first,
-        last = _getFocusable.last,
-        all = _getFocusable.all;
-      setTimeout(function () {
-        var _document, _document2;
-        if (event.shiftKey && !Array.prototype.includes.call(all, (_document = document) === null || _document === void 0 ? void 0 : _document.activeElement)) {
-          // Prevents the default "Tab" behavior
-          event.preventDefault();
-          // if the user press shift+tab and the current element not in focusable items
-          last === null || last === void 0 || last.focus();
-        } else if (!Array.prototype.includes.call(all, (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement)) {
-          event.preventDefault();
-          // user pressing tab key only then
-          // focusing the first element if the current element is not in focusable items
-          first === null || first === void 0 || first.focus();
+  var handleKeyDown = /*#__PURE__*/function () {
+    var _ref = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(event) {
+      var _document, _document2, _getFocusable, first, last, all;
+      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(event.key === 'Tab')) {
+              _context.next = 5;
+              break;
+            }
+            // updating the focusable elements list
+            _getFocusable = getFocusable(), first = _getFocusable.first, last = _getFocusable.last, all = _getFocusable.all;
+            _context.next = 4;
+            return wait["default"](1);
+          case 4:
+            if (event.shiftKey && !Array.prototype.includes.call(all, (_document = document) === null || _document === void 0 ? void 0 : _document.activeElement)) {
+              // Prevents the default "Tab" behavior
+              event.preventDefault();
+              // if the user press shift+tab and the current element not in focusable items
+              last === null || last === void 0 || last.focus();
+            } else if (!Array.prototype.includes.call(all, (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement)) {
+              event.preventDefault();
+              // user pressing tab key only then
+              // focusing the first element if the current element is not in focusable items
+              first === null || first === void 0 || first.focus();
+            }
+          case 5:
+          case "end":
+            return _context.stop();
         }
-      }, 0);
-    }
-  };
+      }, _callee);
+    }));
+    return function handleKeyDown(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
   return {
     firstElement: getFocusable().first,
     lastElement: getFocusable().last,
@@ -88,4 +108,5 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   };
 };
 
+exports.getSpecificElement = getSpecificElement;
 exports.useFocus = useFocus;

package/lib/global/js/hooks/usePrefersReducedMotion.js

@@ -11,19 +11,25 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var window$1 = require('../utils/window.js');
+var useIsomorphicEffect = require('./useIsomorphicEffect.js');
 
 var usePrefersReducedMotion = function usePrefersReducedMotion() {
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     prefersReducedMotion = _useState2[0],
     setPrefersReducedMotion = _useState2[1];
-  React.useEffect(function () {
-    if (window$1.hasDocument()) {
-      var _window$matchMedia = window.matchMedia('(prefers-reduced-motion: reduce)'),
-        matches = _window$matchMedia.matches;
-      setPrefersReducedMotion(matches);
-    }
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    var mediaQueryList = window.matchMedia('(prefers-reduced-motion: no-preference)');
+    var _window$matchMedia = window.matchMedia('(prefers-reduced-motion: no-preference)'),
+      matches = _window$matchMedia.matches;
+    setPrefersReducedMotion(!matches);
+    var listener = function listener(event) {
+      setPrefersReducedMotion(!event.matches);
+    };
+    mediaQueryList.addEventListener('change', listener);
+    return function () {
+      mediaQueryList.removeEventListener('change', listener);
+    };
   }, []);
   return prefersReducedMotion;
 };

package/lib/global/js/package-settings.d.ts

@@ -39,6 +39,7 @@ declare namespace defaults {
         let ErrorEmptyState: boolean;
         let ExportModal: boolean;
         let ExpressiveCard: boolean;
+        let FullPageError: boolean;
         let HTTPError403: boolean;
         let HTTPError404: boolean;
         let HTTPErrorOther: boolean;
@@ -77,10 +78,11 @@ declare namespace defaults {
         let EditFullPage: boolean;
         let EditUpdateCards: boolean;
         let Nav: boolean;
+        let NavItem: boolean;
+        let NavList: boolean;
         let BigNumbers: boolean;
         let TruncatedList: boolean;
         let DelimitedList: boolean;
-        let FullPageError: boolean;
         let ScrollGradient: boolean;
         let StringFormatter: boolean;
         let StatusIndicator: boolean;

package/lib/global/js/package-settings.js

@@ -41,6 +41,7 @@ var defaults = {
     ErrorEmptyState: true,
     ExportModal: true,
     ExpressiveCard: true,
+    FullPageError: true,
     HTTPError403: true,
     HTTPError404: true,
     HTTPErrorOther: true,
@@ -80,10 +81,11 @@ var defaults = {
     EditFullPage: false,
     EditUpdateCards: false,
     Nav: false,
+    NavItem: false,
+    NavList: false,
     BigNumbers: false,
     TruncatedList: false,
     DelimitedList: false,
-    FullPageError: false,
     ScrollGradient: false,
     StringFormatter: false,
     StatusIndicator: false,

package/lib/global/js/utils/keyboardNavigation.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Various utilities to help with a11y work
+ */
+/**
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located earlier than `node` in the document or `target` contains `node`.
+ */
+export const DOCUMENT_POSITION_BROAD_PRECEDING: number | false;
+/**
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located later than `node` in the document or `node` contains `target`.
+ */
+export const DOCUMENT_POSITION_BROAD_FOLLOWING: number | false;
+/**
+ * CSS selector that selects major nodes that are sequential-focusable.
+ */
+export const selectorTabbable: "\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]\n";
+/**
+ * CSS selector that selects major nodes that are click focusable
+ */
+export const selectorFocusable: "\n  a[href], area[href], input:not([disabled]),\n  button:not([disabled]),select:not([disabled]),\n  textarea:not([disabled]),\n  iframe, object, embed, *[tabindex]:not([disabled]), *[contenteditable=true]\n";