@dreamcommerce/aurora 3.1.30 → 3.1.32-1

package/README.md

@@ -1,135 +1 @@
 # Aurora
-
-## Jak odpalić?
-
-1. `yarn install`
-2. `yarn run start` - odpala Rollupa, który nasłuchuje na folder src (tutaj developujemy komponenty)
-3. `yarn run storybook` - w osobnej zakladace odpalamy storybooka, tutaj tworzymy tzw "story" dla naszego nowo
-   tworzonego komponentu. Dzięki temu możemy sobie developować nasz komponent w izolacji. Proponuje się wzorować na tym
-   co już gotowe.
-
-Taki pakiet możemy zainstlować w swoim projekcie przez użycie tagu beta wrzucając do
-package.json `@dreamcommerce/aurora: "0.2.10-1"`. Co jeśli pracujemy dalej? Odpalamy znowu
-`yarn version --prerelease`
-To uaktualni nam wersję np z `0.2.10-1` do `0.2.10-2` i znowu
-`yarn npm publish --tag beta --access public`
-
-## Testowanie:
-
-Posiadamy dwa rodzaje testów, standardowe unit testy oraz wizualne. Jak je odpalić:
-
-1. `yarn run tests:unit`
-2. `yarn run tests:visual`
-
-Co gdy celowo zmieniamy wyglad komponentu i testy wizualne nie przechodza? 
-Wtedy musimy zaktualizować pliki wzorcowe:
-
-1. `yarn run update-visuals` aktualizuje pliki wzorcowe zmian wizualnych (.png)
-
-## Jak piszemy componenty
-
-### importy
-
-1. W pierwszej kolejnosci importujemy rzeczy zewnętrzne (React, lodash, classnames itp)
-2. Style komponentu
-3. Typowanie
-4. Rzeczy wewnętrzne komponentu
-
-### Komponenty
-
-- do wiekszosci komponentów, korzystamy z opensourcowej libki https://ui.shadcn.com. Kod komponentóœ kopiujemy manualnie i dostosowujemy do naszych potrzeb.
-
-#### Struktura folderów i plików komponentu
-
-- Komponent umieszczamy w folderze `src/components`
-- W nazewnictwie plików i folderów stosujemy `snake_case`
-- Nazwy prefixujemy nazwa komponentu
-- Nazwa komponentu powinna być w liczbe pojedyńczej (button, color_picker, heading itp);
-- struktura komponentu:
-
-```
-    - components (komponenty wchodza w sklad glownego komponetu, nieuzywalne osobno)
-        - somethings.tsx
-        - ...
-    - hooks (folder zawierajacy hooki specyficzne dla danego elementu)
-        - [nazwa-komponentu]_useValues.ts
-        - ...
-    - [nazwa-komponentu]_constants.ts (opcjonalnie, stałe dla tego komponentu)
-    - [nazwa-komponentu]_context.tsx (opcjonalne, context elementu)
-    - [nazwa-komponentu].tsx
-    - [nazwa-komponentu]_types.ts
-    - [nazwa-komponentu]_utils.ts (opcjonalnie, helpery, funkcje danego komponetu)
-```
-
-#### Style
-
-**Autocomplete dla funkcji cva i cx**
-https://cva.style/docs/getting-started/installation#tailwind-css
-
-- do stylowania używamy tailwindcss
-- dostpene tokeny dla różnych wartosci stili (np. `colors`, `spacing`, `fontSizes` itp) znajdują się w pliku `tailwind.config.js`
-
-## Uwagi ogólne
-
-Nazwy metod, zmiennych powinny odpowiadać temu co kryje się za daną zmienną lub co robi metoda. Metody powinny
-realizowac jedna rzeczy. Zmienne typu boolean powinny zawsze zaczynac sie od `is` lub `has`.
-
-## Tymczasowe na czas developmentu westa
-
-- jako, ze wyczysciłam folder z komponentami bo gryzły sie lessy. Niektóre komponenty bd kopiować w zależnosci od kejsu. Np takie taby albo skin-tree bd raczej kopiowane z aurory na tagu 2.0. Nie chcemy zmieniać api tych komponentó
-- czesc bardziej skomplikowanych komponentów bd najprawdopodbniej z osobnych libek, np. select
-
-### Nowa struktura pod storybooka
-
-1. **Feedback and indicators**
-   1. Loader
-   2. Message-box(infobox)
-   3. badge
-   4. flash-messanger
-2. **Table**
-   1. table
-3. **Text**
-   1. Typography
-4. **Selection and Input**
-   1. Checkbox
-   2. Checkbox-switch
-   3. Color-picker
-   4. Date-picker
-   5. File-Picker
-   6. Input
-   7. Select
-   8. MultiSelect
-   9. Radio
-   10. Radio-group
-   11. Textarea
-   12. xhrImagePicker
-   13. Values Syncer
-   14. Hint - ma zostac tyko jeden, juz nie bd tooltip i hint osobno
-   15. Button
-5. **Layout**
-   1. Grid
-   2. Stack
-   3. Box
-   4. Divider 
-   5. Spacing
-6. **Modal**
-7. **Navigation**
-   1. Link
-   2. BreadCrumbs
-   3. Pagination
-   4. Tabs
-   5. Slide
-8. **Lists**
-   1. Search List
-   2. Tree
-   3. Action List
-9. **Surface**
-   1. Accordion
-   2. Dropdown
-   3. Paper - box + shadow
-10. **Utils**
-    1. Scroll Syncer
-    2. Accordion groups
-    3. With Loader
-11. **Hooks**
-    1. ...

