@strapi/upload 5.58.0 → 5.60.0

package/dist/admin/components/MediaLibraryInput/AssetCarousel.js

@@ -0,0 +1,161 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var translations = require('../../utils/translations.js');
+
+/** Narrowest a card and the tile get side by side before stacking, in px. */ const MIN_CARD_WIDTH = 130;
+/**
+ * Narrowest a card gets when two share the row, in px. Wider than the single
+ * card's, so the row drops to one card before names are cut to a few letters.
+ */ const MIN_CARD_WIDTH_FOR_TWO = 180;
+const GAP = 16;
+const MAX_CARDS = 2;
+const Container = styledComponents.styled(designSystem.Box)`
+  background: ${({ theme })=>theme.colors.neutral100};
+  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  border-radius: ${({ theme })=>theme.borderRadius};
+`;
+const Track = styledComponents.styled.div`
+  display: grid;
+  grid-template-columns: repeat(${({ $columns })=>$columns}, minmax(0, 1fr));
+  gap: ${GAP}px;
+`;
+const Cards = styledComponents.styled.div`
+  position: relative;
+  display: grid;
+  grid-column: span ${({ $columns })=>$columns};
+  grid-template-columns: repeat(${({ $columns })=>$columns}, minmax(0, 1fr));
+  gap: ${GAP}px;
+`;
+const Arrow = styledComponents.styled(designSystem.Box)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  ${({ $side })=>$side === 'start' ? 'left: -1.6rem;' : 'right: -1.6rem;'}
+
+  button {
+    border-radius: 50%;
+    box-shadow: ${({ theme })=>theme.shadows.filterShadow};
+  }
+`;
+/**
+ * How the row fits the field. The edit layout's size sets it: a third of the
+ * form stacks one card over the drop zone, a full-width field shows two cards
+ * beside it, anything in between one. Mobile always shows one card, stacked on
+ * a phone. The measured width can only take cards away, for a field squeezed
+ * by a narrow component.
+ */ const getRowLayout = ({ width, layoutSize, isMobile, isPhone })=>{
+    const isNarrowLayout = isPhone || layoutSize !== undefined && layoutSize <= 4;
+    const maxCards = isMobile || layoutSize !== undefined && layoutSize < 12 ? 1 : MAX_CARDS;
+    // Unmeasured: no layout yet, or no `ResizeObserver`.
+    const isMeasured = width > 0;
+    const fitsCardAndTile = !isMeasured || width >= 2 * MIN_CARD_WIDTH + GAP;
+    const fitsTwoCardsAndTile = !isMeasured || width >= 3 * MIN_CARD_WIDTH_FOR_TWO + 2 * GAP;
+    if (isNarrowLayout || !fitsCardAndTile) {
+        return {
+            cards: 1,
+            isStacked: true
+        };
+    }
+    return {
+        cards: fitsTwoCardsAndTile ? maxCards : 1,
+        isStacked: false
+    };
+};
+/**
+ * A single row of cards followed by the drop tile. When the field holds more
+ * than fit, arrows page through the cards and the tile stays put.
+ */ const AssetCarousel = ({ children, renderDropZone, layoutSize })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const theme = styledComponents.useTheme();
+    const isMobile = strapiAdmin.useIsMobile();
+    const isPhone = !strapiAdmin.useMediaQuery(theme.breakpoints.small);
+    const trackRef = React.useRef(null);
+    const [width, setWidth] = React.useState(0);
+    const [start, setStart] = React.useState(0);
+    const cards = React.Children.toArray(children);
+    const { cards: cardsPerRow, isStacked } = getRowLayout({
+        width,
+        layoutSize,
+        isMobile,
+        isPhone
+    });
+    const maxStart = Math.max(cards.length - cardsPerRow, 0);
+    const firstVisible = Math.min(start, maxStart);
+    // Fewer cards than fit leave the tile right after them, not at the far end.
+    const visibleCount = Math.min(cards.length, cardsPerRow);
+    React.useLayoutEffect(()=>{
+        const track = trackRef.current;
+        if (!track || typeof ResizeObserver === 'undefined') {
+            return undefined;
+        }
+        const observer = new ResizeObserver(([entry])=>setWidth(entry.contentRect.width));
+        observer.observe(track);
+        return ()=>observer.disconnect();
+    }, []);
+    // A card added at the end (a new upload) is scrolled into view.
+    const previousCount = React.useRef(cards.length);
+    React.useEffect(()=>{
+        if (cards.length > previousCount.current) {
+            setStart(maxStart);
+        }
+        previousCount.current = cards.length;
+    }, [
+        cards.length,
+        maxStart
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(Container, {
+        padding: 4,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(Track, {
+                ref: trackRef,
+                $columns: isStacked ? 1 : cardsPerRow + 1,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(Cards, {
+                        $columns: visibleCount,
+                        children: [
+                            cards.slice(firstVisible, firstVisible + cardsPerRow),
+                            firstVisible > 0 && /*#__PURE__*/ jsxRuntime.jsx(Arrow, {
+                                $side: "start",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                    onClick: ()=>setStart(firstVisible - 1),
+                                    label: formatMessage({
+                                        id: translations.getTranslationKey('mediaLibraryInput.actions.previousSlide'),
+                                        defaultMessage: 'Previous slide'
+                                    }),
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.ChevronLeft, {})
+                                })
+                            }),
+                            firstVisible < maxStart && /*#__PURE__*/ jsxRuntime.jsx(Arrow, {
+                                $side: "end",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                    onClick: ()=>setStart(firstVisible + 1),
+                                    label: formatMessage({
+                                        id: translations.getTranslationKey('mediaLibraryInput.actions.nextSlide'),
+                                        defaultMessage: 'Next slide'
+                                    }),
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.ChevronRight, {})
+                                })
+                            })
+                        ]
+                    }),
+                    !isStacked && renderDropZone('tile')
+                ]
+            }),
+            isStacked && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                paddingTop: 4,
+                children: renderDropZone('stacked')
+            })
+        ]
+    });
+};
+
+exports.AssetCarousel = AssetCarousel;
+//# sourceMappingURL=AssetCarousel.js.map

package/dist/admin/components/MediaLibraryInput/AssetCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCarousel.js","sources":["../../../../admin/src/components/MediaLibraryInput/AssetCarousel.tsx"],"sourcesContent":["import { Children, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';\n\nimport { useIsMobile, useMediaQuery } from '@strapi/admin/strapi-admin';\nimport { Box, IconButton } from '@strapi/design-system';\nimport { ChevronLeft, ChevronRight } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled, useTheme } from 'styled-components';\n\nimport { getTranslationKey } from '../../utils/translations';\n\nimport type { ZoneVariant } from './AssetDropZone';\n\n/** Narrowest a card and the tile get side by side before stacking, in px. */\nconst MIN_CARD_WIDTH = 130;\n/**\n * Narrowest a card gets when two share the row, in px. Wider than the single\n * card's, so the row drops to one card before names are cut to a few letters.\n */\nconst MIN_CARD_WIDTH_FOR_TWO = 180;\nconst GAP = 16;\nconst MAX_CARDS = 2;\n\nconst Container = styled(Box)`\n  background: ${({ theme }) => theme.colors.neutral100};\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: ${({ theme }) => theme.borderRadius};\n`;\n\nconst Track = styled.div<{ $columns: number }>`\n  display: grid;\n  grid-template-columns: repeat(${({ $columns }) => $columns}, minmax(0, 1fr));\n  gap: ${GAP}px;\n`;\n\nconst Cards = styled.div<{ $columns: number }>`\n  position: relative;\n  display: grid;\n  grid-column: span ${({ $columns }) => $columns};\n  grid-template-columns: repeat(${({ $columns }) => $columns}, minmax(0, 1fr));\n  gap: ${GAP}px;\n`;\n\nconst Arrow = styled(Box)<{ $side: 'start' | 'end' }>`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n  ${({ $side }) => ($side === 'start' ? 'left: -1.6rem;' : 'right: -1.6rem;')}\n\n  button {\n    border-radius: 50%;\n    box-shadow: ${({ theme }) => theme.shadows.filterShadow};\n  }\n`;\n\ninterface RowLayout {\n  /** Cards per row, the drop zone not included. */\n  cards: number;\n  /** Too narrow for a card and the tile side by side: the drop zone goes below. */\n  isStacked: boolean;\n}\n\n/**\n * How the row fits the field. The edit layout's size sets it: a third of the\n * form stacks one card over the drop zone, a full-width field shows two cards\n * beside it, anything in between one. Mobile always shows one card, stacked on\n * a phone. The measured width can only take cards away, for a field squeezed\n * by a narrow component.\n */\nconst getRowLayout = ({\n  width,\n  layoutSize,\n  isMobile,\n  isPhone,\n}: {\n  width: number;\n  layoutSize?: number;\n  /** Below the tablet breakpoint: one card, whatever the layout says. */\n  isMobile: boolean;\n  /** Below the small breakpoint: the drop zone goes under the card. */\n  isPhone: boolean;\n}): RowLayout => {\n  const isNarrowLayout = isPhone || (layoutSize !== undefined && layoutSize <= 4);\n  const maxCards = isMobile || (layoutSize !== undefined && layoutSize < 12) ? 1 : MAX_CARDS;\n\n  // Unmeasured: no layout yet, or no `ResizeObserver`.\n  const isMeasured = width > 0;\n  const fitsCardAndTile = !isMeasured || width >= 2 * MIN_CARD_WIDTH + GAP;\n  const fitsTwoCardsAndTile = !isMeasured || width >= 3 * MIN_CARD_WIDTH_FOR_TWO + 2 * GAP;\n\n  if (isNarrowLayout || !fitsCardAndTile) {\n    return { cards: 1, isStacked: true };\n  }\n\n  return { cards: fitsTwoCardsAndTile ? maxCards : 1, isStacked: false };\n};\n\ninterface AssetCarouselProps {\n  /** One card per asset or upload, in field order. */\n  children: ReactNode;\n  /** Always shown: after the cards, or below them on a narrow field. */\n  renderDropZone: (variant: Exclude<ZoneVariant, 'bar'>) => ReactNode;\n  /** The field's width in the edit layout, out of 12, when the host knows it. */\n  layoutSize?: number;\n}\n\n/**\n * A single row of cards followed by the drop tile. When the field holds more\n * than fit, arrows page through the cards and the tile stays put.\n */\nexport const AssetCarousel = ({ children, renderDropZone, layoutSize }: AssetCarouselProps) => {\n  const { formatMessage } = useIntl();\n  const theme = useTheme();\n  const isMobile = useIsMobile();\n  const isPhone = !useMediaQuery(theme.breakpoints.small);\n  const trackRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n  const [start, setStart] = useState(0);\n\n  const cards = Children.toArray(children);\n  const { cards: cardsPerRow, isStacked } = getRowLayout({ width, layoutSize, isMobile, isPhone });\n  const maxStart = Math.max(cards.length - cardsPerRow, 0);\n  const firstVisible = Math.min(start, maxStart);\n  // Fewer cards than fit leave the tile right after them, not at the far end.\n  const visibleCount = Math.min(cards.length, cardsPerRow);\n\n  useLayoutEffect(() => {\n    const track = trackRef.current;\n\n    if (!track || typeof ResizeObserver === 'undefined') {\n      return undefined;\n    }\n\n    const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));\n    observer.observe(track);\n\n    return () => observer.disconnect();\n  }, []);\n\n  // A card added at the end (a new upload) is scrolled into view.\n  const previousCount = useRef(cards.length);\n  useEffect(() => {\n    if (cards.length > previousCount.current) {\n      setStart(maxStart);\n    }\n    previousCount.current = cards.length;\n  }, [cards.length, maxStart]);\n\n  return (\n    <Container padding={4}>\n      <Track ref={trackRef} $columns={isStacked ? 1 : cardsPerRow + 1}>\n        <Cards $columns={visibleCount}>\n          {cards.slice(firstVisible, firstVisible + cardsPerRow)}\n\n          {firstVisible > 0 && (\n            <Arrow $side=\"start\">\n              <IconButton\n                onClick={() => setStart(firstVisible - 1)}\n                label={formatMessage({\n                  id: getTranslationKey('mediaLibraryInput.actions.previousSlide'),\n                  defaultMessage: 'Previous slide',\n                })}\n              >\n                <ChevronLeft />\n              </IconButton>\n            </Arrow>\n          )}\n\n          {firstVisible < maxStart && (\n            <Arrow $side=\"end\">\n              <IconButton\n                onClick={() => setStart(firstVisible + 1)}\n                label={formatMessage({\n                  id: getTranslationKey('mediaLibraryInput.actions.nextSlide'),\n                  defaultMessage: 'Next slide',\n                })}\n              >\n                <ChevronRight />\n              </IconButton>\n            </Arrow>\n          )}\n        </Cards>\n        {!isStacked && renderDropZone('tile')}\n      </Track>\n      {isStacked && <Box paddingTop={4}>{renderDropZone('stacked')}</Box>}\n    </Container>\n  );\n};\n"],"names":["MIN_CARD_WIDTH","MIN_CARD_WIDTH_FOR_TWO","GAP","MAX_CARDS","Container","styled","Box","theme","colors","neutral100","neutral200","borderRadius","Track","div","$columns","Cards","Arrow","$side","shadows","filterShadow","getRowLayout","width","layoutSize","isMobile","isPhone","isNarrowLayout","undefined","maxCards","isMeasured","fitsCardAndTile","fitsTwoCardsAndTile","cards","isStacked","AssetCarousel","children","renderDropZone","formatMessage","useIntl","useTheme","useIsMobile","useMediaQuery","breakpoints","small","trackRef","useRef","setWidth","useState","start","setStart","Children","toArray","cardsPerRow","maxStart","Math","max","length","firstVisible","min","visibleCount","useLayoutEffect","track","current","ResizeObserver","observer","entry","contentRect","observe","disconnect","previousCount","useEffect","_jsxs","padding","ref","slice","_jsx","IconButton","onClick","label","id","getTranslationKey","defaultMessage","ChevronLeft","ChevronRight","paddingTop"],"mappings":"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"}

package/dist/admin/components/MediaLibraryInput/AssetCarousel.mjs

@@ -0,0 +1,159 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, Children, useLayoutEffect, useEffect } from 'react';
+import { useIsMobile, useMediaQuery } from '@strapi/admin/strapi-admin';
+import { Box, IconButton } from '@strapi/design-system';
+import { ChevronLeft, ChevronRight } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled, useTheme } from 'styled-components';
+import { getTranslationKey } from '../../utils/translations.mjs';
+
+/** Narrowest a card and the tile get side by side before stacking, in px. */ const MIN_CARD_WIDTH = 130;
+/**
+ * Narrowest a card gets when two share the row, in px. Wider than the single
+ * card's, so the row drops to one card before names are cut to a few letters.
+ */ const MIN_CARD_WIDTH_FOR_TWO = 180;
+const GAP = 16;
+const MAX_CARDS = 2;
+const Container = styled(Box)`
+  background: ${({ theme })=>theme.colors.neutral100};
+  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  border-radius: ${({ theme })=>theme.borderRadius};
+`;
+const Track = styled.div`
+  display: grid;
+  grid-template-columns: repeat(${({ $columns })=>$columns}, minmax(0, 1fr));
+  gap: ${GAP}px;
+`;
+const Cards = styled.div`
+  position: relative;
+  display: grid;
+  grid-column: span ${({ $columns })=>$columns};
+  grid-template-columns: repeat(${({ $columns })=>$columns}, minmax(0, 1fr));
+  gap: ${GAP}px;
+`;
+const Arrow = styled(Box)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  ${({ $side })=>$side === 'start' ? 'left: -1.6rem;' : 'right: -1.6rem;'}
+
+  button {
+    border-radius: 50%;
+    box-shadow: ${({ theme })=>theme.shadows.filterShadow};
+  }
+`;
+/**
+ * How the row fits the field. The edit layout's size sets it: a third of the
+ * form stacks one card over the drop zone, a full-width field shows two cards
+ * beside it, anything in between one. Mobile always shows one card, stacked on
+ * a phone. The measured width can only take cards away, for a field squeezed
+ * by a narrow component.
+ */ const getRowLayout = ({ width, layoutSize, isMobile, isPhone })=>{
+    const isNarrowLayout = isPhone || layoutSize !== undefined && layoutSize <= 4;
+    const maxCards = isMobile || layoutSize !== undefined && layoutSize < 12 ? 1 : MAX_CARDS;
+    // Unmeasured: no layout yet, or no `ResizeObserver`.
+    const isMeasured = width > 0;
+    const fitsCardAndTile = !isMeasured || width >= 2 * MIN_CARD_WIDTH + GAP;
+    const fitsTwoCardsAndTile = !isMeasured || width >= 3 * MIN_CARD_WIDTH_FOR_TWO + 2 * GAP;
+    if (isNarrowLayout || !fitsCardAndTile) {
+        return {
+            cards: 1,
+            isStacked: true
+        };
+    }
+    return {
+        cards: fitsTwoCardsAndTile ? maxCards : 1,
+        isStacked: false
+    };
+};
+/**
+ * A single row of cards followed by the drop tile. When the field holds more
+ * than fit, arrows page through the cards and the tile stays put.
+ */ const AssetCarousel = ({ children, renderDropZone, layoutSize })=>{
+    const { formatMessage } = useIntl();
+    const theme = useTheme();
+    const isMobile = useIsMobile();
+    const isPhone = !useMediaQuery(theme.breakpoints.small);
+    const trackRef = useRef(null);
+    const [width, setWidth] = useState(0);
+    const [start, setStart] = useState(0);
+    const cards = Children.toArray(children);
+    const { cards: cardsPerRow, isStacked } = getRowLayout({
+        width,
+        layoutSize,
+        isMobile,
+        isPhone
+    });
+    const maxStart = Math.max(cards.length - cardsPerRow, 0);
+    const firstVisible = Math.min(start, maxStart);
+    // Fewer cards than fit leave the tile right after them, not at the far end.
+    const visibleCount = Math.min(cards.length, cardsPerRow);
+    useLayoutEffect(()=>{
+        const track = trackRef.current;
+        if (!track || typeof ResizeObserver === 'undefined') {
+            return undefined;
+        }
+        const observer = new ResizeObserver(([entry])=>setWidth(entry.contentRect.width));
+        observer.observe(track);
+        return ()=>observer.disconnect();
+    }, []);
+    // A card added at the end (a new upload) is scrolled into view.
+    const previousCount = useRef(cards.length);
+    useEffect(()=>{
+        if (cards.length > previousCount.current) {
+            setStart(maxStart);
+        }
+        previousCount.current = cards.length;
+    }, [
+        cards.length,
+        maxStart
+    ]);
+    return /*#__PURE__*/ jsxs(Container, {
+        padding: 4,
+        children: [
+            /*#__PURE__*/ jsxs(Track, {
+                ref: trackRef,
+                $columns: isStacked ? 1 : cardsPerRow + 1,
+                children: [
+                    /*#__PURE__*/ jsxs(Cards, {
+                        $columns: visibleCount,
+                        children: [
+                            cards.slice(firstVisible, firstVisible + cardsPerRow),
+                            firstVisible > 0 && /*#__PURE__*/ jsx(Arrow, {
+                                $side: "start",
+                                children: /*#__PURE__*/ jsx(IconButton, {
+                                    onClick: ()=>setStart(firstVisible - 1),
+                                    label: formatMessage({
+                                        id: getTranslationKey('mediaLibraryInput.actions.previousSlide'),
+                                        defaultMessage: 'Previous slide'
+                                    }),
+                                    children: /*#__PURE__*/ jsx(ChevronLeft, {})
+                                })
+                            }),
+                            firstVisible < maxStart && /*#__PURE__*/ jsx(Arrow, {
+                                $side: "end",
+                                children: /*#__PURE__*/ jsx(IconButton, {
+                                    onClick: ()=>setStart(firstVisible + 1),
+                                    label: formatMessage({
+                                        id: getTranslationKey('mediaLibraryInput.actions.nextSlide'),
+                                        defaultMessage: 'Next slide'
+                                    }),
+                                    children: /*#__PURE__*/ jsx(ChevronRight, {})
+                                })
+                            })
+                        ]
+                    }),
+                    !isStacked && renderDropZone('tile')
+                ]
+            }),
+            isStacked && /*#__PURE__*/ jsx(Box, {
+                paddingTop: 4,
+                children: renderDropZone('stacked')
+            })
+        ]
+    });
+};
+
+export { AssetCarousel };
+//# sourceMappingURL=AssetCarousel.mjs.map

