@dreamcommerce/aurora 2.9.0-9 → 2.10.0-0

package/build/cjs/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.js

@@ -16,9 +16,10 @@ const ControlXhrImagePicker = ({ url, label, isRequired, id, name, onChange, all
     const handleControlError = (errors) => {
         setErrors(errors);
     };
-    const handleControlChange = (fileList) => {
+    const handleControlChange = (file) => {
+        const { fileList, fileAsDataUrl } = file;
         setErrors(null);
-        onChange === null || onChange === void 0 ? void 0 : onChange(fileList);
+        onChange === null || onChange === void 0 ? void 0 : onChange({ fileList, fileAsDataUrl });
     };
     return (React__default['default'].createElement(index['default'], { errors: controlErrors, name: name, id: id },
         (label || hint) && (React__default['default'].createElement(index['default'].Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },

package/build/cjs/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -7,16 +7,25 @@ var i18n = require('../../i18n.js');
 var constants = require('./constants.js');
 
 const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors, onError }) => {
+    const [fileList, setFileList] = React.useState(null);
     const [file, setFile] = React.useState(initialFile);
+    const [fileAsDataUrl, setFileAsDataUrl] = React.useState(null);
     const [errors, setErrors] = React.useState([]);
     const [isDragOver, setDragOver] = React.useState(false);
     const [isPreview, setPreview] = React.useState(true);
+    const reader = React.useRef(new FileReader());
     React.useEffect(() => {
-        initialFile && setFile(initialFile);
+        setFile(initialFile);
+        reader.current && getDataUrlFromFile(reader.current.result);
+        reader.current.addEventListener('load', () => getDataUrlFromFile(reader.current.result), false);
+        return () => reader.current.removeEventListener('load', () => getDataUrlFromFile(reader.current.result));
     }, []);
     React.useEffect(() => {
         initialErrors && setErrors(initialErrors);
     }, [initialErrors]);
+    React.useEffect(() => {
+        fileAsDataUrl && (onChange === null || onChange === void 0 ? void 0 : onChange({ fileList, fileAsDataUrl }));
+    }, [fileAsDataUrl]);
     const onDropFile = (event) => {
         setErrors([]);
         event.stopPropagation();
@@ -48,20 +57,25 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
     };
     const updateFile = (files) => {
         if (files === null || files === void 0 ? void 0 : files.length) {
+            setFileList(files);
+            reader.current.readAsDataURL(files[0]);
             setFile({
                 fileName: files === null || files === void 0 ? void 0 : files[0].name,
                 fileUrl: URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0])
             });
             const isValid = validateFileExtension(allowedExtensions, files[0].type);
             if (isValid)
-                onChange === null || onChange === void 0 ? void 0 : onChange(files);
+                onChange === null || onChange === void 0 ? void 0 : onChange({ fileList: files });
         }
         else {
             setFile(undefined);
-            onChange === null || onChange === void 0 ? void 0 : onChange(files);
+            onChange === null || onChange === void 0 ? void 0 : onChange({ fileList: files });
         }
         setPreview(true);
     };
+    const getDataUrlFromFile = (fileReaderResult) => {
+        setFileAsDataUrl(fileReaderResult);
+    };
     const onDragOver = (event) => {
         event.stopPropagation();
         event.preventDefault();
@@ -75,10 +89,12 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
     };
     const onFileDelete = () => {
         inputRef.current.value = '';
+        setFileList(null);
         setFile(undefined);
+        setFileAsDataUrl(null);
         setPreview(true);
         setErrors([]);
-        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+        onChange === null || onChange === void 0 ? void 0 : onChange({ fileList: null, fileAsDataUrl: null });
     };
     const onPreviewError = () => {
         setPreview(false);

package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.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;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;"}
+{"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;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/scroll_sync/components/scroll_sync_container.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var scroll_sync_container_hook = require('../hooks/scroll_sync_container_hook.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ScrollSyncContainer = ({ children, id }) => {
+    const elementRef = React__default['default'].useRef(null);
+    scroll_sync_container_hook.useScrollSyncContainer(id, elementRef);
+    return React__default['default'].createElement(React__default['default'].Fragment, null, children(elementRef));
+};
+
+exports.ScrollSyncContainer = ScrollSyncContainer;
+exports.default = ScrollSyncContainer;
+//# sourceMappingURL=scroll_sync_container.js.map

package/build/cjs/packages/aurora/src/components/scroll_sync/components/scroll_sync_container.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;"}

package/build/cjs/packages/aurora/src/components/scroll_sync/context/scroll_sync_context.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const ScrollSyncContext = React.createContext({
+    registerContainer: () => { },
+    unregisterContainer: () => { },
+    hasContainer: () => false
+});
+const ScrollSyncContextProvider = ScrollSyncContext.Provider;
+
+exports.ScrollSyncContext = ScrollSyncContext;
+exports.ScrollSyncContextProvider = ScrollSyncContextProvider;
+//# sourceMappingURL=scroll_sync_context.js.map

package/build/cjs/packages/aurora/src/components/scroll_sync/context/scroll_sync_context.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;"}

package/build/cjs/packages/aurora/src/components/scroll_sync/context/scroll_sync_provider.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var use_lazy_ref = require('../../../hooks/use_lazy_ref.js');
+var scroll_sync_context = require('./scroll_sync_context.js');
+var setup_scroll_syncer = require('./setup_scroll_syncer.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ScrollSyncProvider = ({ children }) => {
+    const scrollSyncerSetup = use_lazy_ref.useLazyRef(() => setup_scroll_syncer.setupScrollSyncer());
+    const value = {
+        registerContainer(container) {
+            scrollSyncerSetup.current.scrollSyncerApi.registerContainer(container);
+        },
+        unregisterContainer(id) {
+            scrollSyncerSetup.current.scrollSyncerApi.unregisterContainer(id);
+        },
+        hasContainer(id) {
+            return scrollSyncerSetup.current.scrollSyncerApi.hasContainer(id);
+        }
+    };
+    return React__default['default'].createElement(scroll_sync_context.ScrollSyncContextProvider, { value: value }, children);
+};
+
+exports.ScrollSyncProvider = ScrollSyncProvider;
+//# sourceMappingURL=scroll_sync_provider.js.map

package/build/cjs/packages/aurora/src/components/scroll_sync/context/scroll_sync_provider.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;"}

package/build/cjs/packages/aurora/src/components/scroll_sync/context/scroll_syncer_service.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const SCROLL_CONTAINER_ID_ATTRIBUTE = 'data-scroll-sync-id';
+class ScrollSyncerService {
+    constructor() {
+        this.scrollContainers = [];
+        this.proportional = true;
+        this.vertical = true;
+        this.horizontal = true;
+        this.enabled = true;
+        this._addScrollEvent = (container) => {
+            container.$el.addEventListener('scroll', this._handleScrollEvent);
+        };
+        this._handleScrollEvent = (ev) => {
+            const $container = ev.target;
+            const containerId = $container.getAttribute(SCROLL_CONTAINER_ID_ATTRIBUTE);
+            if (!containerId)
+                return;
+            const container = this._getContentContainer(containerId);
+            if (!container)
+                return;
+            window.requestAnimationFrame(() => this._syncScrollPositions(container));
+        };
+        this._removeScrollEvent = (container) => {
+            container.$el.removeEventListener('scroll', this._handleScrollEvent);
+        };
+        this._syncScrollPosition = (containerToSync, scrolledContainer) => {
+            const $scrolledContainerEl = scrolledContainer.$el;
+            const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = $scrolledContainerEl;
+            const scrollTopOffset = scrollHeight - clientHeight;
+            const scrollLeftOffset = scrollWidth - clientWidth;
+            const paneHeight = containerToSync.$el.scrollHeight - clientHeight;
+            const paneWidth = containerToSync.$el.scrollWidth - clientWidth;
+            if (this.vertical && scrollTopOffset > 0) {
+                containerToSync.$el.scrollTop = this.proportional ? (paneHeight * scrollTop) / scrollTopOffset : scrollTop;
+            }
+            if (this.horizontal && scrollLeftOffset > 0) {
+                containerToSync.$el.scrollLeft = this.proportional ? (paneWidth * scrollLeft) / scrollLeftOffset : scrollLeft;
+            }
+        };
+        this._syncScrollPositions = (scrolledContainer) => {
+            this.scrollContainers.forEach((containerToSync) => {
+                if (containerToSync.id !== scrolledContainer.id) {
+                    this._syncScrollPosition(containerToSync, scrolledContainer);
+                }
+            });
+        };
+        this._getContentContainer = (id) => {
+            return this.scrollContainers.find((currContainer) => currContainer.id === id);
+        };
+    }
+    registerContainer(container) {
+        container.$el.setAttribute(SCROLL_CONTAINER_ID_ATTRIBUTE, container.id);
+        this.scrollContainers.push(container);
+        this._addScrollEvent(container);
+    }
+    unregisterContainer(id) {
+        const container = this._getContentContainer(id);
+        if (!container)
+            return;
+        //TODO dokonczyc scroll na iframe
+        // if (container.$el instanceof HTMLIFrameElement) {
+        //     container.$el = container.$el.contentWindow;
+        // }
+        this.scrollContainers = this.scrollContainers.filter((currContainer) => container.id !== currContainer.id);
+        container.$el.removeAttribute(SCROLL_CONTAINER_ID_ATTRIBUTE);
+        this._removeScrollEvent(container);
+    }
+    hasContainer(id) {
+        return !!this.scrollContainers.find((container) => container.id === id);
+    }
+}
+
+exports.ScrollSyncerService = ScrollSyncerService;
+//# sourceMappingURL=scroll_syncer_service.js.map

package/build/cjs/packages/aurora/src/components/scroll_sync/context/scroll_syncer_service.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;"}

package/build/cjs/packages/aurora/src/components/scroll_sync/context/setup_scroll_syncer.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var scroll_syncer_service = require('./scroll_syncer_service.js');
+
+const setupScrollSyncer = () => {
+    return { scrollSyncerApi: new scroll_syncer_service.ScrollSyncerService() };
+};
+
+exports.setupScrollSyncer = setupScrollSyncer;
+//# sourceMappingURL=setup_scroll_syncer.js.map

package/build/cjs/packages/aurora/src/components/scroll_sync/context/setup_scroll_syncer.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;"}

package/build/cjs/packages/aurora/src/components/scroll_sync/hooks/scroll_sync_container_hook.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var scroll_sync_hook = require('./scroll_sync_hook.js');
+
+const useScrollSyncContainer = (id, ref) => {
+    const scrollSyncApi = scroll_sync_hook.useScrollSync();
+    React.useEffect(() => {
+        if (!ref.current)
+            return;
+        if (!scrollSyncApi.hasContainer(id))
+            scrollSyncApi.registerContainer({ id, $el: ref.current });
+        return () => scrollSyncApi.unregisterContainer(id);
+    }, []);
+};
+
+exports.useScrollSyncContainer = useScrollSyncContainer;
+//# sourceMappingURL=scroll_sync_container_hook.js.map

package/build/cjs/packages/aurora/src/components/scroll_sync/hooks/scroll_sync_container_hook.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;"}

package/build/cjs/packages/aurora/src/components/scroll_sync/hooks/scroll_sync_hook.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var scroll_sync_context = require('../context/scroll_sync_context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const useScrollSync = () => {
+    const context = React__default['default'].useContext(scroll_sync_context.ScrollSyncContext);
+    if (!context) {
+        throw new Error('useScrollSync must be used within a ScrollSyncContextProvider');
+    }
+    return context;
+};
+
+exports.useScrollSync = useScrollSync;
+//# sourceMappingURL=scroll_sync_hook.js.map

package/build/cjs/packages/aurora/src/components/scroll_sync/hooks/scroll_sync_hook.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;"}

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var scroll_sync_provider = require('./context/scroll_sync_provider.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ScrollSync = ({ children }) => {
+    return React__default['default'].createElement(scroll_sync_provider.ScrollSyncProvider, null, children);
+};
+
+exports.ScrollSync = ScrollSync;
+exports.default = ScrollSync;
+//# sourceMappingURL=index.js.map

package/build/cjs/packages/aurora/src/components/scroll_sync/index.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;"}

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var directions = require('../../constants/directions.js');
+var use_click_outside = require('../../hooks/use_click_outside.js');
 var css_classes = require('./css_classes.js');
 var main_module = require('../../css/slide/main.module.less.js');
 
@@ -13,7 +14,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-const Slide = ({ isOpen, autoOpen, direction = 'left', position, animationDurationMs = 300, classNames = '', children }) => {
+const Slide = ({ isOpen, autoOpen, direction = 'left', position, animationDurationMs = 300, classNames = '', children, onClickOutside }) => {
+    const ref = React__default['default'].useRef(null);
+    use_click_outside.useClickOutside([ref], () => {
+        if (isOpen)
+            onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside();
+    });
     if (autoOpen)
         isOpen = true;
     let directionClass;
@@ -35,7 +41,7 @@ const Slide = ({ isOpen, autoOpen, direction = 'left', position, animationDurati
         [main_module['default'][css_classes['default'].slideIsOpen]]: isOpen,
         [classNames]: classNames
     });
-    return (React__default['default'].createElement("div", { className: slideClassNames, style: {
+    return (React__default['default'].createElement("div", { ref: ref, className: slideClassNames, style: {
             animationDuration: `${animationDurationMs}ms`,
             top: (position === null || position === void 0 ? void 0 : position.top) ? `${position.top}px` : '',
             right: (position === null || position === void 0 ? void 0 : position.right) ? `${position.right}px` : '',

package/build/cjs/packages/aurora/src/components/slide/index.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;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;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/tree/components/tree_node.js

@@ -25,13 +25,14 @@ const TreeNode = ({ children, id, cssClassNames, ContentComponent, LabelComponen
     const toggleNode = () => {
         treeApi.toggleNode(node.id);
     };
-    const Label = LabelComponent ? (LabelComponent === null || LabelComponent === void 0 ? void 0 : LabelComponent({ node, isLeaf: !children })) : (React__default['default'].createElement("span", { tabIndex: !children ? 0 : -1, className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerLabel], css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerLabel) }, node.label ? node.label : node.id));
-    const Content = ContentComponent ? (ContentComponent === null || ContentComponent === void 0 ? void 0 : ContentComponent({ node, toggleNode, isLeaf: !children })) : (React__default['default'].createElement("button", { onClick: toggleNode, className: classnames__default['default'](css_classes.TREE_NODE_CSS_CLASSES.treeNodeToggler, main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeToggler]) },
-        React__default['default'].createElement("span", { className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerIcon], css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerIcon, {
-                [css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerIconExpanded]: node.expanded,
-                [main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerIconExpanded]]: node.expanded
-            }) },
-            React__default['default'].createElement(icon_list_arrow_down.IconListArrowDown, null)),
+    const Label = LabelComponent ? (LabelComponent === null || LabelComponent === void 0 ? void 0 : LabelComponent({ node, isLeaf: !children })) : (React__default['default'].createElement("span", { tabIndex: !children ? 0 : -1, className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeLabelContent], css_classes.TREE_NODE_CSS_CLASSES.treeNodeLabelContent) }, node.label ? node.label : node.id));
+    const Content = ContentComponent ? (ContentComponent === null || ContentComponent === void 0 ? void 0 : ContentComponent({ node, toggleNode, isLeaf: !children })) : (React__default['default'].createElement("div", { className: classnames__default['default'](css_classes.TREE_NODE_CSS_CLASSES.treeNodeLabel, main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeLabel]) },
+        React__default['default'].createElement("button", { className: classnames__default['default'](css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtn, main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtn], {
+                [css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnExpanded]: node.expanded,
+                [main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnExpanded]]: node.expanded
+            }), onClick: toggleNode },
+            React__default['default'].createElement("span", { className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnIcon], css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnIcon) },
+                React__default['default'].createElement(icon_list_arrow_down.IconListArrowDown, null))),
         Label));
     return (React__default['default'].createElement("li", { role: "treeitem", "aria-expanded": node.expanded, className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNode], css_classes.TREE_NODE_CSS_CLASSES.treeNode, cssClassNames, {
             [css_classes.TREE_NODE_CSS_CLASSES.treeNodeExpanded]: node.expanded

package/build/cjs/packages/aurora/src/components/tree/components/tree_node.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;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;"}
+{"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;"}

package/build/cjs/packages/aurora/src/components/tree/css_classes.js

@@ -10,10 +10,11 @@ const TREE_CSS_CLASSES = {
 const treeNodeBaseCssClass = `tree-node`;
 const TREE_NODE_CSS_CLASSES = {
     treeNode: treeNodeBaseCssClass,
-    treeNodeToggler: `${treeNodeBaseCssClass}__toggler`,
-    treeNodeTogglerIcon: `${treeNodeBaseCssClass}__toggler-icon`,
-    treeNodeTogglerIconExpanded: `${treeNodeBaseCssClass}__toggler-icon_expanded`,
-    treeNodeTogglerLabel: `${treeNodeBaseCssClass}__toggler-label`,
+    treeNodeTogglerBtn: `${treeNodeBaseCssClass}__toggler-btn`,
+    treeNodeTogglerBtnExpanded: `${treeNodeBaseCssClass}__toggler-btn_expanded`,
+    treeNodeTogglerBtnIcon: `${treeNodeBaseCssClass}__toggler-btn-icon`,
+    treeNodeLabelContent: `${treeNodeBaseCssClass}__label-content`,
+    treeNodeLabel: `${treeNodeBaseCssClass}__label`,
     treeNodeChildren: `${treeNodeBaseCssClass}__children`,
     treeNodeChildrenEnter: `${treeNodeBaseCssClass}__children-enter`,
     treeNodeChildrenEnterActive: `${treeNodeBaseCssClass}__children-enter-active`,

package/build/cjs/packages/aurora/src/components/tree/css_classes.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;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;AACA;AACA;AACA;"}

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

@@ -13,10 +13,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-const Tree = ({ children, cssClassNames }) => {
+// eslint-disable-next-line react/display-name
+const Tree = React__default['default'].forwardRef(({ children, cssClassNames, cssStyles, onMouseEnter, onMouseLeave }, ref) => {
     return (React__default['default'].createElement(tree_provider.TreeProvider, null,
-        React__default['default'].createElement("ul", { className: classnames__default['default'](main_module['default'][css_classes.TREE_CSS_CLASSES.tree], css_classes.TREE_CSS_CLASSES.tree, cssClassNames) }, children)));
-};
+        React__default['default'].createElement("ul", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, style: cssStyles, className: classnames__default['default'](main_module['default'][css_classes.TREE_CSS_CLASSES.tree], css_classes.TREE_CSS_CLASSES.tree, cssClassNames) }, children)));
+});
 
 exports.Tree = Tree;
 exports.default = Tree;

package/build/cjs/packages/aurora/src/components/tree/index.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;"}
+{"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/cjs/packages/aurora/src/components/typography/index.js

@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-const Typography = ({ as = 'p', children, variant = 'h1', weight, transform, cssClasses, color, style }) => {
+const Typography = ({ as = 'p', children, variant, weight, transform, cssClasses, color, style }) => {
     const typographyClasses = classnames__default['default'](main_module['default'][typography_constants.TYPOGRAPHY_CSS_CLASSES.typography], as ? main_module['default'][typography_constants.TYPOGRAPHY_COMPONENTS_TYPES_TO_CSS_CLASSES_MAP[as]] : '', variant ? main_module['default'][typography_constants.TYPOGRAPHY_COMPONENTS_TYPES_TO_CSS_CLASSES_MAP[variant]] : '', transform ? main_module['default'][typography_constants.TYPOGRAPHY_TRANSFORM_TO_CSS_CLASSES_MAP[transform]] : '', weight ? main_module['default'][typography_constants.TYPOGRAPHY_WEIGHT_TO_CSS_CLASSES_MAP[weight]] : '', color ? main_module['default'][typography_constants.TYPOGRAPHY_COLORS_TO_CSS_CLASSES_MAP[color]] : '', cssClasses);
     return React__default['default'].createElement(as, {
         className: typographyClasses,

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

@@ -22,8 +22,9 @@ const XhrImagePicker = ({ id, url, name, onUploaded, initialFile, errors, onErro
 ] }) => {
     const httpApi = use_http_api.useHttpApi();
     const pendingRequestRef = React__default['default'].useRef();
-    const handleControlChange = async (fileList) => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(fileList);
+    const handleControlChange = async (file) => {
+        const { fileList, fileAsDataUrl } = file;
+        onChange === null || onChange === void 0 ? void 0 : onChange({ fileList, fileAsDataUrl });
         if (!fileList || !fileList.length)
             return;
         if (pendingRequestRef.current) {

package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.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;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;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/css/tree/main.module.less.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
 
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_tree__3D4e3 {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.main-module_tree-node__1pkPL > .main-module_tree-node__toggler-label__3tpIn:focus-within {\n  box-shadow: 0 0 3px 0 #3c83ec;\n  outline: 1px solid #3c83ec;\n}\n.main-module_tree-node__toggler__Bhwx9 {\n  display: flex;\n  align-items: center;\n  background: none;\n  gap: 8px;\n  width: 100%;\n}\n.main-module_tree-node__toggler__Bhwx9:focus-within {\n  box-shadow: 0 0 3px 0 #3c83ec;\n  outline: 1px solid #3c83ec;\n}\n.main-module_tree-node__toggler-icon__3QR9X {\n  display: flex;\n  align-items: center;\n}\n.main-module_tree-node__toggler-icon__3QR9X svg {\n  transition: rotate 250ms ease-out;\n  rotate: -95deg;\n}\n.main-module_tree-node__toggler-icon_expanded__31THq svg {\n  rotate: 0deg;\n}\n.main-module_tree-node__children__QyEOR {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 8px;\n  transform-origin: top center;\n  transition: opacity 250ms ease-out, scale 250ms ease-out;\n  padding-left: 16px;\n  list-style: none;\n  will-change: true;\n}\n.main-module_tree-node__children-enter__vxFO- {\n  opacity: 0;\n  scale: 1 0;\n}\n.main-module_tree-node__children-enter-active__T6XIS {\n  opacity: 1;\n  scale: 1 1;\n}\n.main-module_tree-node__children-exit__1NXHe {\n  opacity: 1;\n  scale: 1 1;\n}\n.main-module_tree-node__children-exit-active__vdqAI {\n  opacity: 0;\n  scale: 1 0;\n}\n";
-var cssClasses = {"tree":"main-module_tree__3D4e3","tree-node":"main-module_tree-node__1pkPL","tree-node__toggler-label":"main-module_tree-node__toggler-label__3tpIn","tree-node__toggler":"main-module_tree-node__toggler__Bhwx9","tree-node__toggler-icon":"main-module_tree-node__toggler-icon__3QR9X","tree-node__toggler-icon_expanded":"main-module_tree-node__toggler-icon_expanded__31THq","tree-node__children":"main-module_tree-node__children__QyEOR","tree-node__children-enter":"main-module_tree-node__children-enter__vxFO-","tree-node__children-enter-active":"main-module_tree-node__children-enter-active__T6XIS","tree-node__children-exit":"main-module_tree-node__children-exit__1NXHe","tree-node__children-exit-active":"main-module_tree-node__children-exit-active__vdqAI"};
+var css_248z = ".main-module_tree__3D4e3 {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.main-module_tree-node__toggler-btn__s9KoL {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px 8px 0;\n  cursor: pointer;\n}\n.main-module_tree-node__toggler-btn__s9KoL svg {\n  transition: rotate 250ms ease-out;\n  rotate: -95deg;\n}\n.main-module_tree-node__toggler-btn_expanded__17Joe svg {\n  rotate: 0deg;\n}\n.main-module_tree-node__toggler-btn-icon__OA4tk {\n  display: flex;\n}\n.main-module_tree-node__label__DT728 {\n  display: flex;\n  align-items: center;\n  background: none;\n}\n.main-module_tree-node__children__QyEOR {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 8px;\n  transform-origin: top center;\n  transition: opacity 250ms ease-out, scale 250ms ease-out;\n  padding-left: 16px;\n  list-style: none;\n  will-change: true;\n}\n.main-module_tree-node__children-enter__vxFO- {\n  opacity: 0;\n  scale: 1 0;\n}\n.main-module_tree-node__children-enter-active__T6XIS {\n  opacity: 1;\n  scale: 1 1;\n}\n.main-module_tree-node__children-exit__1NXHe {\n  opacity: 1;\n  scale: 1 1;\n}\n.main-module_tree-node__children-exit-active__vdqAI {\n  opacity: 0;\n  scale: 1 0;\n}\n";
+var cssClasses = {"tree":"main-module_tree__3D4e3","tree-node__toggler-btn":"main-module_tree-node__toggler-btn__s9KoL","tree-node__toggler-btn_expanded":"main-module_tree-node__toggler-btn_expanded__17Joe","tree-node__toggler-btn-icon":"main-module_tree-node__toggler-btn-icon__OA4tk","tree-node__label":"main-module_tree-node__label__DT728","tree-node__children":"main-module_tree-node__children__QyEOR","tree-node__children-enter":"main-module_tree-node__children-enter__vxFO-","tree-node__children-enter-active":"main-module_tree-node__children-enter-active__T6XIS","tree-node__children-exit":"main-module_tree-node__children-exit__1NXHe","tree-node__children-exit-active":"main-module_tree-node__children-exit-active__vdqAI"};
 styleInject_es['default'](css_248z);
 
 exports.default = cssClasses;

package/build/cjs/packages/aurora/src/hooks/use_click_outside.js

@@ -26,5 +26,6 @@ function useClickOutside(refs, callback) {
     });
 }
 
+exports.default = useClickOutside;
 exports.useClickOutside = useClickOutside;
 //# sourceMappingURL=use_click_outside.js.map

package/build/cjs/packages/aurora/src/hooks/use_click_outside.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;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;AACA;AACA;AACA;"}

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

@@ -12,6 +12,7 @@ var icon_tick = require('./assets/icon_tick.js');
 var index$8 = require('./components/stack/index.js');
 var index$7 = require('./components/label/index.js');
 var index$9 = require('./components/controls/index.js');
+var use_click_outside = require('./hooks/use_click_outside.js');
 var icon_arrow = require('./assets/icon_arrow.js');
 var index$b = require('./components/controls/hoc/control_checkbox/index.js');
 var use_toggle = require('./components/dropdown/hooks/use_toggle.js');
@@ -83,6 +84,8 @@ var index$J = require('./components/with_loader/index.js');
 var values_syncer = require('./components/controls/components/values_syncer.js');
 var index$N = require('./components/tree/index.js');
 var tree_node = require('./components/tree/components/tree_node.js');
+var scroll_sync_container = require('./components/scroll_sync/components/scroll_sync_container.js');
+var index$O = require('./components/scroll_sync/index.js');
 
 
 
@@ -97,6 +100,7 @@ exports.IconTick = icon_tick['default'];
 exports.Stack = index$8['default'];
 exports.Label = index$7['default'];
 exports.Control = index$9['default'];
+exports.useClickOutside = use_click_outside.useClickOutside;
 exports.IconArrow = icon_arrow['default'];
 exports.ControlCheckbox = index$b['default'];
 exports.useToggle = use_toggle.useToggle;
@@ -169,4 +173,6 @@ exports.WithLoader = index$J['default'];
 exports.ValuesSyncer = values_syncer['default'];
 exports.Tree = index$N.Tree;
 exports.TreeNode = tree_node.TreeNode;
+exports.ScrollSyncContainer = scroll_sync_container.ScrollSyncContainer;
+exports.ScrollSync = index$O.ScrollSync;
 //# sourceMappingURL=index.js.map

package/build/cjs/packages/aurora/src/index.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;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;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;"}
+{"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;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/controls/hoc/control_xhr_image_picker/index.js

@@ -8,9 +8,10 @@ const ControlXhrImagePicker = ({ url, label, isRequired, id, name, onChange, all
     const handleControlError = (errors) => {
         setErrors(errors);
     };
-    const handleControlChange = (fileList) => {
+    const handleControlChange = (file) => {
+        const { fileList, fileAsDataUrl } = file;
         setErrors(null);
-        onChange === null || onChange === void 0 ? void 0 : onChange(fileList);
+        onChange === null || onChange === void 0 ? void 0 : onChange({ fileList, fileAsDataUrl });
     };
     return (React.createElement(Control, { errors: controlErrors, name: name, id: id },
         (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },

package/build/esm/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.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;"}

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

@@ -1,12 +1,12 @@
 import { HTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode, Ref, TextareaHTMLAttributes } from 'react';
+import { IFilePicker, IUseFilePickerOnChange } from "../file_picker/types";
+import { IImagePicker, TImageSize } from "../image_picker/types";
 import { IMultiSelectProps, ISelectProps } from "../dropdown/types";
 import { IColorPickerProps } from "../color_picker/types";
-import { IFilePicker } from "../file_picker/types";
 import { IRange } from "../range/types";
+import { IRequestResponse } from '@dreamcommerce/star_core';
 import React from 'react';
 import { TVerticalPosition } from "../../typings/general";
-import { IImagePicker, TImageSize } from "../image_picker/types";
-import { IRequestResponse } from '@dreamcommerce/star_core';
 export declare type TControlErrors = string[] | null | undefined;
 export interface IControlContext {
     errors?: TControlErrors;
@@ -175,7 +175,7 @@ export interface IControlXhrImagePicker extends IImagePicker, IControlCommonProp
     url: string;
     label?: string;
     isRequired?: boolean;
-    onChange?: (fileList: FileList | null, size?: TImageSize) => void;
+    onChange?: (file: IUseFilePickerOnChange, size?: TImageSize) => void;
     labelAdditionalInfo?: string | ReactNode;
     onUploaded?: (resp: IRequestResponse<any>, file: File) => void;
 }