@lumx/react 3.3.1-alpha.0 → 3.3.1

package/index.js

@@ -24,6 +24,7 @@ import isObject from 'lodash/isObject';
 import take from 'lodash/take';
 import uniqueId from 'lodash/uniqueId';
 import chunk from 'lodash/chunk';
+import isUndefined from 'lodash/isUndefined';
 import set from 'lodash/set';
 
 function ownKeys(object, enumerableOnly) {
@@ -48,6 +49,7 @@ function _objectSpread2(target) {
   return target;
 }
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -101,6 +103,20 @@ function _objectWithoutProperties(source, excluded) {
   }
   return target;
 }
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
 /**
  * Alignments.
@@ -220,8 +236,6 @@ const Typography = _objectSpread2(_objectSpread2({}, TypographyInterface), {}, {
 const AspectRatio = {
   /** Intrinsic content ratio. */
   original: 'original',
-  /** Ratio 3:1 */
-  panoramic: 'panoramic',
   /** Ratio 16:9 */
   wide: 'wide',
   /** Ratio 3:2 */
@@ -243,6 +257,10 @@ const Kind = {
   error: 'error'
 };
 
+/**
+ * Re-exporting some utils types.
+ */
+
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
 		path: basedir,
@@ -1038,6 +1056,10 @@ const _excluded$4 = ["actions", "alt", "badge", "className", "image", "linkProps
  * Avatar sizes.
  */
 
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -1159,6 +1181,8 @@ Badge.displayName = COMPONENT_NAME$4;
 Badge.className = CLASSNAME$4;
 Badge.defaultProps = DEFAULT_PROPS$4;
 
+/** Get types of the values of a record. */
+
 /**
  * Properties of a component to use to determine it's name.
  * In the order of preference.
@@ -1167,6 +1191,18 @@ const NAME_PROPERTIES = ['type', 'type.displayName', 'displayName', 'name', 'typ
 
 /** LumX Component Type. */
 
+/** Union type of all heading elements */
+
+/** Union type of all text elements */
+
+/**
+ * Define a generic props types.
+ */
+
+/**
+ * Callback function type alias (use for readability)
+ */
+
 /**
  * Create a predicate function that checks if a ReactNode is a react element from the given component.
  *
@@ -1188,6 +1224,19 @@ const isComponentType = type => node => /*#__PURE__*/React.isValidElement(node)
  * (excluding `NaN` as it can't be distinguished from `number`)
  */
 
+/**
+ * Require either `aria-label` or `arial-labelledby` prop.
+ * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
+ * needs a visible element.
+ */
+
+/**
+ * Extract ref type for a component or JSX intrinsic element
+ *
+ * @example ComponentRef<'div'> => React.Ref<HTMLDivElement>
+ * @example ComponentRef<Button> => React.Ref<HTMLButtonElement
+ */
+
 const _excluded$6 = ["linkAs"];
 /**
  * Render link with default <a> HTML component or a custom one provided by `linkAs`.
@@ -1210,6 +1259,11 @@ const renderLink = function (_ref) {
 };
 
 const _excluded$7 = ["aria-label", "children", "className", "color", "disabled", "emphasis", "hasBackground", "href", "isDisabled", "isSelected", "isActive", "isFocused", "isHovered", "linkAs", "name", "size", "target", "theme", "variant", "type", "fullWidth"];
+
+/**
+ * Button size definition.
+ */
+
 /**
  * Component display name.
  */
@@ -1459,6 +1513,9 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
   }, forwardedProps), {
     "aria-label": label,
     variant: "icon"
+    // Remove the aria-describedby added by the tooltip when it is the same text as the aria-label
+    ,
+    "aria-describedby": (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.label) && (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.label) === label && undefined
   }), image ? /*#__PURE__*/React.createElement("img", {
     // no need to set alt as an aria-label is already set on the button
     alt: "",
@@ -1639,6 +1696,10 @@ const _excluded$c = ["after", "before", "children", "className", "color", "disab
  * Chip sizes.
  */
 
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -1852,6 +1913,11 @@ const CommentBlockVariant = {
   indented: 'indented',
   linear: 'linear'
 };
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -2284,11 +2350,15 @@ function useFocusTrap(focusZoneElement, focusElement) {
     // SETUP:
     if (focusElement && focusZoneElement.contains(focusElement)) {
       // Focus the given element.
-      focusElement.focus();
+      focusElement.focus({
+        preventScroll: true
+      });
     } else {
       var _getFirstAndLastFocus;
       // Focus the first focusable element in the zone.
-      (_getFirstAndLastFocus = getFirstAndLastFocusable(focusZoneElement).first) === null || _getFirstAndLastFocus === void 0 ? void 0 : _getFirstAndLastFocus.focus();
+      (_getFirstAndLastFocus = getFirstAndLastFocusable(focusZoneElement).first) === null || _getFirstAndLastFocus === void 0 ? void 0 : _getFirstAndLastFocus.focus({
+        preventScroll: true
+      });
     }
     FOCUS_TRAPS.register(focusTrap);
 
@@ -2298,6 +2368,11 @@ function useFocusTrap(focusZoneElement, focusElement) {
 }
 
 const _excluded$g = ["defaultMonth", "disabled", "isDisabled", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"];
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -3170,6 +3245,11 @@ const useKeyboardListNavigation = function (items, ref, onListItemSelected, onLi
 };
 
 const _excluded$k = ["after", "before", "children", "className", "isHighlighted", "isSelected", "isDisabled", "linkAs", "linkProps", "linkRef", "onItemSelected", "size"];
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -3273,7 +3353,8 @@ ListItem.displayName = COMPONENT_NAME$j;
 ListItem.className = CLASSNAME$g;
 ListItem.defaultProps = DEFAULT_PROPS$e;
 
-/** @license React v16.13.1
+/**
+ * @license React
  * react-is.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -3281,16 +3362,13 @@ ListItem.defaultProps = DEFAULT_PROPS$e;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
-Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
-function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element$1=c;var ForwardRef=n;var Fragment=e;var Lazy=t;var Memo=r;var Portal=d;
-var Profiler=g;var StrictMode=f;var Suspense=p;var isAsyncMode=function(a){return A(a)||z(a)===l};var isConcurrentMode=A;var isContextConsumer=function(a){return z(a)===k};var isContextProvider=function(a){return z(a)===h};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};var isForwardRef=function(a){return z(a)===n};var isFragment=function(a){return z(a)===e};var isLazy=function(a){return z(a)===t};
-var isMemo=function(a){return z(a)===r};var isPortal=function(a){return z(a)===d};var isProfiler=function(a){return z(a)===g};var isStrictMode=function(a){return z(a)===f};var isSuspense=function(a){return z(a)===p};
-var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};var typeOf=z;
+var b=Symbol.for("react.element"),c=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),e=Symbol.for("react.strict_mode"),f=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),h=Symbol.for("react.context"),k=Symbol.for("react.server_context"),l=Symbol.for("react.forward_ref"),m=Symbol.for("react.suspense"),n=Symbol.for("react.suspense_list"),p=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),t=Symbol.for("react.offscreen"),u;u=Symbol.for("react.module.reference");
+function v(a){if("object"===typeof a&&null!==a){var r=a.$$typeof;switch(r){case b:switch(a=a.type,a){case d:case f:case e:case m:case n:return a;default:switch(a=a&&a.$$typeof,a){case k:case h:case l:case q:case p:case g:return a;default:return r}}case c:return r}}}var ContextConsumer=h;var ContextProvider=g;var Element$1=b;var ForwardRef=l;var Fragment=d;var Lazy=q;var Memo=p;var Portal=c;var Profiler=f;var StrictMode=e;var Suspense=m;
+var SuspenseList=n;var isAsyncMode=function(){return !1};var isConcurrentMode=function(){return !1};var isContextConsumer=function(a){return v(a)===h};var isContextProvider=function(a){return v(a)===g};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};var isForwardRef=function(a){return v(a)===l};var isFragment=function(a){return v(a)===d};var isLazy=function(a){return v(a)===q};var isMemo=function(a){return v(a)===p};
+var isPortal=function(a){return v(a)===c};var isProfiler=function(a){return v(a)===f};var isStrictMode=function(a){return v(a)===e};var isSuspense=function(a){return v(a)===m};var isSuspenseList=function(a){return v(a)===n};
+var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===e||a===m||a===n||a===t||"object"===typeof a&&null!==a&&(a.$$typeof===q||a.$$typeof===p||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l||a.$$typeof===u||void 0!==a.getModuleId)?!0:!1};var typeOf=v;
 
 var reactIs_production_min = {
-	AsyncMode: AsyncMode,
-	ConcurrentMode: ConcurrentMode,
 	ContextConsumer: ContextConsumer,
 	ContextProvider: ContextProvider,
 	Element: Element$1,
@@ -3302,6 +3380,7 @@ var reactIs_production_min = {
 	Profiler: Profiler,
 	StrictMode: StrictMode,
 	Suspense: Suspense,
+	SuspenseList: SuspenseList,
 	isAsyncMode: isAsyncMode,
 	isConcurrentMode: isConcurrentMode,
 	isContextConsumer: isContextConsumer,
@@ -3315,44 +3394,74 @@ var reactIs_production_min = {
 	isProfiler: isProfiler,
 	isStrictMode: isStrictMode,
 	isSuspense: isSuspense,
+	isSuspenseList: isSuspenseList,
 	isValidElementType: isValidElementType,
 	typeOf: typeOf
 };
 
 var reactIs_development = createCommonjsModule(function (module, exports) {
 
-
-
 if (process.env.NODE_ENV !== "production") {
   (function() {
 
-// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-// nor polyfill, then a plain number is used for performance.
-var hasSymbol = typeof Symbol === 'function' && Symbol.for;
-var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
-var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
-var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
-var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
-var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
-var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
-var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
-// (unstable) APIs that have been removed. Can we remove the symbols?
-
-var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
-var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
-var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
-var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
-var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
-var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
-var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
-var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
-var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
-var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
-var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+// ATTENTION
+// When adding new symbols to this file,
+// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+// The Symbol used to tag the ReactElement-like types.
+var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
+var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+var REACT_MEMO_TYPE = Symbol.for('react.memo');
+var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+
+// -----------------------------------------------------------------------------
+
+var enableScopeAPI = false; // Experimental Create Event Handle API.
+var enableCacheElement = false;
+var enableTransitionTracing = false; // No known bugs, but needs performance testing
+
+var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+// stuff. Intended to enable React core members to more easily debug scheduling
+// issues in DEV builds.
+
+var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
+
+var REACT_MODULE_REFERENCE;
+
+{
+  REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+}
 
 function isValidElementType(type) {
-  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+  if (typeof type === 'string' || typeof type === 'function') {
+    return true;
+  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+
+  if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing  || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden  || type === REACT_OFFSCREEN_TYPE || enableScopeAPI  || enableCacheElement  || enableTransitionTracing ) {
+    return true;
+  }
+
+  if (typeof type === 'object' && type !== null) {
+    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
+    // types supported by any Flight configuration anywhere since
+    // we don't know which Flight build this will end up being used
+    // with.
+    type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
+      return true;
+    }
+  }
+
+  return false;
 }
 
 function typeOf(object) {
@@ -3364,18 +3473,18 @@ function typeOf(object) {
         var type = object.type;
 
         switch (type) {
-          case REACT_ASYNC_MODE_TYPE:
-          case REACT_CONCURRENT_MODE_TYPE:
           case REACT_FRAGMENT_TYPE:
           case REACT_PROFILER_TYPE:
           case REACT_STRICT_MODE_TYPE:
           case REACT_SUSPENSE_TYPE:
+          case REACT_SUSPENSE_LIST_TYPE:
             return type;
 
           default:
             var $$typeofType = type && type.$$typeof;
 
             switch ($$typeofType) {
+              case REACT_SERVER_CONTEXT_TYPE:
               case REACT_CONTEXT_TYPE:
               case REACT_FORWARD_REF_TYPE:
               case REACT_LAZY_TYPE:
@@ -3395,10 +3504,7 @@ function typeOf(object) {
   }
 
   return undefined;
-} // AsyncMode is deprecated along with isAsyncMode
-
-var AsyncMode = REACT_ASYNC_MODE_TYPE;
-var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+}
 var ContextConsumer = REACT_CONTEXT_TYPE;
 var ContextProvider = REACT_PROVIDER_TYPE;
 var Element = REACT_ELEMENT_TYPE;
@@ -3410,21 +3516,31 @@ var Portal = REACT_PORTAL_TYPE;
 var Profiler = REACT_PROFILER_TYPE;
 var StrictMode = REACT_STRICT_MODE_TYPE;
 var Suspense = REACT_SUSPENSE_TYPE;
-var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+var hasWarnedAboutDeprecatedIsAsyncMode = false;
+var hasWarnedAboutDeprecatedIsConcurrentMode = false; // AsyncMode should be deprecated
 
 function isAsyncMode(object) {
   {
     if (!hasWarnedAboutDeprecatedIsAsyncMode) {
       hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
 
-      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
     }
   }
 
-  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+  return false;
 }
 function isConcurrentMode(object) {
-  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+  {
+    if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
+      hasWarnedAboutDeprecatedIsConcurrentMode = true; // Using console['warn'] to evade Babel and ESLint
+
+      console['warn']('The ReactIs.isConcurrentMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
+    }
+  }
+
+  return false;
 }
 function isContextConsumer(object) {
   return typeOf(object) === REACT_CONTEXT_TYPE;
@@ -3459,9 +3575,10 @@ function isStrictMode(object) {
 function isSuspense(object) {
   return typeOf(object) === REACT_SUSPENSE_TYPE;
 }
+function isSuspenseList(object) {
+  return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+}
 
-exports.AsyncMode = AsyncMode;
-exports.ConcurrentMode = ConcurrentMode;
 exports.ContextConsumer = ContextConsumer;
 exports.ContextProvider = ContextProvider;
 exports.Element = Element;
@@ -3473,6 +3590,7 @@ exports.Portal = Portal;
 exports.Profiler = Profiler;
 exports.StrictMode = StrictMode;
 exports.Suspense = Suspense;
+exports.SuspenseList = SuspenseList;
 exports.isAsyncMode = isAsyncMode;
 exports.isConcurrentMode = isConcurrentMode;
 exports.isContextConsumer = isContextConsumer;
@@ -3486,6 +3604,7 @@ exports.isPortal = isPortal;
 exports.isProfiler = isProfiler;
 exports.isStrictMode = isStrictMode;
 exports.isSuspense = isSuspense;
+exports.isSuspenseList = isSuspenseList;
 exports.isValidElementType = isValidElementType;
 exports.typeOf = typeOf;
   })();
@@ -3507,6 +3626,11 @@ if (process.env.NODE_ENV === 'production') {
  *
  * @param  children React nodes to flatten.
  * @return Flattened react nodes.
+ * @deprecated This function was used to develop keyboard navigation in the List component,
+ *    but we will replace this with a better method that does not require to hack the children inspection
+ *
+ * TODO: remove List keyboard navigation once we have provided alternative component (Menu, Combobox, etc.),
+ *       remove this function and then remove react-is from the dependencies
  */
 function flattenChildren(children) {
   function recur(nodes) {
@@ -5893,6 +6017,15 @@ const Placement = {
   LEFT_END: 'left-end',
   LEFT_START: 'left-start'
 };
+
+/**
+ * Offset of the popover.
+ */
+
+/**
+ * Popover elevation index.
+ */
+
 /**
  * Popover fit anchor width options.
  */
@@ -6200,18 +6333,19 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
      * unless specifically requested not to.
      */
     if (isFocusedWithin.current && focusAnchorOnClose) {
-      if (parentElement !== null && parentElement !== void 0 && parentElement.current) {
-        parentElement === null || parentElement === void 0 ? void 0 : parentElement.current.focus();
-      }
-      const firstFocusable = (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && getFirstAndLastFocusable(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current).first;
-      if (firstFocusable) {
+      var _elementToFocus;
+      let elementToFocus = parentElement === null || parentElement === void 0 ? void 0 : parentElement.current;
+      if (!elementToFocus && anchorRef !== null && anchorRef !== void 0 && anchorRef.current) {
         // Focus the first focusable element in anchor.
-        firstFocusable.focus();
-      } else {
-        var _anchorRef$current;
+        elementToFocus = getFirstAndLastFocusable(anchorRef.current).first;
+      }
+      if (!elementToFocus) {
         // Fallback on the anchor element.
-        anchorRef === null || anchorRef === void 0 ? void 0 : (_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.focus();
+        elementToFocus = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
       }
+      (_elementToFocus = elementToFocus) === null || _elementToFocus === void 0 ? void 0 : _elementToFocus.focus({
+        preventScroll: true
+      });
     }
     onClose();
   }, [anchorRef, focusAnchorOnClose, onClose, parentElement]);
@@ -6567,6 +6701,11 @@ Flag.className = CLASSNAME$l;
 Flag.defaultProps = DEFAULT_PROPS$j;
 
 const _excluded$q = ["as", "children", "className", "fillSpace", "gap", "hAlign", "marginAuto", "noShrink", "orientation", "vAlign", "wrap"];
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -6895,6 +7034,11 @@ const HeadingLevelProvider = _ref => {
 };
 
 const _excluded$u = ["children", "className", "gutter", "hAlign", "orientation", "vAlign", "wrap"];
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -6951,6 +7095,11 @@ Grid.className = CLASSNAME$q;
 Grid.defaultProps = DEFAULT_PROPS$n;
 
 const _excluded$v = ["children", "className", "width", "align", "order"];
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -6992,6 +7141,11 @@ GridItem.displayName = COMPONENT_NAME$u;
 GridItem.className = CLASSNAME$r;
 
 const _excluded$w = ["as", "gap", "maxColumns", "itemMinWidth", "children", "className", "style"];
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -7044,6 +7198,11 @@ GridColumn.className = CLASSNAME$s;
 GridColumn.defaultProps = DEFAULT_PROPS$o;
 
 const _excluded$x = ["className", "color", "colorVariant", "hasShape", "icon", "size", "theme", "alt"];
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -7141,6 +7300,15 @@ const ImageBlockCaptionPosition = {
   below: 'below',
   over: 'over'
 };
+
+/**
+ *  Image block sizes.
+ */
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -7538,6 +7706,11 @@ Lightbox.displayName = COMPONENT_NAME$B;
 Lightbox.className = CLASSNAME$y;
 
 const _excluded$D = ["children", "className", "color", "colorVariant", "disabled", "isDisabled", "href", "leftIcon", "linkAs", "rightIcon", "target", "typography"];
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -7993,6 +8166,13 @@ function forwardRefPolymorphic(render) {
 }
 
 const _excluded$J = ["className", "icon", "label", "isCurrentPage", "as"];
+
+/** Make `href` required when `as` is `a` */
+
+/**
+ * Navigation item props
+ */
+
 /**
  * Component display name.
  */
@@ -8509,6 +8689,10 @@ const _excluded$Q = ["className", "theme", "size"];
  * Progress sizes.
  */
 
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -8578,6 +8762,11 @@ const ProgressVariant = {
   linear: 'linear',
   circular: 'circular'
 };
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -9113,7 +9302,7 @@ const ProgressTrackerStepPanel = /*#__PURE__*/forwardRef((props, ref) => {
       isActive
     })),
     role: "tabpanel",
-    tabIndex: 0,
+    tabIndex: isActive ? 0 : -1,
     "aria-labelledby": state === null || state === void 0 ? void 0 : state.tabId
   }), (!(state !== null && state !== void 0 && state.isLazy) || isActive) && children);
 });
@@ -9293,7 +9482,7 @@ const SelectVariant = {
   chip: 'chip'
 };
 
-const _excluded$Y = ["children", "className", "isMultiple", "closeOnClick", "disabled", "error", "hasError", "helper", "id", "isDisabled", "isEmpty", "isOpen", "isRequired", "isValid", "label", "onClear", "onDropdownClose", "onInfiniteScroll", "onInputClick", "placeholder", "theme", "value", "variant"];
+const _excluded$Y = ["children", "className", "focusElement", "isMultiple", "closeOnClick", "disabled", "error", "hasError", "helper", "id", "isDisabled", "isEmpty", "isOpen", "isRequired", "isValid", "label", "onClear", "onDropdownClose", "onInfiniteScroll", "onInputClick", "placeholder", "theme", "value", "variant"];
 
 /** The display name of the component. */
 const COMPONENT_NAME$W = 'Select';
@@ -9310,6 +9499,7 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
   let {
       children,
       className,
+      focusElement,
       isMultiple,
       closeOnClick = !isMultiple,
       disabled,
@@ -9336,6 +9526,7 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
   const selectId = useMemo(() => id || `select-${uid()}`, [id]);
   const anchorRef = useRef(null);
   const selectRef = useRef(null);
+  const dropdownRef = useRef(null);
   const isFocus = useListenFocus(anchorRef);
   const handleKeyboardNav = useCallback(evt => {
     if ((evt.key === 'Enter' || evt.key === ' ' || evt.key === 'ArrowDown') && onInputClick) {
@@ -9350,6 +9541,9 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
     }
     anchorRef === null || anchorRef === void 0 ? void 0 : (_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.blur();
   };
+
+  // Handle focus trap.
+  useFocusTrap(isOpen && dropdownRef.current, focusElement === null || focusElement === void 0 ? void 0 : focusElement.current);
   return /*#__PURE__*/React.createElement("div", {
     ref: mergeRefs(ref, selectRef),
     className: classnames(className, handleBasicClasses({
@@ -9390,7 +9584,8 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
     isOpen: !!isOpen,
     placement: Placement.BOTTOM_START,
     onClose: onClose,
-    onInfiniteScroll: onInfiniteScroll
+    onInfiniteScroll: onInfiniteScroll,
+    ref: dropdownRef
   }, children), hasError && error && /*#__PURE__*/React.createElement(InputHelper, {
     className: `${CLASSNAME$T}__helper`,
     kind: Kind.error,
@@ -9844,6 +10039,11 @@ const SkeletonRectangleVariant = {
   rounded: 'rounded',
   pill: 'pill'
 };
+
+/**
+ * Defines the props of the component.
+ */
+
 const DEFAULT_PROPS$M = {
   theme: Theme.light,
   variant: SkeletonRectangleVariant.squared
@@ -11253,6 +11453,11 @@ const TableCellVariant = {
   body: 'body',
   head: 'head'
 };
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -11701,7 +11906,7 @@ const TabPanel = /*#__PURE__*/forwardRef((props, ref) => {
       isActive
     })),
     role: "tabpanel",
-    tabIndex: 0,
+    tabIndex: isActive ? 0 : -1,
     "aria-labelledby": state === null || state === void 0 ? void 0 : state.tabId
   }), (!(state !== null && state !== void 0 && state.isLazy) || isActive) && children);
 });
@@ -11709,8 +11914,8 @@ TabPanel.displayName = COMPONENT_NAME$1f;
 TabPanel.className = CLASSNAME$1c;
 TabPanel.defaultProps = DEFAULT_PROPS$Z;
 
-const _excluded$1k = ["id", "isDisabled", "isRequired", "placeholder", "multiline", "value", "setFocus", "onChange", "onFocus", "onBlur", "inputRef", "rows", "recomputeNumberOfRows", "type", "name"],
-  _excluded2$3 = ["chips", "className", "clearButtonProps", "disabled", "error", "forceFocusStyle", "hasError", "helper", "icon", "id", "inputRef", "isDisabled", "isRequired", "isValid", "label", "maxLength", "minimumRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "textFieldRef", "theme", "type", "value", "afterElement"];
+const _excluded$1k = ["id", "isDisabled", "isRequired", "placeholder", "multiline", "value", "setFocus", "onChange", "onFocus", "onBlur", "inputRef", "rows", "recomputeNumberOfRows", "type", "name", "hasError", "describedById"],
+  _excluded2$3 = ["chips", "className", "clearButtonProps", "disabled", "error", "forceFocusStyle", "hasError", "helper", "icon", "id", "inputRef", "isDisabled", "isRequired", "isValid", "label", "maxLength", "minimumRows", "multiline", "name", "onBlur", "onChange", "onClear", "onFocus", "placeholder", "textFieldRef", "theme", "type", "value", "afterElement"];
 
 /**
  * Defines the props of the component.
@@ -11790,7 +11995,9 @@ const renderInputNative = props => {
       rows,
       recomputeNumberOfRows,
       type,
-      name
+      name,
+      hasError,
+      describedById
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1k);
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -11826,6 +12033,8 @@ const renderInputNative = props => {
     onFocus: onTextFieldFocus,
     onBlur: onTextFieldBlur,
     onChange: handleChange,
+    'aria-invalid': hasError ? 'true' : undefined,
+    'aria-describedby': describedById,
     ref: mergeRefs(inputRef, ref)
   });
   if (multiline) {
@@ -11866,6 +12075,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       name,
       onBlur,
       onChange,
+      onClear,
       onFocus,
       placeholder,
       textFieldRef,
@@ -11876,6 +12086,16 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded2$3);
   const textFieldId = useMemo(() => id || `text-field-${uid()}`, [id]);
+  /**
+   * Generate unique ids for both the helper and error texts, in order to
+   * later on add them to the input native as aria-describedby. If both the error and the helper are present,
+   * we want to first use the most important one, which is the errorId. That way, screen readers will read first
+   * the error and then the helper
+   */
+  const helperId = helper ? `text-field-helper-${uid()}` : undefined;
+  const errorId = error ? `text-field-error-${uid()}` : undefined;
+  const describedByIds = [errorId, helperId].filter(Boolean);
+  const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
   const [isFocus, setFocus] = useState(false);
   const {
     rows,
@@ -11890,11 +12110,18 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
    * and remove focus from the clear button.
    * @param evt On clear event.
    */
-  const onClear = evt => {
+  const handleClear = evt => {
     evt.nativeEvent.preventDefault();
     evt.nativeEvent.stopPropagation();
     evt.currentTarget.blur();
     onChange('');
+    if (onClear) {
+      onClear(evt);
+    }
+    const inputElement = inputRef;
+    if (inputElement && inputElement.current) {
+      inputElement.current.focus();
+    }
   };
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
@@ -11952,7 +12179,9 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     setFocus,
     type,
     value,
-    name
+    name,
+    hasError,
+    describedById
   }, forwardedProps))), !chips && /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$1d}__input-wrapper`
   }, renderInputNative(_objectSpread2({
@@ -11971,7 +12200,9 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     setFocus,
     type,
     value,
-    name
+    name,
+    hasError,
+    describedById
   }, forwardedProps))), (isValid || hasError) && /*#__PURE__*/React.createElement(Icon, {
     className: `${CLASSNAME$1d}__input-validity`,
     color: theme === Theme.dark ? 'light' : undefined,
@@ -11983,17 +12214,19 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     emphasis: Emphasis.low,
     size: Size.s,
     theme: theme,
-    onClick: onClear,
+    onClick: handleClear,
     type: "button"
   })), afterElement && /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$1d}__after-element`
   }, afterElement)), hasError && error && /*#__PURE__*/React.createElement(InputHelper, {
     className: `${CLASSNAME$1d}__helper`,
     kind: Kind.error,
-    theme: theme
+    theme: theme,
+    id: errorId
   }, error), helper && /*#__PURE__*/React.createElement(InputHelper, {
     className: `${CLASSNAME$1d}__helper`,
-    theme: theme
+    theme: theme,
+    id: helperId
   }, helper));
 });
 TextField.displayName = COMPONENT_NAME$1g;
