@dreamcommerce/aurora 3.0.0-62 → 3.0.0-64

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

@@ -0,0 +1,9 @@
+import { TValuesSyncerProps } from "../../values_syncer/values_syncer_types";
+import React from "react";
+export declare type TValuesSyncerControlProps = TValuesSyncerProps & {
+    label?: string | React.ReactNode;
+    reqiured?: boolean;
+    tooltip?: string | React.ReactNode;
+    helperText?: string | React.ReactNode;
+    errors?: string | string[];
+};

package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control_types.js

@@ -0,0 +1,3 @@
+import "@auroraComponents/values_syncer/values_syncer_types";
+import "react";
+//# sourceMappingURL=values_syncer_control_types.js.map

package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"values_syncer_control_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/controls/values_syncer_control/values_syncer_control_types.ts"],"names":[],"mappings":"AAAA,OAAmC,qDAAqD,CAAC;AACzF,OAAkB,OAAO,CAAC"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IXhrImagePickerControl } from './xhr_image_picker_control_types';
+export declare const XhrImagePickerControl: React.FC<IXhrImagePickerControl>;

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

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { Control } from '@auroraComponents/control/control';
+import { Label } from '@auroraComponents/label/label';
+import { ErrorList } from '@auroraComponents/error_list/error_list';
+import '@auroraComponents/control/control_types';
+import './xhr_image_picker_control_types';
+import { XhrImagePicker } from '@auroraComponents/xhr_image_picker/xhr_image_picker';
+import '@auroraComponents/image_picker/image_picker_types';
+export const XhrImagePickerControl = ({ url, label, required, id, name, onChange, allowedExtensions, initialFile, className, errors, tooltip, onUploaded, onImageSizeUpdated, ImageEditor }) => {
+    const [, setErrors] = useState(errors);
+    const handleControlError = (errors) => {
+        setErrors(errors);
+    };
+    const handleControlChange = (file) => {
+        const { fileList, fileAsDataUrl } = file;
+        setErrors(null);
+        onChange?.({ fileList, fileAsDataUrl });
+    };
+    return (React.createElement(Control, { classname: "aurora-flex-col" },
+        label && (React.createElement(Label, { htmlFor: id, required: required, tooltip: tooltip }, label)),
+        React.createElement(XhrImagePicker, { url: url, id: id, name: name, onChange: handleControlChange, onError: handleControlError, allowedExtensions: allowedExtensions, initialFile: initialFile, className: className, errors: errors, onUploaded: onUploaded, onImageSizeUpdated: onImageSizeUpdated, ImageEditor: ImageEditor }),
+        errors && React.createElement(ErrorList, { errors: errors })));
+};
+//# sourceMappingURL=xhr_image_picker_control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xhr_image_picker_control.js","sourceRoot":"","sources":["../../../../../../../../src/components/controls/xhr_image_picker_control/xhr_image_picker_control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAA+B,yCAAyC,CAAC;AACzE,OAAuC,kCAAkC,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AACrF,OAAuC,mDAAmD,CAAC;AAE3F,MAAM,CAAC,MAAM,qBAAqB,GAAqC,CAAC,EACpE,GAAG,EACH,KAAK,EACL,QAAQ,EACR,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,MAAM,EACN,OAAO,EACP,UAAU,EACV,kBAAkB,EAClB,WAAW,EACd,EAAE,EAAE;IACD,MAAM,CAAC,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAwB,MAA+B,CAAC,CAAC;IAEvF,MAAM,kBAAkB,GAAG,CAAC,MAAgB,EAAE,EAAE;QAC5C,SAAS,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,IAA4B,EAAE,EAAE;QACzD,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;QACzC,SAAS,CAAC,IAAI,CAAC,CAAC;QAEhB,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,OAAO,IAAC,SAAS,EAAC,iBAAiB;QAC/B,KAAK,IAAI,CACN,oBAAC,KAAK,IAAC,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,IACnD,KAAK,CACF,CACX;QACD,oBAAC,cAAc,IACX,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,mBAAmB,EAC7B,OAAO,EAAE,kBAAkB,EAC3B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,kBAAkB,EAAE,kBAAkB,EACtC,WAAW,EAAE,WAAW,GAC1B;QACD,MAAM,IAAI,oBAAC,SAAS,IAAC,MAAM,EAAE,MAAM,GAAI,CAClC,CACb,CAAC;AACN,CAAC,CAAC"}

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

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

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +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,OAAiE,mDAAmD,CAAC;AACrH,OAAmC,2DAA2D,CAAC;AAC/F,OAA0B,OAAO,CAAC"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { DIVIDER_ORIENTATION } from './divider_constants.js';
@@ -6,7 +6,7 @@ import { dividerVariants } from './divider_variants.js';
 import { Root } from '@radix-ui/react-separator';
 
 var _excluded = ["className", "orientation", "color", "thickness", "height", "maxHeight", "minHeight", "width", "maxWidth", "minWidth", "variant", "decorative"];
