@dreamcommerce/aurora 3.1.30 → 3.1.32-1

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

@@ -1,12 +1,10 @@
 import { TControlErrors } from "../../control/control_types";
-import { IImagePicker, ImagePickerFileObject, TImageSize } from "../../image_picker/image_picker_types";
-import { TUploadedImageData } from "../../xhr_image_picker/xhr_image_picker_types";
+import { IXhrImagePickerProps, TUploadedImageData } from "../../xhr_image_picker/xhr_image_picker_types";
 import { ReactNode } from 'react';
-export interface IXhrImagePickerControl extends IImagePicker {
+export interface IXhrImagePickerControl extends Omit<IXhrImagePickerProps, 'onChange'> {
     url: string;
     label?: string;
-    onChange?: (file: ImagePickerFileObject, size?: TImageSize) => void;
-    onUploaded?: (data: TUploadedImageData) => void;
+    onChange?: (val: TUploadedImageData | null) => void;
     ImageEditor?: React.FunctionComponent;
     errors?: TControlErrors;
     required?: boolean;

package/build/esm/packages/aurora/src/components/controls/xhr_image_picker_control/xhr_image_picker_control_types.js

@@ -1,5 +1,4 @@
 import '@auroraComponents/control/control_types';
-import '@auroraComponents/image_picker/image_picker_types';
 import '@auroraComponents/xhr_image_picker/xhr_image_picker_types';
 import 'react';
 //# sourceMappingURL=xhr_image_picker_control_types.js.map

package/build/esm/packages/aurora/src/components/controls/xhr_image_picker_control/xhr_image_picker_control_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"xhr_image_picker_control_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/controls/xhr_image_picker_control/xhr_image_picker_control_types.ts"],"names":[],"mappings":"AAAA,OAA+B,yCAAyC,CAAC;AACzE,OAAgE,mDAAmD,CAAC;AACpH,OAAmC,2DAA2D,CAAC;AAC/F,OAA0B,OAAO,CAAC"}
+{"version":3,"file":"xhr_image_picker_control_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/controls/xhr_image_picker_control/xhr_image_picker_control_types.ts"],"names":[],"mappings":"AAAA,OAA+B,yCAAyC,CAAC;AACzE,OAAyD,2DAA2D,CAAC;AACrH,OAA0B,OAAO,CAAC"}

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_preview.d.ts

@@ -2,8 +2,7 @@ import React from 'react';
 import { TImagePickerFile } from '../image_picker_types';
 declare type TImagePickerPreviewProps = {
     file: TImagePickerFile;
-    onError: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
     onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
 };
-export declare const ImagePickerPreview: ({ file, onError, onLoad }: TImagePickerPreviewProps) => React.JSX.Element;
+export declare const ImagePickerPreview: ({ file, onLoad }: TImagePickerPreviewProps) => React.JSX.Element;
 export {};

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_preview.js

@@ -2,7 +2,6 @@ import React__default from 'react';
 
 var ImagePickerPreview = function ImagePickerPreview(_ref) {
   var file = _ref.file,
-    onError = _ref.onError,
     onLoad = _ref.onLoad;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-rounded-4 aurora-w-full aurora-h-full aurora-min-h-16 aurora-flex aurora-justify-center aurora-items-center"
@@ -10,7 +9,6 @@ var ImagePickerPreview = function ImagePickerPreview(_ref) {
     className: "aurora-rounded-4 aurora-w-full aurora-h-full aurora-object-contain",
     alt: file.fileName,
     src: (file === null || file === void 0 ? void 0 : file.fileUrl) || '',
-    onError: onError,
     onLoad: onLoad
   }));
 };

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

package/build/esm/packages/aurora/src/components/image_picker/image_picker.js

@@ -1,6 +1,6 @@
-import React__default, { memo, forwardRef, useState, useEffect, createRef } from 'react';
+import React__default, { memo, forwardRef, createRef } from 'react';
 import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