package/build/cjs/packages/aurora/src/components/controls/xhr_image_picker_control/xhr_image_picker_control.js

@@ -25,23 +25,16 @@ var XhrImagePickerControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     errors = _ref.errors,
     tooltip = _ref.tooltip,
-    onUploaded = _ref.onUploaded,
     helperText = _ref.helperText,
-    onImageSizeUpdated = _ref.onImageSizeUpdated,
     ImageEditor = _ref.ImageEditor,
     onError = _ref.onError;
-  var handleControlError = function handleControlError(errors) {
+  var handleControlError = React.useCallback(function (errors) {
     onError === null || onError === void 0 ? void 0 : onError(errors);
-  };
-  var handleControlChange = function handleControlChange(file) {
-    var fileList = file.fileList,
-      fileAsDataUrl = file.fileAsDataUrl;
+  }, [onError]);
+  var handleControlChange = React.useCallback(function (val) {
     onError === null || onError === void 0 ? void 0 : onError([]);
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      fileList: fileList,
-      fileAsDataUrl: fileAsDataUrl
-    });
-  };
+    onChange === null || onChange === void 0 ? void 0 : onChange(val);
+  }, [onChange, onError]);
   return /*#__PURE__*/React__default['default'].createElement(control.Control, {
     classname: "aurora-flex-col"
   }, label$1 ? (/*#__PURE__*/React__default['default'].createElement(label.Label, {
@@ -59,8 +52,6 @@ var XhrImagePickerControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     initialFile: initialFile,
     className: className,
     errors: errors,
-    onUploaded: onUploaded,
-    onImageSizeUpdated: onImageSizeUpdated,
     ImageEditor: ImageEditor,
     ref: ref
   }), helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, null, helperText) : null);

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

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