-var Divider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Divider = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$orientation = _ref.orientation,
     orientation = _ref$orientation === void 0 ? DIVIDER_ORIENTATION.horizontal : _ref$orientation,
@@ -22,7 +22,7 @@ var Divider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$decorative = _ref.decorative,
     decorative = _ref$decorative === void 0 ? true : _ref$decorative,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Root, _objectSpread2({
+  return /*#__PURE__*/React__default.createElement(Root, _objectSpread2({
     ref: ref,
     decorative: decorative,
     orientation: orientation,

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { BUTTON_SIZES } from '../button/button_constants.js';
@@ -7,7 +7,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { iconButtonVariants } from './icon_button_variants.js';
 
 var _excluded = ["className", "variant", "size", "asChild", "Icon", "children"];
-var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var IconButton = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     variant = _ref.variant,
     size = _ref.size,
@@ -17,7 +17,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   var Comp = asChild ? Slot : 'button';
-  return /*#__PURE__*/React.createElement(Comp, _objectSpread2({
+  return /*#__PURE__*/React__default.createElement(Comp, _objectSpread2({
     className: cn(buttonVariants({
       variant: variant,
       size: size,
@@ -26,7 +26,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       size: size
     })),
     ref: ref
-  }, props), Icon ? /*#__PURE__*/React.createElement(Icon, {
+  }, props), Icon ? /*#__PURE__*/React__default.createElement(Icon, {
     size: size === BUTTON_SIZES.s ? '14' : '16'
   }) : children);
 });

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const ImagePickerInput: React.FC<{
+    id: string;
+    onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
+    allowedExtensions: string[];
+    isDragOver: boolean;
+}>;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { UploadLineIcon } from '@auroraAssets/icons/upload_icon';
+import { cn } from '@auroraUtilities/cn';
+export const ImagePickerInput = ({ id, onDropFile, onDragOver, onDragLeave, allowedExtensions, isDragOver }) => {
+    const [t] = useTranslation();
+    return (React.createElement("label", { htmlFor: id, onDrop: onDropFile, onDragOver: onDragOver, onDragLeave: onDragLeave, className: "aurora-relative aurora-flex aurora-items-center aurora-justify-center aurora-w-full aurora-h-full aurora-cursor-pointer aurora-p-1 aurora-pb-2 aurora-group" },
+        isDragOver && (React.createElement("div", { className: cn('aurora-absolute aurora-inset-0 aurora-bg-neutral-0 aurora-border-2 aurora-border-primary aurora-rounded-8 aurora-z-1 aurora-pointer-events-none') },
+            React.createElement("div", { className: " aurora-w-full aurora-h-full aurora-bg-primary-transparent aurora-flex aurora-items-center aurora-justify-center" },
+                React.createElement("span", { className: "aurora-text-xs aurora-text-interactive" }, `${t('Drop file here')}`)))),
+        React.createElement("div", { className: cn('aurora-flex aurora-flex-col aurora-items-center aurora-w-full aurora-h-full aurora-pt-4 aurora-pb-3 aurora-px-1') },
+            React.createElement(UploadLineIcon, { className: "aurora-w-5 aurora-h-5 aurora-fill-subtle group-hover:aurora-fill-primary aurora-mb-2" }),
+            React.createElement("div", { className: "aurora-text-xs aurora-text-interactive aurora-font-semibold" }, `${t('Drag a file here or browse')}`),
+            React.createElement("span", { className: "aurora-text-xs aurora-text-subtle-light aurora-font-normal aurora-text-center" },
+                `${t('supported format')}`,
+                ": ",
+                allowedExtensions.map((extension) => `*.${extension}`).join(', ')))));
+};
+//# sourceMappingURL=image_picker_input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image_picker_input.js","sourceRoot":"","sources":["../../../../../../../../src/components/image_picker/components/image_picker_input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAEzC,MAAM,CAAC,MAAM,gBAAgB,GAOxB,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,EAAE,EAAE,EAAE;IAChF,MAAM,CAAC,CAAC,CAAC,GAAG,cAAc,EAAE,CAAC;IAE7B,OAAO,CACH,+BACI,OAAO,EAAE,EAAE,EACX,MAAM,EAAE,UAAU,EAClB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAC,6JAA6J;QAEtK,UAAU,IAAI,CACX,6BACI,SAAS,EAAE,EAAE,CACT,iJAAiJ,CACpJ;YAED,6BAAK,SAAS,EAAC,kHAAkH;gBAC7H,8BAAM,SAAS,EAAC,wCAAwC,IAAE,GAAG,CAAC,CAAC,gBAAgB,CAAC,EAAE,CAAQ,CACxF,CACJ,CACT;QAED,6BACI,SAAS,EAAE,EAAE,CAAC,iHAAiH,CAAC;YAEhI,oBAAC,cAAc,IAAC,SAAS,EAAC,sFAAsF,GAAG;YACnH,6BAAK,SAAS,EAAC,6DAA6D,IAAE,GAAG,CAAC,CAAC,4BAA4B,CAAC,EAAE,CAAO;YACzH,8BAAM,SAAS,EAAC,+EAA+E;gBAC1F,GAAG,CAAC,CAAC,kBAAkB,CAAC,EAAE;;gBAAI,iBAAiB,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,KAAK,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAC7F,CACL,CACF,CACX,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,9 @@
+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 {};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import '../image_picker_types';
+export const ImagePickerPreview = ({ file, onError, onLoad }) => {
+    return (React.createElement("img", { className: "aurora-rounded-4 aurora-w-full aurora-h-full", alt: file.fileName, src: file?.fileUrl || '', onError: onError, onLoad: onLoad }));
+};
+//# sourceMappingURL=image_picker_preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image_picker_preview.js","sourceRoot":"","sources":["../../../../../../../../src/components/image_picker/components/image_picker_preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAiC,uBAAuB,CAAC;AAQzD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAA4B,EAAE,EAAE;IACtF,OAAO,CACH,6BACI,SAAS,EAAC,8CAA8C,EACxD,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,EAAE,OAAO,IAAI,EAAE,EACxB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,GAChB,CACL,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+declare type TUploadedImagePickerItemProps = {
+    file: any;
+    isValid: boolean;
+    imageSize: any;
+    onFileDelete: () => void;
+};
+export declare const UploadedImagePickerItem: ({ imageSize, onFileDelete, isValid, file }: TUploadedImagePickerItemProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,19 @@
+import { DeleteBinLineIcon } from '@auroraAssets/icons/delete_bin_icon';
+import { FileUtils } from '@dreamcommerce/utilities';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+export const UploadedImagePickerItem = ({ imageSize, onFileDelete, isValid, file }) => {
+    const [t] = useTranslation();
+    const imageName = FileUtils.getFileName(file.fileName);
+    const imageExtension = FileUtils.getFileExtension(file.fileName);
+    const imageWidth = imageSize && imageSize.width;
+    const imageHeight = imageSize && imageSize.height;
+    return (React.createElement("div", { className: 'aurora-flex aurora-justify-between aurora-items-center aurora-pt-2 aurora-px-1 aurora-gap-1' },
+        React.createElement("div", { className: 'aurora-text-xs aurora-text-subtle aurora-overflow-hidden aurora-text-ellipsis' }, isValid && (React.createElement(React.Fragment, null,
+            imageName,
+            `.${imageExtension} (${imageWidth}x${imageHeight}px)`))),
+        React.createElement("button", { "data-test-id": "image-picker-remove-button", onClick: onFileDelete, className: 'aurora-flex aurora-items-center aurora-gap-1 aurora-border aurora-border-danger aurora-rounded-full aurora-px-3 aurora-py-[6px]' },
+            React.createElement(DeleteBinLineIcon, { className: "aurora-w-4 aurora-h-4 aurora-fill-danger" }),
+            React.createElement("span", { className: 'aurora-text-xs aurora-text-danger aurora-font-semibold' }, `${t('Remove')}`))));
+};
+//# sourceMappingURL=uploaded_image_picker_item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"uploaded_image_picker_item.js","sourceRoot":"","sources":["../../../../../../../../src/components/image_picker/components/uploaded_image_picker_item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAS/C,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAiC,EAAE,EAAE;IACjH,MAAM,CAAC,CAAC,CAAC,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,SAAS,GAAG,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACvD,MAAM,cAAc,GAAG,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,UAAU,GAAG,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC;IAChD,MAAM,WAAW,GAAG,SAAS,IAAI,SAAS,CAAC,MAAM,CAAC;IAElD,OAAO,CACH,6BAAK,SAAS,EAAC,6FAA6F;QACxG,6BAAK,SAAS,EAAC,+EAA+E,IACzF,OAAO,IAAI,CACR;YACK,SAAS;YACT,IAAI,cAAc,KAAK,UAAU,IAAI,WAAW,KAAK,CACvD,CACN,CACC;QAEN,gDAAqB,4BAA4B,EAAC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAC,iIAAiI;YAChN,oBAAC,iBAAiB,IAAC,SAAS,EAAC,0CAA0C,GAAG;YAC1E,8BAAM,SAAS,EAAC,wDAAwD,IAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAQ,CAC7F,CACP,CACT,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IImagePicker } from './image_picker_types';
+export declare const ImagePicker: React.FC<IImagePicker>;

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

@@ -0,0 +1,76 @@
+import React, { createRef, memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ErrorList } from '@auroraComponents/error_list/error_list';
+import { ImagePickerPreview } from './components/image_picker_preview';
+import { IMAGE_PICKER_EXTENSIONS } from './image_picker_constants';
+import './image_picker_types';
+import { ImagePickerInput } from './components/image_picker_input';
+import { UploadedImagePickerItem } from './components/uploaded_image_picker_item';
+import { getAcceptFilesParametersFromAllowedExtensions } from './image_picker_utils';
+import { useImagePicker } from './use_image_picker';
+import { cn } from '@auroraUtilities/cn';
+export const ImagePicker = memo(({ id, onChange, onError, errors: initialErrors, allowedExtensions = [
+    IMAGE_PICKER_EXTENSIONS.WEBP,
+    IMAGE_PICKER_EXTENSIONS.JPG,
+    IMAGE_PICKER_EXTENSIONS.PNG,
+    IMAGE_PICKER_EXTENSIONS.GIF,
+    IMAGE_PICKER_EXTENSIONS.SVG,
+    IMAGE_PICKER_EXTENSIONS.JPEG
+], initialFile, name, onImageSizeUpdated, topButtons, editedImageResult }) => {
+    const [t] = useTranslation();
+    const inputRef = createRef();
+    const handleOnChange = (ev) => {
+        onChange?.(ev);
+        if (ev.fileList?.length) {
+            setImageSizeBasedOnUrl(URL.createObjectURL(ev.fileList[0]));
+        }
+    };
+    const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, changeFile, file, errors, isPreview, isDragOver } = useImagePicker({ initialFile, onChange: handleOnChange, allowedExtensions, initialErrors, onError, inputRef });
+    const [imageSize, setImageSize] = useState(undefined);
+    const acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
+    useEffect(() => {
+        onImageSizeUpdated?.(imageSize);
+    }, [imageSize]);
+    useEffect(() => {
+        initialFile && setImageSizeBasedOnUrl(initialFile?.fileUrl);
+    }, [initialFile]);
+    useEffect(() => {
+        if (!editedImageResult)
+            return;
+        const fileList = createFileList(editedImageResult);
+        changeFile(fileList);
+    }, [editedImageResult]);
+    const createFileList = (file) => {
+        const fileArray = [];
+        fileArray.push(file);
+        return fileArray;
+    };
+    const setImageSizeBasedOnUrl = (fileUrl) => {
+        createImageFromUrl(fileUrl).then((image) => {
+            setImageSize({ width: image.naturalWidth, height: image.naturalHeight });
+        });
+    };
+    const createImageFromUrl = async (url) => {
+        const img = new Image();
+        img.src = url;
+        await img.decode();
+        return img;
+    };
+    const handleOnFileDelete = () => {
+        onFileDelete();
+        setImageSize(undefined);
+    };
+    return (React.createElement("div", { className: "aurora-mb-1" },
+        React.createElement("div", { className: cn('aurora-rounded-8 aurora-relative hover:aurora-border-active', {
+                'aurora-border aurora-border-dashed': !(errors && errors.length > 0 && !isDragOver),
+                'aurora-border-2 aurora-border-danger aurora-border-solid hover:aurora-border-danger': errors && errors.length > 0,
+                'aurora-border-none': isDragOver
+            }) },
+            file && !errors?.length ? (isPreview ? (React.createElement("div", { className: "aurora-p-1 aurora-pb-2 aurora-relative" },
+                topButtons && React.createElement("div", null, topButtons),
+                React.createElement(ImagePickerPreview, { file: file, onError: onPreviewError }),
+                React.createElement(UploadedImagePickerItem, { imageSize: imageSize, file: file, isValid: !errors?.length, onFileDelete: handleOnFileDelete }))) : (React.createElement("div", null, `${t('No preview')}`))) : (React.createElement(ImagePickerInput, { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: onDropFile })),
+            React.createElement("input", { className: "aurora-hidden", onChange: onFileChange, id: id, ref: inputRef, type: "file", name: name, accept: acceptFiles })),
+        errors && React.createElement(ErrorList, { errors: errors })));
+});
+//# sourceMappingURL=image_picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image_picker.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/image_picker.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,35 @@
+export declare const IMAGE_PICKER_EXTENSIONS: {
+    readonly GIF: "gif";
+    readonly JPG: "jpg";
+    readonly JPEG: "jpeg";
+    readonly PNG: "png";
+    readonly WEBP: "webp";
+    readonly SVG: "svg";
+};
+export declare const MIME_FILE_EXTENSIONS: {
+    readonly gif: "image/gif";
+    readonly jpg: "image/jpg";
+    readonly jpeg: "image/jpeg";
+    readonly png: "image/png";
+    readonly webp: "image/webp";
+    readonly svg: "image/svg+xml";
+};
+export declare const FILE_EXTENSION_TO_MIME_TYPE: {
+    readonly gif: "image/gif";
+    readonly jpg: "image/jpg";
+    readonly jpeg: "image/jpeg";
+    readonly png: "image/png";
+    readonly webp: "image/webp";
+    readonly svg: "image/svg+xml";
+};
+export declare const MIME_TYPE_TO_FILE_EXTENSIONS: {
+    readonly "image/gif": "gif";
+    readonly "image/jpg": "jpg";
+    readonly "image/jpeg": "jpeg";
+    readonly "image/png": "png";
+    readonly "image/webp": "webp";
+    readonly "image/svg+xml": "svg";
+};
+export declare const IMAGE_PICKER_ERROR: {
+    invalidFileFormat: string;
+};

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

@@ -0,0 +1,36 @@
+export const IMAGE_PICKER_EXTENSIONS = {
+    GIF: 'gif',
+    JPG: 'jpg',
+    JPEG: 'jpeg',
+    PNG: 'png',
+    WEBP: 'webp',
+    SVG: 'svg'
+};
+export const MIME_FILE_EXTENSIONS = {
+    [IMAGE_PICKER_EXTENSIONS.GIF]: 'image/gif',
+    [IMAGE_PICKER_EXTENSIONS.JPG]: 'image/jpg',
+    [IMAGE_PICKER_EXTENSIONS.JPEG]: 'image/jpeg',
+    [IMAGE_PICKER_EXTENSIONS.PNG]: 'image/png',
+    [IMAGE_PICKER_EXTENSIONS.WEBP]: 'image/webp',
+    [IMAGE_PICKER_EXTENSIONS.SVG]: 'image/svg+xml'
+};
+export const FILE_EXTENSION_TO_MIME_TYPE = {
+    [IMAGE_PICKER_EXTENSIONS.GIF]: MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.GIF],
+    [IMAGE_PICKER_EXTENSIONS.JPG]: MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.JPG],
+    [IMAGE_PICKER_EXTENSIONS.JPEG]: MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.JPEG],
+    [IMAGE_PICKER_EXTENSIONS.PNG]: MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.PNG],
+    [IMAGE_PICKER_EXTENSIONS.WEBP]: MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.WEBP],
+    [IMAGE_PICKER_EXTENSIONS.SVG]: MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.SVG]
+};
+export const MIME_TYPE_TO_FILE_EXTENSIONS = {
+    [MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.GIF]]: IMAGE_PICKER_EXTENSIONS.GIF,
+    [MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.JPG]]: IMAGE_PICKER_EXTENSIONS.JPG,
+    [MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.JPEG]]: IMAGE_PICKER_EXTENSIONS.JPEG,
+    [MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.PNG]]: IMAGE_PICKER_EXTENSIONS.PNG,
+    [MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.WEBP]]: IMAGE_PICKER_EXTENSIONS.WEBP,
+    [MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.SVG]]: IMAGE_PICKER_EXTENSIONS.SVG
+};
+export const IMAGE_PICKER_ERROR = {
+    invalidFileFormat: 'Invalid file format'
+};
+//# sourceMappingURL=image_picker_constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image_picker_constants.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/image_picker_constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACnC,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,KAAK;CACJ,CAAC;AAEX,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAChC,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,WAAW;IAC1C,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,WAAW;IAC1C,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,YAAY;IAC5C,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,WAAW;IAC1C,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,YAAY;IAC5C,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,eAAe;CACxC,CAAC;AAEX,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACvC,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,GAAG,CAAC;IAChF,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,GAAG,CAAC;IAChF,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,IAAI,CAAC;IAClF,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,GAAG,CAAC;IAChF,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,IAAI,CAAC;IAClF,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,GAAG,CAAC;CAC1E,CAAC;AAEX,MAAM,CAAC,MAAM,4BAA4B,GAAG;IACxC,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAG;IAChF,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAG;IAChF,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC,EAAE,uBAAuB,CAAC,IAAI;IAClF,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAG;IAChF,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC,EAAE,uBAAuB,CAAC,IAAI;IAClF,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAG;CAC1E,CAAC;AAEX,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,iBAAiB,EAAE,qBAAqB;CAC3C,CAAC"}

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

