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

package/esm/_internal/ClickAwayProvider.js

@@ -3,30 +3,108 @@ import React, { useEffect, createContext, useContext } from 'react';
 import { f as onEscapePressed } from './getRootClassName.js';
 import isEmpty from 'lodash/isEmpty';
 import { D as DOCUMENT } from './constants.js';
+import last from 'lodash/last';
 import pull from 'lodash/pull';
 
+/** CSS selector listing all tabbable elements. */
+var TABBABLE_ELEMENTS_SELECTOR = "a[href], button, textarea, input:not([type=\"hidden\"]):not([hidden]), [tabindex]";
+/** CSS selector matching element that are disabled (should not receive focus). */
+
+var DISABLED_SELECTOR = "[hidden], [tabindex=\"-1\"], [disabled]:not([disabled=\"false\"]), [aria-disabled]:not([aria-disabled=\"false\"])";
+
+var isNotDisabled = function isNotDisabled(element) {
+  return !element.matches(DISABLED_SELECTOR);
+};
 /**
- * Triggers a callback when the escape key is pressed.
+ * Get first and last elements focusable in an element.
+ *
+ * @param parentElement The element in which to search focusable elements.
+ * @return first and last focusable elements
+ */
+
+
+function getFirstAndLastFocusable(parentElement) {
+  var focusableElements = Array.from(parentElement.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR)); // First non disabled element.
+
+  var first = focusableElements.find(isNotDisabled); // Last non disabled element.
+
+  var last = focusableElements.reverse().find(isNotDisabled);
+
+  if (last && first) {
+    return {
+      first: first,
+      last: last
+    };
+  }
+
+  return {};
+}
+
+/**
+ * Keep track of listeners, only the last registered listener gets activated at any point (previously registered
+ * listener are disabled).
+ * When a listener gets unregistered, the previously registered listener gets enabled again.
+ */
+function makeListenerTowerContext() {
+  var LISTENERS = [];
+  return {
+    register: function register(listener) {
+      var _last;
+
+      // Disable previous listener.
+      (_last = last(LISTENERS)) === null || _last === void 0 ? void 0 : _last.disable(); // Keep track of current listener.
+
+      LISTENERS.push(listener); // Enable current listener.
+
+      listener.enable();
+    },
+    unregister: function unregister(listener) {
+      var _last2;
+
+      // Disable current listener.
+      listener.disable(); // Remove current listener.
+
+      pull(LISTENERS, listener); // Enable previous listener.
+
+      (_last2 = last(LISTENERS)) === null || _last2 === void 0 ? void 0 : _last2.enable();
+    }
+  };
+}
+
+var LISTENERS = makeListenerTowerContext();
+/**
+ * Register a global listener on 'Escape' key pressed.
+ *
+ * If multiple listener are registered, only the last one is maintained. When a listener is unregistered, the previous
+ * one gets activated again.
  *
  * @param callback      Callback
  * @param closeOnEscape Disables the hook when false
- * @param rootElement   Element on which to listen the escape key
  */
 
 function useCallbackOnEscape(callback) {
   var closeOnEscape = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  var rootElement = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DOCUMENT === null || DOCUMENT === void 0 ? void 0 : DOCUMENT.body;
   useEffect(function () {
-    if (closeOnEscape && callback && rootElement) {
-      var onKeyDown = onEscapePressed(callback);
-      rootElement.addEventListener('keydown', onKeyDown);
-      return function () {
-        return rootElement.removeEventListener('keydown', onKeyDown);
-      };
+    var rootElement = DOCUMENT === null || DOCUMENT === void 0 ? void 0 : DOCUMENT.body;
+
+    if (!closeOnEscape || !callback || !rootElement) {
+      return undefined;
     }
 
-    return undefined;
-  }, [callback, closeOnEscape, rootElement]);
+    var onKeyDown = onEscapePressed(callback);
+    var listener = {
+      enable: function enable() {
+        return rootElement.addEventListener('keydown', onKeyDown);
+      },
+      disable: function disable() {
+        return rootElement.removeEventListener('keydown', onKeyDown);
+      }
+    };
+    LISTENERS.register(listener);
+    return function () {
+      return LISTENERS.unregister(listener);
+    };
+  }, [callback, closeOnEscape]);
 }
 
 var EVENT_TYPES = ['mousedown', 'touchstart'];
@@ -112,5 +190,5 @@ var ClickAwayProvider = function ClickAwayProvider(_ref) {
 };
 ClickAwayProvider.displayName = 'ClickAwayProvider';
 
-export { ClickAwayProvider as C, useCallbackOnEscape as u };
+export { ClickAwayProvider as C, getFirstAndLastFocusable as g, makeListenerTowerContext as m, useCallbackOnEscape as u };
 //# sourceMappingURL=ClickAwayProvider.js.map

package/esm/_internal/ClickAwayProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClickAwayProvider.js","sources":["../../../src/hooks/useCallbackOnEscape.ts","../../../src/hooks/useClickAway.tsx","../../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx"],"sourcesContent":["import { DOCUMENT } from '@lumx/react/constants';\nimport { Callback, onEscapePressed } from '@lumx/react/utils';\nimport { useEffect } from 'react';\n\n/**\n * Triggers a callback when the escape key is pressed.\n *\n * @param callback      Callback\n * @param closeOnEscape Disables the hook when false\n * @param rootElement   Element on which to listen the escape key\n */\nexport function useCallbackOnEscape(\n    callback: Callback | undefined,\n    closeOnEscape = true,\n    rootElement = DOCUMENT?.body,\n) {\n    useEffect(() => {\n        if (closeOnEscape && callback && rootElement) {\n            const onKeyDown = onEscapePressed(callback);\n            rootElement.addEventListener('keydown', onKeyDown);\n            return () => rootElement.removeEventListener('keydown', onKeyDown);\n        }\n        return undefined;\n    }, [callback, closeOnEscape, rootElement]);\n}\n","import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils';\n\nimport isEmpty from 'lodash/isEmpty';\n\nconst EVENT_TYPES = ['mousedown', 'touchstart'];\n\nfunction isClickAway(target: HTMLElement, refs: Array<RefObject<HTMLElement>>): boolean {\n    // The target element is not contained in any of the listed element references.\n    return !refs.some((e) => e?.current?.contains(target));\n}\n\nexport interface ClickAwayParameters {\n    /**\n     * A callback function to call when the user clicks away from the elements.\n     */\n    callback: EventListener | Falsy;\n    /**\n     * Elements from which we want to detect the click away.\n     */\n    refs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, refs }: ClickAwayParameters): void {\n    useEffect(() => {\n        const { current: currentRefs } = refs;\n        if (!callback || !currentRefs || isEmpty(currentRefs)) {\n            return undefined;\n        }\n        const listener: EventListener = (evt) => {\n            if (isClickAway(evt.target as HTMLElement, currentRefs)) {\n                callback(evt);\n            }\n        };\n\n        EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n        return () => {\n            EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n        };\n    }, [callback, refs]);\n}\n","import React, { createContext, useContext, useEffect } from 'react';\nimport pull from 'lodash/pull';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\nconst ClickAwayAncestorContext = createContext<ClickAwayParameters['refs'] | null>(null);\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree we trying to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayParameters> = ({ children, callback, refs }) => {\n    const ancestorChildrenRefs = useContext(ClickAwayAncestorContext);\n\n    useEffect(() => {\n        const { current: currentRefs } = refs;\n        const { current: currentAncestorChildrenRefs } = ancestorChildrenRefs || {};\n        if (!currentAncestorChildrenRefs || !currentRefs) {\n            return undefined;\n        }\n        // Push current refs to parent.\n        currentAncestorChildrenRefs.push(...currentRefs);\n        return () => {\n            // Pull current refs from parent.\n            pull(currentAncestorChildrenRefs, ...currentRefs);\n        };\n    }, [ancestorChildrenRefs, refs]);\n\n    useClickAway({ callback, refs });\n    return <ClickAwayAncestorContext.Provider value={refs}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n"],"names":["useCallbackOnEscape","callback","closeOnEscape","rootElement","DOCUMENT","body","useEffect","onKeyDown","onEscapePressed","addEventListener","removeEventListener","undefined","EVENT_TYPES","isClickAway","target","refs","some","e","current","contains","useClickAway","currentRefs","isEmpty","listener","evt","forEach","evtType","document","ClickAwayAncestorContext","createContext","ClickAwayProvider","children","ancestorChildrenRefs","useContext","currentAncestorChildrenRefs","push","pull","displayName"],"mappings":"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"}
+{"version":3,"file":"ClickAwayProvider.js","sources":["../../../src/utils/focus/getFirstAndLastFocusable.ts","../../../src/utils/makeListenerTowerContext.ts","../../../src/hooks/useCallbackOnEscape.ts","../../../src/hooks/useClickAway.tsx","../../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx"],"sourcesContent":["/** CSS selector listing all tabbable elements. */\nconst TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type=\"hidden\"]):not([hidden]), [tabindex]`;\n\n/** CSS selector matching element that are disabled (should not receive focus). */\nconst DISABLED_SELECTOR = `[hidden], [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 last from 'lodash/last';\nimport pull from 'lodash/pull';\n\nexport type Listener = { enable(): void; disable(): void };\n\n/**\n * Keep track of listeners, only the last registered listener gets activated at any point (previously registered\n * listener are disabled).\n * When a listener gets unregistered, the previously registered listener gets enabled again.\n */\nexport function makeListenerTowerContext() {\n    const LISTENERS: Listener[] = [];\n\n    return {\n        register(listener: Listener) {\n            // Disable previous listener.\n            last(LISTENERS)?.disable();\n            // Keep track of current listener.\n            LISTENERS.push(listener);\n            // Enable current listener.\n            listener.enable();\n        },\n        unregister(listener: Listener) {\n            // Disable current listener.\n            listener.disable();\n            // Remove current listener.\n            pull(LISTENERS, listener);\n            // Enable previous listener.\n            last(LISTENERS)?.enable();\n        },\n    };\n}\n","import { DOCUMENT } from '@lumx/react/constants';\nimport { Callback, onEscapePressed } from '@lumx/react/utils';\nimport { useEffect } from 'react';\nimport { Listener, makeListenerTowerContext } from '@lumx/react/utils/makeListenerTowerContext';\n\nconst LISTENERS = makeListenerTowerContext();\n\n/**\n * Register a global listener on 'Escape' key pressed.\n *\n * If multiple listener are registered, only the last one is maintained. When a listener is unregistered, the previous\n * one gets activated again.\n *\n * @param callback      Callback\n * @param closeOnEscape Disables the hook when false\n */\nexport function useCallbackOnEscape(callback: Callback | undefined, closeOnEscape = true) {\n    useEffect(() => {\n        const rootElement = DOCUMENT?.body;\n        if (!closeOnEscape || !callback || !rootElement) {\n            return undefined;\n        }\n        const onKeyDown = onEscapePressed(callback);\n\n        const listener: Listener = {\n            enable: () => rootElement.addEventListener('keydown', onKeyDown),\n            disable: () => rootElement.removeEventListener('keydown', onKeyDown),\n        };\n\n        LISTENERS.register(listener);\n        return () => LISTENERS.unregister(listener);\n    }, [callback, closeOnEscape]);\n}\n","import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils';\n\nimport isEmpty from 'lodash/isEmpty';\n\nconst EVENT_TYPES = ['mousedown', 'touchstart'];\n\nfunction isClickAway(target: HTMLElement, refs: Array<RefObject<HTMLElement>>): boolean {\n    // The target element is not contained in any of the listed element references.\n    return !refs.some((e) => e?.current?.contains(target));\n}\n\nexport interface ClickAwayParameters {\n    /**\n     * A callback function to call when the user clicks away from the elements.\n     */\n    callback: EventListener | Falsy;\n    /**\n     * Elements from which we want to detect the click away.\n     */\n    refs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, refs }: ClickAwayParameters): void {\n    useEffect(() => {\n        const { current: currentRefs } = refs;\n        if (!callback || !currentRefs || isEmpty(currentRefs)) {\n            return undefined;\n        }\n        const listener: EventListener = (evt) => {\n            if (isClickAway(evt.target as HTMLElement, currentRefs)) {\n                callback(evt);\n            }\n        };\n\n        EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n        return () => {\n            EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n        };\n    }, [callback, refs]);\n}\n","import React, { createContext, useContext, useEffect } from 'react';\nimport pull from 'lodash/pull';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\nconst ClickAwayAncestorContext = createContext<ClickAwayParameters['refs'] | null>(null);\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree we trying to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayParameters> = ({ children, callback, refs }) => {\n    const ancestorChildrenRefs = useContext(ClickAwayAncestorContext);\n\n    useEffect(() => {\n        const { current: currentRefs } = refs;\n        const { current: currentAncestorChildrenRefs } = ancestorChildrenRefs || {};\n        if (!currentAncestorChildrenRefs || !currentRefs) {\n            return undefined;\n        }\n        // Push current refs to parent.\n        currentAncestorChildrenRefs.push(...currentRefs);\n        return () => {\n            // Pull current refs from parent.\n            pull(currentAncestorChildrenRefs, ...currentRefs);\n        };\n    }, [ancestorChildrenRefs, refs]);\n\n    useClickAway({ callback, refs });\n    return <ClickAwayAncestorContext.Provider value={refs}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n"],"names":["TABBABLE_ELEMENTS_SELECTOR","DISABLED_SELECTOR","isNotDisabled","element","matches","getFirstAndLastFocusable","parentElement","focusableElements","Array","from","querySelectorAll","first","find","last","reverse","makeListenerTowerContext","LISTENERS","register","listener","disable","push","enable","unregister","pull","useCallbackOnEscape","callback","closeOnEscape","useEffect","rootElement","DOCUMENT","body","undefined","onKeyDown","onEscapePressed","addEventListener","removeEventListener","EVENT_TYPES","isClickAway","target","refs","some","e","current","contains","useClickAway","currentRefs","isEmpty","evt","forEach","evtType","document","ClickAwayAncestorContext","createContext","ClickAwayProvider","children","ancestorChildrenRefs","useContext","currentAncestorChildrenRefs","displayName"],"mappings":"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"}