-import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { ErrorList } from '../error_list/error_list.js';
 import { IMAGE_PICKER_EXTENSIONS } from './image_picker_constants.js';
@@ -21,94 +21,28 @@ var ImagePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (_ref, ref)
     _ref$allowedExtension = _ref.allowedExtensions,
     allowedExtensions = _ref$allowedExtension === void 0 ? [IMAGE_PICKER_EXTENSIONS.WEBP, IMAGE_PICKER_EXTENSIONS.JPG, IMAGE_PICKER_EXTENSIONS.PNG, IMAGE_PICKER_EXTENSIONS.GIF, IMAGE_PICKER_EXTENSIONS.SVG, IMAGE_PICKER_EXTENSIONS.JPEG] : _ref$allowedExtension,
     allowedExtensionsLabel = _ref.allowedExtensionsLabel,
-    initialFile = _ref.initialFile,
     name = _ref.name,
-    onImageSizeUpdated = _ref.onImageSizeUpdated,
     topButtons = _ref.topButtons,
-    editedImageResult = _ref.editedImageResult;
+    file = _ref.file;
   var _useTranslation = useTranslation(),
     _useTranslation2 = _slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
   var inputRef = /*#__PURE__*/createRef();
-  var handleOnChange = function handleOnChange(ev) {
-    var _ev$fileList;
-    onChange === null || onChange === void 0 ? void 0 : onChange(ev);
-    if ((_ev$fileList = ev.fileList) !== null && _ev$fileList !== void 0 && _ev$fileList.length) {
-      setImageSizeBasedOnUrl(URL.createObjectURL(ev.fileList[0]));
-    }
-  };
   var _useImagePicker = useImagePicker({
-      initialFile: initialFile,
-      onChange: handleOnChange,
+      onChange: onChange,
       allowedExtensions: allowedExtensions,
-      onError: onError,
-      inputRef: inputRef
+      onError: onError
     }),
+    updateFile = _useImagePicker.updateFile,
     onDropFile = _useImagePicker.onDropFile,
-    onFileChange = _useImagePicker.onFileChange,
     onDragOver = _useImagePicker.onDragOver,
     onDragLeave = _useImagePicker.onDragLeave,
-    onFileDelete = _useImagePicker.onFileDelete,
-    onPreviewError = _useImagePicker.onPreviewError,
-    changeFile = _useImagePicker.changeFile,
-    file = _useImagePicker.file,
-    isPreview = _useImagePicker.isPreview,
     isDragOver = _useImagePicker.isDragOver;
-  var _useState = useState(undefined),
-    _useState2 = _slicedToArray(_useState, 2),
-    imageSize = _useState2[0],
-    setImageSize = _useState2[1];
   var acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
