@lumx/react 2.2.19 → 2.2.20-alpha-type.1

package/esm/_internal/date-picker.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';
@@ -19,10 +20,10 @@ import 'moment';
 export { D as DatePicker, a as DatePickerControlled, b as DatePickerField } from './DatePickerField.js';
 import 'lodash/range';
 import 'moment-range';
-import './useFocusTrap.js';
-import 'react-dom';
 import './ClickAwayProvider.js';
 import 'lodash/pull';
+import './useFocusTrap.js';
+import 'react-dom';
 import './InputHelper.js';
 import './InputLabel.js';
 import './TextField.js';

package/esm/_internal/date-picker.js.map

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

package/esm/_internal/dialog.js

@@ -16,11 +16,11 @@ import './partitionMulti.js';
 import 'lodash/get';
 import './type.js';
 import './mergeRefs.js';
+import './ClickAwayProvider.js';
+import 'lodash/pull';
 import './useFocusTrap.js';
 import 'react-dom';
-import './ClickAwayProvider.js';
 export { D as Dialog } from './Dialog2.js';
-import 'lodash/pull';
 import './useDelayedVisibility.js';
 import './useDisableBodyScroll.js';
 import './Progress2.js';

package/esm/_internal/dropdown.js

@@ -7,14 +7,15 @@ import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
 import './constants.js';
+import 'lodash/last';
 import 'lodash/get';
 import './type.js';
 import './Popover2.js';
 import './mergeRefs.js';
 import './renderLink.js';
-import 'react-dom';
 import './ClickAwayProvider.js';
 import 'lodash/pull';
+import 'react-dom';
 import './List2.js';
 export { D as Dropdown } from './Dropdown2.js';
 //# sourceMappingURL=dropdown.js.map

package/esm/_internal/dropdown.js.map

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

package/esm/_internal/expansion-panel.js

@@ -23,9 +23,9 @@ import './renderLink.js';
 import './ButtonRoot.js';
 import './IconButton.js';
 import 'lodash/isFunction';
-import 'react-dom';
 import './ClickAwayProvider.js';
 import 'lodash/pull';
