@dreamcommerce/aurora 2.9.0-8 → 2.9.0

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

@@ -13,7 +13,7 @@ export interface IFilePicker {
     id: string;
     name?: string;
     className?: string;
-    onChange?: (fileList: FileList | null) => void;
+    onChange?: (file: IUseFilePickerOnChange) => void;
     allowedExtensions?: TFilesExtension[];
     initialFile?: TFilePickerFile;
     errors?: TControlErrors;
@@ -45,8 +45,12 @@ export interface IUseFilePicker {
     isPreview: boolean;
     isDragOver: boolean;
 }
+export declare type IUseFilePickerOnChange = {
+    fileList: FileList | null;
+    fileAsDataUrl?: string | ArrayBuffer | null;
+};
 export interface IUseFilePickerProps {
-    onChange?: (fileList: FileList | null) => void;
+    onChange?: (file: IUseFilePickerOnChange) => void;
     initialFile?: TFilePickerFile;
     allowedExtensions?: TFilesExtension[];
     inputRef: React.RefObject<HTMLInputElement>;

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

@@ -1,18 +1,27 @@
-import { useState, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import i18n from '../../i18n.js';
 import { MIME_TYPE_TO_FILE_EXTENSIONS, FILE_PICKER_ERROR } from './constants.js';
 
 const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors, onError }) => {
+    const [fileList, setFileList] = useState(null);
     const [file, setFile] = useState(initialFile);
+    const [fileAsDataUrl, setFileAsDataUrl] = useState(null);
     const [errors, setErrors] = useState([]);
     const [isDragOver, setDragOver] = useState(false);
     const [isPreview, setPreview] = useState(true);
+    const reader = useRef(new FileReader());
     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));
     }, []);
     useEffect(() => {
         initialErrors && setErrors(initialErrors);
     }, [initialErrors]);
+    useEffect(() => {
+        fileAsDataUrl && (onChange === null || onChange === void 0 ? void 0 : onChange({ fileList, fileAsDataUrl }));
+    }, [fileAsDataUrl]);
     const onDropFile = (event) => {
         setErrors([]);
         event.stopPropagation();
@@ -44,20 +53,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();
@@ -71,10 +85,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/esm/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;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/scroll_sync/components/scroll_sync_container.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type TScrollSyncContainerProps = {
+    id: string;
+    children: (elementRef: React.Ref<HTMLElement>) => React.ReactNode;
+};
+export declare const ScrollSyncContainer: ({ children, id }: TScrollSyncContainerProps) => JSX.Element;
+export default ScrollSyncContainer;

package/build/esm/packages/aurora/src/components/scroll_sync/components/scroll_sync_container.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useScrollSyncContainer } from '../hooks/scroll_sync_container_hook.js';
+
+const ScrollSyncContainer = ({ children, id }) => {
+    const elementRef = React.useRef(null);
+    useScrollSyncContainer(id, elementRef);
+    return React.createElement(React.Fragment, null, children(elementRef));
+};
+
+export default ScrollSyncContainer;
+export { ScrollSyncContainer };
+//# sourceMappingURL=scroll_sync_container.js.map

package/build/esm/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;"}

package/build/esm/packages/aurora/src/components/scroll_sync/context/scroll_sync_context.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare type TScrollSyncContainer = {
+    id: string;
+    $el: HTMLElement;
+};
+export interface IScrollSyncContext {
+    registerContainer: (container: TScrollSyncContainer) => void;
+    unregisterContainer: (id: string) => void;
+    hasContainer: (id: string) => boolean;
+}
+export declare const ScrollSyncContext: import("react").Context<IScrollSyncContext>;
+export declare const ScrollSyncContextProvider: import("react").Provider<IScrollSyncContext>;

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

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+const ScrollSyncContext = createContext({
+    registerContainer: () => { },
+    unregisterContainer: () => { },
+    hasContainer: () => false
+});
+const ScrollSyncContextProvider = ScrollSyncContext.Provider;
+
+export { ScrollSyncContext, ScrollSyncContextProvider };
+//# sourceMappingURL=scroll_sync_context.js.map

package/build/esm/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;"}