@@ -0,0 +1,59 @@
+import React, { ChangeEvent, ReactNode } from 'react';
+import { IMAGE_PICKER_EXTENSIONS, MIME_FILE_EXTENSIONS } from './image_picker_constants';
+import { TControlErrors } from "../control/control_types";
+export declare type TImagePickerFile = {
+    fileUrl: string;
+    fileName: 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 IUseFilePickerOnChange = {
+    fileList: FileList | null;
+    fileAsDataUrl?: string | ArrayBuffer | null;
+};
+export interface IImagePicker {
+    id: string;
+    name?: string;
+    className?: string;
+    onChange?: (file: IUseFilePickerOnChange) => void;
+    allowedExtensions?: TImagePickerExtension[];
+    initialFile?: TImagePickerFile;
+    errors?: TControlErrors;
+    onError?: (errors: string[]) => void;
+    onImageSizeUpdated?: (imageSize?: TImageSize) => void;
+    topButtons?: ReactNode;
+    editedImageResult?: File;
+}
+export interface IImagePickerInput {
+    id: string;
+    onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
+    allowedExtensions: TImagePickerExtension[];
+    isDragOver: boolean;
+}
+export declare type TImageSize = {
+    width: number;
+    height: number;
+};
+export interface IUseImagePicker {
+    onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onFileDelete: () => void;
+    onPreviewError: () => void;
+    changeFile: (files: FileList) => void;
+    file: TImagePickerFile | undefined;
+    errors: string[];
+    isPreview: boolean;
+    isDragOver: boolean;
+}
+export interface IUseImagePickerProps {
+    onChange?: (file: IUseFilePickerOnChange) => void;
+    initialFile?: TImagePickerFile;
+    allowedExtensions?: TImagePickerExtension[];
+    inputRef: React.RefObject<HTMLInputElement>;
+    initialErrors?: TControlErrors;
+    onError?: (errors: string[]) => void;
+}

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

@@ -0,0 +1,4 @@
+import 'react';
+import './image_picker_constants';
+import '@auroraComponents/control/control_types';
+//# sourceMappingURL=image_picker_types.js.map

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

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

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

@@ -0,0 +1 @@
+export declare const getAcceptFilesParametersFromAllowedExtensions: (allowedExtensions: string[]) => string;

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

@@ -0,0 +1,6 @@
+import { FILE_EXTENSION_TO_MIME_TYPE } from './image_picker_constants';
+import './image_picker_types';
+export const getAcceptFilesParametersFromAllowedExtensions = (allowedExtensions) => {
+    return allowedExtensions.map((extension) => FILE_EXTENSION_TO_MIME_TYPE[extension]).join(', ');
+};
+//# sourceMappingURL=image_picker_utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image_picker_utils.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/image_picker_utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAsC,sBAAsB,CAAC;AAE7D,MAAM,CAAC,MAAM,6CAA6C,GAAG,CAAC,iBAA2B,EAAE,EAAE;IACzF,OAAO,iBAAiB,CAAC,GAAG,CAAC,CAAC,SAAgC,EAAE,EAAE,CAAC,2BAA2B,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1H,CAAC,CAAC"}

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

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

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

@@ -0,0 +1,117 @@
+import { useEffect, useRef, useState } from 'react';
+import i18n from '../../i18n';
+import { IMAGE_PICKER_ERROR, MIME_TYPE_TO_FILE_EXTENSIONS } from './image_picker_constants';
+import './image_picker_types';
+export const useImagePicker = ({ 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(() => {
+        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(() => {
+        setFile(initialFile);
+    }, [initialFile]);
+    useEffect(() => {
+        initialErrors && setErrors(initialErrors);
+    }, [initialErrors]);
+    useEffect(() => {
+        fileAsDataUrl && onChange?.({ fileList, fileAsDataUrl });
+    }, [fileAsDataUrl]);
+    const onDropFile = (event) => {
+        setErrors([]);
+        event.stopPropagation();
+        event.preventDefault();
+        const { dataTransfer: { files } } = event;
+        if (!files.length)
+            return;
+        validateFileExtension(allowedExtensions, files[0].type);
+        setDragOver(false);
+        updateFile(files);
+    };
+    const validateFileExtension = (allowedExtensions, mimeType) => {
+        if (!allowedExtensions)
+            return true;
+        const isValid = allowedExtensions.reduce((acc, extension) => {
+            return acc ? acc : MIME_TYPE_TO_FILE_EXTENSIONS[mimeType] === extension;
+        }, false);
+        if (isValid) {
+            setErrors([]);
+            return isValid;
+        }
+        setErrors([...errors, i18n.t(IMAGE_PICKER_ERROR.invalidFileFormat)]);
+        onError?.(errors);
+        return isValid;
+    };
+    const onFileChange = (event) => {
+        changeFile(event.target.files);
+    };
+    const changeFile = (files) => {
+        setErrors([]);
+        updateFile(files);
+    };
+    const updateFile = (files) => {
+        if (files?.length) {
+            setFileList(files);
+            reader.current.readAsDataURL(files[0]);
+            setFile({
+                fileName: files?.[0].name,
+                fileUrl: URL.createObjectURL(files?.[0])
+            });
+            const isValid = validateFileExtension(allowedExtensions, files[0].type);
+            if (isValid)
+                onChange?.({ fileList: files });
+        }
+        else {
+            setFile(undefined);
+            onChange?.({ fileList: files });
+        }
+        setPreview(true);
+    };
+    const getDataUrlFromFile = (fileReaderResult) => {
+        setFileAsDataUrl(fileReaderResult);
+    };
+    const onDragOver = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'copy';
+        if (!isDragOver) {
+            setDragOver(true);
+        }
+    };
+    const onDragLeave = () => {
+        setDragOver(false);
+    };
+    const onFileDelete = () => {
+        inputRef.current.value = '';
+        setFileList(null);
+        setFile(undefined);
+        setFileAsDataUrl(null);
+        setPreview(true);
+        setErrors([]);
+        onChange?.({ fileList: null, fileAsDataUrl: null });
+    };
+    const onPreviewError = () => {
+        setPreview(false);
+    };
+    return {
+        onDropFile,
+        onFileChange,
+        onDragOver,
+        onDragLeave,
+        onFileDelete,
+        onPreviewError,
+        changeFile,
+        file,
+        errors,
+        isPreview,
+        isDragOver
+    };
+};
+//# sourceMappingURL=use_image_picker.js.map