package/dist/admin/components/MediaLibraryInput/AssetCarousel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCarousel.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AssetCarousel.tsx"],"sourcesContent":["import { Children, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';\n\nimport { useIsMobile, useMediaQuery } from '@strapi/admin/strapi-admin';\nimport { Box, IconButton } from '@strapi/design-system';\nimport { ChevronLeft, ChevronRight } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled, useTheme } from 'styled-components';\n\nimport { getTranslationKey } from '../../utils/translations';\n\nimport type { ZoneVariant } from './AssetDropZone';\n\n/** Narrowest a card and the tile get side by side before stacking, in px. */\nconst MIN_CARD_WIDTH = 130;\n/**\n * Narrowest a card gets when two share the row, in px. Wider than the single\n * card's, so the row drops to one card before names are cut to a few letters.\n */\nconst MIN_CARD_WIDTH_FOR_TWO = 180;\nconst GAP = 16;\nconst MAX_CARDS = 2;\n\nconst Container = styled(Box)`\n  background: ${({ theme }) => theme.colors.neutral100};\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: ${({ theme }) => theme.borderRadius};\n`;\n\nconst Track = styled.div<{ $columns: number }>`\n  display: grid;\n  grid-template-columns: repeat(${({ $columns }) => $columns}, minmax(0, 1fr));\n  gap: ${GAP}px;\n`;\n\nconst Cards = styled.div<{ $columns: number }>`\n  position: relative;\n  display: grid;\n  grid-column: span ${({ $columns }) => $columns};\n  grid-template-columns: repeat(${({ $columns }) => $columns}, minmax(0, 1fr));\n  gap: ${GAP}px;\n`;\n\nconst Arrow = styled(Box)<{ $side: 'start' | 'end' }>`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n  ${({ $side }) => ($side === 'start' ? 'left: -1.6rem;' : 'right: -1.6rem;')}\n\n  button {\n    border-radius: 50%;\n    box-shadow: ${({ theme }) => theme.shadows.filterShadow};\n  }\n`;\n\ninterface RowLayout {\n  /** Cards per row, the drop zone not included. */\n  cards: number;\n  /** Too narrow for a card and the tile side by side: the drop zone goes below. */\n  isStacked: boolean;\n}\n\n/**\n * How the row fits the field. The edit layout's size sets it: a third of the\n * form stacks one card over the drop zone, a full-width field shows two cards\n * beside it, anything in between one. Mobile always shows one card, stacked on\n * a phone. The measured width can only take cards away, for a field squeezed\n * by a narrow component.\n */\nconst getRowLayout = ({\n  width,\n  layoutSize,\n  isMobile,\n  isPhone,\n}: {\n  width: number;\n  layoutSize?: number;\n  /** Below the tablet breakpoint: one card, whatever the layout says. */\n  isMobile: boolean;\n  /** Below the small breakpoint: the drop zone goes under the card. */\n  isPhone: boolean;\n}): RowLayout => {\n  const isNarrowLayout = isPhone || (layoutSize !== undefined && layoutSize <= 4);\n  const maxCards = isMobile || (layoutSize !== undefined && layoutSize < 12) ? 1 : MAX_CARDS;\n\n  // Unmeasured: no layout yet, or no `ResizeObserver`.\n  const isMeasured = width > 0;\n  const fitsCardAndTile = !isMeasured || width >= 2 * MIN_CARD_WIDTH + GAP;\n  const fitsTwoCardsAndTile = !isMeasured || width >= 3 * MIN_CARD_WIDTH_FOR_TWO + 2 * GAP;\n\n  if (isNarrowLayout || !fitsCardAndTile) {\n    return { cards: 1, isStacked: true };\n  }\n\n  return { cards: fitsTwoCardsAndTile ? maxCards : 1, isStacked: false };\n};\n\ninterface AssetCarouselProps {\n  /** One card per asset or upload, in field order. */\n  children: ReactNode;\n  /** Always shown: after the cards, or below them on a narrow field. */\n  renderDropZone: (variant: Exclude<ZoneVariant, 'bar'>) => ReactNode;\n  /** The field's width in the edit layout, out of 12, when the host knows it. */\n  layoutSize?: number;\n}\n\n/**\n * A single row of cards followed by the drop tile. When the field holds more\n * than fit, arrows page through the cards and the tile stays put.\n */\nexport const AssetCarousel = ({ children, renderDropZone, layoutSize }: AssetCarouselProps) => {\n  const { formatMessage } = useIntl();\n  const theme = useTheme();\n  const isMobile = useIsMobile();\n  const isPhone = !useMediaQuery(theme.breakpoints.small);\n  const trackRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n  const [start, setStart] = useState(0);\n\n  const cards = Children.toArray(children);\n  const { cards: cardsPerRow, isStacked } = getRowLayout({ width, layoutSize, isMobile, isPhone });\n  const maxStart = Math.max(cards.length - cardsPerRow, 0);\n  const firstVisible = Math.min(start, maxStart);\n  // Fewer cards than fit leave the tile right after them, not at the far end.\n  const visibleCount = Math.min(cards.length, cardsPerRow);\n\n  useLayoutEffect(() => {\n    const track = trackRef.current;\n\n    if (!track || typeof ResizeObserver === 'undefined') {\n      return undefined;\n    }\n\n    const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));\n    observer.observe(track);\n\n    return () => observer.disconnect();\n  }, []);\n\n  // A card added at the end (a new upload) is scrolled into view.\n  const previousCount = useRef(cards.length);\n  useEffect(() => {\n    if (cards.length > previousCount.current) {\n      setStart(maxStart);\n    }\n    previousCount.current = cards.length;\n  }, [cards.length, maxStart]);\n\n  return (\n    <Container padding={4}>\n      <Track ref={trackRef} $columns={isStacked ? 1 : cardsPerRow + 1}>\n        <Cards $columns={visibleCount}>\n          {cards.slice(firstVisible, firstVisible + cardsPerRow)}\n\n          {firstVisible > 0 && (\n            <Arrow $side=\"start\">\n              <IconButton\n                onClick={() => setStart(firstVisible - 1)}\n                label={formatMessage({\n                  id: getTranslationKey('mediaLibraryInput.actions.previousSlide'),\n                  defaultMessage: 'Previous slide',\n                })}\n              >\n                <ChevronLeft />\n              </IconButton>\n            </Arrow>\n          )}\n\n          {firstVisible < maxStart && (\n            <Arrow $side=\"end\">\n              <IconButton\n                onClick={() => setStart(firstVisible + 1)}\n                label={formatMessage({\n                  id: getTranslationKey('mediaLibraryInput.actions.nextSlide'),\n                  defaultMessage: 'Next slide',\n                })}\n              >\n                <ChevronRight />\n              </IconButton>\n            </Arrow>\n          )}\n        </Cards>\n        {!isStacked && renderDropZone('tile')}\n      </Track>\n      {isStacked && <Box paddingTop={4}>{renderDropZone('stacked')}</Box>}\n    </Container>\n  );\n};\n"],"names":["MIN_CARD_WIDTH","MIN_CARD_WIDTH_FOR_TWO","GAP","MAX_CARDS","Container","styled","Box","theme","colors","neutral100","neutral200","borderRadius","Track","div","$columns","Cards","Arrow","$side","shadows","filterShadow","getRowLayout","width","layoutSize","isMobile","isPhone","isNarrowLayout","undefined","maxCards","isMeasured","fitsCardAndTile","fitsTwoCardsAndTile","cards","isStacked","AssetCarousel","children","renderDropZone","formatMessage","useIntl","useTheme","useIsMobile","useMediaQuery","breakpoints","small","trackRef","useRef","setWidth","useState","start","setStart","Children","toArray","cardsPerRow","maxStart","Math","max","length","firstVisible","min","visibleCount","useLayoutEffect","track","current","ResizeObserver","observer","entry","contentRect","observe","disconnect","previousCount","useEffect","_jsxs","padding","ref","slice","_jsx","IconButton","onClick","label","id","getTranslationKey","defaultMessage","ChevronLeft","ChevronRight","paddingTop"],"mappings":"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"}

package/dist/admin/components/MediaLibraryInput/AssetDropZone.js

@@ -0,0 +1,156 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var translations = require('../../utils/translations.js');
+
+const DRAG_FRAME_COLORS = {
+    accept: {
+        border: 'primary600',
+        background: 'primary100'
+    },
+    reject: {
+        border: 'neutral300',
+        background: 'neutral150'
+    }
+};
+const Zone = styledComponents.styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: ${({ theme })=>theme.spaces[4]};
+  width: 100%;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  text-align: ${({ $variant })=>$variant === 'bar' ? 'start' : 'center'};
+
+  ${({ $variant, theme })=>$variant !== 'bar' ? `
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    min-height: ${$variant === 'tile' ? '20.8rem' : 'auto'};
+    padding: ${theme.spaces[4]};
+    border: 1px dashed ${theme.colors.neutral300};
+    background: ${theme.colors.neutral0};
+  ` : `
+    min-height: 7.2rem;
+    padding: ${theme.spaces[4]};
+    border: 1px solid ${theme.colors.neutral200};
+    background: ${theme.colors.neutral100};
+  `}
+
+  // Only while a file is dragged over the zone: a solid frame inset from the
+  // zone's own border marks where the file will land, greyed out when it can't.
+  ${({ $dragState, theme })=>$dragState !== 'idle' && `
+    &::after {
+      content: '';
+      position: absolute;
+      inset: ${theme.spaces[2]};
+      border: 1px solid ${theme.colors[DRAG_FRAME_COLORS[$dragState].border]};
+      border-radius: ${theme.borderRadius};
+      background: ${theme.colors[DRAG_FRAME_COLORS[$dragState].background]};
+      pointer-events: none;
+    }
+
+    & > * {
+      z-index: 1;
+    }
+  `}
+
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+  }
+`;
+const IconFrame = styledComponents.styled(designSystem.Flex)`
+  flex-shrink: 0;
+  width: 4rem;
+  height: 4rem;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ theme })=>theme.colors.neutral200};
+  color: ${({ theme })=>theme.colors.neutral500};
+`;
+/**
+ * The field's own drop target. It only takes drops: browsing and picking files
+ * go through the "Add asset" menu, so the field has one way in, not two.
+ *
+ * Deliberately not the Media Library page's
+ * `UploadDropZoneProvider`: that one covers a whole route and paints a
+ * full-surface overlay, where this has to stay inside one field on a form that
+ * may hold several of them.
+ */ const AssetDropZone = ({ variant = 'bar', disabled = false, onDropFiles })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const [isDragging, setIsDragging] = React.useState(false);
+    // Drag events fire on descendants too, so a plain boolean flickers as the
+    // pointer crosses the icon or the label. Counting enter/leave pairs doesn't.
+    const dragDepth = React.useRef(0);
+    const handleDragEnter = React.useCallback((event)=>{
+        event.preventDefault();
+        if (!event.dataTransfer.types.includes('Files')) {
+            return;
+        }
+        dragDepth.current += 1;
+        setIsDragging(true);
+    }, []);
+    const handleDragLeave = React.useCallback((event)=>{
+        event.preventDefault();
+        dragDepth.current -= 1;
+        if (dragDepth.current <= 0) {
+            dragDepth.current = 0;
+            setIsDragging(false);
+        }
+    }, []);
+    const handleDragOver = React.useCallback((event)=>{
+        event.preventDefault();
+        // `none` shows the no-drop cursor, and the browser then fires no `drop`.
+        event.dataTransfer.dropEffect = disabled ? 'none' : 'copy';
+    }, [
+        disabled
+    ]);
+    const handleDrop = React.useCallback((event)=>{
+        event.preventDefault();
+        dragDepth.current = 0;
+        setIsDragging(false);
+        if (disabled) {
+            return;
+        }
+        const files = Array.from(event.dataTransfer.files ?? []);
+        if (files.length > 0) {
+            onDropFiles(files);
+        }
+    }, [
+        disabled,
+        onDropFiles
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(Zone, {
+        $dragState: isDragging ? disabled ? 'reject' : 'accept' : 'idle',
+        $variant: variant,
+        "data-disabled": disabled,
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(IconFrame, {
+                justifyContent: "center",
+                alignItems: "center",
+                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Images, {
+                    width: "2.4rem",
+                    height: "2.4rem"
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                textColor: "neutral600",
+                children: formatMessage({
+                    id: translations.getTranslationKey('content-manager.input.placeholder'),
+                    defaultMessage: 'Drag & drop an asset here'
+                })
+            })
+        ]
+    });
+};
+
+exports.AssetDropZone = AssetDropZone;
+//# sourceMappingURL=AssetDropZone.js.map

package/dist/admin/components/MediaLibraryInput/AssetDropZone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetDropZone.js","sources":["../../../../admin/src/components/MediaLibraryInput/AssetDropZone.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type DragEvent } from 'react';\n\nimport { Flex, Typography } from '@strapi/design-system';\nimport { Images } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../utils/translations';\n\n/**\n * `bar` on an empty field, `tile` after a multiple field's cards, `stacked`\n * below them when the field is too narrow for both on one row.\n */\nexport type ZoneVariant = 'bar' | 'tile' | 'stacked';\n\ntype DragState = 'idle' | 'accept' | 'reject';\n\nconst DRAG_FRAME_COLORS = {\n  accept: { border: 'primary600', background: 'primary100' },\n  reject: { border: 'neutral300', background: 'neutral150' },\n} as const;\n\nconst Zone = styled.div<{ $dragState: DragState; $variant: ZoneVariant }>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.spaces[4]};\n  width: 100%;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  text-align: ${({ $variant }) => ($variant === 'bar' ? 'start' : 'center')};\n\n  ${({ $variant, theme }) =>\n    $variant !== 'bar'\n      ? `\n    flex-direction: column;\n    justify-content: center;\n    height: 100%;\n    min-height: ${$variant === 'tile' ? '20.8rem' : 'auto'};\n    padding: ${theme.spaces[4]};\n    border: 1px dashed ${theme.colors.neutral300};\n    background: ${theme.colors.neutral0};\n  `\n      : `\n    min-height: 7.2rem;\n    padding: ${theme.spaces[4]};\n    border: 1px solid ${theme.colors.neutral200};\n    background: ${theme.colors.neutral100};\n  `}\n\n  // Only while a file is dragged over the zone: a solid frame inset from the\n  // zone's own border marks where the file will land, greyed out when it can't.\n  ${({ $dragState, theme }) =>\n    $dragState !== 'idle' &&\n    `\n    &::after {\n      content: '';\n      position: absolute;\n      inset: ${theme.spaces[2]};\n      border: 1px solid ${theme.colors[DRAG_FRAME_COLORS[$dragState].border]};\n      border-radius: ${theme.borderRadius};\n      background: ${theme.colors[DRAG_FRAME_COLORS[$dragState].background]};\n      pointer-events: none;\n    }\n\n    & > * {\n      z-index: 1;\n    }\n  `}\n\n  &[data-disabled='true'] {\n    cursor: not-allowed;\n  }\n`;\n\nconst IconFrame = styled(Flex)`\n  flex-shrink: 0;\n  width: 4rem;\n  height: 4rem;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral200};\n  color: ${({ theme }) => theme.colors.neutral500};\n`;\n\ninterface AssetDropZoneProps {\n  variant?: ZoneVariant;\n  disabled?: boolean;\n  onDropFiles: (files: globalThis.File[]) => void;\n}\n\n/**\n * The field's own drop target. It only takes drops: browsing and picking files\n * go through the \"Add asset\" menu, so the field has one way in, not two.\n *\n * Deliberately not the Media Library page's\n * `UploadDropZoneProvider`: that one covers a whole route and paints a\n * full-surface overlay, where this has to stay inside one field on a form that\n * may hold several of them.\n */\nexport const AssetDropZone = ({\n  variant = 'bar',\n  disabled = false,\n  onDropFiles,\n}: AssetDropZoneProps) => {\n  const { formatMessage } = useIntl();\n  const [isDragging, setIsDragging] = useState(false);\n  // Drag events fire on descendants too, so a plain boolean flickers as the\n  // pointer crosses the icon or the label. Counting enter/leave pairs doesn't.\n  const dragDepth = useRef(0);\n\n  const handleDragEnter = useCallback((event: DragEvent<HTMLElement>) => {\n    event.preventDefault();\n    if (!event.dataTransfer.types.includes('Files')) {\n      return;\n    }\n    dragDepth.current += 1;\n    setIsDragging(true);\n  }, []);\n\n  const handleDragLeave = useCallback((event: DragEvent<HTMLElement>) => {\n    event.preventDefault();\n    dragDepth.current -= 1;\n    if (dragDepth.current <= 0) {\n      dragDepth.current = 0;\n      setIsDragging(false);\n    }\n  }, []);\n\n  const handleDragOver = useCallback(\n    (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      // `none` shows the no-drop cursor, and the browser then fires no `drop`.\n      event.dataTransfer.dropEffect = disabled ? 'none' : 'copy';\n    },\n    [disabled]\n  );\n\n  const handleDrop = useCallback(\n    (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      dragDepth.current = 0;\n      setIsDragging(false);\n\n      if (disabled) {\n        return;\n      }\n\n      const files = Array.from(event.dataTransfer.files ?? []);\n      if (files.length > 0) {\n        onDropFiles(files);\n      }\n    },\n    [disabled, onDropFiles]\n  );\n\n  return (\n    <Zone\n      $dragState={isDragging ? (disabled ? 'reject' : 'accept') : 'idle'}\n      $variant={variant}\n      data-disabled={disabled}\n      onDragEnter={handleDragEnter}\n      onDragLeave={handleDragLeave}\n      onDragOver={handleDragOver}\n      onDrop={handleDrop}\n    >\n      <IconFrame justifyContent=\"center\" alignItems=\"center\">\n        <Images width=\"2.4rem\" height=\"2.4rem\" />\n      </IconFrame>\n      <Typography textColor=\"neutral600\">\n        {formatMessage({\n          id: getTranslationKey('content-manager.input.placeholder'),\n          defaultMessage: 'Drag & drop an asset here',\n        })}\n      </Typography>\n    </Zone>\n  );\n};\n"],"names":["DRAG_FRAME_COLORS","accept","border","background","reject","Zone","styled","div","theme","spaces","borderRadius","$variant","colors","neutral300","neutral0","neutral200","neutral100","$dragState","IconFrame","Flex","neutral500","AssetDropZone","variant","disabled","onDropFiles","formatMessage","useIntl","isDragging","setIsDragging","useState","dragDepth","useRef","handleDragEnter","useCallback","event","preventDefault","dataTransfer","types","includes","current","handleDragLeave","handleDragOver","dropEffect","handleDrop","files","Array","from","length","_jsxs","data-disabled","onDragEnter","onDragLeave","onDragOver","onDrop","_jsx","justifyContent","alignItems","Images","width","height","Typography","textColor","id","getTranslationKey","defaultMessage"],"mappings":"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"}