package/build/esm/packages/aurora/src/components/scroll_sync/context/scroll_sync_provider.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare const ScrollSyncProvider: ({ children }: PropsWithChildren<{}>) => JSX.Element;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useLazyRef } from '../../../hooks/use_lazy_ref.js';
+import { ScrollSyncContextProvider } from './scroll_sync_context.js';
+import { setupScrollSyncer } from './setup_scroll_syncer.js';
+
+const ScrollSyncProvider = ({ children }) => {
+    const scrollSyncerSetup = useLazyRef(() => 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.createElement(ScrollSyncContextProvider, { value: value }, children);
+};
+
+export { ScrollSyncProvider };
+//# sourceMappingURL=scroll_sync_provider.js.map

package/build/esm/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;"}

package/build/esm/packages/aurora/src/components/scroll_sync/context/scroll_syncer_service.d.ts

@@ -0,0 +1,18 @@
+import { TScrollSyncContainer } from "./scroll_sync_context";
+export declare class ScrollSyncerService {
+    private scrollContainers;
+    proportional: boolean;
+    vertical: boolean;
+    horizontal: boolean;
+    enabled: boolean;
+    constructor();
+    registerContainer(container: TScrollSyncContainer): void;
+    unregisterContainer(id: string): void;
+    private _addScrollEvent;
+    private _handleScrollEvent;
+    private _removeScrollEvent;
+    private _syncScrollPosition;
+    private _syncScrollPositions;
+    private _getContentContainer;
+    hasContainer(id: string): boolean;
+}

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

@@ -0,0 +1,73 @@
+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);
+    }
+}
+
+export { ScrollSyncerService };
+//# sourceMappingURL=scroll_syncer_service.js.map

package/build/esm/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;"}

package/build/esm/packages/aurora/src/components/scroll_sync/context/setup_scroll_syncer.d.ts

@@ -0,0 +1,4 @@
+import { ScrollSyncerService } from "./scroll_syncer_service";
+export declare const setupScrollSyncer: () => {
+    scrollSyncerApi: ScrollSyncerService;
+};

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

@@ -0,0 +1,8 @@
+import { ScrollSyncerService } from './scroll_syncer_service.js';
+
+const setupScrollSyncer = () => {
+    return { scrollSyncerApi: new ScrollSyncerService() };
+};
+
+export { setupScrollSyncer };
+//# sourceMappingURL=setup_scroll_syncer.js.map

package/build/esm/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;"}

package/build/esm/packages/aurora/src/components/scroll_sync/hooks/scroll_sync_container_hook.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useScrollSyncContainer: (id: string, ref: React.RefObject<HTMLElement>) => void;

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

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useScrollSync } from './scroll_sync_hook.js';
+
+const useScrollSyncContainer = (id, ref) => {
+    const scrollSyncApi = useScrollSync();
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        if (!scrollSyncApi.hasContainer(id))
+            scrollSyncApi.registerContainer({ id, $el: ref.current });
+        return () => scrollSyncApi.unregisterContainer(id);
+    }, []);
+};
+
+export { useScrollSyncContainer };
+//# sourceMappingURL=scroll_sync_container_hook.js.map

package/build/esm/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;"}

package/build/esm/packages/aurora/src/components/scroll_sync/hooks/scroll_sync_hook.d.ts

@@ -0,0 +1 @@
+export declare const useScrollSync: () => import("../context/scroll_sync_context").IScrollSyncContext;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ScrollSyncContext } from '../context/scroll_sync_context.js';
+
+const useScrollSync = () => {
+    const context = React.useContext(ScrollSyncContext);
+    if (!context) {
+        throw new Error('useScrollSync must be used within a ScrollSyncContextProvider');
+    }
+    return context;
+};
+
+export { useScrollSync };
+//# sourceMappingURL=scroll_sync_hook.js.map

package/build/esm/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;"}

package/build/esm/packages/aurora/src/components/scroll_sync/index.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+export declare const ScrollSync: ({ children }: PropsWithChildren<{}>) => JSX.Element;
+export default ScrollSync;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ScrollSyncProvider } from './context/scroll_sync_provider.js';
+
+const ScrollSync = ({ children }) => {
+    return React.createElement(ScrollSyncProvider, null, children);
+};
+
+export default ScrollSync;
+export { ScrollSync };
+//# sourceMappingURL=index.js.map

package/build/esm/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;"}

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

@@ -1,16 +1,27 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import { STACK_DIRECTIONS, STACK_JUSTIFICATIONS, STACK_ALIGNMENTS, STACK_WRAP, STACK_DIRECTIONS_TO_CSS_CLASSES_MAP, STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP, STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP, STACK_WRAP_TO_CSS_CLASSES_MAP, STACK_CSS_CLASSES } from './stack_constants.js';
 import cssClasses from '../../css/stack/main.module.less.js';
 import { cssStack } from './css_classes.js';
 
