@lumx/react 2.2.20-alpha.xss.datatable → 2.2.20

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.20-alpha.xss.datatable",
-        "@lumx/icons": "^2.2.20-alpha.xss.datatable",
+        "@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",
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.2.20-alpha.xss.datatable",
-    "gitHead": "f3e5a90ee87b5f78417bff7015fa43852205a69d"
+    "version": "2.2.20",
+    "gitHead": "6eeb06197c8558c38c9af1bfd2ec920b221aa8b3"
 }

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. */

package/src/components/dialog/Dialog.stories.tsx

@@ -1,3 +1,4 @@
+import noop from 'lodash/noop';
 import { mdiClose } from '@lumx/icons';
 import {
     AlertDialog,
@@ -17,7 +18,8 @@ import {
 } from '@lumx/react';
 import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
 import { select } from '@storybook/addon-knobs';
-import React, { RefObject, useRef, useState } from 'react';
+import React, { RefObject, useCallback, useRef, useState } from 'react';
+import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { Dialog, DialogSizes } from './Dialog';
 import { loremIpsum } from '../../stories/knobs/lorem';
 import { chromaticForceScreenSize } from '../../stories/chromaticForceScreenSize';
@@ -43,8 +45,8 @@ const footer = <footer className="lumx-spacing-padding">Dialog footer</footer>;
 function useOpenButton(theme: Theme, defaultState = true) {
     const buttonRef = useRef() as RefObject<HTMLButtonElement>;
     const [isOpen, setOpen] = useState(defaultState);
-    const openDialog = () => setOpen(true);
-    const closeDialog = () => setOpen(false);
+    const openDialog = useCallback(() => setOpen(true), []);
+    const closeDialog = useCallback(() => setOpen(false), []);
 
     return {
         button: (
@@ -301,6 +303,9 @@ export const DialogFocusTrap = ({ theme }: any) => {
     };
     const [date, setDate] = useState<Date | undefined>(new Date('2020-05-18'));
 
+    const datePickerDialogButtonRef = useRef<HTMLButtonElement>(null);
+    const [isDatePickerDialogOpen, closeDatePickerDialog, openDatePickerDialog] = useBooleanState(false);
+
     return (
         <>
             {button}
@@ -335,16 +340,51 @@ export const DialogFocusTrap = ({ theme }: any) => {
                     />
 
                     <FlexBox orientation="horizontal" hAlign="bottom" gap="regular">
-                        <DatePickerField
-                            locale="fr"
-                            label="Start date"
-                            placeholder="Pick a date"
-                            theme={theme}
-                            onChange={setDate}
-                            value={date}
-                            nextButtonProps={{ label: 'Next month' }}
-                            previousButtonProps={{ label: 'Previous month' }}
-                        />
+                        <Button ref={datePickerDialogButtonRef} onClick={openDatePickerDialog}>
+                            Open date picker
+                        </Button>
+                        <Dialog
+                            isOpen={isDatePickerDialogOpen}
+                            parentElement={datePickerDialogButtonRef}
+                            onClose={closeDatePickerDialog}
+                        >
+                            <header>
+                                <Toolbar
+                                    label={<h1 className="lumx-typography-title">Date picker</h1>}
+                                    after={
+                                        <IconButton
+                                            label="Close"
+                                            icon={mdiClose}
+                                            onClick={closeDatePickerDialog}
+                                            emphasis={Emphasis.low}
+                                        />
+                                    }
+                                />
+                            </header>
+                            <div className="lumx-spacing-padding">
+                                <DatePickerField
+                                    locale="fr"
+                                    label="Start date"
+                                    placeholder="Pick a date"
+                                    theme={theme}
+                                    onChange={setDate}
+                                    value={date}
+                                    nextButtonProps={{ label: 'Next month' }}
+                                    previousButtonProps={{ label: 'Previous month' }}
+                                />
+                                <DatePickerField
+                                    locale="fr"
+                                    label="Start date"
+                                    placeholder="Pick a date"
+                                    theme={theme}
+                                    onChange={noop}
+                                    value={undefined}
+                                    nextButtonProps={{ label: 'Next month' }}
+                                    previousButtonProps={{ label: 'Previous month' }}
+                                    defaultMonth={new Date('2020-05-18')}
+                                />
+                            </div>
+                        </Dialog>
 
                         <Select
                             className="lumx-spacing-margin-left-huge"

package/src/components/dialog/Dialog.tsx

@@ -142,7 +142,7 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
     const localContentRef = useRef<HTMLDivElement>(null);
     // Handle focus trap.
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useFocusTrap(wrapperRef.current, focusElement?.current);
+    useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useDisableBodyScroll(isOpen && localContentRef.current);

package/src/components/dialog/__snapshots__/Dialog.test.tsx.snap

@@ -80,23 +80,84 @@ exports[`<Dialog> Snapshots and structure should render story DialogFocusTrap 1`
         hAlign="bottom"
         orientation="horizontal"
       >
-        <DatePickerField
-          label="Start date"
-          locale="fr"
-          nextButtonProps={
-            Object {
-              "label": "Next month",
-            }
-          }
-          onChange={[Function]}
-          placeholder="Pick a date"
-          previousButtonProps={
+        <Button
+          emphasis="high"
+          onClick={[Function]}
+          size="m"
+          theme="light"
+        >
+          Open date picker
+        </Button>
+        <Dialog
+          isOpen={false}
+          onClose={[Function]}
+          parentElement={
             Object {
-              "label": "Previous month",
+              "current": null,
             }
           }
-          value={2020-05-18T00:00:00.000Z}
-        />
+          size="big"
+        >
+          <header>
+            <Toolbar
+              after={
+                <IconButton
+                  emphasis="low"
+                  icon="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+                  label="Close"
+                  onClick={[Function]}
+                  size="m"
+                  theme="light"
+                />
+              }
+              label={
+                <h1
+                  className="lumx-typography-title"
+                >
+                  Date picker
+                </h1>
+              }
+            />
+          </header>
+          <div
+            className="lumx-spacing-padding"
+          >
+            <DatePickerField
+              label="Start date"
+              locale="fr"
+              nextButtonProps={
+                Object {
+                  "label": "Next month",
+                }
+              }
+              onChange={[Function]}
+              placeholder="Pick a date"
+              previousButtonProps={
+                Object {
+                  "label": "Previous month",
+                }
+              }
+              value={2020-05-18T00:00:00.000Z}
+            />
+            <DatePickerField
+              defaultMonth={2020-05-18T00:00:00.000Z}
+              label="Start date"
+              locale="fr"
+              nextButtonProps={
+                Object {
+                  "label": "Next month",
+                }
+              }
+              onChange={[Function]}
+              placeholder="Pick a date"
+              previousButtonProps={
+                Object {
+                  "label": "Previous month",
+                }
+              }
+            />
+          </div>
+        </Dialog>
         <Select
           className="lumx-spacing-margin-left-huge"
           isOpen={false}