@dextinity/admin 2.0.0-canary-20260729062014

package/lib/form/file/FileDropzone.js

@@ -0,0 +1,170 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1;
+var _excluded = ["disabled", "hasError", "hideDroppableArea", "hideButton", "multiple", "dropzoneText", "buttonText", "iconMapping", "slotProps", "sx", "className"];
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { Error, Select } from "@dextinity/admin-icons";
+import { Box, css, Typography, useThemeProps } from "@mui/material";
+import { useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { FormattedMessage } from "react-intl";
+import { Button } from "../../common/buttons/Button";
+import { createComponentSlot } from "../../helpers/createComponentSlot";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var FileDropzone = function FileDropzone(inProps) {
+  var _useThemeProps = useThemeProps({
+      props: inProps,
+      name: "CometAdminFileDropzone"
+    }),
+    disabled = _useThemeProps.disabled,
+    hasError = _useThemeProps.hasError,
+    hideDroppableArea = _useThemeProps.hideDroppableArea,
+    hideButton = _useThemeProps.hideButton,
+    multiple = _useThemeProps.multiple,
+    _useThemeProps$dropzo = _useThemeProps.dropzoneText,
+    dropzoneText = _useThemeProps$dropzo === void 0 ? multiple ? /*#__PURE__*/_jsx(FormattedMessage, {
+      id: "comet.fileDropzone.dropfiles",
+      defaultMessage: "Drop files here to upload"
+    }) : /*#__PURE__*/_jsx(FormattedMessage, {
+      id: "comet.fileDropzone.dropFile",
+      defaultMessage: "Drop file here to upload"
+    }) : _useThemeProps$dropzo,
+    _useThemeProps$button = _useThemeProps.buttonText,
+    buttonText = _useThemeProps$button === void 0 ? multiple ? /*#__PURE__*/_jsx(FormattedMessage, {
+      id: "comet.fileDropzone.selectfiles",
+      defaultMessage: "Select files"
+    }) : /*#__PURE__*/_jsx(FormattedMessage, {
+      id: "comet.fileDropzone.selectfile",
+      defaultMessage: "Select file"
+    }) : _useThemeProps$button,
+    _useThemeProps$iconMa = _useThemeProps.iconMapping,
+    iconMapping = _useThemeProps$iconMa === void 0 ? {} : _useThemeProps$iconMa,
+    slotProps = _useThemeProps.slotProps,
+    sx = _useThemeProps.sx,
+    className = _useThemeProps.className,
+    restDropzoneOptions = _objectWithoutProperties(_useThemeProps, _excluded);
+  var _iconMapping$error = iconMapping.error,
+    errorIcon = _iconMapping$error === void 0 ? /*#__PURE__*/_jsx(Error, {
+      color: "error"
+    }) : _iconMapping$error,
+    _iconMapping$select = iconMapping.select,
+    selectIcon = _iconMapping$select === void 0 ? /*#__PURE__*/_jsx(Select, {}) : _iconMapping$select;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    focused = _useState2[0],
+    setFocused = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dragging = _useState4[0],
+    setDragging = _useState4[1];
+  var ownerState = {
+    disabled: Boolean(disabled),
+    hasError: Boolean(hasError),
+    focused: focused,
+    dragging: dragging
+  };
+  var dropzoneState = useDropzone(_objectSpread(_objectSpread({}, restDropzoneOptions), {}, {
+    disabled: disabled,
+    multiple: multiple
+  }));
+  return /*#__PURE__*/_jsx(Box, {
+    display: "contents",
+    onDragOver: function onDragOver() {
+      return setDragging(true);
+    },
+    onDragLeave: function onDragLeave() {
+      return setDragging(false);
+    },
+    onDrop: function onDrop() {
+      return setDragging(false);
+    },
+    children: /*#__PURE__*/_jsxs(Root, _objectSpread(_objectSpread(_objectSpread({}, dropzoneState.getRootProps()), {}, {
+      tabIndex: disabled ? -1 : 0,
+      onFocus: function onFocus() {
+        return setFocused(true);
+      },
+      onBlur: function onBlur() {
+        return setFocused(false);
+      },
+      ownerState: ownerState
+    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root), {}, {
+      sx: sx,
+      className: className,
+      children: [/*#__PURE__*/_jsx("input", _objectSpread({}, dropzoneState.getInputProps())), !hideDroppableArea && /*#__PURE__*/_jsxs(Dropzone, _objectSpread(_objectSpread({
+        ownerState: ownerState
+      }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.dropzone), {}, {
+        children: [hasError && /*#__PURE__*/_jsx(ErrorIconContainer, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.errorIconContainer), {}, {
+          children: errorIcon
+        })), /*#__PURE__*/_jsx(DropzoneText, _objectSpread(_objectSpread({
+          ownerState: ownerState,
+          variant: "body2"
+        }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.dropzoneText), {}, {
+          children: dropzoneText
+        }))]
+      })), !hideButton && /*#__PURE__*/_jsx(SelectFileButton, _objectSpread(_objectSpread({
+        tabIndex: -1,
+        disabled: disabled,
+        variant: "secondary",
+        startIcon: selectIcon
+      }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectFileButton), {}, {
+        children: buttonText
+      }))]
+    }))
+  });
+};
+var Root = createComponentSlot("div")({
+  componentName: "FileDropzone",
+  slotName: "root",
+  classesResolver: function classesResolver(_ref) {
+    var disabled = _ref.disabled,
+      hasError = _ref.hasError,
+      focused = _ref.focused;
+    return [disabled && "disabled", hasError && "error", focused && "focused"];
+  }
+})(function (_ref2) {
+  var theme = _ref2.theme,
+    ownerState = _ref2.ownerState;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: ", ";\n        width: 100%;\n\n        &:focus {\n            outline: none;\n        }\n\n        ", "\n    "])), theme.spacing(2), ownerState.disabled && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            pointer-events: none;\n        "]))));
+});
+var Dropzone = createComponentSlot("div")({
+  componentName: "FileDropzone",
+  slotName: "dropzone"
+})(function (_ref3) {
+  var theme = _ref3.theme,
+    ownerState = _ref3.ownerState;
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        position: relative;\n        display: flex;\n        height: 80px;\n        justify-content: center;\n        align-items: center;\n        align-self: stretch;\n        border-radius: 4px;\n        border: 1px dashed ", ";\n        background-color: white;\n        transition:\n            background-color 200ms,\n            border-color 200ms;\n        cursor: pointer;\n\n        &:hover {\n            border-color: ", ";\n            background-color: ", ";\n        }\n\n        ", "\n\n        ", "\n\n        ", "\n\n        ", "\n    "])), theme.palette.grey[200], theme.palette.grey[400], theme.palette.grey[50], ownerState.dragging && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            border-color: ", ";\n            background-color: ", ";\n        "])), theme.palette.grey[400], theme.palette.grey[50]), ownerState.focused && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            border-color: ", ";\n            background-color: ", ";\n        "])), theme.palette.primary.main, theme.palette.grey[50]), ownerState.hasError && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            border-color: ", ";\n\n            &:hover {\n                border-color: ", ";\n                background-color: ", ";\n            }\n        "])), theme.palette.error.main, theme.palette.error.dark, theme.palette.grey[50]), ownerState.disabled && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n            cursor: default;\n            border-color: ", ";\n            background-color: ", ";\n        "])), theme.palette.grey[100], theme.palette.grey[50]));
+});
+var ErrorIconContainer = createComponentSlot("div")({
+  componentName: "FileDropzone",
+  slotName: "errorIconContainer"
+})(function (_ref4) {
+  var theme = _ref4.theme;
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: absolute;\n        top: 0;\n        right: 0;\n        padding: 10px;\n        color: ", ";\n    "])), theme.palette.error.main);
+});
+var DropzoneText = createComponentSlot(Typography)({
+  componentName: "FileDropzone",
+  slotName: "dropzoneText"
+})(function (_ref5) {
+  var theme = _ref5.theme,
+    ownerState = _ref5.ownerState;
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        padding: ", ";\n        color: ", ";\n        text-align: center;\n\n        ", "\n    "])), theme.spacing(6, 2), theme.palette.grey[400], ownerState.disabled && css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n            color: ", ";\n        "])), theme.palette.grey[200]));
+});
+var SelectFileButton = createComponentSlot(Button)({
+  componentName: "FileDropzone",
+  slotName: "selectFileButton"
+})(function (_ref6) {
+  var theme = _ref6.theme;
+  return css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n        background-color: ", ";\n        color: ", ";\n\n        &:hover {\n            background-color: black;\n            color: ", ";\n        }\n\n        &:disabled {\n            background-color: ", ";\n            color: ", ";\n            opacity: 0.2;\n        }\n    "])), theme.palette.grey[800], theme.palette.common.white, theme.palette.common.white, theme.palette.grey[800], theme.palette.common.white);
+});