-  useEffect(function () {
-    initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
-  }, [initialFile]);
-  useEffect(function () {
-    if (!editedImageResult) return;
-    var fileList = createFileList(editedImageResult);
-    changeFile(fileList);
-  }, [editedImageResult]);
-  var createFileList = function createFileList(file) {
-    var fileArray = [];
-    fileArray.push(file);
-    return fileArray;
-  };
-  var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
-    createImageFromUrl(fileUrl).then(function (image) {
-      var size = {
-        width: image.naturalWidth,
-        height: image.naturalHeight
-      };
-      setImageSize(size);
-      onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(size);
-    });
-  };
-  var createImageFromUrl = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(url) {
-      var img;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            img = new Image();
-            img.src = url;
-            _context.next = 4;
-            return img.decode();
-          case 4:
-            return _context.abrupt("return", img);
-          case 5:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function createImageFromUrl(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
   var handleOnFileDelete = function handleOnFileDelete() {
-    onFileDelete();
-    setImageSize(undefined);
-    onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(undefined);
+    updateFile(null);
   };
+  var isPreview = file !== null;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-mb-1"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -138,17 +72,16 @@ var ImagePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (_ref, ref)
   }, topButtons && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, topButtons), /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-relative"
   }, /*#__PURE__*/React__default.createElement(ImagePickerPreview, {
-    file: file,
-    onError: onPreviewError
+    file: file
   })), /*#__PURE__*/React__default.createElement(UploadedImagePickerItem, {
-    imageSize: imageSize,
+    imageSize: file.size,
     file: file,
     isValid: !(errors !== null && errors !== void 0 && errors.length),
     onFileDelete: handleOnFileDelete
   })), isDragOver && /*#__PURE__*/React__default.createElement(ImagePickerDragOverPlaceholder, {
     onDropFile: onDropFile
   }))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, "".concat(t('No preview'))), /*#__PURE__*/React__default.createElement(ImagePickerDeleteButton, {
-    onFileDelete: onFileDelete
+    onFileDelete: handleOnFileDelete
   }))) : (/*#__PURE__*/React__default.createElement(ImagePickerInput, {
     isDragOver: isDragOver,
     allowedExtensions: allowedExtensions,
@@ -157,7 +90,11 @@ var ImagePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (_ref, ref)
     onDropFile: onDropFile
   })), /*#__PURE__*/React__default.createElement("input", {
     className: "aurora-hidden",
-    onChange: onFileChange,
+    onChange: function onChange(e) {
+      var _e$target$files$, _e$target$files;
+      updateFile((_e$target$files$ = (_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files[0]) !== null && _e$target$files$ !== void 0 ? _e$target$files$ : null);
+      e.target.value = '';
+    },
     id: id,
     ref: inputRef,
     type: "file",
@@ -166,10 +103,7 @@ var ImagePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (_ref, ref)
   }))), errors && /*#__PURE__*/React__default.createElement(ErrorList, {
     errors: errors
   }));
-}), function (prev, curr) {
-  var _prev$initialFile, _curr$initialFile, _prev$initialFile2, _curr$initialFile2;
-  return ((_prev$initialFile = prev.initialFile) === null || _prev$initialFile === void 0 ? void 0 : _prev$initialFile.fileUrl) === ((_curr$initialFile = curr.initialFile) === null || _curr$initialFile === void 0 ? void 0 : _curr$initialFile.fileUrl) && ((_prev$initialFile2 = prev.initialFile) === null || _prev$initialFile2 === void 0 ? void 0 : _prev$initialFile2.fileName) === ((_curr$initialFile2 = curr.initialFile) === null || _curr$initialFile2 === void 0 ? void 0 : _curr$initialFile2.fileName) && prev.errors === curr.errors && prev.editedImageResult === curr.editedImageResult && prev.topButtons === curr.topButtons;
-});
+}));
 ImagePicker.displayName = 'ImagePicker';
 
 export { ImagePicker };

package/build/esm/packages/aurora/src/components/image_picker/image_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/image_picker/image_picker_types.d.ts

@@ -1,34 +1,33 @@
 import { IMAGE_PICKER_EXTENSIONS, MIME_FILE_EXTENSIONS } from './image_picker_constants';
