@lumx/react 2.2.18 → 2.2.20

package/esm/_internal/generic-block.js

@@ -0,0 +1,12 @@
+import './_rollupPluginBabelHelpers.js';
+import './components.js';
+import 'react';
+import './getRootClassName.js';
+import 'lodash/isBoolean';
+import 'lodash/isEmpty';
+import 'lodash/kebabCase';
+import 'lodash/noop';
+import 'lodash/castArray';
+import './FlexBox.js';
+export { G as GenericBlock } from './GenericBlock.js';
+//# sourceMappingURL=generic-block.js.map

package/esm/_internal/generic-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generic-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/esm/_internal/lightbox.js

@@ -9,16 +9,17 @@ import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
 import './constants.js';
+import 'lodash/last';
 import 'lodash/get';
 import './Popover2.js';
 import './mergeRefs.js';
 import './renderLink.js';
 import './ButtonRoot.js';
 import './IconButton.js';
-import './useFocusTrap.js';
-import 'react-dom';
 import './ClickAwayProvider.js';
 import 'lodash/pull';
+import './useFocusTrap.js';
+import 'react-dom';
 import './useDelayedVisibility.js';
 import './useDisableBodyScroll.js';
 export { L as Lightbox } from './Lightbox2.js';

package/esm/_internal/lightbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"lightbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"lightbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/_internal/popover.js

@@ -6,9 +6,10 @@ import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
 import './constants.js';
+import 'lodash/last';
 export { P as Placement, a as Popover } from './Popover2.js';
 import './mergeRefs.js';
-import 'react-dom';
 import './ClickAwayProvider.js';
 import 'lodash/pull';
+import 'react-dom';
 //# sourceMappingURL=popover.js.map

package/esm/_internal/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"popover.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/esm/_internal/select.js

@@ -9,6 +9,7 @@ import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
 import './constants.js';
+import 'lodash/last';
 import 'lodash/get';
 import './type.js';
 import './Popover2.js';
@@ -18,9 +19,9 @@ import './ButtonRoot.js';
 import './IconButton.js';
 import 'lodash/isFunction';
 import './Chip2.js';
-import 'react-dom';
 import './ClickAwayProvider.js';
 import 'lodash/pull';
+import 'react-dom';
 import './List2.js';
 import './Dropdown2.js';
 import './InputHelper.js';

package/esm/_internal/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"select.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/_internal/side-navigation.js

@@ -9,6 +9,7 @@ import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
 import './constants.js';
+import 'lodash/last';
 import 'lodash/get';
 import './type.js';
 import './Popover2.js';
@@ -16,9 +17,9 @@ import './mergeRefs.js';
 import './renderLink.js';
 import './ButtonRoot.js';
 import './IconButton.js';
-import 'react-dom';
 import './ClickAwayProvider.js';
 import 'lodash/pull';
+import 'react-dom';
 export { S as SideNavigation, a as SideNavigationItem } from './SideNavigationItem.js';
 import './Tooltip2.js';
 //# sourceMappingURL=side-navigation.js.map

package/esm/_internal/side-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"side-navigation.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/_internal/slideshow.js

@@ -9,6 +9,7 @@ import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
 import './constants.js';
+import 'lodash/last';
 import 'lodash/get';
 import './Popover2.js';
 import './mergeRefs.js';
@@ -17,9 +18,9 @@ import './ButtonRoot.js';
 import './IconButton.js';
 import 'lodash/isFunction';
 import 'lodash/range';
-import 'react-dom';
 import './ClickAwayProvider.js';
 import 'lodash/pull';
+import 'react-dom';
 export { c as Slides, S as Slideshow, b as SlideshowControls, a as SlideshowItem } from './Slides.js';
 import 'lodash/uniqueId';
 import './Tooltip2.js';

package/esm/_internal/slideshow.js.map

