@dreamcommerce/aurora 2.4.0-19 → 2.4.0-20

package/build/cjs/packages/aurora/src/components/dropdown/components/content.js

@@ -18,6 +18,7 @@ var main_module = require('../../../css/dropdown/main.module.less.js');
 var utilities = require('../utilities.js');
 var use_click_outside = require('../../../hooks/use_click_outside.js');
 var icon_arrow = require('../../../assets/icon_arrow.js');
+var ui_dom_utils = require('../../../../../utilities/build/esm/packages/utilities/src/ui_dom_utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -32,7 +33,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children, arrowSide = 'left', portalContainer }) => {
     const [t] = useTranslation.useTranslation();
     const contentRef = React.useRef(null);
-    const { wrapperRef, toggleDropdown, isOpen } = index.useDropdownContext();
+    const { wrapperRef, toggleDropdown, isOpen, closeDropdown } = index.useDropdownContext();
     const [styles, setStyles] = React.useState({
         left: '0px',
         top: '0px',
@@ -60,36 +61,35 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
             toggleDropdown();
         }
     });
-    const getDropdownPositionStyles = (isInModal, modalWrapperRect) => {
-        const { x, y, height, top } = modalWrapperRect;
-        const yOffset = 10;
-        const { xModifier, yModifier } = utilities.getXYModifiersForNestedDropdowns(portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current);
-        const positionTop = top + height + yOffset - yModifier + window.scrollY;
-        const positionBottom = windowHeightMinusYOffset - y + yOffset;
-        const positionLeft = x - xModifier;
-        const zIndex = isInModal ? constants.DROPDOWN_ON_MODAL_Z_INDEX : constants.DROPDOWN_Z_INDEX;
-        const topPositionValue = !dropdownIsOutsideBottomViewport ? `${positionTop}px` : 'auto';
-        const bottomPositionValue = dropdownIsOutsideBottomViewport ? `${positionBottom}px` : 'auto';
-        return screenWidthName === responsive_breakpoints.SCREEN_XS
-            ? { left: `0px`, top: `0px`, bottom: 'auto', zIndex }
-            : { left: `${positionLeft}px`, top: topPositionValue, bottom: bottomPositionValue, zIndex };
-    };
     React.useEffect(() => {
         if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
+            const { x, y, height } = wrapperRef.current.getBoundingClientRect();
+            const yOffset = 10;
+            const { xModifier, yModifier } = utilities.getXYModifiersForNestedDropdowns(portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current);
+            const positionTop = height + y + yOffset - yModifier;
+            const positionBottom = windowHeightMinusYOffset - y + yOffset;
+            const positionLeft = x - xModifier;
             const isInModal = utilities.isChildOfModal(wrapperRef);
-            setStyles(getDropdownPositionStyles(isInModal, wrapperRef.current.getBoundingClientRect()));
+            const zIndex = isInModal ? constants.DROPDOWN_ON_MODAL_Z_INDEX : constants.DROPDOWN_Z_INDEX;
+            const topPositionValue = !dropdownIsOutsideBottomViewport ? `${positionTop}px` : 'auto';
+            const bottomPositionValue = dropdownIsOutsideBottomViewport ? `${positionBottom}px` : 'auto';
+            screenWidthName === responsive_breakpoints.SCREEN_XS
+                ? setStyles({ left: `0px`, top: `0px`, bottom: 'auto', zIndex })
+                : setStyles({ left: `${positionLeft}px`, top: topPositionValue, bottom: bottomPositionValue, zIndex });
         }
     }, [portalContainer, screenWidthName, wrapperRef, isOpen, dropdownIsOutsideBottomViewport]);
     React.useEffect(() => {
+        var _a;
+        if (!(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) || !isOpen)
+            return;
+        const scrollableParent = (_a = ui_dom_utils.UiDomUtils.getFirstScrollableParent(wrapperRef.current)) !== null && _a !== void 0 ? _a : document.body;
         const handleWindowScroll = () => {
-            if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
-                const isInModal = utilities.isChildOfModal(wrapperRef);
-                setStyles(getDropdownPositionStyles(isInModal, wrapperRef.current.getBoundingClientRect()));
+            if (typeof closeDropdown === 'function') {
+                closeDropdown();
             }
         };
-        window.addEventListener('scroll', handleWindowScroll);
-        return () => window.removeEventListener('scroll', handleWindowScroll);
-    }, []);
+        scrollableParent.addEventListener('scroll', handleWindowScroll, { once: true });
+    }, [isOpen]);
     return reactDom.createPortal(React__default['default'].createElement(reactTransitionGroup.TransitionGroup, { component: null }, isOpen === true ? (React__default['default'].createElement(reactTransitionGroup.CSSTransition, { timeout: 200, classNames: {
             enter: main_module['default']['dropdown-enter'],
             enterActive: main_module['default']['dropdown-enter-active'],

package/build/cjs/packages/aurora/src/components/dropdown/hooks/use_toggle.js

@@ -14,12 +14,14 @@ var use_effect_after_mount = require('../../../hooks/use_effect_after_mount.js')
 function useToggle(defaultIsOpen = false, onToggleCb) {
     const [isOpen, setIsOpen] = React.useState(defaultIsOpen);
     const onToggle = React.useCallback(() => setIsOpen((oldIsOpen) => !oldIsOpen), []);
+    const open = React.useCallback(() => setIsOpen(true), []);
+    const close = React.useCallback(() => setIsOpen(false), []);
     use_effect_after_mount.useEffectAfterMount(() => {
         if (typeof onToggleCb === 'function') {
             onToggleCb(isOpen);
         }
     }, [isOpen]);
-    return [isOpen, onToggle];
+    return [isOpen, onToggle, open, close];
 }
 
 exports.useToggle = useToggle;

package/build/cjs/packages/aurora/src/components/dropdown/hooks/use_toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/dropdown/index.js

@@ -44,11 +44,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 const Dropdown = ({ defaultIsOpen = false, onToggle, children }) => {
     const wrapperRef = React.useRef(null);
-    const [isOpen, toggleDropdown] = use_toggle.useToggle(defaultIsOpen, onToggle);
+    const [isOpen, toggleDropdown, openDropdown, closeDropdown] = use_toggle.useToggle(defaultIsOpen, onToggle);
     /**
      * context values, they may be used with useContext in any component which is part of Dropdown composition
      */
-    const value = React__default['default'].useMemo(() => ({ wrapperRef, isOpen, toggleDropdown }), [isOpen, toggleDropdown]);
+    const value = React__default['default'].useMemo(() => ({ wrapperRef, isOpen, toggleDropdown, openDropdown, closeDropdown }), [isOpen, toggleDropdown, openDropdown, closeDropdown]);
     return (React__default['default'].createElement(index.DropdownContext.Provider, { value: value },
         React__default['default'].createElement("div", { ref: wrapperRef, className: main_module['default'].dropdown }, children)));
 };

package/build/cjs/packages/aurora/src/components/dropdown/utilities.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
-var main_module = require('../../css/modal/main.module.less.js');
+var main_module$1 = require('../../css/modal/main.module.less.js');
 var css_classes = require('./css_classes.js');
 var fuzzy_search = require('../../utilities/fuzzy_search/fuzzy_search.js');
-var main_module$1 = require('../../css/dropdown/main.module.less.js');
+var main_module = require('../../css/dropdown/main.module.less.js');
 
 /**
  * checks if the given option is selected within array of selectedValues array
@@ -47,7 +47,7 @@ const getXYModifiersForNestedDropdowns = (portalContainer) => {
     let xModifier = 0;
     let yModifier = 0;
     if (portalContainer) {
-        const $parentDropdownContent = portalContainer.closest(`.${main_module$1['default'][css_classes.cssDropdownContent]}`);
+        const $parentDropdownContent = portalContainer.closest(`.${main_module['default'][css_classes.cssDropdownContent]}`);
         if ($parentDropdownContent) {
             const { x: portalX, y: portalY } = $parentDropdownContent.getBoundingClientRect();
             xModifier = portalX;
@@ -63,7 +63,7 @@ const isChildOfModal = (ref) => {
     var _a;
     let currentParent = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
     while (currentParent) {
-        if (currentParent.classList.contains(main_module['default']['modal-window'])) {
+        if (currentParent.classList.contains(main_module$1['default']['modal-window'])) {
             return true;
         }
         currentParent = currentParent === null || currentParent === void 0 ? void 0 : currentParent.parentElement;

package/build/cjs/packages/aurora/src/components/file_picker/components/selected_file_preview.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+var file_utils = require('../../../../../utilities/build/esm/packages/utilities/src/file_utils.js');
 var main_module = require('../../../css/file_picker/main.module.less.js');
 var css_classes = require('../css_classes.js');
-var file_utils = require('../../../../../utilities/build/esm/packages/utilities/src/file_utils.js');
 var icon_delete = require('../../../assets/icon_delete.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/build/cjs/packages/utilities/build/esm/packages/utilities/src/ui_dom_utils.js

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+class UiDomUtils {
+    static show($el) {
+        $el.removeAttribute('hidden');
+    }
+    static hide($el) {
+        $el.setAttribute('hidden', '');
+    }
+    static empty($el) {
+        $el.innerHTML = '';
+    }
+    static makeUnnavigable($el) {
+        $el.setAttribute('tabindex', '-1');
+    }
+    static makeNavigable($el) {
+        $el.setAttribute('tabindex', '0');
+    }
+    static getFocusableSelector() {
+        return ('' +
+            // Namespace problems of [xlink:href] explained in https://stackoverflow.com/a/23047888/515124
+            // svg a[*|href] does not match in IE9, but since we're filtering
+            // through is/focusable we can include all <a> from SVG
+            'svg a,' +
+            // may behave as 'svg, svg *,' in chrome as *every* svg element with a focus event listener is focusable
+            // navigational elements
+            'a[href],' +
+            // validity determined by is/valid-area.js
+            'area[href],' +
+            // validity determined by is/disabled.js
+            'input:not([type="hidden"]), select, textarea, button,' +
+            // browsing context containers
+            'iframe, object, embed,' +
+            // interactive content
+            'keygen,' +
+            // validity determined by is/valid-tabindex.js
+            '[tabindex]:not([tabindex="-1"]),' +
+            // editing hosts
+            '[contenteditable]');
+    }
+    static getFocusableElements($container) {
+        return [...$container.querySelectorAll(this.getFocusableSelector())].filter(($el) => !this._isNotFocusable($el));
+    }
+    static getFocusableElement($container) {
+        return [...$container.querySelectorAll(this.getFocusableSelector())].filter(($el) => !this._isNotFocusable($el))[0];
+    }
+    static _isNotFocusable($el) {
+        const displayValue = getComputedStyle($el).getPropertyValue('display');
+        return !!($el.hasAttribute('disabled') || $el.getAttribute('aria-hidden') || $el.hasAttribute('hidden') || displayValue === 'none');
+    }
+    static isFocusable($element) {
+        return $element.matches(this.getFocusableSelector());
+    }
+    static setFocusToFirstFocusableElementInContainer($container) {
+        var _a;
+        (_a = this.getFocusableElement($container)) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    static getDirectChildren($el, selector) {
+        return selector ? [...$el.children].filter((child) => child.matches(selector)) : [...$el.children];
+    }
+    static getAllClosest($el, selector, elements = []) {
+        if (!$el)
+            return elements;
+        const $closestEl = $el.closest(selector);
+        if ($closestEl)
+            elements.push($closestEl);
+        if (!$closestEl)
+            return elements;
+        return UiDomUtils.getAllClosest($closestEl.parentElement, selector, elements);
+    }
+    static getFirstParentNonStaticElement($el) {
+        let $currentEl = $el.parentElement;
+        while ($currentEl) {
+            if ($currentEl && window.getComputedStyle($currentEl).position !== 'static') {
+                return $currentEl;
+            }
+            $currentEl = $currentEl.parentElement;
+        }
+        return null;
+    }
+    static getFirstScrollableParent($el) {
+        let currentParent = $el.parentElement;
+        while (currentParent) {
+            if (currentParent.scrollHeight > currentParent.clientHeight) {
+                return currentParent;
+            }
+            currentParent = currentParent === null || currentParent === void 0 ? void 0 : currentParent.parentElement;
+        }
+        return null;
+    }
+}
+
+exports.UiDomUtils = UiDomUtils;
+//# sourceMappingURL=ui_dom_utils.js.map

package/build/cjs/packages/utilities/build/esm/packages/utilities/src/ui_dom_utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/components/content.js

@@ -11,9 +11,10 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { DROPDOWN_Z_INDEX, DROPDOWN_ON_MODAL_Z_INDEX } from '../constants.js';
 import { cssDropdownContent, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle } from '../css_classes.js';
 import cssClasses from '../../../css/dropdown/main.module.less.js';
-import { isChildOfModal, getXYModifiersForNestedDropdowns } from '../utilities.js';
+import { getXYModifiersForNestedDropdowns, isChildOfModal } from '../utilities.js';
 import { useClickOutside } from '../../../hooks/use_click_outside.js';
 import IconArrow from '../../../assets/icon_arrow.js';
+import { UiDomUtils } from '../../../../../utilities/build/esm/packages/utilities/src/ui_dom_utils.js';
 
 /**
  * Dropdown.Content component. This togglable part of dropdown.
@@ -24,7 +25,7 @@ import IconArrow from '../../../assets/icon_arrow.js';
 const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children, arrowSide = 'left', portalContainer }) => {
     const [t] = useTranslation();
     const contentRef = useRef(null);
-    const { wrapperRef, toggleDropdown, isOpen } = useDropdownContext();
+    const { wrapperRef, toggleDropdown, isOpen, closeDropdown } = useDropdownContext();
     const [styles, setStyles] = useState({
         left: '0px',
         top: '0px',
@@ -52,36 +53,35 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
             toggleDropdown();
         }
     });
-    const getDropdownPositionStyles = (isInModal, modalWrapperRect) => {
-        const { x, y, height, top } = modalWrapperRect;
-        const yOffset = 10;
-        const { xModifier, yModifier } = getXYModifiersForNestedDropdowns(portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current);
-        const positionTop = top + height + yOffset - yModifier + window.scrollY;
-        const positionBottom = windowHeightMinusYOffset - y + yOffset;
-        const positionLeft = x - xModifier;
-        const zIndex = isInModal ? DROPDOWN_ON_MODAL_Z_INDEX : DROPDOWN_Z_INDEX;
-        const topPositionValue = !dropdownIsOutsideBottomViewport ? `${positionTop}px` : 'auto';
-        const bottomPositionValue = dropdownIsOutsideBottomViewport ? `${positionBottom}px` : 'auto';
-        return screenWidthName === SCREEN_XS
-            ? { left: `0px`, top: `0px`, bottom: 'auto', zIndex }
-            : { left: `${positionLeft}px`, top: topPositionValue, bottom: bottomPositionValue, zIndex };
-    };
     useEffect(() => {
         if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
+            const { x, y, height } = wrapperRef.current.getBoundingClientRect();
+            const yOffset = 10;
+            const { xModifier, yModifier } = getXYModifiersForNestedDropdowns(portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current);
+            const positionTop = height + y + yOffset - yModifier;
+            const positionBottom = windowHeightMinusYOffset - y + yOffset;
+            const positionLeft = x - xModifier;
             const isInModal = isChildOfModal(wrapperRef);
-            setStyles(getDropdownPositionStyles(isInModal, wrapperRef.current.getBoundingClientRect()));
+            const zIndex = isInModal ? DROPDOWN_ON_MODAL_Z_INDEX : DROPDOWN_Z_INDEX;
+            const topPositionValue = !dropdownIsOutsideBottomViewport ? `${positionTop}px` : 'auto';
+            const bottomPositionValue = dropdownIsOutsideBottomViewport ? `${positionBottom}px` : 'auto';
+            screenWidthName === SCREEN_XS
+                ? setStyles({ left: `0px`, top: `0px`, bottom: 'auto', zIndex })
+                : setStyles({ left: `${positionLeft}px`, top: topPositionValue, bottom: bottomPositionValue, zIndex });
         }
     }, [portalContainer, screenWidthName, wrapperRef, isOpen, dropdownIsOutsideBottomViewport]);
     useEffect(() => {
+        var _a;
+        if (!(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) || !isOpen)
+            return;
+        const scrollableParent = (_a = UiDomUtils.getFirstScrollableParent(wrapperRef.current)) !== null && _a !== void 0 ? _a : document.body;
         const handleWindowScroll = () => {
-            if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
-                const isInModal = isChildOfModal(wrapperRef);
-                setStyles(getDropdownPositionStyles(isInModal, wrapperRef.current.getBoundingClientRect()));
+            if (typeof closeDropdown === 'function') {
+                closeDropdown();
             }
         };
-        window.addEventListener('scroll', handleWindowScroll);
-        return () => window.removeEventListener('scroll', handleWindowScroll);
-    }, []);
+        scrollableParent.addEventListener('scroll', handleWindowScroll, { once: true });
+    }, [isOpen]);
     return createPortal(React.createElement(TransitionGroup, { component: null }, isOpen === true ? (React.createElement(CSSTransition, { timeout: 200, classNames: {
             enter: cssClasses['dropdown-enter'],
             enterActive: cssClasses['dropdown-enter-active'],

package/build/esm/packages/aurora/src/components/dropdown/context/types.d.ts

@@ -3,4 +3,6 @@ export interface IDropdownContext {
     wrapperRef?: React.RefObject<HTMLDivElement>;
     isOpen?: boolean;
     toggleDropdown?: () => void;
+    openDropdown?: () => void;
+    closeDropdown?: () => void;
 }

package/build/esm/packages/aurora/src/components/dropdown/hooks/use_toggle.d.ts

@@ -4,4 +4,4 @@
  * @param onToggleCb callback onToggle
  * @returns {Array} tuple - open state and and method to change open state
  */
-export declare function useToggle(defaultIsOpen?: boolean, onToggleCb?: (isOpen: boolean) => void): [boolean, () => void];
+export declare function useToggle(defaultIsOpen?: boolean, onToggleCb?: (isOpen: boolean) => void): [boolean, () => void, () => void, () => void];

package/build/esm/packages/aurora/src/components/dropdown/hooks/use_toggle.js

@@ -10,12 +10,14 @@ import { useEffectAfterMount } from '../../../hooks/use_effect_after_mount.js';
 function useToggle(defaultIsOpen = false, onToggleCb) {
     const [isOpen, setIsOpen] = useState(defaultIsOpen);
     const onToggle = useCallback(() => setIsOpen((oldIsOpen) => !oldIsOpen), []);
+    const open = useCallback(() => setIsOpen(true), []);
+    const close = useCallback(() => setIsOpen(false), []);
     useEffectAfterMount(() => {
         if (typeof onToggleCb === 'function') {
             onToggleCb(isOpen);
         }
     }, [isOpen]);
-    return [isOpen, onToggle];
+    return [isOpen, onToggle, open, close];
 }
 
 export { useToggle };

package/build/esm/packages/aurora/src/components/dropdown/hooks/use_toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/index.js

@@ -36,11 +36,11 @@ import { useToggle } from './hooks/use_toggle.js';
  */
 const Dropdown = ({ defaultIsOpen = false, onToggle, children }) => {
     const wrapperRef = useRef(null);
-    const [isOpen, toggleDropdown] = useToggle(defaultIsOpen, onToggle);
+    const [isOpen, toggleDropdown, openDropdown, closeDropdown] = useToggle(defaultIsOpen, onToggle);
     /**
      * context values, they may be used with useContext in any component which is part of Dropdown composition
      */
-    const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown }), [isOpen, toggleDropdown]);
+    const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown, openDropdown, closeDropdown }), [isOpen, toggleDropdown, openDropdown, closeDropdown]);
     return (React.createElement(DropdownContext.Provider, { value: value },
         React.createElement("div", { ref: wrapperRef, className: cssClasses.dropdown }, children)));
 };