-import React, { ChangeEvent, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { TControlErrors } from "../control/control_types";
+export declare type TImagePickerExtension = typeof IMAGE_PICKER_EXTENSIONS[keyof typeof IMAGE_PICKER_EXTENSIONS];
+export declare type TMimeFileExtension = typeof MIME_FILE_EXTENSIONS[keyof typeof MIME_FILE_EXTENSIONS];
 export declare type TImagePickerFile = {
-    fileUrl: string;
     fileName: string;
+    fileUrl: string;
 };
-export declare type TImagePickerExtension = typeof IMAGE_PICKER_EXTENSIONS[keyof typeof IMAGE_PICKER_EXTENSIONS];
-export declare type TMimeFileExtension = typeof MIME_FILE_EXTENSIONS[keyof typeof MIME_FILE_EXTENSIONS];
 export declare type ImagePickerFileObject = {
-    fileList: FileList | null;
-    fileAsDataUrl?: string | ArrayBuffer | null;
+    fileName: string;
+    fileUrl: string;
+    fileExtension: string;
+    fileDataUrl: string | null;
+    size: {
+        width: number;
+        height: number;
+    } | null;
 };
 export interface IImagePicker {
     id: string;
     name?: string;
     className?: string;
-    onChange?: (file: ImagePickerFileObject) => void;
+    onChange?: (file: File) => void;
     allowedExtensions?: TImagePickerExtension[];
     allowedExtensionsLabel?: string;
-    initialFile?: TImagePickerFile;
     errors?: TControlErrors;
     onError?: (errors: string[]) => void;
-    onImageSizeUpdated?: (imageSize?: TImageSize) => void;
     topButtons?: ReactNode;
-    editedImageResult?: File;
-}
-export interface IImagePickerInput {
-    id: string;
-    allowedExtensions: TImagePickerExtension[];
-    isDragOver: boolean;
+    file: ImagePickerFileObject | null;
 }
 export interface IImagePickerPreviewContainer {
     children: ReactNode;
@@ -39,21 +38,14 @@ export declare type TImageSize = {
     height: number;
 };
 export interface IUseImagePicker {
+    updateFile: (file: File | null) => void;
     onDropFile: (event: React.DragEvent<HTMLDivElement>) => void;
     onDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
     onDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
-    onFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    onFileDelete: () => void;
-    onPreviewError: () => void;
-    changeFile: (files: FileList) => void;
-    file: TImagePickerFile | undefined;
-    isPreview: boolean;
     isDragOver: boolean;
 }
 export interface IUseImagePickerProps {
-    onChange?: (file: ImagePickerFileObject) => void;
-    initialFile?: TImagePickerFile;
+    onChange?: (file: File | null) => void;
     allowedExtensions?: TImagePickerExtension[];
-    inputRef: React.RefObject<HTMLInputElement>;
     onError?: (errors: string[]) => void;
 }

package/build/esm/packages/aurora/src/components/image_picker/image_picker_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"image_picker_types.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/image_picker_types.ts"],"names":[],"mappings":"AAAA,OAA8D,0BAA0B,CAAC;AACzF,OAA8C,OAAO,CAAC;AAEtD,OAA+B,yCAAyC,CAAC"}
+{"version":3,"file":"image_picker_types.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/image_picker_types.ts"],"names":[],"mappings":"AAAA,OAA8D,0BAA0B,CAAC;AACzF,OAAiC,OAAO,CAAC;AAEzC,OAA+B,yCAAyC,CAAC"}

package/build/esm/packages/aurora/src/components/image_picker/use_image_picker.d.ts

@@ -1,2 +1,2 @@
 import { IUseImagePicker, IUseImagePickerProps } from './image_picker_types';
-export declare const useImagePicker: ({ onChange, initialFile, allowedExtensions, inputRef, onError }: IUseImagePickerProps) => IUseImagePicker;
+export declare const useImagePicker: ({ onChange, allowedExtensions, onError }: IUseImagePickerProps) => IUseImagePicker;

package/build/esm/packages/aurora/src/components/image_picker/use_image_picker.js

