@sendoutcards/quantum-design-ui 1.7.84 → 1.7.85

package/dist/index.es.js

@@ -22767,10 +22767,12 @@ var isDragEventType = function (event) {
   return 'dataTransfer' in event;
 };
 
-var useFileUpload = function (props) {
-  var _a = React.useState(null),
-      error = _a[0],
-      setError = _a[1];
+var ImageUploader = function (props) {
+  var _a, _b;
+
+  var _c = React.useState(null),
+      error = _c[0],
+      setError = _c[1];
 
   var onUpload = props.onUpload;
   var onDrop = useCallback(function (acceptedFiles, rejectedFiles, event) {
@@ -22801,34 +22803,19 @@ var useFileUpload = function (props) {
   var onDragEnter = useCallback(function () {
     setError(null);
   }, []);
-  var dropzone = useDropzone({
+
+  var _d = useDropzone({
     onDrop: onDrop,
     accept: parseAcceptedFiles(props.acceptedFiles),
-    multiple: props.hasMultiUpload,
+    multiple: props.hasMultiupload,
     maxFiles: props.maxAcceptedFiles,
     maxSize: props.maxFileSize,
     onDragEnter: onDragEnter
-  });
-  return [__assign({
-    onDragEnter: onDragEnter
-  }, dropzone), error];
-};
+  }),
+      getRootProps = _d.getRootProps,
+      getInputProps = _d.getInputProps,
+      isDragActive = _d.isDragActive;
 
-var ImageUploader = function (props) {
-  var _a, _b;
-
-  props.uploadTitle;
-      props.backgroundColor;
-      var hookProps = __rest(props, ["uploadTitle", "backgroundColor"]);
-
-  var _c = useFileUpload(hookProps),
-      dropzone = _c[0],
-      error = _c[1];
-
-  var isDragActive = dropzone.isDragActive,
-      getRootProps = dropzone.getRootProps,
-      getInputProps = dropzone.getInputProps,
-      onDragEnter = dropzone.onDragEnter;
   return jsx(React.Fragment, null, jsx(Flex, {
     inset: "x1",
     flexWrap: "wrap",
@@ -22869,9 +22856,6 @@ var ImageUploader = function (props) {
   }), jsx(Text, {
     type: "largeBody",
     content: (_b = props.uploadTitle) !== null && _b !== void 0 ? _b : 'Upload Photo'
-  }), jsx(Text, {
-    type: "footnote",
-    content: "Drag and Drop Image Here"
   })))), error && jsx(Text, {
     type: "footnote",
     content: error,
@@ -22893,26 +22877,25 @@ var ImageUploadWidget = function (_a) {
   var _b = _a.title,
       title = _b === void 0 ? 'Image Background' : _b,
       onFinished = _a.onFinished,
+      onUpload = _a.onUpload,
       x = _a.x,
       y = _a.y,
       isOpen = _a.isOpen,
+      _c = _a.hasMultiUpload,
+      hasMultiUpload = _c === void 0 ? false : _c,
       userImages = _a.userImages,
       hasMore = _a.hasMore,
       loadMore = _a.loadMore,
       endMessage = _a.endMessage,
       dataLength = _a.dataLength,
-      _c = _a.width,
-      width = _c === void 0 ? 264 : _c,
-      hookProps = __rest(_a, ["title", "onFinished", "x", "y", "isOpen", "userImages", "hasMore", "loadMore", "endMessage", "dataLength", "width"]);
+      _d = _a.width,
+      width = _d === void 0 ? 264 : _d;
 
-  var _d = useState(false),
-      shouldShowImageGrid = _d[0],
-      setShouldShowImageGrid = _d[1];
+  var _e = useState(false),
+      shouldShowImageGrid = _e[0],
+      setShouldShowImageGrid = _e[1];
 
   var inputRef = useRef(null);
-  var dropzone = useFileUpload(hookProps)[0];
-  var getInputProps = dropzone.getInputProps,
-      onDragEnter = dropzone.onDragEnter;
   return jsx(AnimatePresence, null, isOpen && jsx(Div, {
     initial: {
       opacity: 0
@@ -23021,7 +23004,11 @@ var ImageUploadWidget = function (_a) {
         url: image.url
       }
     })));
-  }))))) : jsx(ImageUploader, hookProps)), jsx(HStack, {
+  }))))) : jsx(ImageUploader, {
+    onUpload: onUpload,
+    acceptedFiles: ['gif', 'jpeg', 'jpg', 'png'],
+    hasMultiupload: hasMultiUpload
+  })), jsx(HStack, {
     outset: "x1",
     justify: "center",
     gap: "x1"
@@ -23041,10 +23028,23 @@ var ImageUploadWidget = function (_a) {
     size: "small",
     type: "smoke",
     title: "Upload..."
-  }), jsx("input", _extends({}, getInputProps(), {
+  }), jsx("input", {
     ref: inputRef,
-    onClick: onDragEnter
-  }))), jsx(Div, {
+    type: "file",
+    accept: "image/*",
+    style: {
+      display: 'none'
+    },
+    onChange: function (e) {
+      var _a, _b;
+
+      var file = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
+      if (file) onUpload({
+        accepted: [file],
+        rejected: []
+      });
+    }
+  })), jsx(Div, {
     width: "120px"
   }, jsx(Button, {
     onClick: function () {
@@ -24287,8 +24287,7 @@ var StackedCardHead = function (_a) {
   var cardImage = _a.cardImage,
       cardOrientation = _a.cardOrientation,
       quantity = _a.quantity,
-      quantityDescription = _a.quantityDescription,
-      secondaryAction = _a.secondaryAction;
+      quantityDescription = _a.quantityDescription;
   return jsx(VStack, {
     gap: "x2"
   }, jsx(StackedCards, {
@@ -24296,7 +24295,7 @@ var StackedCardHead = function (_a) {
     height: cardOrientation === 'vertical' ? 285 : 200,
     stackBackgroundColor: "background",
     backgroundImage: cardImage
-  }), secondaryAction && secondaryAction, jsx(Text, {
+  }), jsx(Text, {
     type: "largeBody",
     weight: "bold",
     color: "primaryHeading",
@@ -24313,16 +24312,14 @@ var CardQuantitySlider = function (props) {
   var cardOrientation = props.cardOrientation,
       cardImage = props.cardImage,
       quantityDescription = props.quantityDescription,
-      secondaryAction = props.secondaryAction,
-      rest = __rest(props, ["cardOrientation", "cardImage", "quantityDescription", "secondaryAction"]);
+      rest = __rest(props, ["cardOrientation", "cardImage", "quantityDescription"]);
 
   return jsx(React.Fragment, null, jsx(QuantitySlider, _extends({}, rest, {
     head: jsx(StackedCardHead, {
       cardOrientation: cardOrientation,
       quantity: rest.quantity,
       quantityDescription: quantityDescription,
-      cardImage: cardImage,
-      secondaryAction: secondaryAction
+      cardImage: cardImage
     })
   })));
 };
@@ -24348,8 +24345,7 @@ var BulkSend = function (_a) {
       isConfigurable = _a.isConfigurable,
       disableMessage = _a.disableMessage,
       sliderOrientation = _a.sliderOrientation,
-      sliderImage = _a.sliderImage,
-      secondaryAction = _a.secondaryAction;
+      sliderImage = _a.sliderImage;
 
   var _b = React.useState(false),
       isAddDialogOpen = _b[0],
@@ -24580,8 +24576,7 @@ var BulkSend = function (_a) {
     sliderFill: sliderFill,
     hasIncrement: hasIncrement,
     cardImage: sliderImage,
-    cardOrientation: sliderOrientation,
-    secondaryAction: secondaryAction
+    cardOrientation: sliderOrientation
   }), jsx(Flex, {
     outset: {
       top: 'x4'

package/dist/src/molecules/quantitySlider/components/stackedCardHead.d.ts

@@ -1,9 +1,8 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 export declare type StackedCardHeadProps = {
     cardImage?: string;
     cardOrientation?: 'vertical' | 'horizontal';
     quantity: number;
     quantityDescription: string;
-    secondaryAction?: React.ReactNode;
 };
 export declare const StackedCardHead: FC<StackedCardHeadProps>;

package/dist/src/organisms/imageUploadWidget/imageUploadWidget.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { UseFileUploadProps } from "../../hooks/useFileUpload";
+import { AcceptedFiles, RejectedFiles } from '../imageUploader/imageUploader';
 export declare type UserImage = {
     url: string;
     onClick: () => void;
@@ -7,8 +7,15 @@ export declare type UserImage = {
 };
 export declare type ImageUploadWidgetProps = {
     title: string;
+    maxHeight?: string;
+    onClose: () => void;
     onFinished: () => void;
     isOpen: boolean;
+    onUpload: (files: {
+        accepted: AcceptedFiles;
+        rejected: RejectedFiles;
+    }, fileList?: FileList | null) => void;
+    hasMultiUpload?: boolean;
     userImages?: UserImage[];
     x: number;
     y: number;
@@ -17,5 +24,5 @@ export declare type ImageUploadWidgetProps = {
     hasMore?: boolean;
     endMessage?: string;
     width?: number;
-} & UseFileUploadProps;
+};
 export declare const ImageUploadWidget: FC<ImageUploadWidgetProps>;

package/dist/src/organisms/imageUploader/imageUploader.d.ts

@@ -1,8 +1,20 @@
 /// <reference types="react" />
+import { FileRejection } from 'react-dropzone';
 import { BackgroundColor } from "../../helpers/hoc-types/hocBaseUnion";
-import { UseFileUploadProps } from "../../hooks/useFileUpload";
+declare type AcceptedFileType = 'jpg' | 'png' | 'gif' | 'jpeg';
 export declare type ImageUploaderProps = {
+    onUpload: (files: {
+        accepted: File[];
+        rejected: FileRejection[];
+    }, fileList?: FileList | null) => void;
+    acceptedFiles: AcceptedFileType[];
+    hasMultiupload?: boolean;
+    maxFileSize?: number;
+    maxAcceptedFiles?: number;
     uploadTitle?: string;
     backgroundColor?: BackgroundColor;
-} & UseFileUploadProps;
+};
+export declare type AcceptedFiles = File[];
+export declare type RejectedFiles = FileRejection[];
 export declare const ImageUploader: (props: ImageUploaderProps) => JSX.Element;
+export {};

package/dist/src/portfolios/soc/components/bulkSend/bulkSend.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { SliderProgressColor } from "../../../../exports/molecules";
 import { ConfigurationCardProps, ConfirmDialogProps } from "../../../../exports/organisms";
 export declare type ConfigurationOptionSection = {
@@ -40,7 +40,6 @@ export declare type BulkSendProps = {
     disableMessage: string;
     sliderImage?: string;
     sliderOrientation?: 'vertical' | 'horizontal';
-    secondaryAction?: React.ReactNode;
 };
 export declare const BulkSend: FC<BulkSendProps>;
 export {};

package/dist/src/portfolios/soc/components/bulkSend/cardQuantitySlider.d.ts

@@ -1,9 +1,8 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { QuantitySliderProps } from "../../../../exports/molecules";
 export declare type CardQuantitySliderProps = {
     cardImage?: string;
     cardOrientation?: 'vertical' | 'horizontal';
     quantityDescription: string;
-    secondaryAction?: React.ReactNode;
 } & QuantitySliderProps;
 export declare const CardQuantitySlider: FC<CardQuantitySliderProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendoutcards/quantum-design-ui",
-  "version": "1.7.84",
+  "version": "1.7.85",
   "description": "UI component library for Quantum Design System",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",

package/dist/src/atoms/companion/companion.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { HOCBaseProps } from "../../helpers/hoc-types/hocBasePropTypes";
-import { HOCMotionProps } from "../../helpers/hoc-types/hocMotionTypes";
-export declare type DivProps = {
-    children?: React.ReactNode;
-    outsideClick?: () => void;
-    clickElementBypass?: string;
-} & HOCBaseProps & HOCMotionProps;
-export declare const Companion: React.ForwardRefExoticComponent<{
-    children?: React.ReactNode;
-    outsideClick?: (() => void) | undefined;
-    clickElementBypass?: string | undefined;
-} & HOCBaseProps & {
-    className?: string | undefined;
-    motionKey?: string | number | undefined;
-    id?: string | undefined;
-} & import("framer-motion").MotionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/hooks/useFileUpload.d.ts

@@ -1,32 +0,0 @@
-import React from 'react';
-import { DropzoneState, FileRejection } from 'react-dropzone';
-declare type AcceptedFileType = 'jpg' | 'png' | 'gif' | 'jpeg';
-export declare type AcceptedFiles = File[];
-export declare type RejectedFiles = FileRejection[];
-export declare type UseFileUploadProps = {
-    onUpload: (files: {
-        accepted: File[];
-        rejected: FileRejection[];
-    }, fileList?: FileList | null) => void;
-    acceptedFiles: AcceptedFileType[];
-    hasMultiUpload?: boolean;
-    maxFileSize?: number;
-    maxAcceptedFiles?: number;
-};
-export declare const useFileUpload: (props: UseFileUploadProps) => [import("react-dropzone").DropzoneRef & {
-    isFocused: boolean;
-    isDragActive: boolean;
-    isDragAccept: boolean;
-    isDragReject: boolean;
-    isFileDialogActive: boolean;
-    draggedFiles: File[];
-    acceptedFiles: File[];
-    fileRejections: FileRejection[];
-    rootRef: React.RefObject<HTMLElement>;
-    inputRef: React.RefObject<HTMLInputElement>;
-    getRootProps: <T extends import("react-dropzone").DropzoneRootProps>(props?: T | undefined) => T;
-    getInputProps: <T_1 extends import("react-dropzone").DropzoneInputProps>(props?: T_1 | undefined) => T_1;
-} & {
-    onDragEnter: () => void;
-}, string | null];
-export {};