-const Stack = ({ children, spacing = 0, className = '', direction = STACK_DIRECTIONS.row, justify = STACK_JUSTIFICATIONS.flexStart, align = STACK_ALIGNMENTS.normal, wrap = STACK_WRAP.nowrap, as = 'div', inline = false, style = {}, onMouseLeave, onMouseEnter }) => {
+const Stack = ({ children, spacing = 0, className = '', direction = STACK_DIRECTIONS.row, justify = STACK_JUSTIFICATIONS.flexStart, align = STACK_ALIGNMENTS.normal, wrap = STACK_WRAP.nowrap, as = 'div', inline = false, style = {}, onMouseLeave, onMouseEnter, attributes, onClick }) => {
     const stackClass = classnames(cssClasses[cssStack], cssClasses[STACK_DIRECTIONS_TO_CSS_CLASSES_MAP[direction]], cssClasses[STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP[align]], cssClasses[STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP[justify]], cssClasses[STACK_WRAP_TO_CSS_CLASSES_MAP[wrap]], inline ? cssClasses[STACK_CSS_CLASSES.inline] : '', className);
+    const stackElRef = useRef(null);
+    useEffect(() => {
+        if (!stackElRef.current || !attributes)
+            return;
+        Object.entries(attributes).forEach(([key, value]) => {
+            var _a;
+            (_a = stackElRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute(key, value);
+        });
+    }, []);
     return React.createElement(as, {
+        ref: stackElRef,
         className: `${stackClass}`,
         style: { gap: `${spacing}px`, ...style },
         onMouseEnter,
-        onMouseLeave
+        onMouseLeave,
+        onClick
     }, children);
 };
 

package/build/esm/packages/aurora/src/components/stack/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;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/stack/stack_types.d.ts

@@ -14,6 +14,8 @@ export declare type TStackProps = {
     style?: Record<any, any>;
     onMouseEnter?: (event: React.MouseEvent) => void;
     onMouseLeave?: (event: React.MouseEvent) => void;
+    attributes?: Record<string, any>;
+    onClick?: (event: React.MouseEvent) => void;
 };
 export declare type TStackJustify = Any.Keys<typeof STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP>;
 export declare type TStackDirection = Any.Keys<typeof STACK_DIRECTIONS_TO_CSS_CLASSES_MAP>;

package/build/esm/packages/aurora/src/components/tree/components/tree_node.d.ts

@@ -8,6 +8,7 @@ declare type TTreeContentComponentProps = {
 };
 declare type TTreeLabelComponentProps = {
     node: ITreeNode;
+    isLeaf: boolean;
 };
 declare type TTreeNodeProps = TPropsWithChildren<ITreeNode & {
     cssClassNames?: string;

package/build/esm/packages/aurora/src/components/tree/components/tree_node.js

@@ -16,15 +16,16 @@ 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 })) : (React.createElement("span", { className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNodeTogglerLabel], 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.createElement("button", { onClick: toggleNode, className: classnames(TREE_NODE_CSS_CLASSES.treeNodeToggler, cssClasses[TREE_NODE_CSS_CLASSES.treeNodeToggler]) },
-        React.createElement("span", { className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNodeTogglerIcon], TREE_NODE_CSS_CLASSES.treeNodeTogglerIcon, {
-                [TREE_NODE_CSS_CLASSES.treeNodeTogglerIconExpanded]: node.expanded,
-                [cssClasses[TREE_NODE_CSS_CLASSES.treeNodeTogglerIconExpanded]]: node.expanded
-            }) },
-            React.createElement(IconListArrowDown, null)),
+    const Label = LabelComponent ? (LabelComponent === null || LabelComponent === void 0 ? void 0 : LabelComponent({ node, isLeaf: !children })) : (React.createElement("span", { tabIndex: !children ? 0 : -1, className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNodeLabelContent], 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.createElement("div", { className: classnames(TREE_NODE_CSS_CLASSES.treeNodeLabel, cssClasses[TREE_NODE_CSS_CLASSES.treeNodeLabel]) },
+        React.createElement("button", { className: classnames(TREE_NODE_CSS_CLASSES.treeNodeTogglerBtn, cssClasses[TREE_NODE_CSS_CLASSES.treeNodeTogglerBtn], {
+                [TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnExpanded]: node.expanded,
+                [cssClasses[TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnExpanded]]: node.expanded
+            }), onClick: toggleNode },
+            React.createElement("span", { className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnIcon], TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnIcon) },
+                React.createElement(IconListArrowDown, null))),
         Label));