package/build/esm/packages/aurora/src/components/dropdown/utilities.js

@@ -1,8 +1,8 @@
 import 'react';
-import cssClasses from '../../css/modal/main.module.less.js';
+import cssClasses$1 from '../../css/modal/main.module.less.js';
 import { cssDropdownContent } from './css_classes.js';
 import { fuzzySearch } from '../../utilities/fuzzy_search/fuzzy_search.js';
-import cssClasses$1 from '../../css/dropdown/main.module.less.js';
+import cssClasses from '../../css/dropdown/main.module.less.js';
 
 /**
  * checks if the given option is selected within array of selectedValues array
@@ -43,7 +43,7 @@ const getXYModifiersForNestedDropdowns = (portalContainer) => {
     let xModifier = 0;
     let yModifier = 0;
     if (portalContainer) {
-        const $parentDropdownContent = portalContainer.closest(`.${cssClasses$1[cssDropdownContent]}`);
+        const $parentDropdownContent = portalContainer.closest(`.${cssClasses[cssDropdownContent]}`);
         if ($parentDropdownContent) {
             const { x: portalX, y: portalY } = $parentDropdownContent.getBoundingClientRect();
             xModifier = portalX;
@@ -59,7 +59,7 @@ const isChildOfModal = (ref) => {
     var _a;
     let currentParent = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
     while (currentParent) {
-        if (currentParent.classList.contains(cssClasses['modal-window'])) {
+        if (currentParent.classList.contains(cssClasses$1['modal-window'])) {
             return true;
         }
         currentParent = currentParent === null || currentParent === void 0 ? void 0 : currentParent.parentElement;

package/build/esm/packages/aurora/src/components/file_picker/components/selected_file_preview.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { FileUtils } from '../../../../../utilities/build/esm/packages/utilities/src/file_utils.js';
 import styles from '../../../css/file_picker/main.module.less.js';
 import CSS_CLASSES from '../css_classes.js';
-import { FileUtils } from '../../../../../utilities/build/esm/packages/utilities/src/file_utils.js';
 import IconDelete from '../../../assets/icon_delete.js';
 
 const SelectedFilePreview = ({ file, isPreview, onPreviewError, onFileDelete }) => {

package/build/esm/packages/utilities/build/esm/packages/utilities/src/ui_dom_utils.js

@@ -0,0 +1,92 @@
+class UiDomUtils {
+    static show($el) {
+        $el.removeAttribute('hidden');
+    }
+    static hide($el) {
+        $el.setAttribute('hidden', '');
+    }
+    static empty($el) {
+        $el.innerHTML = '';
+    }
+    static makeUnnavigable($el) {
+        $el.setAttribute('tabindex', '-1');
+    }
+    static makeNavigable($el) {
+        $el.setAttribute('tabindex', '0');
+    }
+    static getFocusableSelector() {
+        return ('' +
+            // Namespace problems of [xlink:href] explained in https://stackoverflow.com/a/23047888/515124
+            // svg a[*|href] does not match in IE9, but since we're filtering
+            // through is/focusable we can include all <a> from SVG
+            'svg a,' +
+            // may behave as 'svg, svg *,' in chrome as *every* svg element with a focus event listener is focusable
+            // navigational elements
+            'a[href],' +
+            // validity determined by is/valid-area.js
+            'area[href],' +
+            // validity determined by is/disabled.js
+            'input:not([type="hidden"]), select, textarea, button,' +
+            // browsing context containers
+            'iframe, object, embed,' +
+            // interactive content
+            'keygen,' +
+            // validity determined by is/valid-tabindex.js
+            '[tabindex]:not([tabindex="-1"]),' +
+            // editing hosts
+            '[contenteditable]');
+    }
+    static getFocusableElements($container) {
+        return [...$container.querySelectorAll(this.getFocusableSelector())].filter(($el) => !this._isNotFocusable($el));
+    }
+    static getFocusableElement($container) {
+        return [...$container.querySelectorAll(this.getFocusableSelector())].filter(($el) => !this._isNotFocusable($el))[0];
+    }
+    static _isNotFocusable($el) {
+        const displayValue = getComputedStyle($el).getPropertyValue('display');
+        return !!($el.hasAttribute('disabled') || $el.getAttribute('aria-hidden') || $el.hasAttribute('hidden') || displayValue === 'none');
+    }
+    static isFocusable($element) {
+        return $element.matches(this.getFocusableSelector());
+    }
+    static setFocusToFirstFocusableElementInContainer($container) {
+        var _a;
+        (_a = this.getFocusableElement($container)) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    static getDirectChildren($el, selector) {
+        return selector ? [...$el.children].filter((child) => child.matches(selector)) : [...$el.children];
+    }
+    static getAllClosest($el, selector, elements = []) {
+        if (!$el)
+            return elements;
+        const $closestEl = $el.closest(selector);
+        if ($closestEl)
+            elements.push($closestEl);
+        if (!$closestEl)
+            return elements;
+        return UiDomUtils.getAllClosest($closestEl.parentElement, selector, elements);
+    }
+    static getFirstParentNonStaticElement($el) {
+        let $currentEl = $el.parentElement;
+        while ($currentEl) {
+            if ($currentEl && window.getComputedStyle($currentEl).position !== 'static') {
+                return $currentEl;
+            }
+            $currentEl = $currentEl.parentElement;
+        }
+        return null;
+    }
+    static getFirstScrollableParent($el) {
+        let currentParent = $el.parentElement;
+        while (currentParent) {
+            if (currentParent.scrollHeight > currentParent.clientHeight) {
+                return currentParent;
+            }
+            currentParent = currentParent === null || currentParent === void 0 ? void 0 : currentParent.parentElement;
+        }
+        return null;
+    }
+}
+
+export { UiDomUtils };
+//# sourceMappingURL=ui_dom_utils.js.map

package/build/esm/packages/utilities/build/esm/packages/utilities/src/ui_dom_utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@dreamcommerce/aurora",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "2.4.0-19",
+  "version": "2.4.0-20",
   "description": "aurora",
   "author": "k0ssak",
   "license": "MIT",
@@ -44,7 +44,7 @@
     "update-visuals": "jest -c .config/jest/jest.config.visual.js --updateSnapshot"
   },
   "devDependencies": {
-    "@dreamcommerce/utilities": "^1.6.0",
+    "@dreamcommerce/utilities": "^1.7.0",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@storybook/react": "6.5.7",