@@ -1,55 +1,18 @@
-import { useRef, useState, useEffect } from 'react';
+import { useMemo, useState, useRef, useCallback } from 'react';
 import { i18n } from '../../i18n.js';
 import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { MIME_TYPE_TO_FILE_EXTENSIONS, IMAGE_PICKER_ERROR } from './image_picker_constants.js';
 
 var useImagePicker = function useImagePicker(_ref) {
   var onChange = _ref.onChange,
-    initialFile = _ref.initialFile,
     allowedExtensions = _ref.allowedExtensions,
-    inputRef = _ref.inputRef,
     onError = _ref.onError;
-  var fileListRef = useRef(null);
-  var _useState = useState(initialFile),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    file = _useState2[0],
-    setFile = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isDragOver = _useState4[0],
-    setDragOver = _useState4[1];
-  var _useState5 = useState(true),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isPreview = _useState6[0],
-    setPreview = _useState6[1];
-  var reader = useRef(new FileReader());
+    isDragOver = _useState2[0],
+    setDragOver = _useState2[1];
   var dragTimeoutRef = useRef(null);
-  useEffect(function () {
-    reader.current.result && getDataUrlFromFile(reader.current.result);
-    reader.current.addEventListener('load', function () {
-      return getDataUrlFromFile(reader.current.result);
-    }, false);
-    return function () {
-      return reader.current.removeEventListener('load', function () {
-        return getDataUrlFromFile(reader.current.result);
-      });
-    };
-  }, []);
-  useEffect(function () {
-    setFile(initialFile);
-  }, [initialFile]);
-  var onDropFile = function onDropFile(event) {
-    onError === null || onError === void 0 ? void 0 : onError([]);
-    event.stopPropagation();
-    event.preventDefault();
-    setDragOver(false);
-    var files = event.dataTransfer.files;
-    if (!files.length) return;
-    var isValid = validateFileExtension(allowedExtensions, files[0].type);
-    if (!isValid) return;
-    updateFile(files);
-  };
-  var validateFileExtension = function validateFileExtension(allowedExtensions, mimeType) {
+  var validateFileExtension = useCallback(function (allowedExtensions, mimeType) {
     if (!allowedExtensions) return true;
     var isValid = allowedExtensions.reduce(function (acc, extension) {
       return acc ? acc : MIME_TYPE_TO_FILE_EXTENSIONS[mimeType] === extension;
@@ -58,41 +21,28 @@ var useImagePicker = function useImagePicker(_ref) {
       onError === null || onError === void 0 ? void 0 : onError([i18n.t(IMAGE_PICKER_ERROR.invalidFileFormat)]);
     }
     return isValid;
-  };
-  var onFileChange = function onFileChange(event) {
-    changeFile(event.target.files);
-  };
-  var changeFile = function changeFile(files) {
-    onError === null || onError === void 0 ? void 0 : onError([]);
-    updateFile(files);
-  };
-  var updateFile = function updateFile(files) {
-    if (files !== null && files !== void 0 && files.length) {
-      fileListRef.current = 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])
-      });
-      var isValid = validateFileExtension(allowedExtensions, files[0].type);
-      if (isValid) onChange === null || onChange === void 0 ? void 0 : onChange({
-        fileList: files
-      });
+  }, [onError]);
+  var updateFile = useCallback(function (file) {
+    if (file) {
+      var isValid = validateFileExtension(allowedExtensions, file.type);
+      if (isValid) {
+        onError === null || onError === void 0 ? void 0 : onError([]);
+        onChange === null || onChange === void 0 ? void 0 : onChange(file);
+      }
     } else {
-      setFile(undefined);
-      onChange === null || onChange === void 0 ? void 0 : onChange({
-        fileList: files
-      });
+      onError === null || onError === void 0 ? void 0 : onError([]);
+      onChange === null || onChange === void 0 ? void 0 : onChange(null);
     }
-    setPreview(true);
-  };
-  var getDataUrlFromFile = function getDataUrlFromFile(fileReaderResult) {
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      fileList: fileListRef.current,
-      fileAsDataUrl: fileReaderResult
-    });
-  };
-  var onDragOver = function onDragOver(event) {
+  }, [allowedExtensions, onChange, onError, validateFileExtension]);
+  var onDropFile = useCallback(function (event) {
+    event.stopPropagation();
+    event.preventDefault();
+    setDragOver(false);
+    var files = event.dataTransfer.files;
+    if (!files.length) return;
+    updateFile(files[0]);
+  }, [updateFile]);
+  var onDragOver = useCallback(function (event) {
     var dt = event.dataTransfer;
     if (!dt.types || !(dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.includes('Files'))) {
       return;
@@ -102,38 +52,22 @@ var useImagePicker = function useImagePicker(_ref) {
     event.dataTransfer.dropEffect = 'copy';
     setDragOver(true);
     dragTimeoutRef.current && window.clearTimeout(dragTimeoutRef.current);
-  };
-  var onDragLeave = function onDragLeave(event) {
+  }, []);
+  var onDragLeave = useCallback(function () {
     dragTimeoutRef.current = setTimeout(function () {
       setDragOver(false);
       dragTimeoutRef.current = null;
     }, 25);
-  };
-  var onFileDelete = function onFileDelete() {
-    inputRef.current.value = '';
-    fileListRef.current = null;
-    setFile(undefined);
-    setPreview(true);
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      fileList: null,
-      fileAsDataUrl: null
-    });
-  };
-  var onPreviewError = function onPreviewError() {
-    setPreview(false);
-  };
-  return {
-    onDropFile: onDropFile,
-    onFileChange: onFileChange,
-    onDragOver: onDragOver,
-    onDragLeave: onDragLeave,
-    onFileDelete: onFileDelete,
-    onPreviewError: onPreviewError,
-    changeFile: changeFile,
-    file: file,
-    isPreview: isPreview,
-    isDragOver: isDragOver
-  };
+  }, []);
+  return useMemo(function () {
+    return {
+      updateFile: updateFile,
+      onDropFile: onDropFile,
+      onDragOver: onDragOver,
+      onDragLeave: onDragLeave,
+      isDragOver: isDragOver
+    };
+  }, [updateFile, isDragOver, onDragLeave, onDragOver, onDropFile]);
 };
 
 export { useImagePicker };

