@carbon/ibm-products 2.43.2-canary.22 → 2.43.2-canary.222

package/es/global/js/hooks/useFocus.js

@@ -5,17 +5,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { usePrefix } from '@carbon/react';
 import { pkg } from '../../../settings.js';
 import { useCallback, useEffect } from 'react';
+import wait from '../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 = usePrefix();
   var tearsheetBaseClass = "".concat(pkg.prefix, "--tearsheet");
+  var sidePanelBaseClass = "".concat(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);
@@ -23,8 +30,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 = useCallback(function () {
     var _focusableElements, _focusableElements2, _focusableElements3, _focusableElements4;
@@ -39,41 +47,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]);
   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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
+      var _document, _document2, _getFocusable, first, last, all;
+      return _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(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,
@@ -84,4 +104,4 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   };
 };
 
-export { useFocus };
+export { getSpecificElement, useFocus };

package/es/global/js/hooks/usePrefersReducedMotion.js

@@ -6,20 +6,26 @@
  */
 
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { useState, useEffect } from 'react';
-import { hasDocument } from '../utils/window.js';
+import { useState } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect.js';
 
 var usePrefersReducedMotion = function usePrefersReducedMotion() {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     prefersReducedMotion = _useState2[0],
     setPrefersReducedMotion = _useState2[1];
-  useEffect(function () {
-    if (hasDocument()) {
-      var _window$matchMedia = window.matchMedia('(prefers-reduced-motion: reduce)'),
-        matches = _window$matchMedia.matches;
-      setPrefersReducedMotion(matches);
-    }
+  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/es/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/es/global/js/package-settings.js

@@ -37,6 +37,7 @@ var defaults = {
     ErrorEmptyState: true,
     ExportModal: true,
     ExpressiveCard: true,
+    FullPageError: true,
     HTTPError403: true,
     HTTPError404: true,
     HTTPErrorOther: true,
@@ -76,10 +77,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/es/global/js/utils/Wrap.d.ts

@@ -26,6 +26,10 @@ interface WrapProps extends PropsWithChildren {
      */
     neverRender?: boolean;
     className?: string;
+    /**
+     * Tab index for the wrapper div
+     */
+    tabIndex?: number;
 }
 /**
  * A simple conditional wrapper that encloses its children in a <div> (or other

package/es/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";

package/es/global/js/utils/keyboardNavigation.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+/**
+ * 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`.
+ */
+var DOCUMENT_POSITION_BROAD_PRECEDING =
+// Checks `typeof Node` for `react-docgen`
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
+
+/**
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located later than `node` in the document or `node` contains `target`.
+ */
+var DOCUMENT_POSITION_BROAD_FOLLOWING =
+// Checks `typeof Node` for `react-docgen`
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
+
+/**
+ * CSS selector that selects major nodes that are sequential-focusable.
+ */
+var 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";
+
+export { DOCUMENT_POSITION_BROAD_FOLLOWING, DOCUMENT_POSITION_BROAD_PRECEDING, selectorTabbable };

package/es/global/js/utils/scrollableAncestor.js

@@ -7,6 +7,13 @@
 
 import { typeof as _typeof } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 
+/**
+ * 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.
+ */
+
 var windowExists = (typeof window === "undefined" ? "undefined" : _typeof(window)) !== "undefined";
 
 // determine whether the target is scrollable

package/es/global/js/utils/uuidv4.d.ts

@@ -1,2 +1,8 @@
 export default uuidv4;
+/**
+ * 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.
+ */
 declare function uuidv4(): any;

package/es/global/js/utils/uuidv4.js

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+// https://stackoverflow.com/a/2117523
+
 function uuidv4() {
   var randomValues = function randomValues(c) {
     return typeof crypto !== 'undefined' ? crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4 : Math.random() * 16 >> c / 4;

package/es/global/js/utils/wait.d.ts

@@ -1,2 +1,8 @@
 export default wait;
+/**
+ * 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.
+ */
 declare function wait(ms: any): Promise<any>;

package/es/global/js/utils/wait.js

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+// utility function for an async timeout
+
 function wait(ms) {
   return new Promise(function (resolve) {
     return setTimeout(resolve, ms);

package/es/global/js/utils/wrapFocus.d.ts

@@ -0,0 +1,25 @@
+export default wrapFocus;
+/**
+ * @param {Node} node A DOM node.
+ * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
+ * @returns {boolean} `true` of the given `node` is in a floating menu.
+ */
+export function elementOrParentIsFloatingMenu(node: Node, selectorsFloatingMenus?: string[]): boolean;
+/**
+ * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
+ * @param {object} options The options.
+ * @param {Node|null} options.bodyNode The DOM node of the inner modal.
+ * @param {Node|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
+ * @param {Node|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
+ * @param {Node} options.currentActiveNode The DOM node that has focus.
+ * @param {Node} options.oldActiveNode The DOM node that previously had focus.
+ * @param {string[]} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus
+ */
+declare function wrapFocus({ bodyNode, startTrapNode, endTrapNode, currentActiveNode, oldActiveNode, selectorsFloatingMenus, }: {
+    bodyNode: Node | null;
+    startTrapNode: Node | null;
+    endTrapNode: Node | null;
+    currentActiveNode: Node;
+    oldActiveNode: Node;
+    selectorsFloatingMenus?: string[] | undefined;
+}): void;

package/es/global/js/utils/wrapFocus.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+import { DOCUMENT_POSITION_BROAD_PRECEDING, selectorTabbable, DOCUMENT_POSITION_BROAD_FOLLOWING } from './keyboardNavigation.js';
+import { carbon } from '../../../settings.js';
+
+/**
+ * @param {Node} node A DOM node.
+ * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
+ * @returns {boolean} `true` of the given `node` is in a floating menu.
+ */
+function elementOrParentIsFloatingMenu(node) {
+  var selectorsFloatingMenus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [".".concat(carbon.prefix, "--overflow-menu-options"), ".".concat(carbon.prefix, "--tooltip"), '.flatpickr-calendar'];
+  if (node && typeof node.closest === 'function') {
+    return selectorsFloatingMenus.some(function (selector) {
+      return node.closest(selector);
+    });
+  }
+}
+
+/**
+ * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
+ * @param {object} options The options.
+ * @param {Node|null} options.bodyNode The DOM node of the inner modal.
+ * @param {Node|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
+ * @param {Node|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
+ * @param {Node} options.currentActiveNode The DOM node that has focus.
+ * @param {Node} options.oldActiveNode The DOM node that previously had focus.
+ * @param {string[]} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus
+ */
+function wrapFocus(_ref) {
+  var bodyNode = _ref.bodyNode,
+    startTrapNode = _ref.startTrapNode,
+    endTrapNode = _ref.endTrapNode,
+    currentActiveNode = _ref.currentActiveNode,
+    oldActiveNode = _ref.oldActiveNode,
+    selectorsFloatingMenus = _ref.selectorsFloatingMenus;
+  if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
+    var comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
+    if (currentActiveNode === startTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_PRECEDING) {
+      var arrayNodes = Array.from(bodyNode.querySelectorAll(selectorTabbable));
+      arrayNodes.reverse();
+      var tabbable = arrayNodes.find(function (elem) {
+        return Boolean(elem.offsetParent);
+      });
+      if (tabbable) {
+        tabbable.focus();
+      } else if (bodyNode !== oldActiveNode) {
+        bodyNode.focus();
+      }
+    } else if (currentActiveNode === endTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_FOLLOWING) {
+      var _tabbable = Array.prototype.find.call(bodyNode.querySelectorAll(selectorTabbable), function (elem) {
+        return Boolean(elem.offsetParent);
+      });
+      if (_tabbable) {
+        _tabbable.focus();
+      } else if (bodyNode !== oldActiveNode) {
+        bodyNode.focus();
+      }
+    }
+  }
+}
+
+export { wrapFocus as default, elementOrParentIsFloatingMenu };

package/es/index.js

@@ -7,8 +7,6 @@
 
 import './feature-flags.js';
 export { pkg } from './settings.js';
-export { useColumnOrder } from 'react-table';
-export { usePrefix } from './global/js/hooks/usePrefix.js';
 export { AboutModal } from './components/AboutModal/AboutModal.js';
 export { APIKeyModal } from './components/APIKeyModal/APIKeyModal.js';
 export { Cascade } from './components/Cascade/Cascade.js';
@@ -22,19 +20,8 @@ export { CreateTearsheet } from './components/CreateTearsheet/CreateTearsheet.js
 export { CreateTearsheetStep } from './components/CreateTearsheet/CreateTearsheetStep.js';
 export { CreateTearsheetDivider } from './components/CreateTearsheet/CreateTearsheetDivider.js';
 export { CreateTearsheetNarrow } from './components/CreateTearsheetNarrow/CreateTearsheetNarrow.js';
-export { EmptyState } from './components/EmptyStates/EmptyState.js';
-export { EmptyStateV2 } from './components/EmptyStates/EmptyStateV2.js';
-export { ErrorEmptyState } from './components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js';
-export { NoDataEmptyState } from './components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
-export { NoTagsEmptyState } from './components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js';
-export { NotFoundEmptyState } from './components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js';
-export { NotificationsEmptyState } from './components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js';
-export { UnauthorizedEmptyState } from './components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js';
 export { ExportModal } from './components/ExportModal/ExportModal.js';
 export { ExpressiveCard } from './components/ExpressiveCard/ExpressiveCard.js';
-export { HTTPError403 } from './components/HTTPErrors/HTTPError403/HTTPError403.js';
-export { HTTPError404 } from './components/HTTPErrors/HTTPError404/HTTPError404.js';
-export { HTTPErrorOther } from './components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js';
 export { ImportModal } from './components/ImportModal/ImportModal.js';
 export { MultiAddSelect } from './components/MultiAddSelect/MultiAddSelect.js';
 export { NotificationsPanel } from './components/NotificationsPanel/NotificationsPanel.js';
@@ -59,29 +46,6 @@ export { EditSidePanel } from './components/EditSidePanel/EditSidePanel.js';
 export { OptionsTile } from './components/OptionsTile/OptionsTile.js';
 export { EditInPlace } from './components/EditInPlace/EditInPlace.js';
 export { DataSpreadsheet } from './components/DataSpreadsheet/DataSpreadsheet.js';
-export { Datagrid } from './components/Datagrid/Datagrid/Datagrid.js';
-export { default as useDatagrid } from './components/Datagrid/useDatagrid.js';
-export { default as useInfiniteScroll } from './components/Datagrid/useInfiniteScroll.js';
-export { default as useNestedRows } from './components/Datagrid/useNestedRows.js';
-export { default as useSelectRows } from './components/Datagrid/useSelectRows.js';
-export { default as useExpandedRow } from './components/Datagrid/useExpandedRow.js';
-export { default as useOnRowClick } from './components/Datagrid/useOnRowClick.js';
-export { default as useSortableColumns } from './components/Datagrid/useSortableColumns.js';
-export { default as useRowIsMouseOver } from './components/Datagrid/useRowIsMouseOver.js';
-export { default as useColumnCenterAlign } from './components/Datagrid/useColumnCenterAlign.js';
-export { default as useColumnRightAlign } from './components/Datagrid/useColumnRightAlign.js';
-export { default as useDisableSelectRows } from './components/Datagrid/useDisableSelectRows.js';
-export { default as useStickyColumn } from './components/Datagrid/useStickyColumn.js';
-export { default as useActionsColumn } from './components/Datagrid/useActionsColumn.js';
-export { default as useCustomizeColumns } from './components/Datagrid/useCustomizeColumns.js';
-export { default as useSelectAllWithToggle } from './components/Datagrid/useSelectAllToggle.js';
-export { default as useInlineEdit } from './components/Datagrid/useInlineEdit.js';
-export { default as useFiltering } from './components/Datagrid/useFiltering.js';
-export { getAutoSizedColumnWidth } from './components/Datagrid/utils/getAutoSizedColumnWidth.js';
-export { default as useFilterContext } from './components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js';
-export { default as useEditableCell } from './components/Datagrid/useEditableCell.js';
-export { EditTearsheet } from './components/EditTearsheet/EditTearsheet.js';
-export { EditTearsheetForm } from './components/EditTearsheet/EditTearsheetForm.js';
 export { EditTearsheetNarrow } from './components/EditTearsheetNarrow/EditTearsheetNarrow.js';
 export { EditFullPage } from './components/EditFullPage/EditFullPage.js';
 export { EditUpdateCards } from './components/EditUpdateCards/EditUpdateCards.js';
@@ -92,7 +56,6 @@ export { CoachmarkButton } from './components/CoachmarkButton/CoachmarkButton.js
 export { CoachmarkFixed } from './components/CoachmarkFixed/CoachmarkFixed.js';
 export { CoachmarkOverlayElement } from './components/CoachmarkOverlayElement/CoachmarkOverlayElement.js';
 export { CoachmarkOverlayElements } from './components/CoachmarkOverlayElements/CoachmarkOverlayElements.js';
-export { CoachmarkStack } from './components/CoachmarkStack/CoachmarkStack.js';
 export { Guidebanner } from './components/Guidebanner/Guidebanner.js';
 export { GuidebannerElement } from './components/Guidebanner/GuidebannerElement.js';
 export { GuidebannerElementButton } from './components/Guidebanner/GuidebannerElementButton.js';
@@ -101,12 +64,55 @@ export { InlineTip } from './components/InlineTip/InlineTip.js';
 export { InlineTipButton } from './components/InlineTip/InlineTipButton.js';
 export { InlineTipLink } from './components/InlineTip/InlineTipLink.js';
 export { NonLinearReading } from './components/NonLinearReading/NonLinearReading.js';
-export { BigNumbers } from './components/BigNumbers/BigNumbers.js';
 export { TruncatedList } from './components/TruncatedList/TruncatedList.js';
 export { InterstitialScreen } from './components/InterstitialScreen/InterstitialScreen.js';
 export { InterstitialScreenView } from './components/InterstitialScreenView/InterstitialScreenView.js';
 export { InterstitialScreenViewModule } from './components/InterstitialScreenViewModule/InterstitialScreenViewModule.js';
 export { DelimitedList } from './components/DelimitedList/DelimitedList.js';
+export { FullPageError } from './components/FullPageError/FullPageError.js';
+export { SearchBar } from './components/SearchBar/SearchBar.js';
+export { TagOverflow } from './components/TagOverflow/TagOverflow.js';
+export { GetStartedCard } from './components/GetStartedCard/GetStartedCard.js';
+export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
+export { useColumnOrder } from 'react-table';
+export { usePrefix } from './global/js/hooks/usePrefix.js';
+export { ActionBar } from './components/ActionBar/ActionBar.js';
+export { EmptyState } from './components/EmptyStates/EmptyState.js';
+export { EmptyStateV2 } from './components/EmptyStates/EmptyStateV2.js';
+export { ErrorEmptyState } from './components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js';
+export { NoDataEmptyState } from './components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
+export { NoTagsEmptyState } from './components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js';
+export { NotFoundEmptyState } from './components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js';
+export { NotificationsEmptyState } from './components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js';
+export { UnauthorizedEmptyState } from './components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js';
+export { HTTPError403 } from './components/HTTPErrors/HTTPError403/HTTPError403.js';
+export { HTTPError404 } from './components/HTTPErrors/HTTPError404/HTTPError404.js';
+export { HTTPErrorOther } from './components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js';
+export { Datagrid } from './components/Datagrid/Datagrid/Datagrid.js';
+export { default as useDatagrid } from './components/Datagrid/useDatagrid.js';
+export { default as useInfiniteScroll } from './components/Datagrid/useInfiniteScroll.js';
+export { default as useNestedRows } from './components/Datagrid/useNestedRows.js';
+export { default as useSelectRows } from './components/Datagrid/useSelectRows.js';
+export { default as useExpandedRow } from './components/Datagrid/useExpandedRow.js';
+export { default as useOnRowClick } from './components/Datagrid/useOnRowClick.js';
+export { default as useSortableColumns } from './components/Datagrid/useSortableColumns.js';
+export { default as useRowIsMouseOver } from './components/Datagrid/useRowIsMouseOver.js';
+export { default as useColumnRightAlign } from './components/Datagrid/useColumnRightAlign.js';
+export { default as useDisableSelectRows } from './components/Datagrid/useDisableSelectRows.js';
+export { default as useStickyColumn } from './components/Datagrid/useStickyColumn.js';
+export { default as useActionsColumn } from './components/Datagrid/useActionsColumn.js';
+export { default as useCustomizeColumns } from './components/Datagrid/useCustomizeColumns.js';
+export { default as useSelectAllWithToggle } from './components/Datagrid/useSelectAllToggle.js';
+export { default as useColumnCenterAlign } from './components/Datagrid/useColumnCenterAlign.js';
+export { default as useInlineEdit } from './components/Datagrid/useInlineEdit.js';
+export { default as useEditableCell } from './components/Datagrid/useEditableCell.js';
+export { default as useFiltering } from './components/Datagrid/useFiltering.js';
+export { getAutoSizedColumnWidth } from './components/Datagrid/utils/getAutoSizedColumnWidth.js';
+export { default as useFilterContext } from './components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js';
+export { EditTearsheet } from './components/EditTearsheet/EditTearsheet.js';
+export { EditTearsheetForm } from './components/EditTearsheet/EditTearsheetForm.js';
+export { CoachmarkStack } from './components/CoachmarkStack/CoachmarkStack.js';
+export { BigNumbers } from './components/BigNumbers/BigNumbers.js';
 export { Decorator } from './components/Decorator/Decorator.js';
 export { DecoratorLink } from './components/DecoratorLink/DecoratorLink.js';
 export { DecoratorSingleButton } from './components/DecoratorSingleButton/DecoratorSingleButton.js';
@@ -115,15 +121,14 @@ export { DescriptionList } from './components/DescriptionList/DescriptionList.js
 export { DescriptionListBody } from './components/DescriptionList/DescriptionListBody.js';
 export { DescriptionListCell } from './components/DescriptionList/DescriptionListCell.js';
 export { DescriptionListRow } from './components/DescriptionList/DescriptionListRow.js';
-export { FullPageError } from './components/FullPageError/FullPageError.js';
-export { SearchBar } from './components/SearchBar/SearchBar.js';
 export { Nav } from './components/Nav/Nav.js';
+export { NavList } from './components/Nav/NavList.js';
+export { NavItem } from './components/Nav/NavItem.js';
 export { StringFormatter } from './components/StringFormatter/StringFormatter.js';
 export { UserAvatar } from './components/UserAvatar/UserAvatar.js';
 export { ScrollGradient } from './components/ScrollGradient/ScrollGradient.js';
 export { StatusIndicator } from './components/StatusIndicator/StatusIndicator.js';
-export { TagOverflow } from './components/TagOverflow/TagOverflow.js';
-export { ActionBar } from './components/ActionBar/ActionBar.js';
+export { StatusIndicatorStep } from './components/StatusIndicator/StatusIndicatorStep.js';
 export { FilterPanel } from './components/FilterPanel/FilterPanel.js';
 export { FilterPanelAccordion } from './components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js';
 export { FilterPanelAccordionItem } from './components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js';
@@ -133,5 +138,3 @@ export { FilterPanelGroup } from './components/FilterPanel/FilterPanelGroup/Filt
 export { FilterPanelLabel } from './components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js';
 export { FilterPanelSearch } from './components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js';
 export { ConditionBuilder } from './components/ConditionBuilder/ConditionBuilder.js';
-export { GetStartedCard } from './components/GetStartedCard/GetStartedCard.js';
-export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';