package/lib/form/file/FileSelect.d.ts

@@ -0,0 +1,55 @@
+import { type ComponentsOverrides, Typography } from "@mui/material";
+import { type Theme } from "@mui/material/styles";
+import type { ReactNode } from "react";
+import type { Accept, DropzoneOptions } from "react-dropzone";
+import { Alert } from "../../alert/Alert";
+import type { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps";
+import { FileDropzone } from "./FileDropzone";
+import type { ErrorFileSelectItem, FileSelectItem, ValidFileSelectItem } from "./fileSelectItemTypes";
+import { FileSelectListItem } from "./FileSelectListItem";
+export type FileSelectClassKey = "root" | "listLayout" | "gridLayout" | "maxFilesReachedInfo" | "dropzone" | "fileList" | "fileListItem" | "error" | "errorMessage";
+type Layout = "list" | "grid";
+type ThemeProps = ThemedComponentBaseProps<{
+    root: "div";
+    maxFilesReachedInfo: typeof Alert;
+    dropzone: typeof FileDropzone;
+    fileList: "div";
+    fileListItem: typeof FileSelectListItem;
+    error: "div";
+    errorMessage: typeof Typography;
+}>;
+export type FileSelectProps<AdditionalValidFileValues = Record<string, unknown>> = {
+    files: FileSelectItem<AdditionalValidFileValues>[];
+    onDrop?: DropzoneOptions["onDrop"];
+    onRemove?: (file: ValidFileSelectItem<AdditionalValidFileValues> | ErrorFileSelectItem) => void;
+    onDownload?: (file: ValidFileSelectItem<AdditionalValidFileValues>) => void;
+    getDownloadUrl?: (file: ValidFileSelectItem<AdditionalValidFileValues>) => string | undefined;
+    disabled?: boolean;
+    readOnly?: boolean;
+    accept?: Accept;
+    maxFileSize?: number;
+    maxFiles?: number;
+    multiple?: boolean;
+    error?: ReactNode;
+    layout?: Layout;
+    iconMapping?: {
+        error?: ReactNode;
+    };
+} & ThemeProps;
+export declare const FileSelect: <AdditionalValidFileValues = Record<string, unknown>>(inProps: FileSelectProps<AdditionalValidFileValues>) => import("react/jsx-runtime").JSX.Element;
+declare module "@mui/material/styles" {
+    interface ComponentNameToClassKey {
+        CometAdminFileSelect: FileSelectClassKey;
+    }
+    interface ComponentsPropsList {
+        CometAdminFileSelect: FileSelectProps;
+    }
+    interface Components {
+        CometAdminFileSelect?: {
+            defaultProps?: Partial<ComponentsPropsList["CometAdminFileSelect"]>;
+            styleOverrides?: ComponentsOverrides<Theme>["CometAdminFileSelect"];
+        };
+    }
+}
+export {};
+//# sourceMappingURL=FileSelect.d.ts.map

package/lib/form/file/FileSelect.d.ts.map

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

package/lib/form/file/FileSelect.js

@@ -0,0 +1,169 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _excluded = ["slotProps", "readOnly", "disabled", "accept", "maxFileSize", "maxFiles", "multiple", "iconMapping", "onDrop", "onRemove", "onDownload", "getDownloadUrl", "files", "error", "layout"];
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { Error as ErrorIcon } from "@dextinity/admin-icons";
+import { Typography } from "@mui/material";
+import { css, useThemeProps } from "@mui/material/styles";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Alert } from "../../alert/Alert";
+import { createComponentSlot } from "../../helpers/createComponentSlot";
+import { FileDropzone } from "./FileDropzone";
+import { FileSelectListItem } from "./FileSelectListItem";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export var FileSelect = function FileSelect(inProps) {
+  var _files$filter$length;
+  var _useThemeProps = useThemeProps({
+      props: inProps,
+      name: "CometAdminFileSelect"
+    }),
+    slotProps = _useThemeProps.slotProps,
+    readOnly = _useThemeProps.readOnly,
+    disabled = _useThemeProps.disabled,
+    accept = _useThemeProps.accept,
+    maxFileSize = _useThemeProps.maxFileSize,
+    passedMaxFiles = _useThemeProps.maxFiles,
+    passedMultiple = _useThemeProps.multiple,
+    _useThemeProps$iconMa = _useThemeProps.iconMapping,
+    iconMapping = _useThemeProps$iconMa === void 0 ? {} : _useThemeProps$iconMa,
+    onDrop = _useThemeProps.onDrop,
+    onRemove = _useThemeProps.onRemove,
+    onDownload = _useThemeProps.onDownload,
+    getDownloadUrl = _useThemeProps.getDownloadUrl,
+    files = _useThemeProps.files,
+    error = _useThemeProps.error,
+    _useThemeProps$layout = _useThemeProps.layout,
+    layout = _useThemeProps$layout === void 0 ? "list" : _useThemeProps$layout,
+    restProps = _objectWithoutProperties(_useThemeProps, _excluded);
+  var _iconMapping$error = iconMapping.error,
+    errorIcon = _iconMapping$error === void 0 ? /*#__PURE__*/_jsx(ErrorIcon, {
+      color: "error"
+    }) : _iconMapping$error;
+  var intl = useIntl();
+  var multiple = passedMultiple || typeof passedMaxFiles !== "undefined" && passedMaxFiles > 1;
+  var maxFiles = typeof passedMaxFiles === "undefined" ? multiple ? undefined : 1 : passedMaxFiles;
+  var numberOfValidFiles = (_files$filter$length = files === null || files === void 0 ? void 0 : files.filter(function (file) {
+    return !("error" in file);
+  }).length) !== null && _files$filter$length !== void 0 ? _files$filter$length : 0;
+  var maxAmountOfFilesSelected = typeof maxFiles !== "undefined" && multiple && numberOfValidFiles >= maxFiles;
+  var maxNumberOfFilesToBeAdded = maxFiles ? maxFiles - numberOfValidFiles : undefined;
+  var showFileList = files.length > 0 || readOnly;
+  var ownerState = {
+    layout: layout
+  };
+  return /*#__PURE__*/_jsxs(Root, _objectSpread(_objectSpread(_objectSpread({
+    ownerState: ownerState
+  }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root), restProps), {}, {
+    children: [!readOnly && /*#__PURE__*/_jsx(_Fragment, {
+      children: maxAmountOfFilesSelected ? /*#__PURE__*/_jsx(MaxFilesReachedInfo, _objectSpread(_objectSpread({
+        title: /*#__PURE__*/_jsx(FormattedMessage, {
+          id: "comet.fileSelect.maximumReached",
+          defaultMessage: "Maximum reached"
+        }),
+        severity: "info"
+      }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.maxFilesReachedInfo), {}, {
+        children: /*#__PURE__*/_jsx(FormattedMessage, {
+          id: "comet.fileSelect.maximumFilesAmount",
+          defaultMessage: "The maximum number of uploads has been reached. Please delete files from the list before uploading new files."
+        })
+      })) : /*#__PURE__*/_jsx(Dropzone, _objectSpread({
+        disabled: disabled,
+        hasError: Boolean(error),
+        onDrop: onDrop,
+        accept: accept,
+        multiple: multiple,
+        maxSize: maxFileSize === null ? undefined : maxFileSize,
+        maxFiles: maxNumberOfFilesToBeAdded
+      }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.dropzone))
+    }), showFileList && /*#__PURE__*/_jsx(FileList, _objectSpread(_objectSpread({
+      ownerState: ownerState
+    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.fileList), {}, {
+      children: files.length > 0 ? /*#__PURE__*/_jsx(_Fragment, {
+        children: files.map(function (file, index) {
+          var isValidFile = !("error" in file) && !("loading" in file);
+          var filePreview;
+          if (layout === "grid") {
+            if (isValidFile && file.previewUrl) {
+              filePreview = file.previewUrl;
+            } else {
+              filePreview = true;
+            }
+          } else {
+            filePreview = false;
+          }
+          return /*#__PURE__*/_jsx(FileListItem, _objectSpread({
+            file: file,
+            onClickDownload: isValidFile && onDownload ? function () {
+              onDownload(file);
+            } : undefined,
+            downloadUrl: isValidFile && getDownloadUrl ? getDownloadUrl(file) : undefined,
+            onClickDelete: readOnly || !onRemove || "loading" in file ? undefined : function () {
+              return onRemove(file);
+            },
+            filePreview: filePreview
+          }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.fileListItem), index);
+        })
+      }) : /*#__PURE__*/_jsx(FileListItem, _objectSpread({
+        file: {
+          name: intl.formatMessage({
+            id: "comet.fileSelect.noAttachments",
+            defaultMessage: "There are no attachments"
+          })
+        }
+      }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.fileListItem))
+    })), Boolean(error) && /*#__PURE__*/_jsxs(Error, _objectSpread(_objectSpread({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.error), {}, {
+      children: [errorIcon, /*#__PURE__*/_jsx(ErrorMessage, _objectSpread(_objectSpread({
+        variant: "caption",
+        color: "error"
+      }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.errorMessage), {}, {
+        children: error
+      }))]
+    }))]
+  }));
+};
+var Root = createComponentSlot("div")({
+  componentName: "FileSelect",
+  slotName: "root",
+  classesResolver: function classesResolver(_ref) {
+    var layout = _ref.layout;
+    return [layout === "list" && "listLayout", layout === "grid" && "gridLayout"];
+  }
+})(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 10px;\n"]))));
+var Dropzone = createComponentSlot(FileDropzone)({
+  componentName: "FileSelect",
+  slotName: "dropzone"
+})();
+var FileList = createComponentSlot("div")({
+  componentName: "FileSelect",
+  slotName: "fileList"
+})(function (_ref2) {
+  var theme = _ref2.theme,
+    ownerState = _ref2.ownerState;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        width: 100%;\n\n        ", "\n    "])), ownerState.layout === "grid" && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            display: grid;\n            gap: ", ";\n            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n\n            ", " {\n                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n\n                .CometAdminFormFieldContainer-horizontal & {\n                    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n                }\n            }\n        "])), theme.spacing(2), theme.breakpoints.up("md")));
+});
+var FileListItem = createComponentSlot(FileSelectListItem)({
+  componentName: "FileSelect",
+  slotName: "fileListItem"
+})();
+var MaxFilesReachedInfo = createComponentSlot(Alert)({
+  componentName: "FileSelect",
+  slotName: "maxFilesReachedInfo"
+})(css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n    box-sizing: border-box;\n"]))));
+var Error = createComponentSlot("div")({
+  componentName: "FileSelect",
+  slotName: "error"
+})(function (_ref3) {
+  var theme = _ref3.theme;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: center;\n        color: ", ";\n        gap: 5px;\n    "])), theme.palette.error.main);
+});
+var ErrorMessage = createComponentSlot(Typography)({
+  componentName: "FileSelect",
+  slotName: "errorMessage"
+})();

package/lib/form/file/FileSelectListItem.d.ts

@@ -0,0 +1,49 @@
+import { Chip, type ComponentsOverrides, IconButton as MuiIconButton, Skeleton as MuiSkeleton, type Theme, Typography } from "@mui/material";
+import { type ReactNode } from "react";
+import type { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps";
+import type { FileSelectItem } from "./fileSelectItemTypes";
+export type FileSelectListItemClassKey = "root" | "hasFilePreview" | "hasErrorWithDetails" | "hasErrorWithoutDetails" | "disabled" | "skeleton" | "preview" | "previewImage" | "content" | "fileListItemInfos" | "fileName" | "fileSize" | "errorIconContainer" | "errorDetails" | "errorDetailsText" | "iconButton";
+export type FileSelectListItemProps = ThemedComponentBaseProps<{
+    root: "div";
+    skeleton: typeof MuiSkeleton;
+    content: "div";
+    fileListItemInfos: "div";
+    fileName: typeof Typography;
+    fileSize: typeof Chip;
+    errorIconContainer: "div";
+    errorDetails: "div";
+    errorDetailsText: typeof Typography;
+    iconButton: typeof MuiIconButton;
+}> & {
+    file: FileSelectItem;
+    disabled?: boolean;
+    onClickDownload?: () => void;
+    downloadUrl?: string;
+    onClickDelete?: () => void;
+    filePreview?: string | boolean;
+    iconMapping?: {
+        download?: ReactNode;
+        loading?: ReactNode;
+        delete?: ReactNode;
+        error?: ReactNode;
+        filePreviewGenericFile?: ReactNode;
+        filePreviewLoading?: ReactNode;
+        filePreviewError?: ReactNode;
+    };
+};
+export declare const FileSelectListItem: (inProps: FileSelectListItemProps) => import("react/jsx-runtime").JSX.Element;
+declare module "@mui/material/styles" {
+    interface ComponentNameToClassKey {
+        CometAdminFileSelectListItem: FileSelectListItemClassKey;
+    }
+    interface ComponentsPropsList {
+        CometAdminFileSelectListItem: FileSelectListItemProps;
+    }
+    interface Components {
+        CometAdminFileSelectListItem?: {
+            defaultProps?: Partial<ComponentsPropsList["CometAdminFileSelectListItem"]>;
+            styleOverrides?: ComponentsOverrides<Theme>["CometAdminFileSelectListItem"];
+        };
+    }
+}
+//# sourceMappingURL=FileSelectListItem.d.ts.map

package/lib/form/file/FileSelectListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileSelectListItem.d.ts","sourceRoot":"","sources":["../../../src/form/file/FileSelectListItem.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,IAAI,EACJ,KAAK,mBAAmB,EAExB,UAAU,IAAI,aAAa,EAC3B,QAAQ,IAAI,WAAW,EACvB,KAAK,KAAK,EACV,UAAU,EAEb,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAK/C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAEvF,OAAO,KAAK,EAAuB,cAAc,EAAE,MAAM,uBAAuB,CAAC;AASjF,MAAM,MAAM,0BAA0B,GAChC,MAAM,GACN,gBAAgB,GAChB,qBAAqB,GACrB,wBAAwB,GACxB,UAAU,GACV,UAAU,GACV,SAAS,GACT,cAAc,GACd,SAAS,GACT,mBAAmB,GACnB,UAAU,GACV,UAAU,GACV,oBAAoB,GACpB,cAAc,GACd,kBAAkB,GAClB,YAAY,CAAC;AAEnB,MAAM,MAAM,uBAAuB,GAAG,wBAAwB,CAAC;IAC3D,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,EAAE,OAAO,WAAW,CAAC;IAC7B,OAAO,EAAE,KAAK,CAAC;IACf,iBAAiB,EAAE,KAAK,CAAC;IACzB,QAAQ,EAAE,OAAO,UAAU,CAAC;IAC5B,QAAQ,EAAE,OAAO,IAAI,CAAC;IACtB,kBAAkB,EAAE,KAAK,CAAC;IAC1B,YAAY,EAAE,KAAK,CAAC;IACpB,gBAAgB,EAAE,OAAO,UAAU,CAAC;IACpC,UAAU,EAAE,OAAO,aAAa,CAAC;CACpC,CAAC,GAAG;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE;QACV,QAAQ,CAAC,EAAE,SAAS,CAAC;QACrB,OAAO,CAAC,EAAE,SAAS,CAAC;QACpB,MAAM,CAAC,EAAE,SAAS,CAAC;QACnB,KAAK,CAAC,EAAE,SAAS,CAAC;QAClB,sBAAsB,CAAC,EAAE,SAAS,CAAC;QACnC,kBAAkB,CAAC,EAAE,SAAS,CAAC;QAC/B,gBAAgB,CAAC,EAAE,SAAS,CAAC;KAChC,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,SAAS,uBAAuB,4CAyGlE,CAAC;AAiRF,OAAO,QAAQ,sBAAsB,CAAC;IAClC,UAAU,uBAAuB;QAC7B,4BAA4B,EAAE,0BAA0B,CAAC;KAC5D;IAED,UAAU,mBAAmB;QACzB,4BAA4B,EAAE,uBAAuB,CAAC;KACzD;IAED,UAAU,UAAU;QAChB,4BAA4B,CAAC,EAAE;YAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,8BAA8B,CAAC,CAAC,CAAC;YAC5E,cAAc,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC,8BAA8B,CAAC,CAAC;SAC/E,CAAC;KACL;CACJ"}