package/esm/_internal/DatePickerField.js

@@ -263,13 +263,17 @@ var DatePickerField = forwardRef(function (props, ref) {
       value = props.value,
       forwardedProps = _objectWithoutProperties(props, ["defaultMonth", "disabled", "isDisabled", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"]);
 
-  var wrapperRef = useRef(null);
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      wrapperElement = _useState2[0],
+      setWrapperElement = _useState2[1];
+
   var anchorRef = useRef(null);
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
 
   var toggleSimpleMenu = function toggleSimpleMenu() {
     setIsOpen(!isOpen);
@@ -287,8 +291,12 @@ var DatePickerField = forwardRef(function (props, ref) {
   }; // Handle focus trap.
 
 
-  var todayOrSelectedDateRef = useRef(null);
-  useFocusTrap(todayOrSelectedDateRef.current && wrapperRef.current, todayOrSelectedDateRef.current);
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      todayOrSelectedDate = _useState6[0],
+      setTodayOrSelectedDate = _useState6[1];
+
+  useFocusTrap(isOpen && wrapperElement, todayOrSelectedDate);
 
   var onTextFieldChange = function onTextFieldChange(textFieldValue, textFieldName, event) {
     if (!textFieldValue) {
@@ -320,19 +328,18 @@ var DatePickerField = forwardRef(function (props, ref) {
     onClose: onClose,
     closeOnClickAway: true,
     closeOnEscape: true
-  }, React.createElement("div", {
-    ref: wrapperRef
   }, React.createElement(DatePicker, {
+    ref: setWrapperElement,
     locale: locale,
     maxDate: maxDate,
     minDate: minDate,
     value: value,
     onChange: onDatePickerChange,
-    todayOrSelectedDateRef: todayOrSelectedDateRef,
+    todayOrSelectedDateRef: setTodayOrSelectedDate,
     defaultMonth: defaultMonth,
     nextButtonProps: nextButtonProps,
     previousButtonProps: previousButtonProps
-  }))) : null);
+  })) : null);
 });
 DatePickerField.displayName = COMPONENT_NAME$2;
 

package/esm/_internal/DatePickerField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerField.js","sources":["../../../src/components/date-picker/constants.ts","../../../../lumx-core/src/js/date-picker.ts","../../../src/components/date-picker/DatePickerControlled.tsx","../../../src/components/date-picker/DatePicker.tsx","../../../src/components/date-picker/DatePickerField.tsx"],"sourcesContent":["import { getRootClassName } from '@lumx/react/utils';\n\n/**\n * Component display name.\n */\nexport const COMPONENT_NAME = 'DatePicker';\n\n/**\n * Component default class name and class prefix.\n */\nexport const CLASSNAME = getRootClassName(COMPONENT_NAME);\n","import range from 'lodash/range';\nimport mMoment, { Moment } from 'moment';\nimport { extendMoment } from 'moment-range';\n\nconst moment = extendMoment(mMoment as any);\n\nconst DAYS_PER_WEEK = 7;\n\ninterface AnnotatedDate {\n    date: Moment;\n    isDisplayed: boolean;\n    isClickable: boolean;\n    isToday: boolean;\n}\n\n/**\n * Get the list of days in a week based on locale.\n *\n * @param  locale The locale using to generate the order of days in a week.\n * @return The list of days in a week based on locale.\n */\nexport function getWeekDays(locale: string): Moment[] {\n    return range(DAYS_PER_WEEK).map((_, i) => moment().locale(locale).weekday(i));\n}\n\n/**\n * Get month calendar based on locale and start date.\n *\n * @param  locale        The locale using to generate the order of days in a week.\n * @param  selectedMonth The selected month.\n * @return The list of days in a week based on locale.\n */\nexport function getMonthCalendar(locale: string, selectedMonth?: Moment): Moment[] {\n    const firstDayOfMonth = moment(selectedMonth).startOf('month');\n    const endDayOfMonth = moment(selectedMonth).endOf('month');\n    // The first day of the week depends on the locale used. In FR the first day is a monday but in EN the first day is sunday\n    const firstDay = firstDayOfMonth.locale(locale).startOf('week');\n    const monthRange = moment.range(firstDay.toDate(), endDayOfMonth.toDate());\n\n    return Array.from(monthRange.by('day'));\n}\n\n/**\n * Get month calendar based on locale and start date.\n * Each day is annotated to know if they are displayed and/or clickable.\n *\n * @param  locale        The locale using to generate the order of days in a week.\n * @param  minDate       The first selectable date.\n * @param  maxDate       The last selectable date.\n * @param  selectedMonth The selected month.\n * @return The list of days in a week based on locale.\n */\nexport function getAnnotatedMonthCalendar(\n    locale: string,\n    minDate?: Date,\n    maxDate?: Date,\n    selectedMonth?: Moment,\n): AnnotatedDate[] {\n    const month = moment(selectedMonth).locale(locale).month();\n\n    const clickableRange = moment.range(minDate as Date, maxDate as Date);\n\n    return getMonthCalendar(locale, selectedMonth).map((date) => {\n        return {\n            date,\n            isClickable: clickableRange.contains(date),\n            isDisplayed: date.month() === month,\n            isToday: date.isSame(moment(), 'day'),\n        };\n    });\n}\n","import React, { forwardRef } from 'react';\nimport moment from 'moment';\nimport classNames from 'classnames';\nimport { DatePickerProps, Emphasis, IconButton, Toolbar } from '@lumx/react';\nimport { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';\nimport { getAnnotatedMonthCalendar, getWeekDays } from '@lumx/core/js/date-picker';\nimport { Comp } from '@lumx/react/utils';\nimport { CLASSNAME } from './constants';\n\n/**\n * Defines the props of the component.\n */\nexport interface DatePickerControlledProps extends DatePickerProps {\n    /** Selected month to display. */\n    selectedMonth: Date;\n    /** On previous month change callback. */\n    onPrevMonthChange(): void;\n    /** On next month change callback. */\n    onNextMonthChange(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'DatePickerControlled';\n\n/**\n * DatePickerControlled component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        locale,\n        maxDate,\n        minDate,\n        nextButtonProps,\n        onChange,\n        onNextMonthChange,\n        onPrevMonthChange,\n        previousButtonProps,\n        selectedMonth,\n        todayOrSelectedDateRef,\n        value,\n    } = props;\n    const days = React.useMemo(() => {\n        return getAnnotatedMonthCalendar(locale, minDate, maxDate, moment(selectedMonth));\n    }, [locale, minDate, maxDate, selectedMonth]);\n\n    const weekDays = React.useMemo(() => {\n        return getWeekDays(locale);\n    }, [locale]);\n\n    return (\n        <div ref={ref} className={`${CLASSNAME}`}>\n            <Toolbar\n                className={`${CLASSNAME}__toolbar`}\n                after={\n                    <IconButton\n                        {...nextButtonProps}\n                        emphasis={Emphasis.low}\n                        icon={mdiChevronRight}\n                        onClick={onNextMonthChange}\n                    />\n                }\n                before={\n                    <IconButton\n                        {...previousButtonProps}\n                        emphasis={Emphasis.low}\n                        icon={mdiChevronLeft}\n                        onClick={onPrevMonthChange}\n                    />\n                }\n                label={\n                    <span className={`${CLASSNAME}__month`}>\n                        {moment(selectedMonth).locale(locale).format('MMMM YYYY')}\n                    </span>\n                }\n            />\n            <div className={`${CLASSNAME}__calendar`}>\n                <div className={`${CLASSNAME}__week-days ${CLASSNAME}__days-wrapper`}>\n                    {weekDays.map((weekDay) => (\n                        <div key={weekDay.unix()} className={`${CLASSNAME}__day-wrapper`}>\n                            <span className={`${CLASSNAME}__week-day`}>\n                                {weekDay.format('dddd').slice(0, 1).toLocaleUpperCase()}\n                            </span>\n                        </div>\n                    ))}\n                </div>\n\n                <div className={`${CLASSNAME}__month-days ${CLASSNAME}__days-wrapper`}>\n                    {days.map((annotatedDate) => {\n                        if (annotatedDate.isDisplayed) {\n                            return (\n                                <div key={annotatedDate.date.unix()} className={`${CLASSNAME}__day-wrapper`}>\n                                    <button\n                                        ref={\n                                            (value && annotatedDate.date.isSame(value, 'day')) ||\n                                            (!value && annotatedDate.isToday)\n                                                ? todayOrSelectedDateRef\n                                                : null\n                                        }\n                                        className={classNames(`${CLASSNAME}__month-day`, {\n                                            [`${CLASSNAME}__month-day--is-selected`]:\n                                                value && annotatedDate.date.isSame(value, 'day'),\n                                            [`${CLASSNAME}__month-day--is-today`]:\n                                                annotatedDate.isClickable && annotatedDate.isToday,\n                                        })}\n                                        disabled={!annotatedDate.isClickable}\n                                        type=\"button\"\n                                        onClick={() => onChange(moment(annotatedDate.date).toDate())}\n                                    >\n                                        <span>{annotatedDate.date.format('DD')}</span>\n                                    </button>\n                                </div>\n                            );\n                        }\n                        return <div key={annotatedDate.date.unix()} className={`${CLASSNAME}__day-wrapper`} />;\n                    })}\n                </div>\n            </div>\n        </div>\n    );\n});\nDatePickerControlled.displayName = COMPONENT_NAME;\nDatePickerControlled.className = CLASSNAME;\n","import moment from 'moment';\nimport React, { forwardRef, useState } from 'react';\nimport { Comp } from '@lumx/react/utils';\nimport { CLASSNAME, COMPONENT_NAME } from './constants';\nimport { DatePickerControlled } from './DatePickerControlled';\nimport { DatePickerProps } from './types';\n\n/**\n * DatePicker component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DatePicker: Comp<DatePickerProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { defaultMonth, locale, value, onChange, ...forwardedProps } = props;\n    let castedValue;\n    if (value) {\n        castedValue = moment(value);\n    } else if (defaultMonth) {\n        castedValue = moment(defaultMonth);\n    }\n    if (castedValue && !castedValue.isValid()) {\n        // eslint-disable-next-line no-console\n        console.warn(`[@lumx/react/DatePicker] Invalid date provided ${castedValue}`);\n    }\n    const selectedDay = castedValue && castedValue.isValid() ? castedValue : moment();\n\n    const [monthOffset, setMonthOffset] = useState(0);\n\n    const setPrevMonth = () => setMonthOffset(monthOffset - 1);\n    const setNextMonth = () => setMonthOffset(monthOffset + 1);\n\n    const onDatePickerChange = (newDate?: Date) => {\n        onChange(newDate);\n        setMonthOffset(0);\n    };\n\n    const selectedMonth = moment(selectedDay).locale(locale).add(monthOffset, 'months').toDate();\n\n    return (\n        <DatePickerControlled\n            ref={ref}\n            {...forwardedProps}\n            defaultMonth={defaultMonth}\n            locale={locale}\n            value={value}\n            onPrevMonthChange={setPrevMonth}\n            onNextMonthChange={setNextMonth}\n            selectedMonth={selectedMonth}\n            onChange={onDatePickerChange}\n        />\n    );\n});\nDatePicker.displayName = COMPONENT_NAME;\nDatePicker.className = CLASSNAME;\n","import { DatePicker, Placement, Popover, TextField, IconButtonProps } from '@lumx/react';\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\n\nimport moment from 'moment';\n\nimport React, { forwardRef, SyntheticEvent, useCallback, useRef, useState } from 'react';\n\nimport { useFocus } from '@lumx/react/hooks/useFocus';\nimport { Comp, GenericProps } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DatePickerFieldProps extends GenericProps {\n    /** Default month. */\n    defaultMonth?: Date;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Locale (language or region) to use. */\n    locale: string;\n    /** Date after which dates can't be selected. */\n    maxDate?: Date;\n    /** Date before which dates can't be selected. */\n    minDate?: Date;\n    /** Native input name property. */\n    name?: string;\n    /** Props to pass to the next month button (minus those already set by the DatePickerControlled props). */\n    nextButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n    /** Props to pass to the previous month button (minus those already set by the DatePickerControlled props). */\n    previousButtonProps: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n    /** Currently selected date. */\n    value: Date | undefined;\n    /** On change callback. */\n    onChange(value: Date | undefined, name?: string, event?: SyntheticEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'DatePickerField';\n\n/**\n * DatePickerField component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        defaultMonth,\n        disabled,\n        isDisabled = disabled,\n        locale,\n        maxDate,\n        minDate,\n        name,\n        nextButtonProps,\n        onChange,\n        previousButtonProps,\n        value,\n        ...forwardedProps\n    } = props;\n    const wrapperRef = useRef(null);\n    const anchorRef = useRef(null);\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const toggleSimpleMenu = () => {\n        setIsOpen(!isOpen);\n    };\n\n    const onClose = useCallback(() => {\n        setIsOpen(false);\n    }, []);\n\n    useFocus(anchorRef.current, isOpen);\n    const handleKeyboardNav = (evt: React.KeyboardEvent) => {\n        if ((evt.key === 'Enter' || evt.key === ' ') && toggleSimpleMenu) {\n            toggleSimpleMenu();\n        }\n    };\n\n    // Handle focus trap.\n    const todayOrSelectedDateRef = useRef<HTMLButtonElement>(null);\n    useFocusTrap(todayOrSelectedDateRef.current && wrapperRef.current, todayOrSelectedDateRef.current);\n\n    const onTextFieldChange = (textFieldValue: string, textFieldName?: string, event?: SyntheticEvent) => {\n        if (!textFieldValue) {\n            onChange(undefined, textFieldName, event);\n        }\n    };\n\n    const onDatePickerChange = (newDate?: Date) => {\n        onChange(newDate, name);\n        onClose();\n    };\n\n    return (\n        <>\n            <TextField\n                ref={ref}\n                {...forwardedProps}\n                name={name}\n                forceFocusStyle={isOpen}\n                textFieldRef={anchorRef}\n                value={value ? moment(value).locale(locale).format('LL') : ''}\n                onClick={toggleSimpleMenu}\n                onChange={onTextFieldChange}\n                onKeyPress={handleKeyboardNav}\n                isDisabled={isDisabled}\n                readOnly\n            />\n            {isOpen ? (\n                <Popover\n                    anchorRef={anchorRef}\n                    placement={Placement.BOTTOM_START}\n                    isOpen={isOpen}\n                    onClose={onClose}\n                    closeOnClickAway\n                    closeOnEscape\n                >\n                    <div ref={wrapperRef}>\n                        <DatePicker\n                            locale={locale}\n                            maxDate={maxDate}\n                            minDate={minDate}\n                            value={value}\n                            onChange={onDatePickerChange}\n                            todayOrSelectedDateRef={todayOrSelectedDateRef}\n                            defaultMonth={defaultMonth}\n                            nextButtonProps={nextButtonProps}\n                            previousButtonProps={previousButtonProps}\n                        />\n                    </div>\n                </Popover>\n            ) : null}\n        </>\n    );\n});\nDatePickerField.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","moment","extendMoment","mMoment","DAYS_PER_WEEK","getWeekDays","locale","range","map","_","i","weekday","getMonthCalendar","selectedMonth","firstDayOfMonth","startOf","endDayOfMonth","endOf","firstDay","monthRange","toDate","Array","from","by","getAnnotatedMonthCalendar","minDate","maxDate","month","clickableRange","date","isClickable","contains","isDisplayed","isToday","isSame","DatePickerControlled","forwardRef","props","ref","nextButtonProps","onChange","onNextMonthChange","onPrevMonthChange","previousButtonProps","todayOrSelectedDateRef","value","days","React","useMemo","weekDays","Emphasis","low","mdiChevronRight","mdiChevronLeft","format","weekDay","unix","slice","toLocaleUpperCase","annotatedDate","classNames","displayName","className","DatePicker","defaultMonth","forwardedProps","castedValue","isValid","console","warn","selectedDay","useState","monthOffset","setMonthOffset","setPrevMonth","setNextMonth","onDatePickerChange","newDate","add","DatePickerField","disabled","isDisabled","name","wrapperRef","useRef","anchorRef","isOpen","setIsOpen","toggleSimpleMenu","onClose","useCallback","useFocus","current","handleKeyboardNav","evt","key","useFocusTrap","onTextFieldChange","textFieldValue","textFieldName","event","undefined","Placement","BOTTOM_START"],"mappings":"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"}
+{"version":3,"file":"DatePickerField.js","sources":["../../../src/components/date-picker/constants.ts","../../../../lumx-core/src/js/date-picker.ts","../../../src/components/date-picker/DatePickerControlled.tsx","../../../src/components/date-picker/DatePicker.tsx","../../../src/components/date-picker/DatePickerField.tsx"],"sourcesContent":["import { getRootClassName } from '@lumx/react/utils';\n\n/**\n * Component display name.\n */\nexport const COMPONENT_NAME = 'DatePicker';\n\n/**\n * Component default class name and class prefix.\n */\nexport const CLASSNAME = getRootClassName(COMPONENT_NAME);\n","import range from 'lodash/range';\nimport mMoment, { Moment } from 'moment';\nimport { extendMoment } from 'moment-range';\n\nconst moment = extendMoment(mMoment as any);\n\nconst DAYS_PER_WEEK = 7;\n\ninterface AnnotatedDate {\n    date: Moment;\n    isDisplayed: boolean;\n    isClickable: boolean;\n    isToday: boolean;\n}\n\n/**\n * Get the list of days in a week based on locale.\n *\n * @param  locale The locale using to generate the order of days in a week.\n * @return The list of days in a week based on locale.\n */\nexport function getWeekDays(locale: string): Moment[] {\n    return range(DAYS_PER_WEEK).map((_, i) => moment().locale(locale).weekday(i));\n}\n\n/**\n * Get month calendar based on locale and start date.\n *\n * @param  locale        The locale using to generate the order of days in a week.\n * @param  selectedMonth The selected month.\n * @return The list of days in a week based on locale.\n */\nexport function getMonthCalendar(locale: string, selectedMonth?: Moment): Moment[] {\n    const firstDayOfMonth = moment(selectedMonth).startOf('month');\n    const endDayOfMonth = moment(selectedMonth).endOf('month');\n    // The first day of the week depends on the locale used. In FR the first day is a monday but in EN the first day is sunday\n    const firstDay = firstDayOfMonth.locale(locale).startOf('week');\n    const monthRange = moment.range(firstDay.toDate(), endDayOfMonth.toDate());\n\n    return Array.from(monthRange.by('day'));\n}\n\n/**\n * Get month calendar based on locale and start date.\n * Each day is annotated to know if they are displayed and/or clickable.\n *\n * @param  locale        The locale using to generate the order of days in a week.\n * @param  minDate       The first selectable date.\n * @param  maxDate       The last selectable date.\n * @param  selectedMonth The selected month.\n * @return The list of days in a week based on locale.\n */\nexport function getAnnotatedMonthCalendar(\n    locale: string,\n    minDate?: Date,\n    maxDate?: Date,\n    selectedMonth?: Moment,\n): AnnotatedDate[] {\n    const month = moment(selectedMonth).locale(locale).month();\n\n    const clickableRange = moment.range(minDate as Date, maxDate as Date);\n\n    return getMonthCalendar(locale, selectedMonth).map((date) => {\n        return {\n            date,\n            isClickable: clickableRange.contains(date),\n            isDisplayed: date.month() === month,\n            isToday: date.isSame(moment(), 'day'),\n        };\n    });\n}\n","import React, { forwardRef } from 'react';\nimport moment from 'moment';\nimport classNames from 'classnames';\nimport { DatePickerProps, Emphasis, IconButton, Toolbar } from '@lumx/react';\nimport { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';\nimport { getAnnotatedMonthCalendar, getWeekDays } from '@lumx/core/js/date-picker';\nimport { Comp } from '@lumx/react/utils';\nimport { CLASSNAME } from './constants';\n\n/**\n * Defines the props of the component.\n */\nexport interface DatePickerControlledProps extends DatePickerProps {\n    /** Selected month to display. */\n    selectedMonth: Date;\n    /** On previous month change callback. */\n    onPrevMonthChange(): void;\n    /** On next month change callback. */\n    onNextMonthChange(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'DatePickerControlled';\n\n/**\n * DatePickerControlled component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        locale,\n        maxDate,\n        minDate,\n        nextButtonProps,\n        onChange,\n        onNextMonthChange,\n        onPrevMonthChange,\n        previousButtonProps,\n        selectedMonth,\n        todayOrSelectedDateRef,\n        value,\n    } = props;\n    const days = React.useMemo(() => {\n        return getAnnotatedMonthCalendar(locale, minDate, maxDate, moment(selectedMonth));\n    }, [locale, minDate, maxDate, selectedMonth]);\n\n    const weekDays = React.useMemo(() => {\n        return getWeekDays(locale);\n    }, [locale]);\n\n    return (\n        <div ref={ref} className={`${CLASSNAME}`}>\n            <Toolbar\n                className={`${CLASSNAME}__toolbar`}\n                after={\n                    <IconButton\n                        {...nextButtonProps}\n                        emphasis={Emphasis.low}\n                        icon={mdiChevronRight}\n                        onClick={onNextMonthChange}\n                    />\n                }\n                before={\n                    <IconButton\n                        {...previousButtonProps}\n                        emphasis={Emphasis.low}\n                        icon={mdiChevronLeft}\n                        onClick={onPrevMonthChange}\n                    />\n                }\n                label={\n                    <span className={`${CLASSNAME}__month`}>\n                        {moment(selectedMonth).locale(locale).format('MMMM YYYY')}\n                    </span>\n                }\n            />\n            <div className={`${CLASSNAME}__calendar`}>\n                <div className={`${CLASSNAME}__week-days ${CLASSNAME}__days-wrapper`}>\n                    {weekDays.map((weekDay) => (\n                        <div key={weekDay.unix()} className={`${CLASSNAME}__day-wrapper`}>\n                            <span className={`${CLASSNAME}__week-day`}>\n                                {weekDay.format('dddd').slice(0, 1).toLocaleUpperCase()}\n                            </span>\n                        </div>\n                    ))}\n                </div>\n\n                <div className={`${CLASSNAME}__month-days ${CLASSNAME}__days-wrapper`}>\n                    {days.map((annotatedDate) => {\n                        if (annotatedDate.isDisplayed) {\n                            return (\n                                <div key={annotatedDate.date.unix()} className={`${CLASSNAME}__day-wrapper`}>\n                                    <button\n                                        ref={\n                                            (value && annotatedDate.date.isSame(value, 'day')) ||\n                                            (!value && annotatedDate.isToday)\n                                                ? todayOrSelectedDateRef\n                                                : null\n                                        }\n                                        className={classNames(`${CLASSNAME}__month-day`, {\n                                            [`${CLASSNAME}__month-day--is-selected`]:\n                                                value && annotatedDate.date.isSame(value, 'day'),\n                                            [`${CLASSNAME}__month-day--is-today`]:\n                                                annotatedDate.isClickable && annotatedDate.isToday,\n                                        })}\n                                        disabled={!annotatedDate.isClickable}\n                                        type=\"button\"\n                                        onClick={() => onChange(moment(annotatedDate.date).toDate())}\n                                    >\n                                        <span>{annotatedDate.date.format('DD')}</span>\n                                    </button>\n                                </div>\n                            );\n                        }\n                        return <div key={annotatedDate.date.unix()} className={`${CLASSNAME}__day-wrapper`} />;\n                    })}\n                </div>\n            </div>\n        </div>\n    );\n});\nDatePickerControlled.displayName = COMPONENT_NAME;\nDatePickerControlled.className = CLASSNAME;\n","import moment from 'moment';\nimport React, { forwardRef, useState } from 'react';\nimport { Comp } from '@lumx/react/utils';\nimport { CLASSNAME, COMPONENT_NAME } from './constants';\nimport { DatePickerControlled } from './DatePickerControlled';\nimport { DatePickerProps } from './types';\n\n/**\n * DatePicker component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DatePicker: Comp<DatePickerProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { defaultMonth, locale, value, onChange, ...forwardedProps } = props;\n    let castedValue;\n    if (value) {\n        castedValue = moment(value);\n    } else if (defaultMonth) {\n        castedValue = moment(defaultMonth);\n    }\n    if (castedValue && !castedValue.isValid()) {\n        // eslint-disable-next-line no-console\n        console.warn(`[@lumx/react/DatePicker] Invalid date provided ${castedValue}`);\n    }\n    const selectedDay = castedValue && castedValue.isValid() ? castedValue : moment();\n\n    const [monthOffset, setMonthOffset] = useState(0);\n\n    const setPrevMonth = () => setMonthOffset(monthOffset - 1);\n    const setNextMonth = () => setMonthOffset(monthOffset + 1);\n\n    const onDatePickerChange = (newDate?: Date) => {\n        onChange(newDate);\n        setMonthOffset(0);\n    };\n\n    const selectedMonth = moment(selectedDay).locale(locale).add(monthOffset, 'months').toDate();\n\n    return (\n        <DatePickerControlled\n            ref={ref}\n            {...forwardedProps}\n            defaultMonth={defaultMonth}\n            locale={locale}\n            value={value}\n            onPrevMonthChange={setPrevMonth}\n            onNextMonthChange={setNextMonth}\n            selectedMonth={selectedMonth}\n            onChange={onDatePickerChange}\n        />\n    );\n});\nDatePicker.displayName = COMPONENT_NAME;\nDatePicker.className = CLASSNAME;\n","import { DatePicker, Placement, Popover, TextField, IconButtonProps } from '@lumx/react';\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\n\nimport moment from 'moment';\n\nimport React, { forwardRef, SyntheticEvent, useCallback, useRef, useState } from 'react';\n\nimport { useFocus } from '@lumx/react/hooks/useFocus';\nimport { Comp, GenericProps } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DatePickerFieldProps extends GenericProps {\n    /** Default month. */\n    defaultMonth?: Date;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Locale (language or region) to use. */\n    locale: string;\n    /** Date after which dates can't be selected. */\n    maxDate?: Date;\n    /** Date before which dates can't be selected. */\n    minDate?: Date;\n    /** Native input name property. */\n    name?: string;\n    /** Props to pass to the next month button (minus those already set by the DatePickerControlled props). */\n    nextButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n    /** Props to pass to the previous month button (minus those already set by the DatePickerControlled props). */\n    previousButtonProps: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n    /** Currently selected date. */\n    value: Date | undefined;\n    /** On change callback. */\n    onChange(value: Date | undefined, name?: string, event?: SyntheticEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'DatePickerField';\n\n/**\n * DatePickerField component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        defaultMonth,\n        disabled,\n        isDisabled = disabled,\n        locale,\n        maxDate,\n        minDate,\n        name,\n        nextButtonProps,\n        onChange,\n        previousButtonProps,\n        value,\n        ...forwardedProps\n    } = props;\n    const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(null);\n    const anchorRef = useRef(null);\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const toggleSimpleMenu = () => {\n        setIsOpen(!isOpen);\n    };\n\n    const onClose = useCallback(() => {\n        setIsOpen(false);\n    }, []);\n\n    useFocus(anchorRef.current, isOpen);\n    const handleKeyboardNav = (evt: React.KeyboardEvent) => {\n        if ((evt.key === 'Enter' || evt.key === ' ') && toggleSimpleMenu) {\n            toggleSimpleMenu();\n        }\n    };\n\n    // Handle focus trap.\n    const [todayOrSelectedDate, setTodayOrSelectedDate] = useState<HTMLButtonElement | null>(null);\n    useFocusTrap(isOpen && wrapperElement, todayOrSelectedDate);\n\n    const onTextFieldChange = (textFieldValue: string, textFieldName?: string, event?: SyntheticEvent) => {\n        if (!textFieldValue) {\n            onChange(undefined, textFieldName, event);\n        }\n    };\n\n    const onDatePickerChange = (newDate?: Date) => {\n        onChange(newDate, name);\n        onClose();\n    };\n\n    return (\n        <>\n            <TextField\n                ref={ref}\n                {...forwardedProps}\n                name={name}\n                forceFocusStyle={isOpen}\n                textFieldRef={anchorRef}\n                value={value ? moment(value).locale(locale).format('LL') : ''}\n                onClick={toggleSimpleMenu}\n                onChange={onTextFieldChange}\n                onKeyPress={handleKeyboardNav}\n                isDisabled={isDisabled}\n                readOnly\n            />\n            {isOpen ? (\n                <Popover\n                    anchorRef={anchorRef}\n                    placement={Placement.BOTTOM_START}\n                    isOpen={isOpen}\n                    onClose={onClose}\n                    closeOnClickAway\n                    closeOnEscape\n                >\n                    <DatePicker\n                        ref={setWrapperElement}\n                        locale={locale}\n                        maxDate={maxDate}\n                        minDate={minDate}\n                        value={value}\n                        onChange={onDatePickerChange}\n                        todayOrSelectedDateRef={setTodayOrSelectedDate}\n                        defaultMonth={defaultMonth}\n                        nextButtonProps={nextButtonProps}\n                        previousButtonProps={previousButtonProps}\n                    />\n                </Popover>\n            ) : null}\n        </>\n    );\n});\nDatePickerField.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","moment","extendMoment","mMoment","DAYS_PER_WEEK","getWeekDays","locale","range","map","_","i","weekday","getMonthCalendar","selectedMonth","firstDayOfMonth","startOf","endDayOfMonth","endOf","firstDay","monthRange","toDate","Array","from","by","getAnnotatedMonthCalendar","minDate","maxDate","month","clickableRange","date","isClickable","contains","isDisplayed","isToday","isSame","DatePickerControlled","forwardRef","props","ref","nextButtonProps","onChange","onNextMonthChange","onPrevMonthChange","previousButtonProps","todayOrSelectedDateRef","value","days","React","useMemo","weekDays","Emphasis","low","mdiChevronRight","mdiChevronLeft","format","weekDay","unix","slice","toLocaleUpperCase","annotatedDate","classNames","displayName","className","DatePicker","defaultMonth","forwardedProps","castedValue","isValid","console","warn","selectedDay","useState","monthOffset","setMonthOffset","setPrevMonth","setNextMonth","onDatePickerChange","newDate","add","DatePickerField","disabled","isDisabled","name","wrapperElement","setWrapperElement","anchorRef","useRef","isOpen","setIsOpen","toggleSimpleMenu","onClose","useCallback","useFocus","current","handleKeyboardNav","evt","key","todayOrSelectedDate","setTodayOrSelectedDate","useFocusTrap","onTextFieldChange","textFieldValue","textFieldName","event","undefined","Placement","BOTTOM_START"],"mappings":"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"}

package/esm/_internal/Dialog2.js

@@ -6,9 +6,9 @@ import { D as DOCUMENT } from './constants.js';
 import { p as partitionMulti } from './partitionMulti.js';
 import { i as isComponent } from './type.js';
 import { m as mergeRefs } from './mergeRefs.js';
+import { u as useCallbackOnEscape, C as ClickAwayProvider } from './ClickAwayProvider.js';
 import { u as useFocusTrap } from './useFocusTrap.js';
 import { createPortal } from 'react-dom';
-import { u as useCallbackOnEscape, C as ClickAwayProvider } from './ClickAwayProvider.js';
 import { u as useDelayedVisibility } from './useDelayedVisibility.js';
 import { u as useDisableBodyScroll } from './useDisableBodyScroll.js';
 import { a as Progress, P as ProgressVariant } from './Progress2.js';
@@ -178,7 +178,7 @@ var Dialog = forwardRef(function (props, ref) {
   var localContentRef = useRef(null); // Handle focus trap.
   // eslint-disable-next-line react-hooks/rules-of-hooks
 
-  useFocusTrap(wrapperRef.current, focusElement === null || focusElement === void 0 ? void 0 : focusElement.current); // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFocusTrap(isOpen && wrapperRef.current, focusElement === null || focusElement === void 0 ? void 0 : focusElement.current); // eslint-disable-next-line react-hooks/rules-of-hooks
 
   useDisableBodyScroll(isOpen && localContentRef.current); // eslint-disable-next-line react-hooks/rules-of-hooks
 

package/esm/_internal/Dialog2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog2.js","sources":["../../../src/hooks/useIntersectionObserver.tsx","../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type Intersections<T> = Map<T, IntersectionObserverEntry>;\n\n/**\n * Convenient hook to create interaction observers.\n *\n * @param elements Elements to observe.\n * @param options  IntersectionObserver options.\n * @return Map of intersections.\n */\nexport function useIntersectionObserver<T extends Element>(\n    elements: Array<T | null | undefined>,\n    options?: IntersectionObserverInit,\n): Intersections<T> {\n    const [intersections, setIntersections] = useState<Intersections<T>>(() => new Map());\n\n    useEffect(\n        () => {\n            if (elements.length < 1 || !elements.some(Boolean)) {\n                return undefined;\n            }\n\n            const observer = new IntersectionObserver((entries) => {\n                for (const entry of entries) {\n                    intersections.set(entry.target as T, entry);\n                }\n                setIntersections(new Map(intersections));\n            }, options);\n\n            for (const element of elements) {\n                if (element) {\n                    observer.observe(element);\n                }\n            }\n            return () => observer.disconnect();\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [...elements],\n    );\n\n    return intersections;\n}\n","import React, { Children, forwardRef, ReactElement, ReactNode, RefObject, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport classNames from 'classnames';\n\nimport { Progress, ProgressVariant, Size } from '@lumx/react';\n\nimport { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';\nimport {\n    Comp,\n    GenericProps,\n    getRootClassName,\n    handleBasicClasses,\n    isComponent,\n    partitionMulti,\n} from '@lumx/react/utils';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\nimport { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\n\n/**\n * Defines the props of the component.\n */\nexport interface DialogProps extends GenericProps {\n    /** Footer content. */\n    footer?: ReactNode;\n    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n    forceFooterDivider?: boolean;\n    /** Header content. */\n    header?: ReactNode;\n    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n    forceHeaderDivider?: boolean;\n    /** Whether the indefinite progress indicator over the dialog content is displayed or not. */\n    isLoading?: boolean;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Reference to the parent element that triggered modal opening (will get back focus on close). */\n    parentElement?: RefObject<HTMLElement>;\n    /** Reference to the dialog content element. */\n    contentRef?: RefObject<HTMLDivElement>;\n    /** Reference to the of the element that should get the focus when the dialogs opens. By default, the first child will take focus. */\n    focusElement?: RefObject<HTMLElement>;\n    /** Whether to keep the dialog open on clickaway or escape press. */\n    preventAutoClose?: boolean;\n    /** Size variant. */\n    size?: DialogSizes;\n    /** Z-axis position. */\n    zIndex?: number;\n    /** Z-axis position. */\n    dialogProps?: GenericProps;\n    /** On close callback. */\n    onClose?(): void;\n    /** Callback called when the open animation starts and the close animation finishes. */\n    onVisibilityChange?(isVisible: boolean): void;\n}\n\nexport type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;\n\nconst isHeader = isComponent('header');\nconst isFooter = isComponent('footer');\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Dialog';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<DialogProps> = {\n    size: Size.big,\n};\n\n/**\n * Dialog component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref) => {\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n\n    const {\n        children,\n        className,\n        header,\n        focusElement,\n        forceFooterDivider,\n        forceHeaderDivider,\n        footer,\n        isLoading,\n        isOpen,\n        onClose,\n        parentElement,\n        contentRef,\n        preventAutoClose,\n        size,\n        zIndex,\n        dialogProps,\n        onVisibilityChange,\n        ...forwardedProps\n    } = props;\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const previousOpen = React.useRef(isOpen);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n        if (isOpen !== previousOpen.current) {\n            previousOpen.current = isOpen;\n\n            // Focus the parent element on close.\n            if (!isOpen && parentElement && parentElement.current) {\n                parentElement.current.focus();\n            }\n        }\n    }, [isOpen, parentElement]);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useCallbackOnEscape(onClose, isOpen && !preventAutoClose);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    /**\n     * Since the `contentRef` comes from the parent and is optional,\n     * we need to create a stable contentRef that will always be available.\n     */\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const localContentRef = useRef<HTMLDivElement>(null);\n    // Handle focus trap.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useFocusTrap(wrapperRef.current, focusElement?.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useDisableBodyScroll(isOpen && localContentRef.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [sentinelTop, setSentinelTop] = useState<Element | null>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [sentinelBottom, setSentinelBottom] = useState<Element | null>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const intersections = useIntersectionObserver([sentinelTop, sentinelBottom], {\n        threshold: [0, 1],\n    });\n\n    const hasTopIntersection = sentinelTop && !(intersections.get(sentinelTop)?.isIntersecting ?? true);\n    const hasBottomIntersection = sentinelBottom && !(intersections.get(sentinelBottom)?.isIntersecting ?? true);\n\n    // Separate header, footer and dialog content from children.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [[headerChild], [footerChild], content] = useMemo(\n        () => partitionMulti(Children.toArray(children), [isHeader, isFooter]),\n        [children],\n    );\n    const headerChildProps = (headerChild as ReactElement)?.props;\n    const headerChildContent = headerChildProps?.children;\n    const footerChildProps = (footerChild as ReactElement)?.props;\n    const footerChildContent = footerChildProps?.children;\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const isVisible = useDelayedVisibility(Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const clickAwayRefs = useRef([wrapperRef]);\n\n    return isOpen || isVisible\n        ? createPortal(\n              <div\n                  ref={ref}\n                  {...forwardedProps}\n                  className={classNames(\n                      className,\n                      handleBasicClasses({\n                          isHidden: !isOpen,\n                          isLoading,\n                          isShown: isOpen || isVisible,\n                          prefix: CLASSNAME,\n                          size,\n                      }),\n                  )}\n                  style={{ zIndex }}\n              >\n                  <div className={`${CLASSNAME}__overlay`} />\n\n                  <section className={`${CLASSNAME}__container`} role=\"dialog\" aria-modal=\"true\" {...dialogProps}>\n                      <ClickAwayProvider callback={!preventAutoClose && onClose} refs={clickAwayRefs}>\n                          <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>\n                              {(header || headerChildContent) && (\n                                  <header\n                                      {...headerChildProps}\n                                      className={classNames(\n                                          `${CLASSNAME}__header`,\n                                          (forceHeaderDivider || hasTopIntersection) &&\n                                              `${CLASSNAME}__header--has-divider`,\n                                          headerChildProps?.className,\n                                      )}\n                                  >\n                                      {header}\n                                      {headerChildContent}\n                                  </header>\n                              )}\n\n                              <div ref={mergeRefs(contentRef, localContentRef)} className={`${CLASSNAME}__content`}>\n                                  <div\n                                      className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}\n                                      ref={setSentinelTop}\n                                  />\n\n                                  {content}\n\n                                  <div\n                                      className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}\n                                      ref={setSentinelBottom}\n                                  />\n                              </div>\n\n                              {(footer || footerChildContent) && (\n                                  <footer\n                                      {...footerChildProps}\n                                      className={classNames(\n                                          `${CLASSNAME}__footer`,\n                                          (forceFooterDivider || hasBottomIntersection) &&\n                                              `${CLASSNAME}__footer--has-divider`,\n                                          footerChildProps?.className,\n                                      )}\n                                  >\n                                      {footer}\n                                      {footerChildContent}\n                                  </footer>\n                              )}\n\n                              {isLoading && (\n                                  <div className={`${CLASSNAME}__progress-overlay`}>\n                                      <Progress variant={ProgressVariant.circular} />\n                                  </div>\n                              )}\n                          </div>\n                      </ClickAwayProvider>\n                  </section>\n              </div>,\n              document.body,\n          )\n        : null;\n});\nDialog.displayName = COMPONENT_NAME;\nDialog.className = CLASSNAME;\nDialog.defaultProps = DEFAULT_PROPS;\n"],"names":["useIntersectionObserver","elements","options","useState","Map","intersections","setIntersections","useEffect","length","some","Boolean","undefined","observer","IntersectionObserver","entries","entry","set","target","element","observe","disconnect","isHeader","isComponent","isFooter","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","big","Dialog","forwardRef","props","ref","DOCUMENT","children","className","header","focusElement","forceFooterDivider","forceHeaderDivider","footer","isLoading","isOpen","onClose","parentElement","contentRef","preventAutoClose","zIndex","dialogProps","onVisibilityChange","forwardedProps","previousOpen","React","useRef","current","focus","useCallbackOnEscape","wrapperRef","localContentRef","useFocusTrap","useDisableBodyScroll","sentinelTop","setSentinelTop","sentinelBottom","setSentinelBottom","threshold","hasTopIntersection","get","isIntersecting","hasBottomIntersection","useMemo","partitionMulti","Children","toArray","headerChild","footerChild","content","headerChildProps","headerChildContent","footerChildProps","footerChildContent","isVisible","useDelayedVisibility","DIALOG_TRANSITION_DURATION","clickAwayRefs","createPortal","classNames","handleBasicClasses","isHidden","isShown","prefix","mergeRefs","ProgressVariant","circular","document","body","displayName","defaultProps"],"mappings":";;;;;;;;;;;;;;;AAIA;;;;;;;AAOO,SAASA,uBAAT,CACHC,QADG,EAEHC,OAFG,EAGa;AAAA,kBAC0BC,QAAQ,CAAmB;AAAA,WAAM,IAAIC,GAAJ,EAAN;AAAA,GAAnB,CADlC;AAAA;AAAA,MACTC,aADS;AAAA,MACMC,gBADN;;AAGhBC,EAAAA,SAAS,CACL,YAAM;AACF,QAAIN,QAAQ,CAACO,MAAT,GAAkB,CAAlB,IAAuB,CAACP,QAAQ,CAACQ,IAAT,CAAcC,OAAd,CAA5B,EAAoD;AAChD,aAAOC,SAAP;AACH;;AAED,QAAMC,QAAQ,GAAG,IAAIC,oBAAJ,CAAyB,UAACC,OAAD,EAAa;AAAA;AAAA;AAAA;;AAAA;AACnD,6BAAoBA,OAApB,8HAA6B;AAAA,cAAlBC,KAAkB;AACzBV,UAAAA,aAAa,CAACW,GAAd,CAAkBD,KAAK,CAACE,MAAxB,EAAqCF,KAArC;AACH;AAHkD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAInDT,MAAAA,gBAAgB,CAAC,IAAIF,GAAJ,CAAQC,aAAR,CAAD,CAAhB;AACH,KALgB,EAKdH,OALc,CAAjB;AALE;AAAA;AAAA;;AAAA;AAYF,4BAAsBD,QAAtB,mIAAgC;AAAA,YAArBiB,OAAqB;;AAC5B,YAAIA,OAAJ,EAAa;AACTN,UAAAA,QAAQ,CAACO,OAAT,CAAiBD,OAAjB;AACH;AACJ;AAhBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAiBF,WAAO;AAAA,aAAMN,QAAQ,CAACQ,UAAT,EAAN;AAAA,KAAP;AACH,GAnBI;AAAA,qBAqBDnB,QArBC,EAAT;AAwBA,SAAOI,aAAP;AACH;;ACjBD;;;;AAsCA,IAAMgB,QAAQ,GAAGC,WAAW,CAAC,QAAD,CAA5B;AACA,IAAMC,QAAQ,GAAGD,WAAW,CAAC,QAAD,CAA5B;AAEA;;;;AAGA,IAAME,cAAc,GAAG,QAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAmC,GAAG;AACxCC,EAAAA,IAAI,EAAEC,IAAI,CAACC;AAD6B,CAA5C;AAIA;;;;;;;;IAOaC,MAAyC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA;;AAChF,MAAI,CAACC,QAAL,EAAe;AACX;AACA,WAAO,IAAP;AACH;;AAJ+E,MAO5EC,QAP4E,GAyB5EH,KAzB4E,CAO5EG,QAP4E;AAAA,MAQ5EC,SAR4E,GAyB5EJ,KAzB4E,CAQ5EI,SAR4E;AAAA,MAS5EC,MAT4E,GAyB5EL,KAzB4E,CAS5EK,MAT4E;AAAA,MAU5EC,YAV4E,GAyB5EN,KAzB4E,CAU5EM,YAV4E;AAAA,MAW5EC,kBAX4E,GAyB5EP,KAzB4E,CAW5EO,kBAX4E;AAAA,MAY5EC,kBAZ4E,GAyB5ER,KAzB4E,CAY5EQ,kBAZ4E;AAAA,MAa5EC,MAb4E,GAyB5ET,KAzB4E,CAa5ES,MAb4E;AAAA,MAc5EC,SAd4E,GAyB5EV,KAzB4E,CAc5EU,SAd4E;AAAA,MAe5EC,MAf4E,GAyB5EX,KAzB4E,CAe5EW,MAf4E;AAAA,MAgB5EC,OAhB4E,GAyB5EZ,KAzB4E,CAgB5EY,OAhB4E;AAAA,MAiB5EC,aAjB4E,GAyB5Eb,KAzB4E,CAiB5Ea,aAjB4E;AAAA,MAkB5EC,UAlB4E,GAyB5Ed,KAzB4E,CAkB5Ec,UAlB4E;AAAA,MAmB5EC,gBAnB4E,GAyB5Ef,KAzB4E,CAmB5Ee,gBAnB4E;AAAA,MAoB5EpB,IApB4E,GAyB5EK,KAzB4E,CAoB5EL,IApB4E;AAAA,MAqB5EqB,MArB4E,GAyB5EhB,KAzB4E,CAqB5EgB,MArB4E;AAAA,MAsB5EC,WAtB4E,GAyB5EjB,KAzB4E,CAsB5EiB,WAtB4E;AAAA,MAuB5EC,kBAvB4E,GAyB5ElB,KAzB4E,CAuB5EkB,kBAvB4E;AAAA,MAwBzEC,cAxByE,4BAyB5EnB,KAzB4E;;;AA4BhF,MAAMoB,YAAY,GAAGC,KAAK,CAACC,MAAN,CAAaX,MAAb,CAArB,CA5BgF;;AA8BhFU,EAAAA,KAAK,CAAC/C,SAAN,CAAgB,YAAM;AAClB,QAAIqC,MAAM,KAAKS,YAAY,CAACG,OAA5B,EAAqC;AACjCH,MAAAA,YAAY,CAACG,OAAb,GAAuBZ,MAAvB,CADiC;;AAIjC,UAAI,CAACA,MAAD,IAAWE,aAAX,IAA4BA,aAAa,CAACU,OAA9C,EAAuD;AACnDV,QAAAA,aAAa,CAACU,OAAd,CAAsBC,KAAtB;AACH;AACJ;AACJ,GATD,EASG,CAACb,MAAD,EAASE,aAAT,CATH,EA9BgF;;AA0ChFY,EAAAA,mBAAmB,CAACb,OAAD,EAAUD,MAAM,IAAI,CAACI,gBAArB,CAAnB,CA1CgF;;AA6ChF,MAAMW,UAAU,GAAGJ,MAAM,CAAiB,IAAjB,CAAzB;AACA;;;;AAIA;;AACA,MAAMK,eAAe,GAAGL,MAAM,CAAiB,IAAjB,CAA9B,CAnDgF;AAqDhF;;AACAM,EAAAA,YAAY,CAACF,UAAU,CAACH,OAAZ,EAAqBjB,YAArB,aAAqBA,YAArB,uBAAqBA,YAAY,CAAEiB,OAAnC,CAAZ,CAtDgF;;AAyDhFM,EAAAA,oBAAoB,CAAClB,MAAM,IAAIgB,eAAe,CAACJ,OAA3B,CAApB,CAzDgF;;AAAA,kBA4D1CrD,QAAQ,CAAiB,IAAjB,CA5DkC;AAAA;AAAA,MA4DzE4D,WA5DyE;AAAA,MA4D5DC,cA5D4D;;;AAAA,mBA8DpC7D,QAAQ,CAAiB,IAAjB,CA9D4B;AAAA;AAAA,MA8DzE8D,cA9DyE;AAAA,MA8DzDC,iBA9DyD;;;AAgEhF,MAAM7D,aAAa,GAAGL,uBAAuB,CAAC,CAAC+D,WAAD,EAAcE,cAAd,CAAD,EAAgC;AACzEE,IAAAA,SAAS,EAAE,CAAC,CAAD,EAAI,CAAJ;AAD8D,GAAhC,CAA7C;AAIA,MAAMC,kBAAkB,GAAGL,WAAW,IAAI,gCAAE1D,aAAa,CAACgE,GAAd,CAAkBN,WAAlB,CAAF,uDAAE,mBAAgCO,cAAlC,uCAAoD,IAApD,CAA1C;AACA,MAAMC,qBAAqB,GAAGN,cAAc,IAAI,kCAAE5D,aAAa,CAACgE,GAAd,CAAkBJ,cAAlB,CAAF,wDAAE,oBAAmCK,cAArC,yCAAuD,IAAvD,CAAhD,CArEgF;AAwEhF;;AAxEgF,iBAyEhCE,OAAO,CACnD;AAAA,WAAMC,cAAc,CAACC,QAAQ,CAACC,OAAT,CAAiBvC,QAAjB,CAAD,EAA6B,CAACf,QAAD,EAAWE,QAAX,CAA7B,CAApB;AAAA,GADmD,EAEnD,CAACa,QAAD,CAFmD,CAzEyB;AAAA;AAAA;AAAA,MAyExEwC,WAzEwE;AAAA;AAAA,MAyEzDC,WAzEyD;AAAA,MAyE3CC,OAzE2C;;AA6EhF,MAAMC,gBAAgB,YAAIH,WAAJ,0CAAG,MAA+B3C,KAAxD;AACA,MAAM+C,kBAAkB,GAAGD,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAgB,CAAE3C,QAA7C;AACA,MAAM6C,gBAAgB,YAAIJ,WAAJ,0CAAG,MAA+B5C,KAAxD;AACA,MAAMiD,kBAAkB,GAAGD,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAgB,CAAE7C,QAA7C,CAhFgF;;AAmFhF,MAAM+C,SAAS,GAAGC,oBAAoB,CAAC1E,OAAO,CAACkC,MAAD,CAAR,EAAkByC,0BAAlB,EAA8ClC,kBAA9C,CAAtC,CAnFgF;;AAsFhF,MAAMmC,aAAa,GAAG/B,MAAM,CAAC,CAACI,UAAD,CAAD,CAA5B;AAEA,SAAOf,MAAM,IAAIuC,SAAV,GACDI,YAAY,CACR;AACI,IAAA,GAAG,EAAErD;AADT,KAEQkB,cAFR;AAGI,IAAA,SAAS,EAAEoC,UAAU,CACjBnD,SADiB,EAEjBoD,kBAAkB,CAAC;AACfC,MAAAA,QAAQ,EAAE,CAAC9C,MADI;AAEfD,MAAAA,SAAS,EAATA,SAFe;AAGfgD,MAAAA,OAAO,EAAE/C,MAAM,IAAIuC,SAHJ;AAIfS,MAAAA,MAAM,EAAEnE,SAJO;AAKfG,MAAAA,IAAI,EAAJA;AALe,KAAD,CAFD,CAHzB;AAaI,IAAA,KAAK,EAAE;AAAEqB,MAAAA,MAAM,EAANA;AAAF;AAbX,MAeI;AAAK,IAAA,SAAS,YAAKxB,SAAL;AAAd,IAfJ,EAiBI;AAAS,IAAA,SAAS,YAAKA,SAAL,gBAAlB;AAA+C,IAAA,IAAI,EAAC,QAApD;AAA6D,kBAAW;AAAxE,KAAmFyB,WAAnF,GACI,oBAAC,iBAAD;AAAmB,IAAA,QAAQ,EAAE,CAACF,gBAAD,IAAqBH,OAAlD;AAA2D,IAAA,IAAI,EAAEyC;AAAjE,KACI;AAAK,IAAA,SAAS,YAAK7D,SAAL,cAAd;AAAyC,IAAA,GAAG,EAAEkC;AAA9C,KACK,CAACrB,MAAM,IAAI0C,kBAAX,KACG,2CACQD,gBADR;AAEI,IAAA,SAAS,EAAES,UAAU,WACd/D,SADc,eAEjB,CAACgB,kBAAkB,IAAI2B,kBAAvB,eACO3C,SADP,0BAFiB,EAIjBsD,gBAJiB,aAIjBA,gBAJiB,uBAIjBA,gBAAgB,CAAE1C,SAJD;AAFzB,MASKC,MATL,EAUK0C,kBAVL,CAFR,EAgBI;AAAK,IAAA,GAAG,EAAEa,SAAS,CAAC9C,UAAD,EAAaa,eAAb,CAAnB;AAAkD,IAAA,SAAS,YAAKnC,SAAL;AAA3D,KACI;AACI,IAAA,SAAS,YAAKA,SAAL,wBAA4BA,SAA5B,oBADb;AAEI,IAAA,GAAG,EAAEuC;AAFT,IADJ,EAMKc,OANL,EAQI;AACI,IAAA,SAAS,YAAKrD,SAAL,wBAA4BA,SAA5B,uBADb;AAEI,IAAA,GAAG,EAAEyC;AAFT,IARJ,CAhBJ,EA8BK,CAACxB,MAAM,IAAIwC,kBAAX,KACG,2CACQD,gBADR;AAEI,IAAA,SAAS,EAAEO,UAAU,WACd/D,SADc,eAEjB,CAACe,kBAAkB,IAAI+B,qBAAvB,eACO9C,SADP,0BAFiB,EAIjBwD,gBAJiB,aAIjBA,gBAJiB,uBAIjBA,gBAAgB,CAAE5C,SAJD;AAFzB,MASKK,MATL,EAUKwC,kBAVL,CA/BR,EA6CKvC,SAAS,IACN;AAAK,IAAA,SAAS,YAAKlB,SAAL;AAAd,KACI,oBAAC,QAAD;AAAU,IAAA,OAAO,EAAEqE,eAAe,CAACC;AAAnC,IADJ,CA9CR,CADJ,CADJ,CAjBJ,CADQ,EA0ERC,QAAQ,CAACC,IA1ED,CADX,GA6ED,IA7EN;AA8EH,CAtKkE;AAuKnElE,MAAM,CAACmE,WAAP,GAAqB1E,cAArB;AACAO,MAAM,CAACM,SAAP,GAAmBZ,SAAnB;AACAM,MAAM,CAACoE,YAAP,GAAsBxE,aAAtB;;;;"}
+{"version":3,"file":"Dialog2.js","sources":["../../../src/hooks/useIntersectionObserver.tsx","../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type Intersections<T> = Map<T, IntersectionObserverEntry>;\n\n/**\n * Convenient hook to create interaction observers.\n *\n * @param elements Elements to observe.\n * @param options  IntersectionObserver options.\n * @return Map of intersections.\n */\nexport function useIntersectionObserver<T extends Element>(\n    elements: Array<T | null | undefined>,\n    options?: IntersectionObserverInit,\n): Intersections<T> {\n    const [intersections, setIntersections] = useState<Intersections<T>>(() => new Map());\n\n    useEffect(\n        () => {\n            if (elements.length < 1 || !elements.some(Boolean)) {\n                return undefined;\n            }\n\n            const observer = new IntersectionObserver((entries) => {\n                for (const entry of entries) {\n                    intersections.set(entry.target as T, entry);\n                }\n                setIntersections(new Map(intersections));\n            }, options);\n\n            for (const element of elements) {\n                if (element) {\n                    observer.observe(element);\n                }\n            }\n            return () => observer.disconnect();\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [...elements],\n    );\n\n    return intersections;\n}\n","import React, { Children, forwardRef, ReactElement, ReactNode, RefObject, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport classNames from 'classnames';\n\nimport { Progress, ProgressVariant, Size } from '@lumx/react';\n\nimport { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';\nimport {\n    Comp,\n    GenericProps,\n    getRootClassName,\n    handleBasicClasses,\n    isComponent,\n    partitionMulti,\n} from '@lumx/react/utils';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\nimport { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\n\n/**\n * Defines the props of the component.\n */\nexport interface DialogProps extends GenericProps {\n    /** Footer content. */\n    footer?: ReactNode;\n    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n    forceFooterDivider?: boolean;\n    /** Header content. */\n    header?: ReactNode;\n    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n    forceHeaderDivider?: boolean;\n    /** Whether the indefinite progress indicator over the dialog content is displayed or not. */\n    isLoading?: boolean;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Reference to the parent element that triggered modal opening (will get back focus on close). */\n    parentElement?: RefObject<HTMLElement>;\n    /** Reference to the dialog content element. */\n    contentRef?: RefObject<HTMLDivElement>;\n    /** Reference to the of the element that should get the focus when the dialogs opens. By default, the first child will take focus. */\n    focusElement?: RefObject<HTMLElement>;\n    /** Whether to keep the dialog open on clickaway or escape press. */\n    preventAutoClose?: boolean;\n    /** Size variant. */\n    size?: DialogSizes;\n    /** Z-axis position. */\n    zIndex?: number;\n    /** Z-axis position. */\n    dialogProps?: GenericProps;\n    /** On close callback. */\n    onClose?(): void;\n    /** Callback called when the open animation starts and the close animation finishes. */\n    onVisibilityChange?(isVisible: boolean): void;\n}\n\nexport type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;\n\nconst isHeader = isComponent('header');\nconst isFooter = isComponent('footer');\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Dialog';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<DialogProps> = {\n    size: Size.big,\n};\n\n/**\n * Dialog component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref) => {\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n\n    const {\n        children,\n        className,\n        header,\n        focusElement,\n        forceFooterDivider,\n        forceHeaderDivider,\n        footer,\n        isLoading,\n        isOpen,\n        onClose,\n        parentElement,\n        contentRef,\n        preventAutoClose,\n        size,\n        zIndex,\n        dialogProps,\n        onVisibilityChange,\n        ...forwardedProps\n    } = props;\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const previousOpen = React.useRef(isOpen);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n        if (isOpen !== previousOpen.current) {\n            previousOpen.current = isOpen;\n\n            // Focus the parent element on close.\n            if (!isOpen && parentElement && parentElement.current) {\n                parentElement.current.focus();\n            }\n        }\n    }, [isOpen, parentElement]);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useCallbackOnEscape(onClose, isOpen && !preventAutoClose);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    /**\n     * Since the `contentRef` comes from the parent and is optional,\n     * we need to create a stable contentRef that will always be available.\n     */\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const localContentRef = useRef<HTMLDivElement>(null);\n    // Handle focus trap.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useDisableBodyScroll(isOpen && localContentRef.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [sentinelTop, setSentinelTop] = useState<Element | null>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [sentinelBottom, setSentinelBottom] = useState<Element | null>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const intersections = useIntersectionObserver([sentinelTop, sentinelBottom], {\n        threshold: [0, 1],\n    });\n\n    const hasTopIntersection = sentinelTop && !(intersections.get(sentinelTop)?.isIntersecting ?? true);\n    const hasBottomIntersection = sentinelBottom && !(intersections.get(sentinelBottom)?.isIntersecting ?? true);\n\n    // Separate header, footer and dialog content from children.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [[headerChild], [footerChild], content] = useMemo(\n        () => partitionMulti(Children.toArray(children), [isHeader, isFooter]),\n        [children],\n    );\n    const headerChildProps = (headerChild as ReactElement)?.props;\n    const headerChildContent = headerChildProps?.children;\n    const footerChildProps = (footerChild as ReactElement)?.props;\n    const footerChildContent = footerChildProps?.children;\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const isVisible = useDelayedVisibility(Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const clickAwayRefs = useRef([wrapperRef]);\n\n    return isOpen || isVisible\n        ? createPortal(\n              <div\n                  ref={ref}\n                  {...forwardedProps}\n                  className={classNames(\n                      className,\n                      handleBasicClasses({\n                          isHidden: !isOpen,\n                          isLoading,\n                          isShown: isOpen || isVisible,\n                          prefix: CLASSNAME,\n                          size,\n                      }),\n                  )}\n                  style={{ zIndex }}\n              >\n                  <div className={`${CLASSNAME}__overlay`} />\n\n                  <section className={`${CLASSNAME}__container`} role=\"dialog\" aria-modal=\"true\" {...dialogProps}>\n                      <ClickAwayProvider callback={!preventAutoClose && onClose} refs={clickAwayRefs}>\n                          <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>\n                              {(header || headerChildContent) && (\n                                  <header\n                                      {...headerChildProps}\n                                      className={classNames(\n                                          `${CLASSNAME}__header`,\n                                          (forceHeaderDivider || hasTopIntersection) &&\n                                              `${CLASSNAME}__header--has-divider`,\n                                          headerChildProps?.className,\n                                      )}\n                                  >\n                                      {header}\n                                      {headerChildContent}\n                                  </header>\n                              )}\n\n                              <div ref={mergeRefs(contentRef, localContentRef)} className={`${CLASSNAME}__content`}>\n                                  <div\n                                      className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}\n                                      ref={setSentinelTop}\n                                  />\n\n                                  {content}\n\n                                  <div\n                                      className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}\n                                      ref={setSentinelBottom}\n                                  />\n                              </div>\n\n                              {(footer || footerChildContent) && (\n                                  <footer\n                                      {...footerChildProps}\n                                      className={classNames(\n                                          `${CLASSNAME}__footer`,\n                                          (forceFooterDivider || hasBottomIntersection) &&\n                                              `${CLASSNAME}__footer--has-divider`,\n                                          footerChildProps?.className,\n                                      )}\n                                  >\n                                      {footer}\n                                      {footerChildContent}\n                                  </footer>\n                              )}\n\n                              {isLoading && (\n                                  <div className={`${CLASSNAME}__progress-overlay`}>\n                                      <Progress variant={ProgressVariant.circular} />\n                                  </div>\n                              )}\n                          </div>\n                      </ClickAwayProvider>\n                  </section>\n              </div>,\n              document.body,\n          )\n        : null;\n});\nDialog.displayName = COMPONENT_NAME;\nDialog.className = CLASSNAME;\nDialog.defaultProps = DEFAULT_PROPS;\n"],"names":["useIntersectionObserver","elements","options","useState","Map","intersections","setIntersections","useEffect","length","some","Boolean","undefined","observer","IntersectionObserver","entries","entry","set","target","element","observe","disconnect","isHeader","isComponent","isFooter","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","big","Dialog","forwardRef","props","ref","DOCUMENT","children","className","header","focusElement","forceFooterDivider","forceHeaderDivider","footer","isLoading","isOpen","onClose","parentElement","contentRef","preventAutoClose","zIndex","dialogProps","onVisibilityChange","forwardedProps","previousOpen","React","useRef","current","focus","useCallbackOnEscape","wrapperRef","localContentRef","useFocusTrap","useDisableBodyScroll","sentinelTop","setSentinelTop","sentinelBottom","setSentinelBottom","threshold","hasTopIntersection","get","isIntersecting","hasBottomIntersection","useMemo","partitionMulti","Children","toArray","headerChild","footerChild","content","headerChildProps","headerChildContent","footerChildProps","footerChildContent","isVisible","useDelayedVisibility","DIALOG_TRANSITION_DURATION","clickAwayRefs","createPortal","classNames","handleBasicClasses","isHidden","isShown","prefix","mergeRefs","ProgressVariant","circular","document","body","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/GenericBlock.js

@@ -0,0 +1,90 @@
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import { Orientation, Size, Alignment } from './components.js';
+import React, { forwardRef } from 'react';
+import { g as getRootClassName, c as classnames } from './getRootClassName.js';
+import 'lodash/isBoolean';
+import 'lodash/isEmpty';
+import 'lodash/kebabCase';
+import 'lodash/noop';
+import { F as FlexBox } from './FlexBox.js';
+
+/**
+ * Component display name.
+ */
+var COMPONENT_NAME = 'GenericBlock';
+/**
+ * Component default class name and class prefix.
+ */
+
+var CLASSNAME = getRootClassName(COMPONENT_NAME);
+/**
+ * Component default props.
+ */
+
+var DEFAULT_PROPS = {
+  gap: Size.regular,
+  orientation: Orientation.vertical,
+  hAlign: Alignment.center,
+  vAlign: Alignment.center
+};
+/**
+ * The GenericBlock is a layout component made of 3 sections that can be
+ * displayed either horizontally of vertically with the same gap between each section.
+ *
+ * The sections are:
+ * * (Optional) `Figure` => A visual element to display before the main content.
+ * * (Required) `Content` => The main content displayed
+ * * (Optional) `Actions` => One or more actions to set after the element.
+ *
+ * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
+ */
+
+var GenericBlock = forwardRef(function (props, ref) {
+  var className = props.className,
+      figure = props.figure,
+      figureProps = props.figureProps,
+      children = props.children,
+      actions = props.actions,
+      actionsProps = props.actionsProps,
+      gap = props.gap,
+      orientation = props.orientation,
+      contentProps = props.contentProps,
+      forwardedProps = _objectWithoutProperties(props, ["className", "figure", "figureProps", "children", "actions", "actionsProps", "gap", "orientation", "contentProps"]);
+
+  var actionsVAlign = Alignment.center;
+
+  if (orientation === Orientation.horizontal) {
+    actionsVAlign = Alignment.right;
+  }
+
+  var contentVAlign = Alignment.center;
+
+  if (orientation === Orientation.horizontal) {
+    contentVAlign = Alignment.left;
+  }
+
+  return React.createElement(FlexBox, _extends({
+    ref: ref,
+    className: classnames(className, CLASSNAME),
+    gap: gap,
+    orientation: orientation
+  }, forwardedProps), React.createElement(FlexBox, _extends({}, figureProps, {
+    className: classnames(figureProps === null || figureProps === void 0 ? void 0 : figureProps.className, "".concat(CLASSNAME, "__figure"))
+  }), figure), children && React.createElement(FlexBox, _extends({
+    orientation: Orientation.vertical,
+    fillSpace: true,
+    vAlign: contentVAlign
+  }, contentProps, {
+    className: classnames(contentProps === null || contentProps === void 0 ? void 0 : contentProps.className, "".concat(CLASSNAME, "__content"))
+  }), children), React.createElement(FlexBox, _extends({
+    vAlign: actionsVAlign
+  }, actionsProps, {
+    className: classnames(actionsProps === null || actionsProps === void 0 ? void 0 : actionsProps.className, "".concat(CLASSNAME, "__actions"))
+  }), actions));
+});
+GenericBlock.displayName = COMPONENT_NAME;
+GenericBlock.className = CLASSNAME;
+GenericBlock.defaultProps = DEFAULT_PROPS;
+
+export { GenericBlock as G };
+//# sourceMappingURL=GenericBlock.js.map

package/esm/_internal/GenericBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenericBlock.js","sources":["../../../src/components/generic-block/GenericBlock.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { Comp, getRootClassName } from '@lumx/react/utils';\nimport { Orientation, Size, FlexBox, FlexBoxProps, Alignment, HorizontalAlignment } from '@lumx/react';\n\nexport interface GenericBlockProps extends FlexBoxProps {\n    /** Component to use as visual element. */\n    figure?: ReactNode;\n    /** Actions to set after the main content. */\n    actions?: ReactNode;\n    /** Main content to display */\n    children: ReactNode;\n    /** Orientation of the 3 sections */\n    orientation?: FlexBoxProps['orientation'];\n    /** Horizontal alignment. */\n    hAlign?: FlexBoxProps['hAlign'];\n    /** Vertical alignment. */\n    vAlign?: FlexBoxProps['vAlign'];\n    /**\n     * The props to forward to the content.\n     * By default, the content will have the same alignment as wrapper.\n     */\n    contentProps?: Omit<FlexBoxProps, 'children'>;\n    /** props to forward to the actions element. */\n    actionsProps?: Omit<FlexBoxProps, 'children'>;\n    /** props to forward to the figure element. */\n    figureProps?: Omit<FlexBoxProps, 'children'>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'GenericBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<GenericBlockProps> = {\n    gap: Size.regular,\n    orientation: Orientation.vertical,\n    hAlign: Alignment.center,\n    vAlign: Alignment.center,\n};\n\n/**\n * The GenericBlock is a layout component made of 3 sections that can be\n * displayed either horizontally of vertically with the same gap between each section.\n *\n * The sections are:\n * * (Optional) `Figure` => A visual element to display before the main content.\n * * (Required) `Content` => The main content displayed\n * * (Optional) `Actions` => One or more actions to set after the element.\n *\n * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076\n */\nexport const GenericBlock: Comp<GenericBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        className,\n        figure,\n        figureProps,\n        children,\n        actions,\n        actionsProps,\n        gap,\n        orientation,\n        contentProps,\n        ...forwardedProps\n    } = props;\n\n    let actionsVAlign: HorizontalAlignment = Alignment.center;\n    if (orientation === Orientation.horizontal) {\n        actionsVAlign = Alignment.right;\n    }\n    let contentVAlign: HorizontalAlignment = Alignment.center;\n    if (orientation === Orientation.horizontal) {\n        contentVAlign = Alignment.left;\n    }\n\n    return (\n        <FlexBox\n            ref={ref}\n            className={classNames(className, CLASSNAME)}\n            gap={gap}\n            orientation={orientation}\n            {...forwardedProps}\n        >\n            <FlexBox {...figureProps} className={classNames(figureProps?.className, `${CLASSNAME}__figure`)}>\n                {figure}\n            </FlexBox>\n\n            {children && (\n                <FlexBox\n                    orientation={Orientation.vertical}\n                    fillSpace\n                    vAlign={contentVAlign}\n                    {...contentProps}\n                    className={classNames(contentProps?.className, `${CLASSNAME}__content`)}\n                >\n                    {children}\n                </FlexBox>\n            )}\n\n            <FlexBox\n                vAlign={actionsVAlign}\n                {...actionsProps}\n                className={classNames(actionsProps?.className, `${CLASSNAME}__actions`)}\n            >\n                {actions}\n            </FlexBox>\n        </FlexBox>\n    );\n});\nGenericBlock.displayName = COMPONENT_NAME;\nGenericBlock.className = CLASSNAME;\nGenericBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","gap","Size","regular","orientation","Orientation","vertical","hAlign","Alignment","center","vAlign","GenericBlock","forwardRef","props","ref","className","figure","figureProps","children","actions","actionsProps","contentProps","forwardedProps","actionsVAlign","horizontal","right","contentVAlign","left","classNames","displayName","defaultProps"],"mappings":";;;;;;;;;;AA6BA;;;AAGA,IAAMA,cAAc,GAAG,cAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAyC,GAAG;AAC9CC,EAAAA,GAAG,EAAEC,IAAI,CAACC,OADoC;AAE9CC,EAAAA,WAAW,EAAEC,WAAW,CAACC,QAFqB;AAG9CC,EAAAA,MAAM,EAAEC,SAAS,CAACC,MAH4B;AAI9CC,EAAAA,MAAM,EAAEF,SAAS,CAACC;AAJ4B,CAAlD;AAOA;;;;;;;;;;;;IAWaE,YAAqD,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAExFC,SAFwF,GAYxFF,KAZwF,CAExFE,SAFwF;AAAA,MAGxFC,MAHwF,GAYxFH,KAZwF,CAGxFG,MAHwF;AAAA,MAIxFC,WAJwF,GAYxFJ,KAZwF,CAIxFI,WAJwF;AAAA,MAKxFC,QALwF,GAYxFL,KAZwF,CAKxFK,QALwF;AAAA,MAMxFC,OANwF,GAYxFN,KAZwF,CAMxFM,OANwF;AAAA,MAOxFC,YAPwF,GAYxFP,KAZwF,CAOxFO,YAPwF;AAAA,MAQxFnB,GARwF,GAYxFY,KAZwF,CAQxFZ,GARwF;AAAA,MASxFG,WATwF,GAYxFS,KAZwF,CASxFT,WATwF;AAAA,MAUxFiB,YAVwF,GAYxFR,KAZwF,CAUxFQ,YAVwF;AAAA,MAWrFC,cAXqF,4BAYxFT,KAZwF;;AAc5F,MAAIU,aAAkC,GAAGf,SAAS,CAACC,MAAnD;;AACA,MAAIL,WAAW,KAAKC,WAAW,CAACmB,UAAhC,EAA4C;AACxCD,IAAAA,aAAa,GAAGf,SAAS,CAACiB,KAA1B;AACH;;AACD,MAAIC,aAAkC,GAAGlB,SAAS,CAACC,MAAnD;;AACA,MAAIL,WAAW,KAAKC,WAAW,CAACmB,UAAhC,EAA4C;AACxCE,IAAAA,aAAa,GAAGlB,SAAS,CAACmB,IAA1B;AACH;;AAED,SACI,oBAAC,OAAD;AACI,IAAA,GAAG,EAAEb,GADT;AAEI,IAAA,SAAS,EAAEc,UAAU,CAACb,SAAD,EAAYjB,SAAZ,CAFzB;AAGI,IAAA,GAAG,EAAEG,GAHT;AAII,IAAA,WAAW,EAAEG;AAJjB,KAKQkB,cALR,GAOI,oBAAC,OAAD,eAAaL,WAAb;AAA0B,IAAA,SAAS,EAAEW,UAAU,CAACX,WAAD,aAACA,WAAD,uBAACA,WAAW,CAAEF,SAAd,YAA4BjB,SAA5B;AAA/C,MACKkB,MADL,CAPJ,EAWKE,QAAQ,IACL,oBAAC,OAAD;AACI,IAAA,WAAW,EAAEb,WAAW,CAACC,QAD7B;AAEI,IAAA,SAAS,MAFb;AAGI,IAAA,MAAM,EAAEoB;AAHZ,KAIQL,YAJR;AAKI,IAAA,SAAS,EAAEO,UAAU,CAACP,YAAD,aAACA,YAAD,uBAACA,YAAY,CAAEN,SAAf,YAA6BjB,SAA7B;AALzB,MAOKoB,QAPL,CAZR,EAuBI,oBAAC,OAAD;AACI,IAAA,MAAM,EAAEK;AADZ,KAEQH,YAFR;AAGI,IAAA,SAAS,EAAEQ,UAAU,CAACR,YAAD,aAACA,YAAD,uBAACA,YAAY,CAAEL,SAAf,YAA6BjB,SAA7B;AAHzB,MAKKqB,OALL,CAvBJ,CADJ;AAiCH,CAxD8E;AAyD/ER,YAAY,CAACkB,WAAb,GAA2BhC,cAA3B;AACAc,YAAY,CAACI,SAAb,GAAyBjB,SAAzB;AACAa,YAAY,CAACmB,YAAb,GAA4B9B,aAA5B;;;;"}

package/esm/_internal/Lightbox2.js

@@ -6,9 +6,9 @@ import { d as mdiClose } from './Icon2.js';
 import { D as DOCUMENT } from './constants.js';
 import { m as mergeRefs } from './mergeRefs.js';
 import { I as IconButton } from './IconButton.js';
+import { u as useCallbackOnEscape, C as ClickAwayProvider } from './ClickAwayProvider.js';
 import { u as useFocusTrap } from './useFocusTrap.js';
 import { createPortal } from 'react-dom';
-import { u as useCallbackOnEscape, C as ClickAwayProvider } from './ClickAwayProvider.js';
 import { u as useDelayedVisibility } from './useDelayedVisibility.js';
 import { u as useDisableBodyScroll } from './useDisableBodyScroll.js';
 
@@ -64,7 +64,7 @@ var Lightbox = forwardRef(function (props, ref) {
   var isVisible = useDelayedVisibility(!!isOpen, LIGHTBOX_TRANSITION_DURATION); // Handle focus trap.
   // eslint-disable-next-line react-hooks/rules-of-hooks
 
-  useFocusTrap(wrapperRef.current, (_childrenRef$current = childrenRef.current) === null || _childrenRef$current === void 0 ? void 0 : _childrenRef$current.firstChild); // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFocusTrap(isOpen && wrapperRef.current, (_childrenRef$current = childrenRef.current) === null || _childrenRef$current === void 0 ? void 0 : _childrenRef$current.firstChild); // eslint-disable-next-line react-hooks/rules-of-hooks
 
   var previousOpen = useRef(isOpen); // eslint-disable-next-line react-hooks/rules-of-hooks