+import 'react-dom';
 import './DragHandle.js';
 export { E as ExpansionPanel } from './ExpansionPanel.js';
 import './Tooltip2.js';

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,101 +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], button, textarea, input:not([type=\"hidden\"]), [tabindex]";
-/** CSS selector matching element that are disabled (should not receive focus). */
-
-var DISABLED_SELECTOR = "[tabindex=\"-1\"], [disabled]:not([disabled=\"false\"]), [aria-disabled]:not([aria-disabled=\"false\"])";
-
-var isNotDisabled = function isNotDisabled(element) {
-  return !element.matches(DISABLED_SELECTOR);
-};
+var FOCUS_TRAPS = makeListenerTowerContext();
 /**
- * Get first and last elements focusable in an element.
+ * Trap 'Tab' focus switch inside the `focusZoneElement`.
+ *
+ * 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 parentElement The element in which to search focusable elements.
- * @return first and last focusable elements
+ * @param focusZoneElement The element in which to trap the focus.
+ * @param focusElement     The element to focus when the focus trap is activated (otherwise the first focusable element
+ *                         will be focused).
  */
 
+function useFocusTrap(focusZoneElement, focusElement) {
+  useEffect(function () {
+    // Body element can be undefined in SSR context.
+    var rootElement = DOCUMENT === null || DOCUMENT === void 0 ? void 0 : DOCUMENT.body;
 
-function getFirstAndLastFocusable(parentElement) {
-  var focusableElements = Array.from(parentElement.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR)); // First non disabled element.
+    if (!rootElement || !focusZoneElement) {
+      return undefined;
+    } // Trap 'Tab' key down focus switch into the focus zone.
 
-  var first = focusableElements.find(isNotDisabled); // Last non disabled element.
 
-  var last = focusableElements.reverse().find(isNotDisabled);
+    var trapTabFocusInFocusZone = function trapTabFocusInFocusZone(evt) {
+      var key = evt.key;
 
-  if (last && first) {
-    return {
-      first: first,
-      last: last
-    };
-  }
+      if (key !== 'Tab') {
+        return;
+      }
 
-  return {};
-}
+      var focusable = getFirstAndLastFocusable(focusZoneElement); // Prevent focus switch if no focusable available.
 
-/**
- * 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.
- *
- * @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.
- */
+      if (!focusable.first) {
+        evt.preventDefault();
+        return;
+      }
 
-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;
+      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;
+      }
 
-      (_ref = document.activeElement) === null || _ref === void 0 ? void 0 : _ref.blur();
+      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();
+      }
+    };
 
-      if (focusElement) {
-        focusElement.focus();
+    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;
 
-      var onKeyDown = function onKeyDown(evt) {
-        var key = evt.key;
-
-        if (key !== 'Tab') {
-          return;
-        }
-
-        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();
-        }
-      };
-
-      rootElement.addEventListener('keydown', onKeyDown);
-      return function () {
-        return rootElement.removeEventListener('keydown', onKeyDown);
-      };
+      // 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/utils/focus/getFirstAndLastFocusable.ts","../../../src/hooks/useFocusTrap.ts"],"sourcesContent":["/** CSS selector listing all tabbable elements. */\nconst TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type=\"hidden\"]), [tabindex]`;\n\n/** CSS selector matching element that are disabled (should not receive focus). */\nconst DISABLED_SELECTOR = `[tabindex=\"-1\"], [disabled]:not([disabled=\"false\"]), [aria-disabled]:not([aria-disabled=\"false\"])`;\n\nconst isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);\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 */\nexport function getFirstAndLastFocusable(parentElement: HTMLElement) {\n    const focusableElements = Array.from(parentElement.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR));\n\n    // First non disabled element.\n    const first = focusableElements.find(isNotDisabled);\n    // Last non disabled element.\n    const last = focusableElements.reverse().find(isNotDisabled);\n\n    if (last && first) {\n        return { first, last };\n    }\n    return {};\n}\n","import { useEffect } from 'react';\n\nimport { DOCUMENT } from '@lumx/react/constants';\nimport { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';\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 = 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            rootElement.addEventListener('keydown', onKeyDown);\n            return () => rootElement.removeEventListener('keydown', onKeyDown);\n        }\n        return undefined;\n    }, [focusElement, focusZoneElement, rootElement]);\n}\n"],"names":["TABBABLE_ELEMENTS_SELECTOR","DISABLED_SELECTOR","isNotDisabled","element","matches","getFirstAndLastFocusable","parentElement","focusableElements","Array","from","querySelectorAll","first","find","last","reverse","useFocusTrap","focusZoneElement","focusElement","rootElement","DOCUMENT","body","useEffect","document","activeElement","blur","focus","onKeyDown","evt","key","focusable","preventDefault","shiftKey","contains","addEventListener","removeEventListener","undefined"],"mappings":";;;AAAA;AACA,IAAMA,0BAA0B,wEAAhC;AAEA;;AACA,IAAMC,iBAAiB,4GAAvB;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,OAAD;AAAA,SAA0B,CAACA,OAAO,CAACC,OAAR,CAAgBH,iBAAhB,CAA3B;AAAA,CAAtB;AAEA;;;;;;;;AAMO,SAASI,wBAAT,CAAkCC,aAAlC,EAA8D;AACjE,MAAMC,iBAAiB,GAAGC,KAAK,CAACC,IAAN,CAAWH,aAAa,CAACI,gBAAd,CAA4CV,0BAA5C,CAAX,CAA1B,CADiE;;AAIjE,MAAMW,KAAK,GAAGJ,iBAAiB,CAACK,IAAlB,CAAuBV,aAAvB,CAAd,CAJiE;;AAMjE,MAAMW,IAAI,GAAGN,iBAAiB,CAACO,OAAlB,GAA4BF,IAA5B,CAAiCV,aAAjC,CAAb;;AAEA,MAAIW,IAAI,IAAIF,KAAZ,EAAmB;AACf,WAAO;AAAEA,MAAAA,KAAK,EAALA,KAAF;AAASE,MAAAA,IAAI,EAAJA;AAAT,KAAP;AACH;;AACD,SAAO,EAAP;AACH;;ACrBD;;;;;;;;;;AASO,SAASE,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,GAAGxB,wBAAwB,CAACW,gBAAD,CAA1C,CALsC;;AAQtC,YAAI,CAACa,SAAS,CAAClB,KAAf,EAAsB;AAClBgB,UAAAA,GAAG,CAACG,cAAJ;AACA;AACH;;AAED;AAEI,SAACR,QAAQ,CAACC,aAAV;AAEC,SAACI,GAAG,CAACI,QAAL,IAAiBT,QAAQ,CAACC,aAAT,KAA2BM,SAAS,CAAChB,IAFvD;AAIA,SAACG,gBAAgB,CAACgB,QAAjB,CAA0BV,QAAQ,CAACC,aAAnC,CANL,EAOE;AACEM,UAAAA,SAAS,CAAClB,KAAV,CAAgBc,KAAhB;AACAE,UAAAA,GAAG,CAACG,cAAJ;AACA;AACH;;AAED;AAEIH,QAAAA,GAAG,CAACI,QAAJ;AAEAT,QAAAA,QAAQ,CAACC,aAAT,KAA2BM,SAAS,CAAClB,KAJzC,EAKE;AACEkB,UAAAA,SAAS,CAAChB,IAAV,CAAeY,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/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';

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.19",
-        "@lumx/icons": "^2.2.19",
+        "@lumx/core": "^2.2.20-alpha-type.1",
+        "@lumx/icons": "^2.2.20-alpha-type.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -111,7 +111,7 @@
     },
     "scripts": {
         "build": "rollup -c && yarn generate:types",
-        "generate:types": "dts-bundle-generator --no-check --external-types=react --external-imports=moment -o dist/types.d.ts src/index.ts",
+        "generate:types": "dts-bundle-generator --no-check --external-imports=react -o dist/types.d.ts src/index.ts",
         "prepare": "install-peers || exit 0",
         "prepublishOnly": "yarn build",
         "test": "jest --config jest/index.js --coverage --notify --passWithNoTests --detectOpenHandles --runInBand",
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.2.19",
-    "gitHead": "075b14a949b8ed5897d5fa8087ea4ff993d90eb5"
+    "version": "2.2.20-alpha-type.1",
+    "gitHead": "ad74227be3187c488044780000f5f66007af2132"
 }

package/src/components/autocomplete/Autocomplete.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef, ReactNode, RefObject, SyntheticEvent, useRef } from 'react';
+import React, { forwardRef, ReactNode, SyntheticEvent, useRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Dropdown, IconButtonProps, Offset, Placement, TextField, Theme } from '@lumx/react';
+import { Dropdown, IconButtonProps, Offset, Placement, TextField, TextFieldProps, Theme } from '@lumx/react';
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
@@ -29,7 +29,7 @@ export interface AutocompleteProps extends GenericProps {
      * Reference to the <input> or <textarea> element.
      * @see {@link TextFieldProps#inputRef}
      */
-    inputRef?: RefObject<HTMLInputElement>;
+    inputRef?: TextFieldProps['inputRef'];
     /**
      * The offset that will be applied to the Dropdown position.
      * @see {@link DropdownProps#offset}
@@ -244,7 +244,7 @@ export const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef(
                 hasError={hasError}
                 helper={helper}
                 icon={icon}
-                inputRef={mergeRefs(inputAnchorRef, inputRef) as any}
+                inputRef={mergeRefs(inputAnchorRef as React.RefObject<HTMLInputElement>, inputRef)}
                 clearButtonProps={clearButtonProps}
                 isDisabled={isDisabled}
                 isRequired={isRequired}

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>
                 )}