package/build/esm/packages/aurora/src/components/image_picker/use_image_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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}

package/build/esm/packages/aurora/src/components/resizable/components/resizable_container.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { IResizableContainerProps } from '../resizable_container_types';
+export declare const ResizableContainer: React.FC<IResizableContainerProps>;

package/build/esm/packages/aurora/src/components/resizable/components/resizable_container.js

@@ -0,0 +1,34 @@
+import React__default from 'react';
+import { ResizableHandle } from './resizable_handle.js';
+
+var ResizableContainer = function ResizableContainer(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    variant = _ref.variant,
+    onResize = _ref.onResize,
+    children = _ref.children;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "aurora-flex aurora-relative ".concat(className),
+    style: style
+  }, variant === 'horizontal' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ResizableHandle, {
+    position: "left",
+    onMouseDown: function onMouseDown(e) {
+      return onResize(e, 'left');
+    }
+  }), /*#__PURE__*/React__default.createElement(ResizableHandle, {
+    position: "right",
+    onMouseDown: function onMouseDown(e) {
+      return onResize(e, 'right');
+    }
+  }))) : (/*#__PURE__*/React__default.createElement(ResizableHandle, {
+    position: variant,
+    onMouseDown: function onMouseDown(e) {
+      return onResize(e, variant);
+    }
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "aurora-flex-1"
+  }, children));
+};
+
+export { ResizableContainer };
+//# sourceMappingURL=resizable_container.js.map

package/build/esm/packages/aurora/src/components/resizable/components/resizable_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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/resizable/components/resizable_handle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IResizableHandleProps {
+    position: 'left' | 'right';
+    className?: string;
+    onMouseDown: (e: React.MouseEvent) => void;
+}
+export declare const ResizableHandle: React.FC<IResizableHandleProps>;
+export {};