@@ -1 +1 @@
-{"version":3,"file":"slideshow.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"slideshow.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/_internal/text-field.js

@@ -9,15 +9,16 @@ import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
 import './constants.js';
+import 'lodash/last';
 import 'lodash/get';
 import './Popover2.js';
 import './mergeRefs.js';
 import './renderLink.js';
 import './ButtonRoot.js';
 import './IconButton.js';
-import 'react-dom';
 import './ClickAwayProvider.js';
 import 'lodash/pull';
+import 'react-dom';
 import './InputHelper.js';
 import './InputLabel.js';
 export { T as TextField } from './TextField.js';

package/esm/_internal/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"text-field.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/_internal/tooltip.js

@@ -7,11 +7,12 @@ import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
 import './constants.js';
+import 'lodash/last';
 import 'lodash/get';
 import './Popover2.js';
 import './mergeRefs.js';
-import 'react-dom';
 import './ClickAwayProvider.js';
 import 'lodash/pull';
+import 'react-dom';
 export { T as Tooltip } from './Tooltip2.js';
 //# sourceMappingURL=tooltip.js.map

package/esm/_internal/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"tooltip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/esm/_internal/type.js.map

@@ -1 +1 @@
-{"version":3,"file":"type.js","sources":["../../../src/utils/type.ts"],"sourcesContent":["import get from 'lodash/get';\nimport { ReactElement, ReactNode, Ref } from 'react';\n\n/** Get types of the values of a record. */\nexport type ValueOf<T extends Record<any, any>> = T[keyof T];\n\n/**\n * Properties of a component to use to determine it's name.\n * In the order of preference.\n */\nconst NAME_PROPERTIES: string[] = [\n    'type',\n    'type.displayName',\n    'displayName',\n    'name',\n    'type.name',\n    'props.mdxType',\n    '_reactInternalFiber.elementType.name',\n];\n\n/** LumX Component Type. */\nexport type Comp<P, T = HTMLElement> = {\n    (props: P & { ref?: Ref<T> }): ReactElement | null;\n    /** React component type. */\n    readonly $$typeof: symbol;\n    /** Component default props. */\n    defaultProps?: Partial<P>;\n    /** Component name. */\n    displayName?: string;\n    /** Component base class name. */\n    className?: string;\n};\n\n/**\n * Define a generic props types.\n */\nexport interface GenericProps {\n    /**\n     * Any prop (particularly any supported prop for a HTML element).\n     * E.g. classNames, onClick, disabled, ...\n     */\n    [propName: string]: any;\n}\n\n/**\n * Callback function type alias (use for readability)\n */\nexport type Callback = () => void;\nexport type Predicate<T> = (t: T) => boolean;\n\n/**\n * Create a predicate function that checks if a ReactNode is a react element from the given component.\n *\n * @param  component React function component or the component name\n * @return predicate returning true if value is instance of the component\n */\nexport const isComponent = <C>(component: Comp<C, any> | string) => (instance: ReactNode): instance is ReactElement => {\n    const componentName = typeof component === 'string' ? component : component.displayName;\n\n    return (\n        !!get(instance, '$$typeof') &&\n        NAME_PROPERTIES.some((nameProperty: string): boolean => get(instance, nameProperty) === componentName)\n    );\n};\n\n/**\n * JS falsy values.\n * (excluding `NaN` as it can't be distinguished from `number`)\n */\nexport type Falsy = false | undefined | null | 0 | '';\n"],"names":["NAME_PROPERTIES","isComponent","component","instance","componentName","displayName","get","some","nameProperty"],"mappings":";;AAMA;;;;AAIA,IAAMA,eAAyB,GAAG,CAC9B,MAD8B,EAE9B,kBAF8B,EAG9B,aAH8B,EAI9B,MAJ8B,EAK9B,WAL8B,EAM9B,eAN8B,EAO9B,sCAP8B,CAAlC;AAUA;;AA8BA;;;;;;IAMaC,WAAW,GAAG,SAAdA,WAAc,CAAIC,SAAJ;AAAA,SAAyC,UAACC,QAAD,EAAmD;AACnH,QAAMC,aAAa,GAAG,OAAOF,SAAP,KAAqB,QAArB,GAAgCA,SAAhC,GAA4CA,SAAS,CAACG,WAA5E;AAEA,WACI,CAAC,CAACC,GAAG,CAACH,QAAD,EAAW,UAAX,CAAL,IACAH,eAAe,CAACO,IAAhB,CAAqB,UAACC,YAAD;AAAA,aAAmCF,GAAG,CAACH,QAAD,EAAWK,YAAX,CAAH,KAAgCJ,aAAnE;AAAA,KAArB,CAFJ;AAIH,GAP0B;AAAA;AAS3B;;;;;;;"}
+{"version":3,"file":"type.js","sources":["../../../src/utils/type.ts"],"sourcesContent":["import get from 'lodash/get';\nimport { ReactElement, ReactNode, Ref } from 'react';\n\n/** Get types of the values of a record. */\nexport type ValueOf<T extends Record<any, any>> = T[keyof T];\n\n/**\n * Properties of a component to use to determine it's name.\n * In the order of preference.\n */\nconst NAME_PROPERTIES: string[] = [\n    'type',\n    'type.displayName',\n    'displayName',\n    'name',\n    'type.name',\n    'props.mdxType',\n    '_reactInternalFiber.elementType.name',\n];\n\n/** LumX Component Type. */\nexport type Comp<P, T = HTMLElement> = {\n    (props: P & { ref?: Ref<T> }): ReactElement | null;\n    /** React component type. */\n    readonly $$typeof: symbol;\n    /** Component default props. */\n    defaultProps?: Partial<P>;\n    /** Component name. */\n    displayName?: string;\n    /** Component base class name. */\n    className?: string;\n};\n\n/** Union type of all heading elements */\nexport type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n/**\n * Define a generic props types.\n */\nexport interface GenericProps {\n    /**\n     * Any prop (particularly any supported prop for a HTML element).\n     * E.g. classNames, onClick, disabled, ...\n     */\n    [propName: string]: any;\n}\n\n/**\n * Callback function type alias (use for readability)\n */\nexport type Callback = () => void;\nexport type Predicate<T> = (t: T) => boolean;\n\n/**\n * Create a predicate function that checks if a ReactNode is a react element from the given component.\n *\n * @param  component React function component or the component name\n * @return predicate returning true if value is instance of the component\n */\nexport const isComponent = <C>(component: Comp<C, any> | string) => (instance: ReactNode): instance is ReactElement => {\n    const componentName = typeof component === 'string' ? component : component.displayName;\n\n    return (\n        !!get(instance, '$$typeof') &&\n        NAME_PROPERTIES.some((nameProperty: string): boolean => get(instance, nameProperty) === componentName)\n    );\n};\n\n/**\n * JS falsy values.\n * (excluding `NaN` as it can't be distinguished from `number`)\n */\nexport type Falsy = false | undefined | null | 0 | '';\n"],"names":["NAME_PROPERTIES","isComponent","component","instance","componentName","displayName","get","some","nameProperty"],"mappings":";;AAMA;;;;AAIA,IAAMA,eAAyB,GAAG,CAC9B,MAD8B,EAE9B,kBAF8B,EAG9B,aAH8B,EAI9B,MAJ8B,EAK9B,WAL8B,EAM9B,eAN8B,EAO9B,sCAP8B,CAAlC;AAUA;;AAiCA;;;;;;IAMaC,WAAW,GAAG,SAAdA,WAAc,CAAIC,SAAJ;AAAA,SAAyC,UAACC,QAAD,EAAmD;AACnH,QAAMC,aAAa,GAAG,OAAOF,SAAP,KAAqB,QAArB,GAAgCA,SAAhC,GAA4CA,SAAS,CAACG,WAA5E;AAEA,WACI,CAAC,CAACC,GAAG,CAACH,QAAD,EAAW,UAAX,CAAL,IACAH,eAAe,CAACO,IAAhB,CAAqB,UAACC,YAAD;AAAA,aAAmCF,GAAG,CAACH,QAAD,EAAWK,YAAX,CAAH,KAAgCJ,aAAnE;AAAA,KAArB,CAFJ;AAIH,GAP0B;AAAA;AAS3B;;;;;;;"}

package/esm/_internal/useFocusTrap.js

@@ -1,92 +1,85 @@
 import { useEffect } from 'react';
 import { D as DOCUMENT } from './constants.js';
+import { g as getFirstAndLastFocusable, m as makeListenerTowerContext } from './ClickAwayProvider.js';
 
-/** CSS selector listing all tabbable elements. */
-
-var TABBABLE_ELEMENTS_SELECTOR = "a[href]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\nbutton:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ntextarea:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"text\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"radio\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"checkbox\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\n[tabindex]:not([tabindex=\"-1\"], [disabled], [aria-disabled])";
+var FOCUS_TRAPS = makeListenerTowerContext();
 /**
- * Get first and last elements focusable in an element.
+ * Trap 'Tab' focus switch inside the `focusZoneElement`.
  *
- * @param parentElement The element in which to search focusable elements.
- * @return first and last focusable elements
- */
-
-function getFocusable(parentElement) {
-  var focusableElements = parentElement.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR);
-
-  if (focusableElements.length <= 0) {
-    return {};
-  }
-
-  var first = focusableElements[0];
-  var last = focusableElements[focusableElements.length - 1];
-  return {
-    first: first,
-    last: last
-  };
-}
-/**
- * Add a key down event handler to the given root element (document.body by default) to trap the move of focus
- * (TAB and SHIFT-TAB keys) inside the given focusZoneElement.
- * Will focus the given focus element when activating the focus trap.
+ * If multiple focus trap are activated, only the last one is maintained and when a focus trap closes, the previous one
+ * gets activated again.
  *
  * @param focusZoneElement The element in which to trap the focus.
- * @param focusElement     The element to focus when the focus trap is activated.
- * @param rootElement      The element on which the key down event will be placed.
+ * @param focusElement     The element to focus when the focus trap is activated (otherwise the first focusable element
+ *                         will be focused).
  */
 
-
 function useFocusTrap(focusZoneElement, focusElement) {
-  var rootElement = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DOCUMENT === null || DOCUMENT === void 0 ? void 0 : DOCUMENT.body;
   useEffect(function () {
-    if (rootElement && focusZoneElement) {
-      var _ref;
+    // Body element can be undefined in SSR context.
+    var rootElement = DOCUMENT === null || DOCUMENT === void 0 ? void 0 : DOCUMENT.body;
+
+    if (!rootElement || !focusZoneElement) {
+      return undefined;
+    } // Trap 'Tab' key down focus switch into the focus zone.
+
 
-      (_ref = document.activeElement) === null || _ref === void 0 ? void 0 : _ref.blur();
+    var trapTabFocusInFocusZone = function trapTabFocusInFocusZone(evt) {
+      var key = evt.key;
 
-      if (focusElement) {
-        focusElement.focus();
+      if (key !== 'Tab') {
+        return;
       }
 
-      var onKeyDown = function onKeyDown(evt) {
-        var key = evt.key;
-
-        if (key !== 'Tab') {
-          return;
-        }
-
-        var focusable = getFocusable(focusZoneElement); // Prevent focus switch if no focusable available.
-
-        if (!focusable.first) {
-          evt.preventDefault();
-          return;
-        }
-
-        if ( // No previous focus
-        !document.activeElement || // Previous focus is at the end of the focus zone.
-        !evt.shiftKey && document.activeElement === focusable.last || // Previous focus is outside the focus zone
-        !focusZoneElement.contains(document.activeElement)) {
-          focusable.first.focus();
-          evt.preventDefault();
-          return;
-        }
-
-        if ( // Focus order reversed
-        evt.shiftKey && // Previous focus is at the start of the focus zone.
-        document.activeElement === focusable.first) {
-          focusable.last.focus();
-          evt.preventDefault();
-        }
-      };
-
-      rootElement.addEventListener('keydown', onKeyDown);
-      return function () {
-        return rootElement.removeEventListener('keydown', onKeyDown);
-      };
+      var focusable = getFirstAndLastFocusable(focusZoneElement); // Prevent focus switch if no focusable available.
+
+      if (!focusable.first) {
+        evt.preventDefault();
+        return;
+      }
+
+      if ( // No previous focus
+      !document.activeElement || // Previous focus is at the end of the focus zone.
+      !evt.shiftKey && document.activeElement === focusable.last || // Previous focus is outside the focus zone
+      !focusZoneElement.contains(document.activeElement)) {
+        focusable.first.focus();
+        evt.preventDefault();
+        return;
+      }
+
+      if ( // Focus order reversed
+      evt.shiftKey && // Previous focus is at the start of the focus zone.
+      document.activeElement === focusable.first) {
+        focusable.last.focus();
+        evt.preventDefault();
+      }
+    };
+
+    var focusTrap = {
+      enable: function enable() {
+        return rootElement.addEventListener('keydown', trapTabFocusInFocusZone);
+      },
+      disable: function disable() {
+        return rootElement.removeEventListener('keydown', trapTabFocusInFocusZone);
+      }
+    }; // SETUP:
+
+    if (focusElement && focusZoneElement.contains(focusElement)) {
+      // Focus the given element.
+      focusElement.focus();
+    } else {
+      var _getFirstAndLastFocus;
+
+      // Focus the first focusable element in the zone.
+      (_getFirstAndLastFocus = getFirstAndLastFocusable(focusZoneElement).first) === null || _getFirstAndLastFocus === void 0 ? void 0 : _getFirstAndLastFocus.focus();
     }
 
-    return undefined;
-  }, [focusElement, focusZoneElement, rootElement]);
+    FOCUS_TRAPS.register(focusTrap); // TEARDOWN:
+
+    return function () {
+      return FOCUS_TRAPS.unregister(focusTrap);
+    };
+  }, [focusElement, focusZoneElement]);
 }
 
 export { useFocusTrap as u };

package/esm/_internal/useFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","sources":["../../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { DOCUMENT } from '@lumx/react/constants';\n\n/** CSS selector listing all tabbable elements. */\nconst TABBABLE_ELEMENTS_SELECTOR = `a[href]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\nbutton:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ntextarea:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"text\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"radio\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"checkbox\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\n[tabindex]:not([tabindex=\"-1\"], [disabled], [aria-disabled])`;\n\n/**\n * Get first and last elements focusable in an element.\n *\n * @param parentElement The element in which to search focusable elements.\n * @return first and last focusable elements\n */\nfunction getFocusable(parentElement: HTMLElement) {\n    const focusableElements = parentElement.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR);\n\n    if (focusableElements.length <= 0) {\n        return {};\n    }\n\n    const first = focusableElements[0];\n    const last = focusableElements[focusableElements.length - 1];\n    return { first, last };\n}\n\n/**\n * Add a key down event handler to the given root element (document.body by default) to trap the move of focus\n * (TAB and SHIFT-TAB keys) inside the given focusZoneElement.\n * Will focus the given focus element when activating the focus trap.\n *\n * @param focusZoneElement The element in which to trap the focus.\n * @param focusElement     The element to focus when the focus trap is activated.\n * @param rootElement      The element on which the key down event will be placed.\n */\nexport function useFocusTrap(\n    focusZoneElement: HTMLElement | null,\n    focusElement?: HTMLElement | null,\n    rootElement = DOCUMENT?.body,\n): void {\n    useEffect(() => {\n        if (rootElement && focusZoneElement) {\n            (document.activeElement as HTMLElement)?.blur();\n            if (focusElement) {\n                focusElement.focus();\n            }\n\n            const onKeyDown = (evt: KeyboardEvent) => {\n                const { key } = evt;\n                if (key !== 'Tab') {\n                    return;\n                }\n                const focusable = getFocusable(focusZoneElement);\n\n                // Prevent focus switch if no focusable available.\n                if (!focusable.first) {\n                    evt.preventDefault();\n                    return;\n                }\n\n                if (\n                    // No previous focus\n                    !document.activeElement ||\n                    // Previous focus is at the end of the focus zone.\n                    (!evt.shiftKey && document.activeElement === focusable.last) ||\n                    // Previous focus is outside the focus zone\n                    !focusZoneElement.contains(document.activeElement)\n                ) {\n                    focusable.first.focus();\n                    evt.preventDefault();\n                    return;\n                }\n\n                if (\n                    // Focus order reversed\n                    evt.shiftKey &&\n                    // Previous focus is at the start of the focus zone.\n                    document.activeElement === focusable.first\n                ) {\n                    focusable.last.focus();\n                    evt.preventDefault();\n                }\n            };\n            rootElement.addEventListener('keydown', onKeyDown);\n            return () => rootElement.removeEventListener('keydown', onKeyDown);\n        }\n        return undefined;\n    }, [focusElement, focusZoneElement, rootElement]);\n}\n"],"names":["TABBABLE_ELEMENTS_SELECTOR","getFocusable","parentElement","focusableElements","querySelectorAll","length","first","last","useFocusTrap","focusZoneElement","focusElement","rootElement","DOCUMENT","body","useEffect","document","activeElement","blur","focus","onKeyDown","evt","key","focusable","preventDefault","shiftKey","contains","addEventListener","removeEventListener","undefined"],"mappings":";;;AAIA;;AACA,IAAMA,0BAA0B,meAAhC;AAQA;;;;;;;AAMA,SAASC,YAAT,CAAsBC,aAAtB,EAAkD;AAC9C,MAAMC,iBAAiB,GAAGD,aAAa,CAACE,gBAAd,CAA4CJ,0BAA5C,CAA1B;;AAEA,MAAIG,iBAAiB,CAACE,MAAlB,IAA4B,CAAhC,EAAmC;AAC/B,WAAO,EAAP;AACH;;AAED,MAAMC,KAAK,GAAGH,iBAAiB,CAAC,CAAD,CAA/B;AACA,MAAMI,IAAI,GAAGJ,iBAAiB,CAACA,iBAAiB,CAACE,MAAlB,GAA2B,CAA5B,CAA9B;AACA,SAAO;AAAEC,IAAAA,KAAK,EAALA,KAAF;AAASC,IAAAA,IAAI,EAAJA;AAAT,GAAP;AACH;AAED;;;;;;;;;;;AASO,SAASC,YAAT,CACHC,gBADG,EAEHC,YAFG,EAIC;AAAA,MADJC,WACI,uEADUC,QACV,aADUA,QACV,uBADUA,QAAQ,CAAEC,IACpB;AACJC,EAAAA,SAAS,CAAC,YAAM;AACZ,QAAIH,WAAW,IAAIF,gBAAnB,EAAqC;AAAA;;AACjC,cAACM,QAAQ,CAACC,aAAV,8CAAyCC,IAAzC;;AACA,UAAIP,YAAJ,EAAkB;AACdA,QAAAA,YAAY,CAACQ,KAAb;AACH;;AAED,UAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,GAAD,EAAwB;AAAA,YAC9BC,GAD8B,GACtBD,GADsB,CAC9BC,GAD8B;;AAEtC,YAAIA,GAAG,KAAK,KAAZ,EAAmB;AACf;AACH;;AACD,YAAMC,SAAS,GAAGrB,YAAY,CAACQ,gBAAD,CAA9B,CALsC;;AAQtC,YAAI,CAACa,SAAS,CAAChB,KAAf,EAAsB;AAClBc,UAAAA,GAAG,CAACG,cAAJ;AACA;AACH;;AAED;AAEI,SAACR,QAAQ,CAACC,aAAV;AAEC,SAACI,GAAG,CAACI,QAAL,IAAiBT,QAAQ,CAACC,aAAT,KAA2BM,SAAS,CAACf,IAFvD;AAIA,SAACE,gBAAgB,CAACgB,QAAjB,CAA0BV,QAAQ,CAACC,aAAnC,CANL,EAOE;AACEM,UAAAA,SAAS,CAAChB,KAAV,CAAgBY,KAAhB;AACAE,UAAAA,GAAG,CAACG,cAAJ;AACA;AACH;;AAED;AAEIH,QAAAA,GAAG,CAACI,QAAJ;AAEAT,QAAAA,QAAQ,CAACC,aAAT,KAA2BM,SAAS,CAAChB,KAJzC,EAKE;AACEgB,UAAAA,SAAS,CAACf,IAAV,CAAeW,KAAf;AACAE,UAAAA,GAAG,CAACG,cAAJ;AACH;AACJ,OAnCD;;AAoCAZ,MAAAA,WAAW,CAACe,gBAAZ,CAA6B,SAA7B,EAAwCP,SAAxC;AACA,aAAO;AAAA,eAAMR,WAAW,CAACgB,mBAAZ,CAAgC,SAAhC,EAA2CR,SAA3C,CAAN;AAAA,OAAP;AACH;;AACD,WAAOS,SAAP;AACH,GA/CQ,EA+CN,CAAClB,YAAD,EAAeD,gBAAf,EAAiCE,WAAjC,CA/CM,CAAT;AAgDH;;;;"}
+{"version":3,"file":"useFocusTrap.js","sources":["../../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { DOCUMENT } from '@lumx/react/constants';\nimport { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';\nimport { Falsy } from '@lumx/react/utils';\nimport { Listener, makeListenerTowerContext } from '@lumx/react/utils/makeListenerTowerContext';\n\nconst FOCUS_TRAPS = makeListenerTowerContext();\n\n/**\n * Trap 'Tab' focus switch inside the `focusZoneElement`.\n *\n * If multiple focus trap are activated, only the last one is maintained and when a focus trap closes, the previous one\n * gets activated again.\n *\n * @param focusZoneElement The element in which to trap the focus.\n * @param focusElement     The element to focus when the focus trap is activated (otherwise the first focusable element\n *                         will be focused).\n */\nexport function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement?: HTMLElement | null): void {\n    useEffect(() => {\n        // Body element can be undefined in SSR context.\n        const rootElement = DOCUMENT?.body;\n\n        if (!rootElement || !focusZoneElement) {\n            return undefined;\n        }\n\n        // Trap 'Tab' key down focus switch into the focus zone.\n        const trapTabFocusInFocusZone = (evt: KeyboardEvent) => {\n            const { key } = evt;\n            if (key !== 'Tab') {\n                return;\n            }\n            const focusable = getFirstAndLastFocusable(focusZoneElement);\n\n            // Prevent focus switch if no focusable available.\n            if (!focusable.first) {\n                evt.preventDefault();\n                return;\n            }\n\n            if (\n                // No previous focus\n                !document.activeElement ||\n                // Previous focus is at the end of the focus zone.\n                (!evt.shiftKey && document.activeElement === focusable.last) ||\n                // Previous focus is outside the focus zone\n                !focusZoneElement.contains(document.activeElement)\n            ) {\n                focusable.first.focus();\n                evt.preventDefault();\n                return;\n            }\n\n            if (\n                // Focus order reversed\n                evt.shiftKey &&\n                // Previous focus is at the start of the focus zone.\n                document.activeElement === focusable.first\n            ) {\n                focusable.last.focus();\n                evt.preventDefault();\n            }\n        };\n\n        const focusTrap: Listener = {\n            enable: () => rootElement.addEventListener('keydown', trapTabFocusInFocusZone),\n            disable: () => rootElement.removeEventListener('keydown', trapTabFocusInFocusZone),\n        };\n\n        // SETUP:\n        if (focusElement && focusZoneElement.contains(focusElement)) {\n            // Focus the given element.\n            focusElement.focus();\n        } else {\n            // Focus the first focusable element in the zone.\n            getFirstAndLastFocusable(focusZoneElement).first?.focus();\n        }\n        FOCUS_TRAPS.register(focusTrap);\n\n        // TEARDOWN:\n        return () => FOCUS_TRAPS.unregister(focusTrap);\n    }, [focusElement, focusZoneElement]);\n}\n"],"names":["FOCUS_TRAPS","makeListenerTowerContext","useFocusTrap","focusZoneElement","focusElement","useEffect","rootElement","DOCUMENT","body","undefined","trapTabFocusInFocusZone","evt","key","focusable","getFirstAndLastFocusable","first","preventDefault","document","activeElement","shiftKey","last","contains","focus","focusTrap","enable","addEventListener","disable","removeEventListener","register","unregister"],"mappings":";;;;AAOA,IAAMA,WAAW,GAAGC,wBAAwB,EAA5C;AAEA;;;;;;;;;;;AAUO,SAASC,YAAT,CAAsBC,gBAAtB,EAA6DC,YAA7D,EAAsG;AACzGC,EAAAA,SAAS,CAAC,YAAM;AACZ;AACA,QAAMC,WAAW,GAAGC,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEC,IAA9B;;AAEA,QAAI,CAACF,WAAD,IAAgB,CAACH,gBAArB,EAAuC;AACnC,aAAOM,SAAP;AACH,KANW;;;AASZ,QAAMC,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACC,GAAD,EAAwB;AAAA,UAC5CC,GAD4C,GACpCD,GADoC,CAC5CC,GAD4C;;AAEpD,UAAIA,GAAG,KAAK,KAAZ,EAAmB;AACf;AACH;;AACD,UAAMC,SAAS,GAAGC,wBAAwB,CAACX,gBAAD,CAA1C,CALoD;;AAQpD,UAAI,CAACU,SAAS,CAACE,KAAf,EAAsB;AAClBJ,QAAAA,GAAG,CAACK,cAAJ;AACA;AACH;;AAED;AAEI,OAACC,QAAQ,CAACC,aAAV;AAEC,OAACP,GAAG,CAACQ,QAAL,IAAiBF,QAAQ,CAACC,aAAT,KAA2BL,SAAS,CAACO,IAFvD;AAIA,OAACjB,gBAAgB,CAACkB,QAAjB,CAA0BJ,QAAQ,CAACC,aAAnC,CANL,EAOE;AACEL,QAAAA,SAAS,CAACE,KAAV,CAAgBO,KAAhB;AACAX,QAAAA,GAAG,CAACK,cAAJ;AACA;AACH;;AAED;AAEIL,MAAAA,GAAG,CAACQ,QAAJ;AAEAF,MAAAA,QAAQ,CAACC,aAAT,KAA2BL,SAAS,CAACE,KAJzC,EAKE;AACEF,QAAAA,SAAS,CAACO,IAAV,CAAeE,KAAf;AACAX,QAAAA,GAAG,CAACK,cAAJ;AACH;AACJ,KAnCD;;AAqCA,QAAMO,SAAmB,GAAG;AACxBC,MAAAA,MAAM,EAAE;AAAA,eAAMlB,WAAW,CAACmB,gBAAZ,CAA6B,SAA7B,EAAwCf,uBAAxC,CAAN;AAAA,OADgB;AAExBgB,MAAAA,OAAO,EAAE;AAAA,eAAMpB,WAAW,CAACqB,mBAAZ,CAAgC,SAAhC,EAA2CjB,uBAA3C,CAAN;AAAA;AAFe,KAA5B,CA9CY;;AAoDZ,QAAIN,YAAY,IAAID,gBAAgB,CAACkB,QAAjB,CAA0BjB,YAA1B,CAApB,EAA6D;AACzD;AACAA,MAAAA,YAAY,CAACkB,KAAb;AACH,KAHD,MAGO;AAAA;;AACH;AACA,+BAAAR,wBAAwB,CAACX,gBAAD,CAAxB,CAA2CY,KAA3C,gFAAkDO,KAAlD;AACH;;AACDtB,IAAAA,WAAW,CAAC4B,QAAZ,CAAqBL,SAArB,EA3DY;;AA8DZ,WAAO;AAAA,aAAMvB,WAAW,CAAC6B,UAAZ,CAAuBN,SAAvB,CAAN;AAAA,KAAP;AACH,GA/DQ,EA+DN,CAACnB,YAAD,EAAeD,gBAAf,CA/DM,CAAT;AAgEH;;;;"}

package/esm/_internal/user-block.js

@@ -12,5 +12,6 @@ import './Avatar2.js';
 import './renderLink.js';
 import './Link2.js';
 import './Thumbnail2.js';
+import 'lodash/set';
 export { U as UserBlock } from './UserBlock.js';
 //# sourceMappingURL=user-block.js.map

package/esm/_internal/user-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/esm/index.js

@@ -37,11 +37,11 @@ import 'moment';
 export { D as DatePicker, a as DatePickerControlled, b as DatePickerField } from './_internal/DatePickerField.js';
 import 'lodash/range';
 import 'moment-range';
+import './_internal/ClickAwayProvider.js';
+import 'lodash/pull';
 import './_internal/useFocusTrap.js';
 import 'react-dom';
-import './_internal/ClickAwayProvider.js';
 export { D as Dialog } from './_internal/Dialog2.js';
-import 'lodash/pull';
 import './_internal/useDelayedVisibility.js';
 import './_internal/useDisableBodyScroll.js';
 export { D as DEFAULT_PROPS, a as Divider } from './_internal/Divider2.js';
@@ -52,6 +52,7 @@ export { E as ExpansionPanel } from './_internal/ExpansionPanel.js';
 export { F as Flag } from './_internal/Flag2.js';
 import 'lodash/castArray';
 export { F as FlexBox } from './_internal/FlexBox.js';
+export { G as GenericBlock } from './_internal/GenericBlock.js';
 export { G as Grid, a as GridItem } from './_internal/GridItem.js';
 import 'lodash/isObject';
 export { a as ImageBlock, I as ImageBlockCaptionPosition } from './_internal/ImageBlock.js';
@@ -85,5 +86,6 @@ export { T as ThumbnailAspectRatio, a as ThumbnailVariant } from './_internal/ty
 export { T as Toolbar } from './_internal/Toolbar2.js';
 export { T as Tooltip } from './_internal/Tooltip2.js';
 export { a as Uploader, U as UploaderVariant } from './_internal/Uploader2.js';
+import 'lodash/set';
 export { U as UserBlock } from './_internal/UserBlock.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.2.18",
-        "@lumx/icons": "^2.2.18",
+        "@lumx/core": "^2.2.20",
+        "@lumx/icons": "^2.2.20",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -72,7 +72,7 @@
         "rollup-plugin-typescript-paths": "^1.2.2",
         "test-data-bot": "^0.8.0",
         "ts-jest": "^26.2.0",
-        "tsconfig-paths-webpack-plugin": "^3.2.0",
+        "tsconfig-paths-webpack-plugin": "^3.3.0",
         "typescript": "^4.1.2",
         "yargs": "^15.4.1",
         "yarn": "^1.19.1"
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.2.18",
-    "gitHead": "76dbe9453429551c6332560fc8cdb7abab8eeb04"
+    "version": "2.2.20",
+    "gitHead": "6eeb06197c8558c38c9af1bfd2ec920b221aa8b3"
 }

package/src/components/button/Button.stories.tsx

@@ -13,6 +13,7 @@ const DEFAULT_PROPS = Button.defaultProps as any;
 export const SimpleButton = ({ theme }: any) => {
     return (
         <Button
+            aria-pressed={boolean('isSelected', Boolean(DEFAULT_PROPS.isSelected))}
             emphasis={emphasis('Emphasis', DEFAULT_PROPS.emphasis)}
             theme={theme}
             rightIcon={select('Right icon', { none: undefined, mdiSend }, undefined)}

package/src/components/button/ButtonRoot.tsx

@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef, RefObject } from 'react';
+import React, { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, forwardRef, RefObject } from 'react';
 
 import isEmpty from 'lodash/isEmpty';
 
@@ -16,9 +16,9 @@ type HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>
  */
 export type ButtonSize = Extract<Size, 's' | 'm'>;
 
-export interface BaseButtonProps extends GenericProps {
-    /** ARIA button label. */
-    ['aria-label']?: string;
+export interface BaseButtonProps
+    extends GenericProps,
+        Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'> {
     /** Color variant. */
     color?: Color;
     /** Emphasis variant. */

package/src/components/checkbox/Checkbox.tsx

@@ -112,6 +112,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
                     value={value}
                     checked={isChecked}
                     onChange={handleChange}
+                    aria-describedby={helper ? `${inputId}-helper` : undefined}
                     {...inputProps}
                 />
 
@@ -131,7 +132,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
                     </InputLabel>
                 )}
                 {helper && (
-                    <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>
+                    <InputHelper id={`${inputId}-helper`} className={`${CLASSNAME}__helper`} theme={theme}>
                         {helper}
                     </InputHelper>
                 )}

package/src/components/checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`<Checkbox> Props should use the given props 1`] = `
     className="lumx-checkbox__input-wrapper"
   >
     <input
+      aria-describedby="fixedId-helper"
       className="lumx-checkbox__input-native"
       id="fixedId"
       onChange={[Function]}
@@ -41,6 +42,7 @@ exports[`<Checkbox> Props should use the given props 1`] = `
     </InputLabel>
     <InputHelper
       className="lumx-checkbox__helper"
+      id="fixedId-helper"
       kind="info"
       theme="light"
     >
@@ -58,6 +60,7 @@ exports[`<Checkbox> Props should use the given props while passing custom props
     className="lumx-checkbox__input-wrapper"
   >
     <input
+      aria-describedby="fixedId-helper"
       aria-labelledby="labelledby-id"
       className="lumx-checkbox__input-native"
       id="fixedId"
@@ -92,6 +95,7 @@ exports[`<Checkbox> Props should use the given props while passing custom props
     </InputLabel>
     <InputHelper
       className="lumx-checkbox__helper"
+      id="fixedId-helper"
       kind="info"
       theme="light"
     >

package/src/components/date-picker/DatePickerField.tsx

@@ -62,7 +62,7 @@ export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwa
         value,
         ...forwardedProps
     } = props;
-    const wrapperRef = useRef(null);
+    const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(null);
     const anchorRef = useRef(null);
 
     const [isOpen, setIsOpen] = useState(false);
@@ -83,8 +83,8 @@ export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwa
     };
 
     // Handle focus trap.
-    const todayOrSelectedDateRef = useRef<HTMLButtonElement>(null);
-    useFocusTrap(todayOrSelectedDateRef.current && wrapperRef.current, todayOrSelectedDateRef.current);
+    const [todayOrSelectedDate, setTodayOrSelectedDate] = useState<HTMLButtonElement | null>(null);
+    useFocusTrap(isOpen && wrapperElement, todayOrSelectedDate);
 
     const onTextFieldChange = (textFieldValue: string, textFieldName?: string, event?: SyntheticEvent) => {
         if (!textFieldValue) {
@@ -121,19 +121,18 @@ export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwa
                     closeOnClickAway
                     closeOnEscape
                 >
-                    <div ref={wrapperRef}>
-                        <DatePicker
-                            locale={locale}
-                            maxDate={maxDate}
-                            minDate={minDate}
-                            value={value}
-                            onChange={onDatePickerChange}
-                            todayOrSelectedDateRef={todayOrSelectedDateRef}
-                            defaultMonth={defaultMonth}
-                            nextButtonProps={nextButtonProps}
-                            previousButtonProps={previousButtonProps}
-                        />
-                    </div>
+                    <DatePicker
+                        ref={setWrapperElement}
+                        locale={locale}
+                        maxDate={maxDate}
+                        minDate={minDate}
+                        value={value}
+                        onChange={onDatePickerChange}
+                        todayOrSelectedDateRef={setTodayOrSelectedDate}
+                        defaultMonth={defaultMonth}
+                        nextButtonProps={nextButtonProps}
+                        previousButtonProps={previousButtonProps}
+                    />
                 </Popover>
             ) : null}
         </>

package/src/components/date-picker/types.ts

@@ -1,6 +1,6 @@
 import { IconButtonProps } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils';
-import { RefObject } from 'react';
+import { Ref } from 'react';
 
 /**
  * Defines the props of the component.
@@ -20,7 +20,7 @@ export interface DatePickerProps extends GenericProps {
     previousButtonProps: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
     /** Reference to the <button> element corresponding to the current date or the selected date. */
-    todayOrSelectedDateRef?: RefObject<HTMLButtonElement>;
+    todayOrSelectedDateRef?: Ref<HTMLButtonElement>;
     /** Currently selected date. */
     value: Date | undefined;
     /** On change callback. */