-    return (React.createElement("li", { className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNode], TREE_NODE_CSS_CLASSES.treeNode, cssClassNames, {
+    return (React.createElement("li", { role: "treeitem", "aria-expanded": node.expanded, className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNode], TREE_NODE_CSS_CLASSES.treeNode, cssClassNames, {
             [TREE_NODE_CSS_CLASSES.treeNodeExpanded]: node.expanded
         }) },
         children ? Content : Label,

package/build/esm/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;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/tree/css_classes.d.ts

@@ -4,10 +4,11 @@ export declare const TREE_CSS_CLASSES: {
 };
 export declare const TREE_NODE_CSS_CLASSES: {
     readonly treeNode: "tree-node";
-    readonly treeNodeToggler: "tree-node__toggler";
-    readonly treeNodeTogglerIcon: "tree-node__toggler-icon";
-    readonly treeNodeTogglerIconExpanded: "tree-node__toggler-icon_expanded";
-    readonly treeNodeTogglerLabel: "tree-node__toggler-label";
+    readonly treeNodeTogglerBtn: "tree-node__toggler-btn";
+    readonly treeNodeTogglerBtnExpanded: "tree-node__toggler-btn_expanded";
+    readonly treeNodeTogglerBtnIcon: "tree-node__toggler-btn-icon";
+    readonly treeNodeLabelContent: "tree-node__label-content";
+    readonly treeNodeLabel: "tree-node__label";
     readonly treeNodeChildren: "tree-node__children";
     readonly treeNodeChildrenEnter: "tree-node__children-enter";
     readonly treeNodeChildrenEnterActive: "tree-node__children-enter-active";

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

@@ -6,10 +6,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/esm/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;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/tree/index.d.ts

@@ -1,6 +1,11 @@
-import { TPropsWithChildren } from "../../typings/general";
+import React from 'react';
 declare type TTreeProps = {
     cssClassNames?: string;
+    cssStyles?: React.CSSProperties;
+    onMouseEnter?: (event: React.MouseEvent<HTMLUListElement, MouseEvent>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLUListElement, MouseEvent>) => void;
 };
-export declare const Tree: ({ children, cssClassNames }: TPropsWithChildren<TTreeProps>) => JSX.Element;
+export declare const Tree: React.ForwardRefExoticComponent<TTreeProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLUListElement>>;
 export default Tree;

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

@@ -4,10 +4,11 @@ import { TreeProvider } from './context/tree_provider.js';
 import { TREE_CSS_CLASSES } from './css_classes.js';
 import cssClasses from '../../css/tree/main.module.less.js';
 
-const Tree = ({ children, cssClassNames }) => {
+// eslint-disable-next-line react/display-name
+const Tree = React.forwardRef(({ children, cssClassNames, cssStyles, onMouseEnter, onMouseLeave }, ref) => {
     return (React.createElement(TreeProvider, null,
-        React.createElement("ul", { className: classnames(cssClasses[TREE_CSS_CLASSES.tree], TREE_CSS_CLASSES.tree, cssClassNames) }, children)));
-};
+        React.createElement("ul", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, style: cssStyles, className: classnames(cssClasses[TREE_CSS_CLASSES.tree], TREE_CSS_CLASSES.tree, cssClassNames) }, children)));
+});
 
 export default Tree;
 export { Tree };

package/build/esm/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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { TYPOGRAPHY_CSS_CLASSES, TYPOGRAPHY_COMPONENTS_TYPES_TO_CSS_CLASSES_MAP, TYPOGRAPHY_TRANSFORM_TO_CSS_CLASSES_MAP, TYPOGRAPHY_WEIGHT_TO_CSS_CLASSES_MAP, TYPOGRAPHY_COLORS_TO_CSS_CLASSES_MAP } from './typography_constants.js';
 import typographyCssClasses from '../../css/typography/main.module.less.js';
 
-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(typographyCssClasses[TYPOGRAPHY_CSS_CLASSES.typography], as ? typographyCssClasses[TYPOGRAPHY_COMPONENTS_TYPES_TO_CSS_CLASSES_MAP[as]] : '', variant ? typographyCssClasses[TYPOGRAPHY_COMPONENTS_TYPES_TO_CSS_CLASSES_MAP[variant]] : '', transform ? typographyCssClasses[TYPOGRAPHY_TRANSFORM_TO_CSS_CLASSES_MAP[transform]] : '', weight ? typographyCssClasses[TYPOGRAPHY_WEIGHT_TO_CSS_CLASSES_MAP[weight]] : '', color ? typographyCssClasses[TYPOGRAPHY_COLORS_TO_CSS_CLASSES_MAP[color]] : '', cssClasses);
     return React.createElement(as, {
         className: typographyClasses,

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

@@ -14,8 +14,9 @@ const XhrImagePicker = ({ id, url, name, onUploaded, initialFile, errors, onErro
 ] }) => {
     const httpApi = useHttpApi();
     const pendingRequestRef = React.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/esm/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;"}
+{"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;"}

package/build/esm/packages/aurora/src/css/tree/main.module.less.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
 
-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__Bhwx9 {\n  display: flex;\n  align-items: center;\n  background: none;\n  gap: 8px;\n  width: 100%;\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__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(css_248z);
 
 export default cssClasses;

package/build/esm/packages/aurora/src/index.d.ts

@@ -107,13 +107,15 @@ import XhrImagePicker from "./components/xhr_image_picker";
 import ValuesSyncer from "./components/controls/components/values_syncer";
 import { Tree } from "./components/tree";
 import { TreeNode } from "./components/tree/components/tree_node";
+import { ScrollSyncContainer } from "./components/scroll_sync/components/scroll_sync_container";
+import { ScrollSync } from "./components/scroll_sync";
 /**
  * export hooks
  */
 /**
  * export components
  */
-export { Accordion, Button, Tooltip, ButtonsGroup, Dropdown, Select, MultiSelect, Label, Stack, Control, ControlInput, ControlCheckbox, ControlCheckboxSwitch, ControlRadio, ControlSelect, ControlRange, ControlMultiSelect, ControlTextarea, Gallery, Datepicker, ColorPicker, ControlColorPicker, ControlDatepicker, ControlFilePicker, ControlXhrImagePicker, Heading, Typography, Modal, ModalProvider, AbsoluteModal, RelativeModal, TabsWrapper, Tabs, TabsItem, TabsItemList, TabsPanel, TabsPanelList, SearchList, SearchListInput, SearchListResults, Tag, TagsSelector, ControlTagsSelector, Table, DataTable, Grid, DropdownContext, ModalContext, IconCalendar, Spacing, IconArrow, IconTick, FilePicker, ImagePicker, ControlCellSelector, Hint, ControlRadioGroup, MessageBox, FlashMessenger, useFlashMessenger, Loader, WithLoader, useDropdownContext, FlashMessengerContext, FlashMessagesList, Link, IconTablet, IconMobile, IconLaptop, IconDesktop, IconWarning, useToggle, useSearchList, Slide, SlideWrapper, SlideHeader, SlideSubHeader, SlideContent, SlideFooter, XhrImagePicker, ValuesSyncer, Tree, TreeNode };
+export { Accordion, Button, Tooltip, ButtonsGroup, Dropdown, Select, MultiSelect, Label, Stack, Control, ControlInput, ControlCheckbox, ControlCheckboxSwitch, ControlRadio, ControlSelect, ControlRange, ControlMultiSelect, ControlTextarea, Gallery, Datepicker, ColorPicker, ControlColorPicker, ControlDatepicker, ControlFilePicker, ControlXhrImagePicker, Heading, Typography, Modal, ModalProvider, AbsoluteModal, RelativeModal, TabsWrapper, Tabs, TabsItem, TabsItemList, TabsPanel, TabsPanelList, SearchList, SearchListInput, SearchListResults, Tag, TagsSelector, ControlTagsSelector, Table, DataTable, Grid, DropdownContext, ModalContext, IconCalendar, Spacing, IconArrow, IconTick, FilePicker, ImagePicker, ControlCellSelector, Hint, ControlRadioGroup, MessageBox, FlashMessenger, useFlashMessenger, Loader, WithLoader, useDropdownContext, FlashMessengerContext, FlashMessagesList, Link, IconTablet, IconMobile, IconLaptop, IconDesktop, IconWarning, useToggle, useSearchList, Slide, SlideWrapper, SlideHeader, SlideSubHeader, SlideContent, SlideFooter, XhrImagePicker, ValuesSyncer, Tree, TreeNode, ScrollSyncContainer, ScrollSync };
 /**
  * export types
  */