boreal-ui 0.0.72 → 0.0.74

package/dist/next/FileUpload-C9Ke2cTs.cjs

@@ -0,0 +1,619 @@
+"use strict";
+const require$$2 = require("react/jsx-runtime");
+const React = require("react");
+const classNames = require("./classNames-BcWMx052.cjs");
+const capitalize = require("./capitalize-DoV-nOmN.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
+;/* empty css                   */
+const Button = require("./Button-BZmph-Qr.cjs");
+const IconButton = require("./IconButton-4ySBEhn1.cjs");
+const FormGroup = require("./FormGroup-B4Xb3X61.cjs");
+const ProgressBar = require("./ProgressBar-sg1jxDfy.cjs");
+const FileIcon = (props) => /* @__PURE__ */ require$$2.jsxs(
+  "svg",
+  {
+    width: "24px",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    color: "currentColor",
+    ...props,
+    children: [
+      /* @__PURE__ */ require$$2.jsx(
+        "path",
+        {
+          d: "M3 20.5V6.5C3 5.67157 3.67157 5 4.5 5H14.2515C14.4106 5 14.5632 5.06321 14.6757 5.17574L17.8243 8.32426C17.9368 8.43679 18 8.5894 18 8.74853V20.5C18 21.3284 17.3284 22 16.5 22H4.5C3.67157 22 3 21.3284 3 20.5Z",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ require$$2.jsx(
+        "path",
+        {
+          d: "M14 5V8.4C14 8.73137 14.2686 9 14.6 9H18",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+const TrashIcon = (props) => /* @__PURE__ */ require$$2.jsxs(
+  "svg",
+  {
+    width: "24px",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    color: "currentColor",
+    "stroke-width": "1.5",
+    ...props,
+    children: [
+      /* @__PURE__ */ require$$2.jsx(
+        "path",
+        {
+          d: "M20 9L18.005 20.3463C17.8369 21.3026 17.0062 22 16.0353 22H7.96474C6.99379 22 6.1631 21.3026 5.99496 20.3463L4 9",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ require$$2.jsx(
+        "path",
+        {
+          d: "M20 9L18.005 20.3463C17.8369 21.3026 17.0062 22 16.0353 22H7.96474C6.99379 22 6.1631 21.3026 5.99496 20.3463L4 9H20Z",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ require$$2.jsx(
+        "path",
+        {
+          d: "M21 6H15.375M3 6H8.625M8.625 6V4C8.625 2.89543 9.52043 2 10.625 2H13.375C14.4796 2 15.375 2.89543 15.375 4V6M8.625 6H15.375",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+const BaseFileUpload = ({
+  label = "Upload File",
+  description,
+  error: error2,
+  required = false,
+  theme = borealStyleConfig.getDefaultTheme(),
+  controlRounding = borealStyleConfig.getDefaultRounding(),
+  controlShadow = borealStyleConfig.getDefaultShadow(),
+  outline = false,
+  outlineRounding = borealStyleConfig.getDefaultRounding(),
+  outlineShadow = borealStyleConfig.getDefaultShadow(),
+  state = "",
+  multiple = false,
+  maxFileSizeBytes = Infinity,
+  allowedFileTypes = [],
+  onSubmit,
+  onFilesChange,
+  uploadProgress: uploadProgress2,
+  "data-testid": testId = "file-upload",
+  id,
+  FormGroup: FormGroup2,
+  disabled: disabled2 = false,
+  Button: Button2,
+  IconButton: IconButton2,
+  ProgressBar: ProgressBar2,
+  classMap,
+  // a11y props
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-errormessage": ariaErrorMessage,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  "aria-busy": ariaBusy,
+  "aria-live": ariaLive,
+  inputAriaLabel,
+  selectButtonAriaLabel,
+  uploadButtonAriaLabel,
+  removeFileAriaLabel,
+  fileListAriaLabel,
+  rejectedFilesAriaLabel,
+  successMessage = "Upload successful.",
+  failureMessage = "Upload failed. Please try again.",
+  filesSelectedMessage,
+  fileRemovedMessage,
+  rejectedFilesMessage,
+  liveRegionPoliteness = "polite",
+  dropzoneDescription,
+  dropzoneRole = "group",
+  enableDragAndDrop = true,
+  inputProps,
+  selectButtonProps,
+  uploadButtonProps,
+  removeButtonProps,
+  progressBarProps,
+  className,
+  ...rest
+}) => {
+  const reactId = React.useId();
+  const baseId = id || testId || `file-upload-${reactId.replace(/:/g, "")}`;
+  const [fileNames, setFileNames] = React.useState([]);
+  const [files, setFiles] = React.useState([]);
+  const [rejectedFiles2, setRejectedFiles] = React.useState([]);
+  const [internalProgress, setInternalProgress] = React.useState(0);
+  const [uploading, setUploading] = React.useState(false);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [uploadMessage, setUploadMessage] = React.useState(null);
+  const fileInput = React.useRef(null);
+  const intervalRef = React.useRef(null);
+  const descriptionId = `${baseId}-description`;
+  const errorId = `${baseId}-error`;
+  const dropzoneDescriptionId = `${baseId}-dropzone-description`;
+  const liveRegionId = `${baseId}-live-region`;
+  const fileListId = `${baseId}-file-list`;
+  const rejectedListId = `${baseId}-rejected-list`;
+  const inputId = `${baseId}-input`;
+  const accept = React.useMemo(() => {
+    if (!allowedFileTypes || allowedFileTypes.length === 0) return void 0;
+    return allowedFileTypes.join(",");
+  }, [allowedFileTypes]);
+  const validateFiles = (newFiles) => {
+    const valid = [];
+    const rejected = [];
+    newFiles.forEach((file) => {
+      const isSizeOk = file.size <= maxFileSizeBytes;
+      const ext = file.name.includes(".") ? "." + file.name.split(".").pop().toLowerCase() : "";
+      const typeAllowed = allowedFileTypes.length === 0 || allowedFileTypes.includes(file.type) || ext && allowedFileTypes.map((t) => t.toLowerCase()).includes(ext);
+      if (isSizeOk && typeAllowed) {
+        valid.push(file);
+      } else {
+        rejected.push({
+          name: file.name,
+          reason: !isSizeOk ? `Exceeds size limit (${(file.size / 1024 / 1024).toFixed(2)}MB)` : `Invalid type (${file.type || ext || "unknown"})`
+        });
+      }
+    });
+    return { valid, rejected };
+  };
+  const truncate = (s) => s.length > 30 ? s.slice(0, 27) + "..." : s;
+  const announce = (message) => {
+    setUploadMessage(message);
+  };
+  const buildSelectedMessage = (selectedFiles) => {
+    if (filesSelectedMessage) return filesSelectedMessage(selectedFiles);
+    const count = selectedFiles.length;
+    return count === 1 ? `${selectedFiles[0].name} selected.` : `${count} files selected.`;
+  };
+  const buildRejectedMessage = (nextRejectedFiles) => {
+    if (nextRejectedFiles.length === 0) return null;
+    if (rejectedFilesMessage) return rejectedFilesMessage(nextRejectedFiles);
+    return nextRejectedFiles.length === 1 ? `${nextRejectedFiles[0].name} was rejected: ${nextRejectedFiles[0].reason}.` : `${nextRejectedFiles.length} files were rejected.`;
+  };
+  const handleFileChange = (e) => {
+    const selected = e.target.files;
+    if (!selected || selected.length === 0) return;
+    const { valid, rejected } = validateFiles(Array.from(selected));
+    const updatedFiles = multiple ? [...files, ...valid] : valid;
+    setFiles(updatedFiles);
+    setFileNames(updatedFiles.map((f) => truncate(f.name)));
+    setRejectedFiles(rejected);
+    onFilesChange == null ? void 0 : onFilesChange(updatedFiles);
+    const selectedMessage = valid.length > 0 ? buildSelectedMessage(updatedFiles) : null;
+    const rejectedMessage = buildRejectedMessage(rejected);
+    announce(
+      [selectedMessage, rejectedMessage].filter(Boolean).join(" ") || null
+    );
+    if (fileInput.current) fileInput.current.value = "";
+  };
+  const removeFile = (index) => {
+    const removedFile = files[index];
+    const updatedFiles = files.filter((_, i) => i !== index);
+    setFiles(updatedFiles);
+    setFileNames(updatedFiles.map((f) => truncate(f.name)));
+    onFilesChange == null ? void 0 : onFilesChange(updatedFiles);
+    if (removedFile) {
+      announce(
+        fileRemovedMessage ? fileRemovedMessage(removedFile.name, index) : `${removedFile.name} removed.`
+      );
+    }
+  };
+  const getButtonLabel = () => {
+    if (fileNames.length > 0) return multiple ? "Add Files" : "Select New";
+    return "Choose File";
+  };
+  const handleDragOver = (e) => {
+    if (!enableDragAndDrop || disabled2) return;
+    e.preventDefault();
+    setIsDragging(true);
+  };
+  const handleDragLeave = () => {
+    if (!enableDragAndDrop || disabled2) return;
+    setIsDragging(false);
+  };
+  const handleDrop = (e) => {
+    if (!enableDragAndDrop || disabled2) return;
+    e.preventDefault();
+    setIsDragging(false);
+    const droppedFiles = e.dataTransfer.files;
+    if (droppedFiles.length > 0) {
+      handleFileChange({
+        target: { files: droppedFiles }
+      });
+    }
+  };
+  const handleUpload = async () => {
+    if (!files.length || uploading || disabled2) return;
+    setUploading(true);
+    setInternalProgress(0);
+    announce(null);
+    try {
+      if (uploadProgress2 === void 0) {
+        intervalRef.current = setInterval(() => {
+          setInternalProgress((prev) => {
+            if (prev >= 100) {
+              if (intervalRef.current) clearInterval(intervalRef.current);
+              return 100;
+            }
+            return prev + 10;
+          });
+        }, 100);
+      }
+      await Promise.resolve(onSubmit == null ? void 0 : onSubmit(files));
+      announce(successMessage);
+    } catch {
+      announce(failureMessage);
+    } finally {
+      if (intervalRef.current) {
+        if (uploadProgress2 === void 0) setInternalProgress(100);
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      setTimeout(() => setUploading(false), 300);
+    }
+  };
+  React.useEffect(() => {
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, []);
+  const containerClassName = React.useMemo(
+    () => classNames.combineClassNames(
+      classMap.fileUpload,
+      classMap[state],
+      classMap[theme],
+      outlineShadow && classMap[`shadow${capitalize.capitalize(outlineShadow)}`],
+      outlineRounding && classMap[`round${capitalize.capitalize(outlineRounding)}`],
+      error2 && classMap.error,
+      isDragging && classMap.dragging,
+      disabled2 && classMap.disabled,
+      className
+    ),
+    [
+      classMap,
+      theme,
+      state,
+      outlineShadow,
+      outlineRounding,
+      error2,
+      isDragging,
+      disabled2,
+      className
+    ]
+  );
+  const describedBy = [
+    description ? descriptionId : void 0,
+    error2 ? errorId : void 0,
+    dropzoneDescription ? dropzoneDescriptionId : void 0,
+    ariaDescribedBy
+  ].filter(Boolean).join(" ") || void 0;
+  const computedAriaInvalid = ariaInvalid !== void 0 ? ariaInvalid : error2 ? true : void 0;
+  const computedAriaRequired = ariaRequired !== void 0 ? ariaRequired : required ? true : void 0;
+  return /* @__PURE__ */ require$$2.jsx(
+    FormGroup2,
+    {
+      label,
+      description,
+      error: error2,
+      required,
+      "data-testid": testId,
+      children: /* @__PURE__ */ require$$2.jsxs(
+        "div",
+        {
+          ...rest,
+          className: containerClassName,
+          onDragOver: enableDragAndDrop ? handleDragOver : void 0,
+          onDragLeave: enableDragAndDrop ? handleDragLeave : void 0,
+          onDrop: enableDragAndDrop ? handleDrop : void 0,
+          role: dropzoneRole,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": describedBy,
+          "aria-errormessage": error2 ? ariaErrorMessage || errorId : void 0,
+          "aria-invalid": computedAriaInvalid,
+          "aria-required": computedAriaRequired,
+          "aria-busy": ariaBusy !== void 0 ? ariaBusy : uploading || void 0,
+          "data-testid": testId ? `${testId}-wrapper` : void 0,
+          children: [
+            dropzoneDescription && /* @__PURE__ */ require$$2.jsx("div", { id: dropzoneDescriptionId, className: "sr_only", children: dropzoneDescription }),
+            /* @__PURE__ */ require$$2.jsx(
+              "input",
+              {
+                ...inputProps,
+                ref: fileInput,
+                id: (inputProps == null ? void 0 : inputProps.id) || inputId,
+                type: "file",
+                multiple,
+                accept,
+                onChange: handleFileChange,
+                className: classNames.combineClassNames(
+                  classMap.hiddenInput,
+                  inputProps == null ? void 0 : inputProps.className
+                ),
+                required,
+                disabled: disabled2,
+                "aria-label": inputAriaLabel || label || "Choose file",
+                "aria-describedby": describedBy,
+                "aria-errormessage": error2 ? ariaErrorMessage || errorId : void 0,
+                "aria-invalid": computedAriaInvalid,
+                "aria-required": computedAriaRequired,
+                "data-testid": `${testId}-input`
+              }
+            ),
+            /* @__PURE__ */ require$$2.jsx("div", { className: classMap.uploadActions, children: /* @__PURE__ */ require$$2.jsx(
+              Button2,
+              {
+                ...selectButtonProps,
+                icon: FileIcon,
+                size: (selectButtonProps == null ? void 0 : selectButtonProps.size) ?? "small",
+                theme,
+                state: error2 ? "error" : state,
+                className: classNames.combineClassNames(
+                  classMap.fileInput,
+                  selectButtonProps == null ? void 0 : selectButtonProps.className
+                ),
+                disabled: uploading || disabled2,
+                outline,
+                rounding: controlRounding,
+                shadow: controlShadow,
+                onClick: () => {
+                  var _a;
+                  (_a = fileInput.current) == null ? void 0 : _a.click();
+                },
+                "aria-label": (selectButtonProps == null ? void 0 : selectButtonProps["aria-label"]) || selectButtonAriaLabel || "Choose file",
+                "aria-describedby": fileNames.length > 0 ? fileListId : void 0,
+                "data-testid": `${testId}-file-button`,
+                children: getButtonLabel()
+              }
+            ) }),
+            rejectedFiles2.length > 0 && /* @__PURE__ */ require$$2.jsxs(
+              "div",
+              {
+                className: classMap.rejectedFiles,
+                "aria-label": rejectedFilesAriaLabel,
+                "data-testid": testId ? `${testId}-rejected-files` : void 0,
+                children: [
+                  /* @__PURE__ */ require$$2.jsx("p", { className: classMap.rejectedLabel, children: "Rejected Files:" }),
+                  /* @__PURE__ */ require$$2.jsx(
+                    "ul",
+                    {
+                      id: rejectedListId,
+                      className: classMap.rejectedList,
+                      "aria-label": rejectedFilesAriaLabel || "Rejected files",
+                      children: rejectedFiles2.map((file, index) => /* @__PURE__ */ require$$2.jsxs("li", { className: classMap.rejectedItem, children: [
+                        /* @__PURE__ */ require$$2.jsx("span", { children: file.name }),
+                        /* @__PURE__ */ require$$2.jsxs("span", { className: classMap.rejectedReason, children: [
+                          " ",
+                          "– ",
+                          file.reason
+                        ] })
+                      ] }, index))
+                    }
+                  )
+                ]
+              }
+            ),
+            fileNames.length > 0 && /* @__PURE__ */ require$$2.jsxs(
+              "div",
+              {
+                className: classMap.uploadControls,
+                "data-testid": testId ? `${testId}-controls` : void 0,
+                children: [
+                  /* @__PURE__ */ require$$2.jsx(
+                    "ul",
+                    {
+                      id: fileListId,
+                      className: classMap.fileList,
+                      "aria-label": fileListAriaLabel || "Selected files",
+                      children: fileNames.map((name, index) => /* @__PURE__ */ require$$2.jsxs("li", { className: classMap.fileListItem, children: [
+                        /* @__PURE__ */ require$$2.jsx("span", { children: name }),
+                        /* @__PURE__ */ require$$2.jsx(
+                          IconButton2,
+                          {
+                            ...removeButtonProps,
+                            icon: TrashIcon,
+                            state: "error",
+                            size: (removeButtonProps == null ? void 0 : removeButtonProps.size) ?? "small",
+                            type: "button",
+                            outline: true,
+                            "aria-label": (removeFileAriaLabel == null ? void 0 : removeFileAriaLabel(name, index)) || `Remove ${name}`,
+                            onClick: () => removeFile(index),
+                            className: classNames.combineClassNames(
+                              classMap.removeButton,
+                              removeButtonProps == null ? void 0 : removeButtonProps.className
+                            ),
+                            "data-testid": `${testId}-remove-${index}`
+                          }
+                        )
+                      ] }, index))
+                    }
+                  ),
+                  uploading && /* @__PURE__ */ require$$2.jsx(
+                    ProgressBar2,
+                    {
+                      ...progressBarProps,
+                      theme,
+                      className: classNames.combineClassNames(
+                        classMap.uploadProgress,
+                        progressBarProps == null ? void 0 : progressBarProps.className
+                      ),
+                      value: uploadProgress2 ?? internalProgress,
+                      indeterminate: uploadProgress2 === void 0,
+                      "data-testid": (progressBarProps == null ? void 0 : progressBarProps["data-testid"]) || `${testId}-progress`
+                    }
+                  ),
+                  !uploading && /* @__PURE__ */ require$$2.jsx(
+                    Button2,
+                    {
+                      ...uploadButtonProps,
+                      theme,
+                      state: error2 ? "error" : state,
+                      disabled: disabled2 || files.length === 0,
+                      onClick: () => {
+                        void handleUpload();
+                      },
+                      loading: uploading,
+                      size: (uploadButtonProps == null ? void 0 : uploadButtonProps.size) ?? "small",
+                      className: classNames.combineClassNames(
+                        classMap.uploadButton,
+                        uploadButtonProps == null ? void 0 : uploadButtonProps.className
+                      ),
+                      "aria-label": uploadButtonAriaLabel || "Upload selected files",
+                      "data-testid": `${testId}-upload-button`,
+                      children: "Upload"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ require$$2.jsx(
+              "div",
+              {
+                id: liveRegionId,
+                className: "sr_only",
+                "aria-live": ariaLive || liveRegionPoliteness,
+                "aria-atomic": "true",
+                "data-testid": testId ? `${testId}-upload-message` : void 0,
+                children: uploadMessage
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+BaseFileUpload.displayName = "BaseFileUpload";
+const noScroll = "_noScroll_1kw9d_109";
+const errorMessage = "_errorMessage_1kw9d_110";
+const loadingContainer = "_loadingContainer_1kw9d_111";
+const hideScrollbar = "_hideScrollbar_1kw9d_103";
+const sr_only = "_sr_only_1kw9d_112";
+const fileUpload = "_fileUpload_1kw9d_637";
+const dragOver = "_dragOver_1kw9d_678";
+const disabled = "_disabled_1kw9d_682";
+const uploadActions = "_uploadActions_1kw9d_689";
+const uploadControls = "_uploadControls_1kw9d_695";
+const uploadProgress = "_uploadProgress_1kw9d_707";
+const uploadButton = "_uploadButton_1kw9d_711";
+const removeButton = "_removeButton_1kw9d_714";
+const hiddenInput = "_hiddenInput_1kw9d_718";
+const fileList = "_fileList_1kw9d_721";
+const fileListItem = "_fileListItem_1kw9d_742";
+const rejectedFiles = "_rejectedFiles_1kw9d_769";
+const rejectedLabel = "_rejectedLabel_1kw9d_783";
+const rejectedList = "_rejectedList_1kw9d_791";
+const rejectedItem = "_rejectedItem_1kw9d_795";
+const roundNone = "_roundNone_1kw9d_799";
+const roundSmall = "_roundSmall_1kw9d_803";
+const roundMedium = "_roundMedium_1kw9d_807";
+const roundLarge = "_roundLarge_1kw9d_811";
+const roundFull = "_roundFull_1kw9d_815";
+const shadowNone = "_shadowNone_1kw9d_819";
+const shadowLight = "_shadowLight_1kw9d_823";
+const shadowMedium = "_shadowMedium_1kw9d_827";
+const shadowStrong = "_shadowStrong_1kw9d_831";
+const shadowIntense = "_shadowIntense_1kw9d_835";
+const primary = "_primary_1kw9d_839";
+const secondary = "_secondary_1kw9d_843";
+const tertiary = "_tertiary_1kw9d_847";
+const quaternary = "_quaternary_1kw9d_851";
+const clear = "_clear_1kw9d_855";
+const success = "_success_1kw9d_859";
+const error = "_error_1kw9d_110";
+const warning = "_warning_1kw9d_875";
+const spin = "_spin_1kw9d_1";
+const pulse = "_pulse_1kw9d_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  fileUpload,
+  dragOver,
+  disabled,
+  uploadActions,
+  uploadControls,
+  uploadProgress,
+  uploadButton,
+  removeButton,
+  hiddenInput,
+  fileList,
+  fileListItem,
+  rejectedFiles,
+  rejectedLabel,
+  rejectedList,
+  rejectedItem,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  primary,
+  secondary,
+  tertiary,
+  quaternary,
+  clear,
+  success,
+  error,
+  warning,
+  "fade-in": "_fade-in_1kw9d_1",
+  "slide-up": "_slide-up_1kw9d_1",
+  "spin-3d": "_spin-3d_1kw9d_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_1kw9d_1",
+  "progress-grow": "_progress-grow_1kw9d_1",
+  "indeterminate-move": "_indeterminate-move_1kw9d_1",
+  "skeleton-loading": "_skeleton-loading_1kw9d_1"
+};
+const FileUpload = (props) => {
+  return /* @__PURE__ */ require$$2.jsx(
+    BaseFileUpload,
+    {
+      ...props,
+      FormGroup: FormGroup.FormGroup,
+      Button: Button.Button,
+      IconButton: IconButton.IconButton,
+      ProgressBar: ProgressBar.ProgressBar,
+      classMap: styles
+    }
+  );
+};
+FileUpload.displayName = "FileUpload";
+exports.FileUpload = FileUpload;
+//# sourceMappingURL=FileUpload-C9Ke2cTs.cjs.map