@luscii-healthtech/web-ui 8.1.2 → 8.2.0

package/dist/components/MediaPicker/MediaPicker.d.ts

@@ -30,6 +30,10 @@ export interface ImagePickerProps {
      * ```
      */
     acceptedMimeTypes?: string[];
+    /**
+     * Maximum file size allowed to be uploaded in MB. If undefined, a default limit of 100mb is applied.
+     */
+    maxFileSize?: number;
     clearImageIndex?: number;
     type?: "normal" | "compact";
     isDisabled?: boolean;
@@ -76,6 +80,10 @@ export interface MediaPickerProps {
      * ```
      */
     acceptedMimeTypes?: string[];
+    /**
+     * Maximum file size allowed to be uploaded in MB. If undefined, a default limit of 100mb is applied.
+     */
+    maxFileSize?: number;
     isDisabled?: boolean;
     onChange: (target: TargetProps) => void;
     isUploadButtonVisible?: boolean;

package/dist/index.development.js

@@ -208,8 +208,8 @@ const allowedHoverColors = {
   white: "hover:ui-text-white"
 };
 const allowedGroupHoverColors = {
-  "blue-900": "ui-group-hover:ui-text-blue-900",
-  white: "ui-group-hover:ui-text-white"
+  "blue-900": "group-hover:ui-text-blue-900",
+  white: "group-hover:ui-text-white"
 };
 const Text = (props) => {
   var _a;
@@ -3155,7 +3155,7 @@ function TableBodyRowDataCell(props) {
     ),
     isTableFieldAction(content) && React__namespace.default.createElement("div", { className: classNames__default.default("ui-flex ui-flex-row ui-justify-end", "ui-transition-opacity ui-duration-300 ui-ease-in-out", {
       "ui-opacity-0": props.fieldConfig.onlyShowContentOnHovering,
-      "ui-group-hover:ui-opacity-100": props.fieldConfig.onlyShowContentOnHovering
+      "group-hover:ui-opacity-100": props.fieldConfig.onlyShowContentOnHovering
     }) }, content.map((action) => {
       if (!action) {
         return null;
@@ -3173,7 +3173,7 @@ function TableBodyRow(props) {
     event.stopPropagation();
     (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.item);
   };
-  return React__namespace.default.createElement("tr", { tabIndex: 0, className: classNames__default.default("group", {
+  return React__namespace.default.createElement("tr", { tabIndex: 0, className: classNames__default.default("ui-group", {
     "ui-cursor-pointer ui-transition-colors ui-duration-300 ui-ease-in-out hover:ui-bg-blue-50 focus:ui-outline-primary": props.onClick,
     "ui-cursor-default hover:ui-bg-white": !props.onClick
   }, props.className), onClick: handleRowClick }, props.fieldConfigurations.map((fieldConfig) => React__namespace.default.createElement(TableBodyRowDataCell, { key: fieldConfig.key, item: props.item, fieldConfig, emptyFieldContentText: props.emptyFieldContentText })));
@@ -4633,7 +4633,26 @@ const ImageCategory = (props) => {
   );
 };
 
-const ImagePickerInner = ({ categories, clearImageIndex, handleChange, images, isDisabled = false, name, preselectedImage, preselectedMediaType = "image", acceptedMimeTypes = ["image/svg+xml"], type = "normal", isUploadButtonVisible = false, isClearButtonVisible = false, isUploading = false, isErrorUploading = false, localisation, innerRef }) => {
+const ImagePickerInner = ({
+  categories,
+  clearImageIndex,
+  handleChange,
+  images,
+  isDisabled = false,
+  name,
+  preselectedImage,
+  preselectedMediaType = "image",
+  acceptedMimeTypes = ["image/svg+xml"],
+  maxFileSize = 100,
+  //100mb
+  type = "normal",
+  isUploadButtonVisible = false,
+  isClearButtonVisible = false,
+  isUploading = false,
+  isErrorUploading = false,
+  localisation,
+  innerRef
+}) => {
   var _a;
   const placeholderImage = clearImageIndex !== void 0 && images[clearImageIndex] ? images[clearImageIndex] : img;
   const isTypeCompact = type === "compact";
@@ -4670,6 +4689,7 @@ const ImagePickerInner = ({ categories, clearImageIndex, handleChange, images, i
       handleDeleteClick();
     }
     setHighlightedImage(event.currentTarget.src);
+    setError(null);
   };
   const handleDeleteClick = () => {
     handleChange({ target: { name, value: "" } });
@@ -4679,10 +4699,12 @@ const ImagePickerInner = ({ categories, clearImageIndex, handleChange, images, i
     setSelectedMedia(placeholderImage);
     setSelectedMediaType("image");
     setHighlightedImage(null);
+    setError(null);
   };
   function handleConfirmSelection() {
     setSelectedMedia(highlightedImage !== null && highlightedImage !== void 0 ? highlightedImage : placeholderImage);
     setSelectedMediaType("image");
+    setError(null);
     handleChange({
       target: { name, value: highlightedImage }
     });
@@ -4691,14 +4713,14 @@ const ImagePickerInner = ({ categories, clearImageIndex, handleChange, images, i
   const handleCloseModal = () => {
     setIsImagesPanelOpen(false);
   };
-  const mediaType = (mimeType) => {
-    return mimeType.split("/")[0];
-  };
+  const mediaType = (mimeType) => mimeType.split("/")[0];
+  const maxFileSizeInBytes = maxFileSize * 1e3 * 1e3;
+  const isValidFile = (file) => acceptedMimeTypes.includes(file.type) && file.size < maxFileSizeInBytes;
   const uploadImage = (event) => __awaiter(void 0, void 0, void 0, function* () {
     var _b;
-    if (event.currentTarget.files) {
+    if (event.currentTarget.files && event.currentTarget.files.length > 0) {
       const file = event.currentTarget.files[0];
-      if (acceptedMimeTypes.includes(file.type)) {
+      if (isValidFile(file)) {
         setSelectedMedia(URL.createObjectURL(file));
         setSelectedMediaType(mediaType(file.type));
         const data = new FormData();
@@ -4742,14 +4764,14 @@ const ImagePickerInner = ({ categories, clearImageIndex, handleChange, images, i
         isUploadButtonVisible && React__namespace.default.createElement(
           "span",
           { className: "cweb-imagePicker-upload" },
-          React__namespace.default.createElement(SecondaryButton, { text: localisation.uploadImage, isDisabled, id: `upload-image-${name}`, onClick: () => {
+          React__namespace.default.createElement(SecondaryButton, { text: localisation.uploadImage, isDisabled, isPending: isUploading, id: `upload-image-${name}`, onClick: () => {
             var _a2;
             setIsImagesPanelOpen(false);
             (_a2 = fileInputRef.current) === null || _a2 === void 0 ? void 0 : _a2.click();
           } }),
           React__namespace.default.createElement("input", { ref: fileInputRef, type: "file", disabled: isDisabled, name: `uploaded-${name}`, accept: acceptedMimeTypes.join(","), onChange: uploadImage, className: "ui-hidden" })
         ),
-        isClearButtonVisible && selectedMedia !== placeholderImage && React__namespace.default.createElement(SecondaryButton, { text: localisation.clearSelection, isDisabled, onClick: handleDeleteClick })
+        isClearButtonVisible && selectedMedia !== placeholderImage && !isUploading && React__namespace.default.createElement(SecondaryButton, { text: localisation.clearSelection, isDisabled, isPending: isUploading, onClick: handleDeleteClick })
       )
     ),
     React__namespace.default.createElement(
@@ -5313,7 +5335,7 @@ const SortMenu = (props) => {
         react.Menu.Button,
         { className: "ui-group ui-inline-flex ui-justify-center ui-text-sm ui-font-medium ui-text-slate-700 hover:ui-text-slate-900" },
         menuLabel,
-        React__namespace.default.createElement(solid.ChevronDownIcon, { className: "ui-group-hover:ui-text-slate-500 -ui-mr-1 ui-ml-1 ui-h-5 ui-w-5 ui-flex-shrink-0 ui-text-slate-400", "aria-hidden": "true" })
+        React__namespace.default.createElement(solid.ChevronDownIcon, { className: "-ui-mr-1 ui-ml-1 ui-h-5 ui-w-5 ui-flex-shrink-0 ui-text-slate-400 group-hover:ui-text-slate-500", "aria-hidden": "true" })
       )
     ),
     React__namespace.default.createElement(
@@ -5346,7 +5368,7 @@ const FiltersMenus = (props) => {
             { className: "ui-group ui-inline-flex ui-justify-center ui-text-sm ui-font-medium ui-text-slate-700 hover:ui-text-slate-900" },
             React__namespace.default.createElement("span", null, categorizedFilter.label),
             amountOfCheckedItems > 0 ? React__namespace.default.createElement("span", { className: "ui-ml-1.5 ui-rounded ui-bg-slate-200 ui-px-1.5 ui-py-0.5 ui-text-xs ui-font-semibold ui-tabular-nums ui-text-slate-700" }, amountOfCheckedItems) : null,
-            React__namespace.default.createElement(solid.ChevronDownIcon, { className: "ui-group-hover:ui-text-slate-500 -ui-mr-1 ui-ml-1 ui-h-5 ui-w-5 ui-flex-shrink-0 ui-text-slate-400", "aria-hidden": "true" })
+            React__namespace.default.createElement(solid.ChevronDownIcon, { className: "-ui-mr-1 ui-ml-1 ui-h-5 ui-w-5 ui-flex-shrink-0 ui-text-slate-400 group-hover:ui-text-slate-500", "aria-hidden": "true" })
           ),
           React__namespace.default.createElement(
             react.Transition,