@luscii-healthtech/web-ui 8.1.3 → 8.3.0

package/dist/components/Icons/EyeIconSlashed.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from "./types/IconProps.type";
+declare const _default: (props: IconProps) => JSX.Element;
+export default _default;

package/dist/components/Icons/index.d.ts

@@ -17,6 +17,7 @@ export { default as EditIcon } from "./EditIcon";
 export { default as EmptyIcon } from "./EmptyIcon";
 export { default as EmptyStateDashboardIcon } from "./EmptyStateDashboardIcon";
 export { default as ExclamationMarkIcon } from "./ExclamationMarkIcon";
+export { default as EyeIconSlashed } from "./EyeIconSlashed";
 export { default as EyeIcon } from "./EyeIcon";
 export { default as GearColoredIcon } from "./GearColoredIcon";
 export { default as GearIcon } from "./GearIcon";

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

@@ -450,6 +450,13 @@ const SvgExclamationMarkIcon = (props) => React__namespace.default.createElement
 );
 var ExclamationMarkIcon = IconWrapper(SvgExclamationMarkIcon);
 
+const SvgEyeIconSlashed = (props) => React__namespace.default.createElement(
+  "svg",
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 22, height: 20, fill: "none", viewBox: "0 0 22 20" }, props),
+  React__namespace.default.createElement("path", { fill: "#9CA3AF", d: "M11 4.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C20.27 5.11 16 2 11 2c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24ZM1.71 1.16a.996.996 0 0 0 0 1.41l1.97 1.97A11.892 11.892 0 0 0 0 9.5C1.73 13.89 6 17 11 17c1.52 0 2.97-.3 4.31-.82l2.72 2.72a.996.996 0 1 0 1.41-1.41L3.13 1.16c-.39-.39-1.03-.39-1.42 0ZM11 14.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L13.14 14c-.65.32-1.37.5-2.14.5Zm2.97-5.33a2.97 2.97 0 0 0-2.64-2.64l2.64 2.64Z" })
+);
+var EyeIconSlashed = IconWrapper(SvgEyeIconSlashed);
+
 const SvgEyeIcon = (props) => React__namespace.default.createElement(
   "svg",
   Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 22, height: 15, fill: "none", viewBox: "0 0 22 15" }, props),
@@ -687,6 +694,7 @@ var Icons = /*#__PURE__*/Object.freeze({
     EmptyStateDashboardIcon: EmptyStateDashboardIcon,
     ExclamationMarkIcon: ExclamationMarkIcon,
     EyeIcon: EyeIcon,
+    EyeIconSlashed: EyeIconSlashed,
     GearColoredIcon: GearColoredIcon,
     GearIcon: GearIcon,
     GroupColoredIcon: GroupColoredIcon,
@@ -4633,7 +4641,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 +4697,7 @@ const ImagePickerInner = ({ categories, clearImageIndex, handleChange, images, i
       handleDeleteClick();
     }
     setHighlightedImage(event.currentTarget.src);
+    setError(null);
   };
   const handleDeleteClick = () => {
     handleChange({ target: { name, value: "" } });
@@ -4679,10 +4707,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 +4721,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 +4772,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(
@@ -5524,6 +5554,7 @@ exports.EmptyStateDashboardIcon = EmptyStateDashboardIcon;
 exports.ErrorBlock = ErrorBlock;
 exports.ExclamationMarkIcon = ExclamationMarkIcon;
 exports.EyeIcon = EyeIcon;
+exports.EyeIconSlashed = EyeIconSlashed;
 exports.FilterBar = FilterBar;
 exports.FilterBarUtils = FilterBar_utils;
 exports.FlexColumn = FlexColumn;