package/build/esm/packages/aurora/src/components/resizable/components/resizable_handle.js

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import { cn } from '../../../utilities/cn.js';
+import { RESIZABLE_CONTAINER_RESIZER_CLASS, HANDLE_HOVER_SPACE, RESIZE_HANDLE_VARIANTS } from '../resizable_container_constants.js';
+import { useResizableContext } from '../hooks/use_resizable_context.js';
+
+var ResizableHandle = function ResizableHandle(_ref) {
+  var position = _ref.position,
+    className = _ref.className,
+    onMouseDown = _ref.onMouseDown;
+  var _useResizableContext = useResizableContext(),
+    isResizing = _useResizableContext.isResizing;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: cn("".concat(RESIZABLE_CONTAINER_RESIZER_CLASS, " ").concat(className, " aurora-absolute aurora-top-0 aurora-bottom-0 aurora-cursor-col-resize aurora-transition-opacity aurora-duration-200 aurora-z-[99999] aurora-opacity-0 hover:aurora-opacity-100"), {
+      'aurora-opacity-100': isResizing
+    }),
+    style: {
+      paddingLeft: "".concat(HANDLE_HOVER_SPACE, "px"),
+      paddingRight: "".concat(HANDLE_HOVER_SPACE, "px"),
+      left: position === RESIZE_HANDLE_VARIANTS.left ? "-".concat(HANDLE_HOVER_SPACE, "px") : '',
+      right: position === RESIZE_HANDLE_VARIANTS.right ? "-".concat(HANDLE_HOVER_SPACE, "px") : ''
+    },
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cn('aurora-w-[2px] aurora-h-full aurora-bg-primary', {
+      'aurora-bg-primary-hover': isResizing
+    })
+  }));
+};
+
+export { ResizableHandle };
+//# sourceMappingURL=resizable_handle.js.map

package/build/esm/packages/aurora/src/components/resizable/components/resizable_handle.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/esm/packages/aurora/src/components/resizable/components/resizable_pure.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { IResizablePureProps } from '../resizable_container_types';
+export declare const ResizablePure: React.FC<IResizablePureProps>;

package/build/esm/packages/aurora/src/components/resizable/components/resizable_pure.js

@@ -0,0 +1,33 @@
+import React__default, { useEffect } from 'react';
+import { RESIZE_HANDLE_VARIANTS } from '../resizable_container_constants.js';
+import { useResizableContext } from '../hooks/use_resizable_context.js';
+import { ResizableContainer } from './resizable_container.js';
+
+var ResizablePure = function ResizablePure(_ref) {
+  var children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? RESIZE_HANDLE_VARIANTS.left : _ref$variant,
+    widthConfig = _ref.widthConfig,
+    onResize = _ref.onResize,
+    className = _ref.className;
+  var _useResizableContext = useResizableContext(),
+    currentWidth = _useResizableContext.currentWidth,
+    handleResizing = _useResizableContext.handleResizing,
+    isResizing = _useResizableContext.isResizing;
+  useEffect(function () {
+    onResize === null || onResize === void 0 ? void 0 : onResize(currentWidth, isResizing);
+  }, [currentWidth, isResizing, onResize]);
+  return /*#__PURE__*/React__default.createElement(ResizableContainer, {
+    className: className || '',
+    style: {
+      width: currentWidth,
+      minWidth: widthConfig.min,
+      maxWidth: widthConfig.max
+    },
+    variant: variant,
+    onResize: handleResizing
+  }, children);
+};
+
+export { ResizablePure };
+//# sourceMappingURL=resizable_pure.js.map

package/build/esm/packages/aurora/src/components/resizable/components/resizable_pure.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;"}

package/build/esm/packages/aurora/src/components/resizable/hooks/use_resizable.d.ts

@@ -0,0 +1,7 @@
+import type { TContainerWidthConfig, TResizerVariant, TResizingDirection } from '../resizable_container_types';
+declare const useResizable: (name: string, variant: TResizerVariant, widthConfig: TContainerWidthConfig) => {
+    isResizing: boolean;
+    currentWidth: number;
+    handleResizing: (e: React.MouseEvent, direction: TResizingDirection) => void;
+};
+export default useResizable;