@@ -10,7 +10,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ImagePickerPreview = function ImagePickerPreview(_ref) {
   var file = _ref.file,
-    onError = _ref.onError,
     onLoad = _ref.onLoad;
   return /*#__PURE__*/React__default['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"
@@ -18,7 +17,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/cjs/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;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;"}

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

@@ -29,94 +29,28 @@ var ImagePicker = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
     _ref$allowedExtension = _ref.allowedExtensions,
     allowedExtensions = _ref$allowedExtension === void 0 ? [image_picker_constants.IMAGE_PICKER_EXTENSIONS.WEBP, image_picker_constants.IMAGE_PICKER_EXTENSIONS.JPG, image_picker_constants.IMAGE_PICKER_EXTENSIONS.PNG, image_picker_constants.IMAGE_PICKER_EXTENSIONS.GIF, image_picker_constants.IMAGE_PICKER_EXTENSIONS.SVG, image_picker_constants.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.useTranslation(),
     _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
   var inputRef = /*#__PURE__*/React.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 = use_image_picker.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 = React.useState(undefined),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    imageSize = _useState2[0],
-    setImageSize = _useState2[1];
   var acceptFiles = image_picker_utils.getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
-  React.useEffect(function () {
-    initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
-  }, [initialFile]);
-  React.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 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(url) {
-      var img;
-      return _rollupPluginBabelHelpers.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['default'].createElement("div", {
     className: "aurora-mb-1"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -146,17 +80,16 @@ var ImagePicker = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
   }, topButtons && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, topButtons), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-relative"
   }, /*#__PURE__*/React__default['default'].createElement(image_picker_preview.ImagePickerPreview, {
-    file: file,
-    onError: onPreviewError
+    file: file
   })), /*#__PURE__*/React__default['default'].createElement(uploaded_image_picker_item.UploadedImagePickerItem, {
-    imageSize: imageSize,
+    imageSize: file.size,
     file: file,
     isValid: !(errors !== null && errors !== void 0 && errors.length),
     onFileDelete: handleOnFileDelete
   })), isDragOver && /*#__PURE__*/React__default['default'].createElement(image_picker_drag_over_placeholder.ImagePickerDragOverPlaceholder, {
     onDropFile: onDropFile
   }))) : (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", null, "".concat(t('No preview'))), /*#__PURE__*/React__default['default'].createElement(image_picker_delete_button.ImagePickerDeleteButton, {
-    onFileDelete: onFileDelete
+    onFileDelete: handleOnFileDelete
   }))) : (/*#__PURE__*/React__default['default'].createElement(image_picker_input.ImagePickerInput, {
     isDragOver: isDragOver,
     allowedExtensions: allowedExtensions,
@@ -165,7 +98,11 @@ var ImagePicker = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
     onDropFile: onDropFile
   })), /*#__PURE__*/React__default['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",
@@ -174,10 +111,7 @@ var ImagePicker = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
   }))), errors && /*#__PURE__*/React__default['default'].createElement(error_list.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';
 
 exports.ImagePicker = ImagePicker;

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,6BAA6B,iEAAqE;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/image_picker/use_image_picker.js

@@ -9,51 +9,14 @@ var image_picker_constants = require('./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 = React.useRef(null);
-  var _useState = React.useState(initialFile),
+  var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    file = _useState2[0],
-    setFile = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    isDragOver = _useState4[0],
-    setDragOver = _useState4[1];
-  var _useState5 = React.useState(true),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    isPreview = _useState6[0],
-    setPreview = _useState6[1];
-  var reader = React.useRef(new FileReader());
+    isDragOver = _useState2[0],
+    setDragOver = _useState2[1];
   var dragTimeoutRef = React.useRef(null);
-  React.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);
-      });
-    };
-  }, []);
-  React.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 = React.useCallback(function (allowedExtensions, mimeType) {
     if (!allowedExtensions) return true;
     var isValid = allowedExtensions.reduce(function (acc, extension) {
       return acc ? acc : image_picker_constants.MIME_TYPE_TO_FILE_EXTENSIONS[mimeType] === extension;
@@ -62,41 +25,28 @@ var useImagePicker = function useImagePicker(_ref) {
       onError === null || onError === void 0 ? void 0 : onError([i18n.i18n.t(image_picker_constants.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 = React.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 = React.useCallback(function (event) {
+    event.stopPropagation();
+    event.preventDefault();
+    setDragOver(false);
+    var files = event.dataTransfer.files;
+    if (!files.length) return;
+    updateFile(files[0]);
+  }, [updateFile]);
+  var onDragOver = React.useCallback(function (event) {
     var dt = event.dataTransfer;
     if (!dt.types || !(dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.includes('Files'))) {
       return;
@@ -106,38 +56,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 = React.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 React.useMemo(function () {
+    return {
+      updateFile: updateFile,
+      onDropFile: onDropFile,
+      onDragOver: onDragOver,
+      onDragLeave: onDragLeave,
+      isDragOver: isDragOver
+    };
+  }, [updateFile, isDragOver, onDragLeave, onDragOver, onDropFile]);
 };
 
 exports.useImagePicker = useImagePicker;

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

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

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var resizable_handle = require('./resizable_handle.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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['default'].createElement("div", {
+    className: "aurora-flex aurora-relative ".concat(className),
+    style: style
+  }, variant === 'horizontal' ? (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(resizable_handle.ResizableHandle, {
+    position: "left",
+    onMouseDown: function onMouseDown(e) {
+      return onResize(e, 'left');
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(resizable_handle.ResizableHandle, {
+    position: "right",
+    onMouseDown: function onMouseDown(e) {
+      return onResize(e, 'right');
+    }
+  }))) : (/*#__PURE__*/React__default['default'].createElement(resizable_handle.ResizableHandle, {
+    position: variant,
+    onMouseDown: function onMouseDown(e) {
+      return onResize(e, variant);
+    }
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex-1"
+  }, children));
+};
+
+exports.ResizableContainer = ResizableContainer;
+//# sourceMappingURL=resizable_container.js.map

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

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

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('../../../utilities/cn.js');
+var resizable_container_constants = require('../resizable_container_constants.js');
+var use_resizable_context = require('../hooks/use_resizable_context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ResizableHandle = function ResizableHandle(_ref) {
+  var position = _ref.position,
+    className = _ref.className,
+    onMouseDown = _ref.onMouseDown;
+  var _useResizableContext = use_resizable_context.useResizableContext(),
+    isResizing = _useResizableContext.isResizing;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: cn.cn("".concat(resizable_container_constants.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(resizable_container_constants.HANDLE_HOVER_SPACE, "px"),
+      paddingRight: "".concat(resizable_container_constants.HANDLE_HOVER_SPACE, "px"),
+      left: position === resizable_container_constants.RESIZE_HANDLE_VARIANTS.left ? "-".concat(resizable_container_constants.HANDLE_HOVER_SPACE, "px") : '',
+      right: position === resizable_container_constants.RESIZE_HANDLE_VARIANTS.right ? "-".concat(resizable_container_constants.HANDLE_HOVER_SPACE, "px") : ''
+    },
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: cn.cn('aurora-w-[2px] aurora-h-full aurora-bg-primary', {
+      'aurora-bg-primary-hover': isResizing
+    })
+  }));
+};
+
+exports.ResizableHandle = ResizableHandle;
+//# sourceMappingURL=resizable_handle.js.map

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

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

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var resizable_container_constants = require('../resizable_container_constants.js');
+var use_resizable_context = require('../hooks/use_resizable_context.js');
+var resizable_container = require('./resizable_container.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ResizablePure = function ResizablePure(_ref) {
+  var children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? resizable_container_constants.RESIZE_HANDLE_VARIANTS.left : _ref$variant,
+    widthConfig = _ref.widthConfig,
+    onResize = _ref.onResize,
+    className = _ref.className;
+  var _useResizableContext = use_resizable_context.useResizableContext(),
+    currentWidth = _useResizableContext.currentWidth,
+    handleResizing = _useResizableContext.handleResizing,
+    isResizing = _useResizableContext.isResizing;
+  React.useEffect(function () {
+    onResize === null || onResize === void 0 ? void 0 : onResize(currentWidth, isResizing);
+  }, [currentWidth, isResizing, onResize]);
+  return /*#__PURE__*/React__default['default'].createElement(resizable_container.ResizableContainer, {
+    className: className || '',
+    style: {
+      width: currentWidth,
+      minWidth: widthConfig.min,
+      maxWidth: widthConfig.max
+    },
+    variant: variant,
+    onResize: handleResizing
+  }, children);
+};
+
+exports.ResizablePure = ResizablePure;
+//# sourceMappingURL=resizable_pure.js.map