@@ -12143,6 +12376,11 @@ const useFocusPointStyle = (_ref2, element, isLoaded) => {
 };
 
 const _excluded$1l = ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "loading", "size", "theme", "variant", "linkProps", "linkAs"];
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -12271,6 +12509,16 @@ Thumbnail.displayName = COMPONENT_NAME$1h;
 Thumbnail.className = CLASSNAME$1e;
 Thumbnail.defaultProps = DEFAULT_PROPS$$;
 
+/**
+ *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).
+ */
+
+/**
+ * Loading attribute is not yet supported in typescript, so we need
+ * to add it in order to avoid a ts error.
+ * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes
+ */
+
 /**
  * All available aspect ratios.
  * @deprecated
@@ -12359,8 +12607,10 @@ Toolbar.defaultProps = DEFAULT_PROPS$10;
  */
 const useInjectTooltipRef = (children, setAnchorElement, isOpen, id) => {
   return useMemo(() => {
+    // Let the children remove the aria-describedby attribute by setting it to undefined
+    const childrenHasAriaProp = get(children, 'props') ? 'aria-describedby' in get(children, 'props') && isUndefined(get(children, 'props.aria-describedby')) : false;
     const ariaProps = {
-      'aria-describedby': isOpen ? id : undefined
+      'aria-describedby': isOpen && !childrenHasAriaProp ? id : undefined
     };
     if (children && get(children, '$$typeof') && get(children, 'props.disabled') !== true && get(children, 'props.isDisabled') !== true) {
       const element = children;
@@ -12482,6 +12732,10 @@ const _excluded$1n = ["label", "children", "className", "delay", "placement", "f
 
 /** Position of the tooltip relative to the anchor element. */
 
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -12577,6 +12831,15 @@ const UploaderVariant = {
   rounded: 'rounded',
   circle: 'circle'
 };
+
+/**
+ * Uploader sizes.
+ */
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -12645,6 +12908,15 @@ Uploader.className = CLASSNAME$1h;
 Uploader.defaultProps = DEFAULT_PROPS$12;
 
 const _excluded$1p = ["avatarProps", "className", "fields", "linkProps", "linkAs", "multipleActions", "name", "nameProps", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme"];
+
+/**
+ * User block sizes.
+ */
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */