sanity-plugin-media 4.0.0 → 4.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -20,13 +20,12 @@ import { Virtuoso, VirtuosoGrid, GroupedVirtuoso } from "react-virtuoso";
20
20
  import { zodResolver } from "@hookform/resolvers/zod";
21
21
  import { Controller, useForm } from "react-hook-form";
22
22
  import * as z from "zod";
23
- import format from "date-fns/format";
23
+ import { format, formatRelative } from "date-fns";
24
24
  import filesize from "filesize";
25
25
  import copy from "copy-to-clipboard";
26
26
  import { useIntentLink } from "sanity/router";
27
27
  import { FileIcon as FileIcon$1, defaultStyles } from "react-file-icon";
28
28
  import CreatableSelect from "react-select/creatable";
29
- import formatRelative from "date-fns/formatRelative";
30
29
  import { useDropzone } from "react-dropzone";
31
30
  function getDefaultExportFromCjs(x) {
32
31
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
@@ -475,7 +474,10 @@ const useKeyPress = (hotkey, onPress) => {
475
474
  fn: (value, _field) => value ? `references('${value}')` : void 0,
476
475
  label: "includes"
477
476
  }
478
- }, ORDER_OPTIONS = [
477
+ }, SUPPORTED_ASSET_TYPES = [
478
+ "file",
479
+ "image"
480
+ ], ORDER_OPTIONS = [
479
481
  {
480
482
  direction: "desc",
481
483
  field: "_createdAt"
@@ -1258,7 +1260,9 @@ const UPLOADS_ACTIONS = {
1258
1260
  originalFilename,
1259
1261
  size,
1260
1262
  source {
1261
- name
1263
+ name,
1264
+ id,
1265
+ url,
1262
1266
  },
1263
1267
  title,
1264
1268
  url
@@ -2361,15 +2365,21 @@ const Container$1 = styled(Box)(({ $scheme, theme }) => css`
2361
2365
  let creditLineExcludeSources;
2362
2366
  return options?.creditLine?.excludeSources && (creditLineExcludeSources = Array.isArray(options?.creditLine?.excludeSources) ? options.creditLine.excludeSources : [options?.creditLine?.excludeSources]), {
2363
2367
  dropzone: { maxSize: options?.maximumUploadSize },
2368
+ components: {
2369
+ details: options?.components?.details
2370
+ },
2364
2371
  creditLine: {
2365
2372
  enabled: options?.creditLine?.enabled || !1,
2366
2373
  excludeSources: creditLineExcludeSources
2367
- }
2374
+ },
2375
+ directUploads: options?.directUploads ?? !0
2368
2376
  };
2369
2377
  }, [
2370
2378
  options?.creditLine?.enabled,
2379
+ options?.components,
2371
2380
  options?.creditLine?.excludeSources,
2372
- options?.maximumUploadSize
2381
+ options?.maximumUploadSize,
2382
+ options?.directUploads
2373
2383
  ]);
2374
2384
  return /* @__PURE__ */ jsx(ToolOptionsContext.Provider, { value, children });
2375
2385
  }, useToolOptions = () => {
@@ -2828,7 +2838,51 @@ const imageDprUrl = (asset, options) => {
2828
2838
  }
2829
2839
  }
2830
2840
  ) : /* @__PURE__ */ jsx(FileIcon, { extension: asset.extension, width: "50%" });
2831
- }, { radius: themeRadius, space: themeSpace } = studioTheme, reactSelectStyles = (scheme) => ({
2841
+ }, FormSubmitButton = (props) => {
2842
+ const { disabled, isValid, lastUpdated, onClick } = props;
2843
+ let content;
2844
+ return isValid ? lastUpdated ? content = /* @__PURE__ */ jsxs(Fragment, { children: [
2845
+ "Last updated",
2846
+ /* @__PURE__ */ jsx("br", {}),
2847
+ " ",
2848
+ format(new Date(lastUpdated), "PPp")
2849
+ ] }) : content = "No unpublished changes" : content = "There are validation errors that need to be fixed before this document can be published", /* @__PURE__ */ jsx(
2850
+ Tooltip,
2851
+ {
2852
+ animate: !0,
2853
+ content: /* @__PURE__ */ jsx(Box, { padding: 3, style: { maxWidth: "185px" }, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: content }) }),
2854
+ disabled: "ontouchstart" in window,
2855
+ placement: "top",
2856
+ portal: !0,
2857
+ children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
2858
+ Button,
2859
+ {
2860
+ disabled,
2861
+ fontSize: 1,
2862
+ onClick,
2863
+ text: "Save and close",
2864
+ tone: "primary"
2865
+ }
2866
+ ) })
2867
+ }
2868
+ );
2869
+ }, Image$1 = styled.img`
2870
+ --checkerboard-color: ${(props) => props.$scheme ? getSchemeColor(props.$scheme, "bg2") : "inherit"};
2871
+
2872
+ display: block;
2873
+ width: 100%;
2874
+ height: 100%;
2875
+ object-fit: contain;
2876
+
2877
+ ${(props) => props.$showCheckerboard && css`
2878
+ background-image: linear-gradient(45deg, var(--checkerboard-color) 25%, transparent 25%),
2879
+ linear-gradient(-45deg, var(--checkerboard-color) 25%, transparent 25%),
2880
+ linear-gradient(45deg, transparent 75%, var(--checkerboard-color) 75%),
2881
+ linear-gradient(-45deg, transparent 75%, var(--checkerboard-color) 75%);
2882
+ background-size: 20px 20px;
2883
+ background-position: 0 0, 0 10px, 10px -10px, -10px 0;
2884
+ `}
2885
+ `, { radius: themeRadius, space: themeSpace } = studioTheme, reactSelectStyles = (scheme) => ({
2832
2886
  control: (styles, { isFocused }) => {
2833
2887
  let boxShadow = "inset 0 0 0 1px var(--card-border-color)";
2834
2888
  return isFocused && (boxShadow = `inset 0 0 0 1px ${getSchemeColor(scheme, "inputEnabledBorder")},
@@ -3052,55 +3106,99 @@ const imageDprUrl = (asset, options) => {
3052
3106
  }
3053
3107
  )
3054
3108
  ] });
3055
- }), FormSubmitButton = (props) => {
3056
- const { disabled, isValid, lastUpdated, onClick } = props;
3057
- let content;
3058
- return isValid ? lastUpdated ? content = /* @__PURE__ */ jsxs(Fragment, { children: [
3059
- "Last updated",
3060
- /* @__PURE__ */ jsx("br", {}),
3061
- " ",
3062
- format(new Date(lastUpdated), "PPp")
3063
- ] }) : content = "No unpublished changes" : content = "There are validation errors that need to be fixed before this document can be published", /* @__PURE__ */ jsx(
3064
- Tooltip,
3065
- {
3066
- animate: !0,
3067
- content: /* @__PURE__ */ jsx(Box, { padding: 3, style: { maxWidth: "185px" }, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: content }) }),
3068
- disabled: "ontouchstart" in window,
3069
- placement: "top",
3070
- portal: !0,
3071
- children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
3072
- Button,
3073
- {
3074
- disabled,
3075
- fontSize: 1,
3076
- onClick,
3077
- text: "Save and close",
3078
- tone: "primary"
3079
- }
3080
- ) })
3081
- }
3082
- );
3083
- }, Image$1 = styled.img`
3084
- --checkerboard-color: ${(props) => props.$scheme ? getSchemeColor(props.$scheme, "bg2") : "inherit"};
3085
-
3086
- display: block;
3087
- width: 100%;
3088
- height: 100%;
3089
- object-fit: contain;
3090
-
3091
- ${(props) => props.$showCheckerboard && css`
3092
- background-image: linear-gradient(45deg, var(--checkerboard-color) 25%, transparent 25%),
3093
- linear-gradient(-45deg, var(--checkerboard-color) 25%, transparent 25%),
3094
- linear-gradient(45deg, transparent 75%, var(--checkerboard-color) 75%),
3095
- linear-gradient(-45deg, transparent 75%, var(--checkerboard-color) 75%);
3096
- background-size: 20px 20px;
3097
- background-position: 0 0, 0 10px, 10px -10px, -10px 0;
3098
- `}
3099
- `, DialogAssetEdit = (props) => {
3109
+ });
3110
+ function Details({
3111
+ formUpdating,
3112
+ handleCreateTag,
3113
+ control,
3114
+ errors,
3115
+ register,
3116
+ allTagOptions,
3117
+ assetTagOptions,
3118
+ currentAsset,
3119
+ creditLine
3120
+ }) {
3121
+ return /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
3122
+ /* @__PURE__ */ jsx(
3123
+ FormFieldInputTags,
3124
+ {
3125
+ control,
3126
+ disabled: formUpdating,
3127
+ error: errors?.opt?.media?.tags?.message,
3128
+ label: "Tags",
3129
+ name: "opt.media.tags",
3130
+ onCreateTag: handleCreateTag,
3131
+ options: allTagOptions,
3132
+ placeholder: "Select or create...",
3133
+ value: assetTagOptions
3134
+ }
3135
+ ),
3136
+ /* @__PURE__ */ jsx(
3137
+ FormFieldInputText,
3138
+ {
3139
+ ...register("originalFilename"),
3140
+ disabled: formUpdating,
3141
+ error: errors?.originalFilename?.message,
3142
+ label: "Filename",
3143
+ name: "originalFilename",
3144
+ value: currentAsset?.originalFilename
3145
+ }
3146
+ ),
3147
+ /* @__PURE__ */ jsx(
3148
+ FormFieldInputText,
3149
+ {
3150
+ ...register("title"),
3151
+ disabled: formUpdating,
3152
+ error: errors?.title?.message,
3153
+ label: "Title",
3154
+ name: "title",
3155
+ value: currentAsset?.title
3156
+ }
3157
+ ),
3158
+ /* @__PURE__ */ jsx(
3159
+ FormFieldInputText,
3160
+ {
3161
+ ...register("altText"),
3162
+ disabled: formUpdating,
3163
+ error: errors?.altText?.message,
3164
+ label: "Alt Text",
3165
+ name: "altText",
3166
+ value: currentAsset?.altText
3167
+ }
3168
+ ),
3169
+ /* @__PURE__ */ jsx(
3170
+ FormFieldInputTextarea,
3171
+ {
3172
+ ...register("description"),
3173
+ disabled: formUpdating,
3174
+ error: errors?.description?.message,
3175
+ label: "Description",
3176
+ name: "description",
3177
+ rows: 5,
3178
+ value: currentAsset?.description
3179
+ }
3180
+ ),
3181
+ creditLine?.enabled && /* @__PURE__ */ jsx(
3182
+ FormFieldInputText,
3183
+ {
3184
+ ...register("creditLine"),
3185
+ error: errors?.creditLine?.message,
3186
+ label: "Credit",
3187
+ name: "creditLine",
3188
+ value: currentAsset?.creditLine,
3189
+ disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
3190
+ }
3191
+ )
3192
+ ] });
3193
+ }
3194
+ function renderDefaultDetails(props) {
3195
+ return /* @__PURE__ */ jsx(Details, { ...props });
3196
+ }
3197
+ const DialogAssetEdit = (props) => {
3100
3198
  const {
3101
3199
  children,
3102
3200
  dialog: { assetId, id, lastCreatedTag, lastRemovedTagIds }
3103
- } = props, client = useVersionedClient(), scheme = useColorSchemeValue(), documentStore = useDocumentStore(), dispatch = useDispatch(), assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))), tags = useTypedSelector(selectTags), assetUpdatedPrev = useRef(void 0), [assetSnapshot, setAssetSnapshot] = useState(assetItem?.asset), [tabSection, setTabSection] = useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, allTagOptions = getTagSelectOptions(tags), assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset)), { creditLine } = useToolOptions(), generateDefaultValues = useCallback(
3201
+ } = props, client = useVersionedClient(), scheme = useColorSchemeValue(), documentStore = useDocumentStore(), dispatch = useDispatch(), assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))), tags = useTypedSelector(selectTags), assetUpdatedPrev = useRef(void 0), [assetSnapshot, setAssetSnapshot] = useState(assetItem?.asset), [tabSection, setTabSection] = useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, allTagOptions = getTagSelectOptions(tags), assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset)), { creditLine, components: { details: CustomDetails } = {} } = useToolOptions(), generateDefaultValues = useCallback(
3104
3202
  (asset) => ({
3105
3203
  altText: asset?.altText || "",
3106
3204
  creditLine: asset?.creditLine || "",
@@ -3173,7 +3271,7 @@ const imageDprUrl = (asset, options) => {
3173
3271
  },
3174
3272
  [assetItem?.asset, dispatch]
3175
3273
  );
3176
- return useEffect(() => {
3274
+ useEffect(() => {
3177
3275
  if (!assetItem?.asset)
3178
3276
  return;
3179
3277
  const subscriptionAsset = client.listen(groq`*[_id == $id]`, { id: assetItem?.asset._id }).subscribe(handleAssetUpdate);
@@ -3192,32 +3290,48 @@ const imageDprUrl = (asset, options) => {
3192
3290
  }
3193
3291
  }, [getValues, lastRemovedTagIds, setValue]), useEffect(() => {
3194
3292
  assetUpdatedPrev.current !== assetItem?.asset._updatedAt && reset(generateDefaultValues(assetItem?.asset)), assetUpdatedPrev.current = assetItem?.asset._updatedAt;
3195
- }, [assetItem?.asset, generateDefaultValues, reset]), currentAsset ? /* @__PURE__ */ jsxs(
3293
+ }, [assetItem?.asset, generateDefaultValues, reset]);
3294
+ const Footer = () => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
3295
+ /* @__PURE__ */ jsx(
3296
+ Button,
3297
+ {
3298
+ disabled: formUpdating,
3299
+ fontSize: 1,
3300
+ mode: "bleed",
3301
+ onClick: handleDelete,
3302
+ text: "Delete",
3303
+ tone: "critical"
3304
+ }
3305
+ ),
3306
+ /* @__PURE__ */ jsx(
3307
+ FormSubmitButton,
3308
+ {
3309
+ disabled: formUpdating || !isDirty || !isValid,
3310
+ isValid,
3311
+ lastUpdated: currentAsset?._updatedAt,
3312
+ onClick: handleSubmit(onSubmit)
3313
+ }
3314
+ )
3315
+ ] }) });
3316
+ if (!currentAsset)
3317
+ return null;
3318
+ const detailsProps = {
3319
+ control,
3320
+ errors,
3321
+ formUpdating,
3322
+ register,
3323
+ setValue,
3324
+ assetTagOptions,
3325
+ allTagOptions,
3326
+ handleCreateTag,
3327
+ currentAsset,
3328
+ creditLine
3329
+ };
3330
+ return /* @__PURE__ */ jsxs(
3196
3331
  Dialog,
3197
3332
  {
3198
3333
  animate: !0,
3199
- footer: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
3200
- /* @__PURE__ */ jsx(
3201
- Button,
3202
- {
3203
- disabled: formUpdating,
3204
- fontSize: 1,
3205
- mode: "bleed",
3206
- onClick: handleDelete,
3207
- text: "Delete",
3208
- tone: "critical"
3209
- }
3210
- ),
3211
- /* @__PURE__ */ jsx(
3212
- FormSubmitButton,
3213
- {
3214
- disabled: formUpdating || !isDirty || !isValid,
3215
- isValid,
3216
- lastUpdated: currentAsset?._updatedAt,
3217
- onClick: handleSubmit(onSubmit)
3218
- }
3219
- )
3220
- ] }) }), {}),
3334
+ footer: /* @__PURE__ */ jsx(Footer, {}),
3221
3335
  header: "Asset details",
3222
3336
  id,
3223
3337
  onClose: handleClose,
@@ -3262,78 +3376,13 @@ const imageDprUrl = (asset, options) => {
3262
3376
  "aria-labelledby": "details",
3263
3377
  hidden: tabSection !== "details",
3264
3378
  id: "details-panel",
3265
- children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
3266
- /* @__PURE__ */ jsx(
3267
- FormFieldInputTags,
3268
- {
3269
- control,
3270
- disabled: formUpdating,
3271
- error: errors?.opt?.media?.tags?.message,
3272
- label: "Tags",
3273
- name: "opt.media.tags",
3274
- onCreateTag: handleCreateTag,
3275
- options: allTagOptions,
3276
- placeholder: "Select or create...",
3277
- value: assetTagOptions
3278
- }
3279
- ),
3280
- /* @__PURE__ */ jsx(
3281
- FormFieldInputText,
3282
- {
3283
- ...register("originalFilename"),
3284
- disabled: formUpdating,
3285
- error: errors?.originalFilename?.message,
3286
- label: "Filename",
3287
- name: "originalFilename",
3288
- value: currentAsset?.originalFilename
3289
- }
3290
- ),
3291
- /* @__PURE__ */ jsx(
3292
- FormFieldInputText,
3293
- {
3294
- ...register("title"),
3295
- disabled: formUpdating,
3296
- error: errors?.title?.message,
3297
- label: "Title",
3298
- name: "title",
3299
- value: currentAsset?.title
3300
- }
3301
- ),
3302
- /* @__PURE__ */ jsx(
3303
- FormFieldInputText,
3304
- {
3305
- ...register("altText"),
3306
- disabled: formUpdating,
3307
- error: errors?.altText?.message,
3308
- label: "Alt Text",
3309
- name: "altText",
3310
- value: currentAsset?.altText
3311
- }
3312
- ),
3313
- /* @__PURE__ */ jsx(
3314
- FormFieldInputTextarea,
3315
- {
3316
- ...register("description"),
3317
- disabled: formUpdating,
3318
- error: errors?.description?.message,
3319
- label: "Description",
3320
- name: "description",
3321
- rows: 5,
3322
- value: currentAsset?.description
3323
- }
3324
- ),
3325
- creditLine?.enabled && /* @__PURE__ */ jsx(
3326
- FormFieldInputText,
3327
- {
3328
- ...register("creditLine"),
3329
- error: errors?.creditLine?.message,
3330
- label: "Credit",
3331
- name: "creditLine",
3332
- value: currentAsset?.creditLine,
3333
- disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
3334
- }
3335
- )
3336
- ] })
3379
+ children: CustomDetails ? /* @__PURE__ */ jsx(
3380
+ CustomDetails,
3381
+ {
3382
+ ...detailsProps,
3383
+ renderDefaultDetails
3384
+ }
3385
+ ) : /* @__PURE__ */ jsx(Details, { ...detailsProps })
3337
3386
  }
3338
3387
  ),
3339
3388
  /* @__PURE__ */ jsx(
@@ -3373,7 +3422,7 @@ const imageDprUrl = (asset, options) => {
3373
3422
  children
3374
3423
  ]
3375
3424
  }
3376
- ) : null;
3425
+ );
3377
3426
  }, DialogConfirm = (props) => {
3378
3427
  const { children, dialog } = props, dispatch = useDispatch(), handleClose = () => {
3379
3428
  dispatch(dialogActions.remove({ id: dialog?.id }));
@@ -3860,7 +3909,7 @@ const imageDprUrl = (asset, options) => {
3860
3909
  throw new Error("useDropzoneActions must be used within an DropzoneDispatchProvider");
3861
3910
  return context;
3862
3911
  }, Header = (props) => {
3863
- const { onClose } = props, { open } = useDropzoneActions(), { onSelect } = useAssetSourceActions(), assetTypes = useTypedSelector((state) => state.assets.assetTypes), selectedDocument = useTypedSelector((state) => state.selected.document);
3912
+ const { onClose } = props, { open } = useDropzoneActions(), { onSelect } = useAssetSourceActions(), assetTypes = useTypedSelector((state) => state.assets.assetTypes), selectedDocument = useTypedSelector((state) => state.selected.document), { directUploads } = useToolOptions();
3864
3913
  return /* @__PURE__ */ jsx(Box, { paddingY: 2, children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", children: [
3865
3914
  /* @__PURE__ */ jsx(Box, { flex: 1, marginX: 3, children: /* @__PURE__ */ jsxs(Inline, { style: { whiteSpace: "nowrap" }, children: [
3866
3915
  /* @__PURE__ */ jsx(Text, { textOverflow: "ellipsis", weight: "semibold", children: /* @__PURE__ */ jsx("span", { children: onSelect ? `Insert ${assetTypes.join(" or ")}` : "Browse Assets" }) }),
@@ -3870,15 +3919,14 @@ const imageDprUrl = (asset, options) => {
3870
3919
  ] }) })
3871
3920
  ] }) }),
3872
3921
  /* @__PURE__ */ jsxs(Flex, { marginX: 2, children: [
3873
- /* @__PURE__ */ jsx(
3922
+ directUploads && /* @__PURE__ */ jsx(
3874
3923
  Button,
3875
3924
  {
3876
3925
  fontSize: 1,
3877
3926
  icon: UploadIcon,
3878
3927
  mode: "bleed",
3879
3928
  onClick: open,
3880
- text: `Upload ${assetTypes.length === 1 ? pluralize(assetTypes[0]) : "assets"}`,
3881
- tone: "primary"
3929
+ text: `Upload ${assetTypes.length === 1 ? pluralize(assetTypes[0]) : "assets"}`
3882
3930
  }
3883
3931
  ),
3884
3932
  onClose && /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
@@ -3969,7 +4017,7 @@ const imageDprUrl = (asset, options) => {
3969
4017
  `
3970
4018
  ), StyledWarningOutlineIcon = styled(WarningFilledIcon)(({ theme }) => ({
3971
4019
  color: theme.sanity.color.spot.red
3972
- })), CardAsset = (props) => {
4020
+ })), CardAsset$1 = (props) => {
3973
4021
  const { id, selected } = props, scheme = useColorSchemeValue(), shiftPressed = useKeyPress("shift"), dispatch = useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions();
3974
4022
  if (!asset)
3975
4023
  return null;
@@ -4099,7 +4147,7 @@ const imageDprUrl = (asset, options) => {
4099
4147
  )
4100
4148
  ] }) });
4101
4149
  };
4102
- var CardAsset$1 = memo(CardAsset);
4150
+ var CardAsset = memo(CardAsset$1);
4103
4151
  const PREVIEW_WIDTH = 180, createBlob = (img) => new Promise((resolve) => {
4104
4152
  const imageAspect = img.width / img.height, canvas = document.createElement("canvas");
4105
4153
  canvas.width = PREVIEW_WIDTH, canvas.height = Math.max(PREVIEW_WIDTH / imageAspect, 1);
@@ -4456,7 +4504,7 @@ const CardWrapper = styled(Flex)`
4456
4504
  }
4457
4505
  ) });
4458
4506
  }, CARD_HEIGHT = 220, CARD_WIDTH = 240, VirtualCell = memo(
4459
- ({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsx(CardAsset$1, { id: item.id, selected }) : item?.type === "upload" ? /* @__PURE__ */ jsx(CardUpload, { id: item.id }) : null
4507
+ ({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsx(CardAsset, { id: item.id, selected }) : item?.type === "upload" ? /* @__PURE__ */ jsx(CardUpload, { id: item.id }) : null
4460
4508
  ), StyledItemContainer = styled.div`
4461
4509
  height: ${CARD_HEIGHT}px;
4462
4510
  width: ${CARD_WIDTH}px;
@@ -4621,7 +4669,7 @@ const CardWrapper = styled(Flex)`
4621
4669
  `
4622
4670
  ), StyledWarningIcon = styled(WarningFilledIcon)(({ theme }) => ({
4623
4671
  color: theme.sanity.color.spot.red
4624
- })), TableRowAsset = (props) => {
4672
+ })), TableRowAsset$1 = (props) => {
4625
4673
  const { id, selected } = props, scheme = useColorSchemeValue(), shiftPressed = useKeyPress("shift"), [referenceCountVisible, setReferenceCountVisible] = useState(!1), refCountVisibleTimeout = useRef(null), dispatch = useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), mediaIndex = useMediaIndex(), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions(), handleContextActionClick = useCallback(
4626
4674
  (e) => {
4627
4675
  e.stopPropagation(), asset && (onSelect ? dispatch(dialogActions.showAssetEdit({ assetId: asset._id })) : shiftPressed.current && !picked ? dispatch(assetsActions.pickRange({ startId: lastPicked || asset._id, endId: asset._id })) : dispatch(assetsActions.pick({ assetId: asset._id, picked: !picked })));
@@ -4847,7 +4895,7 @@ const CardWrapper = styled(Flex)`
4847
4895
  }
4848
4896
  ) : null;
4849
4897
  };
4850
- var TableRowAsset$1 = memo(TableRowAsset);
4898
+ var TableRowAsset = memo(TableRowAsset$1);
4851
4899
  const TableRowUpload = (props) => {
4852
4900
  const { id } = props, scheme = useColorSchemeValue(), dispatch = useDispatch(), item = useTypedSelector((state) => selectUploadById(state, id)), mediaIndex = useMediaIndex();
4853
4901
  if (!item)
@@ -4961,7 +5009,7 @@ const TableRowUpload = (props) => {
4961
5009
  }
4962
5010
  );
4963
5011
  }, VirtualRow = memo(
4964
- ({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsx(Box, { style: { height: "100px" }, children: /* @__PURE__ */ jsx(TableRowAsset$1, { id: item.id, selected }) }) : item?.type === "upload" ? /* @__PURE__ */ jsx(Box, { style: { height: "100px" }, children: /* @__PURE__ */ jsx(TableRowUpload, { id: item.id }) }) : null
5012
+ ({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsx(Box, { style: { height: "100px" }, children: /* @__PURE__ */ jsx(TableRowAsset, { id: item.id, selected }) }) : item?.type === "upload" ? /* @__PURE__ */ jsx(Box, { style: { height: "100px" }, children: /* @__PURE__ */ jsx(TableRowUpload, { id: item.id }) }) : null
4965
5013
  ), AssetTableVirtualized = (props) => {
4966
5014
  const { items, onLoadMore } = props, selectedAssets = useTypedSelector((state) => state.selected.assets), selectedIds = selectedAssets && selectedAssets.map((asset) => asset._id) || [], totalCount = items?.length;
4967
5015
  return totalCount === 0 ? null : /* @__PURE__ */ jsx(
@@ -5224,6 +5272,9 @@ const rootEpic = combineEpics(
5224
5272
  const assetIds = getAssetIds(document2);
5225
5273
  return [...new Set(assetIds.sort())];
5226
5274
  };
5275
+ function isSupportedAssetType(assetType) {
5276
+ return assetType ? SUPPORTED_ASSET_TYPES.includes(assetType) : !1;
5277
+ }
5227
5278
  class ReduxProvider extends Component {
5228
5279
  store;
5229
5280
  constructor(props) {
@@ -5254,7 +5305,7 @@ class ReduxProvider extends Component {
5254
5305
  preloadedState: {
5255
5306
  assets: {
5256
5307
  ...initialState$5,
5257
- assetTypes: props?.assetType ? [props.assetType] : ["file", "image"]
5308
+ assetTypes: isSupportedAssetType(props?.assetType) ? [props.assetType] : ["file", "image"]
5258
5309
  },
5259
5310
  debug: {
5260
5311
  badConnection: !1,
@@ -5346,7 +5397,8 @@ async function filterFiles(fileList) {
5346
5397
  }
5347
5398
  const UploadDropzone = (props) => {
5348
5399
  const { children } = props, {
5349
- dropzone: { maxSize }
5400
+ dropzone: { maxSize },
5401
+ directUploads
5350
5402
  } = useToolOptions(), { onSelect } = useAssetSourceActions(), dispatch = useDispatch(), assetTypes = useTypedSelector((state) => state.assets.assetTypes), isImageAssetType = assetTypes.length === 1 && assetTypes[0] === "image", handleDrop = async (acceptedFiles) => {
5351
5403
  acceptedFiles.forEach(
5352
5404
  (file) => dispatch(
@@ -5387,7 +5439,8 @@ const UploadDropzone = (props) => {
5387
5439
  noDrag: !!onSelect,
5388
5440
  onDrop: handleDrop,
5389
5441
  maxSize,
5390
- onDropRejected: handleDropRejected
5442
+ onDropRejected: handleDropRejected,
5443
+ disabled: !directUploads
5391
5444
  });
5392
5445
  return /* @__PURE__ */ jsx(DropzoneDispatchProvider, { open, children: /* @__PURE__ */ jsxs(UploadContainer, { ...getRootProps(), children: [
5393
5446
  /* @__PURE__ */ jsx("input", { ...getInputProps() }),