@strapi/upload 5.12.1 → 5.12.2

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

@@ -0,0 +1,195 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useField, useNotification } from '@strapi/admin/strapi-admin';
+import { useIntl } from 'react-intl';
+import 'byte-size';
+import 'date-fns';
+import { getAllowedFiles } from '../../utils/getAllowedFiles.mjs';
+import { getTrad } from '../../utils/getTrad.mjs';
+import 'qs';
+import '../../constants.mjs';
+import '../../utils/urlYupSchema.mjs';
+import { AssetDialog } from '../AssetDialog/AssetDialog.mjs';
+import { EditFolderDialog } from '../EditFolderDialog/EditFolderDialog.mjs';
+import { UploadAssetDialog } from '../UploadAssetDialog/UploadAssetDialog.mjs';
+import { CarouselAssets } from './Carousel/CarouselAssets.mjs';
+
+// TODO: find a better naming convention for the file that was an index file before
+const STEPS = {
+    AssetSelect: 'SelectAsset',
+    AssetUpload: 'UploadAsset',
+    FolderCreate: 'FolderCreate'
+};
+const MediaLibraryInput = /*#__PURE__*/ React.forwardRef(({ attribute: { allowedTypes = [
+    'videos',
+    'files',
+    'images',
+    'audios'
+], multiple = false } = {}, label, hint, disabled = false, labelAction = undefined, name, required = false }, forwardedRef)=>{
+    const { formatMessage } = useIntl();
+    const { onChange, value, error } = useField(name);
+    const fieldAllowedTypes = allowedTypes || [
+        'files',
+        'images',
+        'videos',
+        'audios'
+    ];
+    const [uploadedFiles, setUploadedFiles] = React.useState([]);
+    const [step, setStep] = React.useState(undefined);
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [droppedAssets, setDroppedAssets] = React.useState();
+    const [folderId, setFolderId] = React.useState(null);
+    const { toggleNotification } = useNotification();
+    React.useEffect(()=>{
+        // Clear the uploaded files on close
+        if (step === undefined) {
+            setUploadedFiles([]);
+        }
+    }, [
+        step
+    ]);
+    let selectedAssets = [];
+    if (Array.isArray(value)) {
+        selectedAssets = value;
+    } else if (value) {
+        selectedAssets = [
+            value
+        ];
+    }
+    const handleValidation = (nextSelectedAssets)=>{
+        const value = multiple ? nextSelectedAssets : nextSelectedAssets[0];
+        onChange(name, value);
+        setStep(undefined);
+    };
+    const handleDeleteAssetFromMediaLibrary = ()=>{
+        let nextValue;
+        if (multiple) {
+            const nextSelectedAssets = selectedAssets.filter((_, assetIndex)=>assetIndex !== selectedIndex);
+            nextValue = nextSelectedAssets.length > 0 ? nextSelectedAssets : null;
+        } else {
+            nextValue = null;
+        }
+        const value = nextValue;
+        onChange(name, value);
+        setSelectedIndex(0);
+    };
+    const handleDeleteAsset = (asset)=>{
+        let nextValue;
+        if (multiple) {
+            const nextSelectedAssets = selectedAssets.filter((prevAsset)=>prevAsset.id !== asset.id);
+            nextValue = nextSelectedAssets.length > 0 ? nextSelectedAssets : null;
+        } else {
+            nextValue = null;
+        }
+        onChange(name, nextValue);
+        setSelectedIndex(0);
+    };
+    const handleAssetEdit = (asset)=>{
+        const nextSelectedAssets = selectedAssets.map((prevAsset)=>prevAsset.id === asset.id ? asset : prevAsset);
+        onChange(name, multiple ? nextSelectedAssets : nextSelectedAssets[0]);
+    };
+    const validateAssetsTypes = (assets, callback)=>{
+        const allowedAssets = getAllowedFiles(fieldAllowedTypes, assets);
+        if (allowedAssets.length > 0) {
+            callback(allowedAssets);
+        } else {
+            toggleNotification({
+                type: 'danger',
+                timeout: 4000,
+                message: formatMessage({
+                    id: getTrad('input.notification.not-supported'),
+                    defaultMessage: `You can't upload this type of file.`
+                }, {
+                    fileTypes: fieldAllowedTypes.join(',')
+                })
+            });
+        }
+    };
+    const handleAssetDrop = (assets)=>{
+        validateAssetsTypes(assets, (allowedAssets)=>{
+            setDroppedAssets(allowedAssets);
+            setStep(STEPS.AssetUpload);
+        });
+    };
+    if (multiple && selectedAssets.length > 0) {
+        label = `${label} (${selectedIndex + 1} / ${selectedAssets.length})`;
+    }
+    const handleNext = ()=>{
+        setSelectedIndex((current)=>current < selectedAssets.length - 1 ? current + 1 : 0);
+    };
+    const handlePrevious = ()=>{
+        setSelectedIndex((current)=>current > 0 ? current - 1 : selectedAssets.length - 1);
+    };
+    const handleFilesUploadSucceeded = (uploadedFiles)=>{
+        setUploadedFiles((prev)=>[
+                ...prev,
+                ...uploadedFiles
+            ]);
+    };
+    let initiallySelectedAssets = selectedAssets;
+    if (uploadedFiles.length > 0) {
+        const allowedUploadedFiles = getAllowedFiles(fieldAllowedTypes, uploadedFiles);
+        initiallySelectedAssets = multiple ? [
+            ...allowedUploadedFiles,
+            ...selectedAssets
+        ] : [
+            allowedUploadedFiles[0]
+        ];
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(CarouselAssets, {
+                ref: forwardedRef,
+                assets: selectedAssets,
+                disabled: disabled,
+                label: label,
+                labelAction: labelAction,
+                onDeleteAsset: handleDeleteAsset,
+                onDeleteAssetFromMediaLibrary: handleDeleteAssetFromMediaLibrary,
+                onAddAsset: ()=>setStep(STEPS.AssetSelect),
+                onDropAsset: handleAssetDrop,
+                onEditAsset: handleAssetEdit,
+                onNext: handleNext,
+                onPrevious: handlePrevious,
+                error: error,
+                hint: hint,
+                required: required,
+                selectedAssetIndex: selectedIndex,
+                trackedLocation: "content-manager"
+            }),
+            step === STEPS.AssetSelect && /*#__PURE__*/ jsx(AssetDialog, {
+                allowedTypes: fieldAllowedTypes,
+                initiallySelectedAssets: initiallySelectedAssets,
+                folderId: folderId,
+                onClose: ()=>{
+                    setStep(undefined);
+                    setFolderId(null);
+                },
+                open: step === STEPS.AssetSelect,
+                onValidate: handleValidation,
+                multiple: multiple,
+                onAddAsset: ()=>setStep(STEPS.AssetUpload),
+                onAddFolder: ()=>setStep(STEPS.FolderCreate),
+                onChangeFolder: (folder)=>setFolderId(folder),
+                trackedLocation: "content-manager"
+            }),
+            step === STEPS.AssetUpload && /*#__PURE__*/ jsx(UploadAssetDialog, {
+                open: step === STEPS.AssetUpload,
+                onClose: ()=>setStep(STEPS.AssetSelect),
+                initialAssetsToAdd: droppedAssets,
+                addUploadedFiles: handleFilesUploadSucceeded,
+                trackedLocation: "content-manager",
+                folderId: folderId,
+                validateAssetsTypes: validateAssetsTypes
+            }),
+            step === STEPS.FolderCreate && /*#__PURE__*/ jsx(EditFolderDialog, {
+                open: step === STEPS.FolderCreate,
+                onClose: ()=>setStep(STEPS.AssetSelect),
+                parentFolderId: folderId
+            })
+        ]
+    });
+});
+
+export { MediaLibraryInput };
+//# sourceMappingURL=MediaLibraryInput.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaLibraryInput.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/MediaLibraryInput.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport * as React from 'react';\n\nimport { useField, useNotification } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad, getAllowedFiles, AllowedFiles } from '../../utils';\nimport { AssetDialog } from '../AssetDialog/AssetDialog';\nimport { EditFolderDialog } from '../EditFolderDialog/EditFolderDialog';\nimport { UploadAssetDialog, Asset } from '../UploadAssetDialog/UploadAssetDialog';\n\nimport { CarouselAssets, CarouselAssetsProps, FileWithoutIdHash } from './Carousel/CarouselAssets';\n\nimport type { File } from '../../../../shared/contracts/files';\ntype AllowedTypes = 'files' | 'images' | 'videos' | 'audios';\n\nconst STEPS = {\n  AssetSelect: 'SelectAsset',\n  AssetUpload: 'UploadAsset',\n  FolderCreate: 'FolderCreate',\n};\n\nexport interface MediaLibraryInputProps {\n  required?: boolean;\n  name: string;\n  labelAction?: React.ReactNode;\n  label?: string;\n  hint?: string;\n  disabled?: boolean;\n  attribute?: {\n    allowedTypes?: AllowedTypes[];\n    multiple?: boolean;\n  };\n}\n\nexport const MediaLibraryInput = React.forwardRef<CarouselAssetsProps, MediaLibraryInputProps>(\n  (\n    {\n      attribute: { allowedTypes = ['videos', 'files', 'images', 'audios'], multiple = false } = {},\n      label,\n      hint,\n      disabled = false,\n      labelAction = undefined,\n      name,\n      required = false,\n    },\n    forwardedRef\n  ) => {\n    const { formatMessage } = useIntl();\n    const { onChange, value, error } = useField(name);\n    const fieldAllowedTypes = allowedTypes || ['files', 'images', 'videos', 'audios'];\n    const [uploadedFiles, setUploadedFiles] = React.useState<Asset[] | File[]>([]);\n    const [step, setStep] = React.useState<string | undefined>(undefined);\n    const [selectedIndex, setSelectedIndex] = React.useState(0);\n    const [droppedAssets, setDroppedAssets] = React.useState<AllowedFiles[]>();\n    const [folderId, setFolderId] = React.useState<number | null>(null);\n    const { toggleNotification } = useNotification();\n\n    React.useEffect(() => {\n      // Clear the uploaded files on close\n      if (step === undefined) {\n        setUploadedFiles([]);\n      }\n    }, [step]);\n\n    let selectedAssets: File[] = [];\n\n    if (Array.isArray(value)) {\n      selectedAssets = value;\n    } else if (value) {\n      selectedAssets = [value];\n    }\n\n    const handleValidation = (nextSelectedAssets: File[]) => {\n      const value = multiple ? nextSelectedAssets : nextSelectedAssets[0];\n      onChange(name, value);\n      setStep(undefined);\n    };\n\n    const handleDeleteAssetFromMediaLibrary = () => {\n      let nextValue;\n\n      if (multiple) {\n        const nextSelectedAssets = selectedAssets.filter(\n          (_, assetIndex) => assetIndex !== selectedIndex\n        );\n        nextValue = nextSelectedAssets.length > 0 ? nextSelectedAssets : null;\n      } else {\n        nextValue = null;\n      }\n\n      const value = nextValue;\n      onChange(name, value);\n\n      setSelectedIndex(0);\n    };\n\n    const handleDeleteAsset = (asset: File) => {\n      let nextValue;\n\n      if (multiple) {\n        const nextSelectedAssets = selectedAssets.filter((prevAsset) => prevAsset.id !== asset.id);\n\n        nextValue = nextSelectedAssets.length > 0 ? nextSelectedAssets : null;\n      } else {\n        nextValue = null;\n      }\n\n      onChange(name, nextValue);\n\n      setSelectedIndex(0);\n    };\n\n    const handleAssetEdit = (asset: File) => {\n      const nextSelectedAssets = selectedAssets.map((prevAsset) =>\n        prevAsset.id === asset.id ? asset : prevAsset\n      );\n\n      onChange(name, multiple ? nextSelectedAssets : nextSelectedAssets[0]);\n    };\n\n    const validateAssetsTypes = (\n      assets: FileWithoutIdHash[] | Asset[],\n      callback: (assets?: AllowedFiles[], error?: string) => void\n    ) => {\n      const allowedAssets = getAllowedFiles(fieldAllowedTypes, assets as AllowedFiles[]);\n\n      if (allowedAssets.length > 0) {\n        callback(allowedAssets);\n      } else {\n        toggleNotification({\n          type: 'danger',\n          timeout: 4000,\n          message: formatMessage(\n            {\n              id: getTrad('input.notification.not-supported'),\n              defaultMessage: `You can't upload this type of file.`,\n            },\n            {\n              fileTypes: fieldAllowedTypes.join(','),\n            }\n          ),\n        });\n      }\n    };\n\n    const handleAssetDrop = (assets: FileWithoutIdHash[]) => {\n      validateAssetsTypes(assets, (allowedAssets?: AllowedFiles[]) => {\n        setDroppedAssets(allowedAssets);\n        setStep(STEPS.AssetUpload);\n      });\n    };\n\n    if (multiple && selectedAssets.length > 0) {\n      label = `${label} (${selectedIndex + 1} / ${selectedAssets.length})`;\n    }\n\n    const handleNext = () => {\n      setSelectedIndex((current) => (current < selectedAssets.length - 1 ? current + 1 : 0));\n    };\n\n    const handlePrevious = () => {\n      setSelectedIndex((current) => (current > 0 ? current - 1 : selectedAssets.length - 1));\n    };\n\n    const handleFilesUploadSucceeded = (uploadedFiles: Asset[] | File[]) => {\n      setUploadedFiles((prev) => [...prev, ...uploadedFiles]);\n    };\n\n    let initiallySelectedAssets = selectedAssets;\n\n    if (uploadedFiles.length > 0) {\n      const allowedUploadedFiles = getAllowedFiles(\n        fieldAllowedTypes,\n        uploadedFiles as AllowedFiles[]\n      );\n\n      initiallySelectedAssets = multiple\n        ? [...allowedUploadedFiles, ...selectedAssets]\n        : [allowedUploadedFiles[0]];\n    }\n\n    return (\n      <>\n        <CarouselAssets\n          ref={forwardedRef}\n          assets={selectedAssets}\n          disabled={disabled}\n          label={label!}\n          labelAction={labelAction}\n          onDeleteAsset={handleDeleteAsset}\n          onDeleteAssetFromMediaLibrary={handleDeleteAssetFromMediaLibrary}\n          onAddAsset={() => setStep(STEPS.AssetSelect)}\n          onDropAsset={handleAssetDrop}\n          onEditAsset={handleAssetEdit}\n          onNext={handleNext}\n          onPrevious={handlePrevious}\n          error={error}\n          hint={hint}\n          required={required}\n          selectedAssetIndex={selectedIndex}\n          trackedLocation=\"content-manager\"\n        />\n\n        {step === STEPS.AssetSelect && (\n          <AssetDialog\n            allowedTypes={fieldAllowedTypes as AllowedTypes[]}\n            initiallySelectedAssets={initiallySelectedAssets}\n            folderId={folderId}\n            onClose={() => {\n              setStep(undefined);\n              setFolderId(null);\n            }}\n            open={step === STEPS.AssetSelect}\n            onValidate={handleValidation}\n            multiple={multiple}\n            onAddAsset={() => setStep(STEPS.AssetUpload)}\n            onAddFolder={() => setStep(STEPS.FolderCreate)}\n            onChangeFolder={(folder) => setFolderId(folder)}\n            trackedLocation=\"content-manager\"\n          />\n        )}\n\n        {step === STEPS.AssetUpload && (\n          <UploadAssetDialog\n            open={step === STEPS.AssetUpload}\n            onClose={() => setStep(STEPS.AssetSelect)}\n            initialAssetsToAdd={droppedAssets as Asset[]}\n            addUploadedFiles={handleFilesUploadSucceeded}\n            trackedLocation=\"content-manager\"\n            folderId={folderId}\n            validateAssetsTypes={validateAssetsTypes}\n          />\n        )}\n\n        {step === STEPS.FolderCreate && (\n          <EditFolderDialog\n            open={step === STEPS.FolderCreate}\n            onClose={() => setStep(STEPS.AssetSelect)}\n            parentFolderId={folderId}\n          />\n        )}\n      </>\n    );\n  }\n);\n"],"names":["STEPS","AssetSelect","AssetUpload","FolderCreate","MediaLibraryInput","React","forwardRef","attribute","allowedTypes","multiple","label","hint","disabled","labelAction","undefined","name","required","forwardedRef","formatMessage","useIntl","onChange","value","error","useField","fieldAllowedTypes","uploadedFiles","setUploadedFiles","useState","step","setStep","selectedIndex","setSelectedIndex","droppedAssets","setDroppedAssets","folderId","setFolderId","toggleNotification","useNotification","useEffect","selectedAssets","Array","isArray","handleValidation","nextSelectedAssets","handleDeleteAssetFromMediaLibrary","nextValue","filter","_","assetIndex","length","handleDeleteAsset","asset","prevAsset","id","handleAssetEdit","map","validateAssetsTypes","assets","callback","allowedAssets","getAllowedFiles","type","timeout","message","getTrad","defaultMessage","fileTypes","join","handleAssetDrop","handleNext","current","handlePrevious","handleFilesUploadSucceeded","prev","initiallySelectedAssets","allowedUploadedFiles","_jsxs","_Fragment","_jsx","CarouselAssets","ref","onDeleteAsset","onDeleteAssetFromMediaLibrary","onAddAsset","onDropAsset","onEditAsset","onNext","onPrevious","selectedAssetIndex","trackedLocation","AssetDialog","onClose","open","onValidate","onAddFolder","onChangeFolder","folder","UploadAssetDialog","initialAssetsToAdd","addUploadedFiles","EditFolderDialog","parentFolderId"],"mappings":"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"}

package/dist/admin/components/SelectTree/Option.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var ReactSelect = require('react-select');
+var styledComponents = require('styled-components');
+
+const ToggleButton = styledComponents.styled(designSystem.Flex)`
+  align-self: flex-end;
+  height: 2.2rem;
+  width: 2.8rem;
+
+  &:hover,
+  &:focus {
+    background-color: ${({ theme })=>theme.colors.primary200};
+  }
+`;
+const Option = ({ children, data, selectProps, ...props })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { depth, value, children: options } = data;
+    const { maxDisplayDepth, openValues, onOptionToggle } = selectProps;
+    const isOpen = openValues.includes(value);
+    const Icon = isOpen ? icons.ChevronUp : icons.ChevronDown;
+    return /*#__PURE__*/ jsxRuntime.jsx(ReactSelect.components.Option, {
+        data: data,
+        selectProps: selectProps,
+        ...props,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            alignItems: "start",
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    textColor: "neutral800",
+                    ellipsis: true,
+                    children: /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        style: {
+                            paddingLeft: `${Math.min(depth, maxDisplayDepth) * 14}px`
+                        },
+                        children: children
+                    })
+                }),
+                options && options?.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(ToggleButton, {
+                    "aria-label": formatMessage({
+                        id: 'app.utils.toggle',
+                        defaultMessage: 'Toggle'
+                    }),
+                    tag: "button",
+                    alignItems: "center",
+                    hasRadius: true,
+                    justifyContent: "center",
+                    marginLeft: "auto",
+                    onClick: (event)=>{
+                        event.preventDefault();
+                        event.stopPropagation();
+                        onOptionToggle(value);
+                    },
+                    children: /*#__PURE__*/ jsxRuntime.jsx(Icon, {
+                        width: "1.4rem",
+                        fill: "neutral500"
+                    })
+                })
+            ]
+        })
+    });
+};
+
+exports.Option = Option;
+//# sourceMappingURL=Option.js.map

package/dist/admin/components/SelectTree/Option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.js","sources":["../../../../admin/src/components/SelectTree/Option.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, Typography } from '@strapi/design-system';\nimport { ChevronDown, ChevronUp } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { components, OptionProps as ReactSelectOptionProps } from 'react-select';\nimport { styled } from 'styled-components';\n\nimport type { Folder } from '../../../../shared/contracts/folders';\n\nconst ToggleButton = styled(Flex)`\n  align-self: flex-end;\n  height: 2.2rem;\n  width: 2.8rem;\n\n  &:hover,\n  &:focus {\n    background-color: ${({ theme }) => theme.colors.primary200};\n  }\n`;\n\ninterface SelectProps {\n  maxDisplayDepth: number;\n  openValues: string[];\n  onOptionToggle: (value: string) => void;\n}\n\ninterface FolderWithDepth extends Folder {\n  depth: number;\n  value: string;\n}\n\ninterface OptionProps extends ReactSelectOptionProps<FolderWithDepth, false> {\n  selectProps: SelectProps & ReactSelectOptionProps<FolderWithDepth, false>['selectProps'];\n}\n\nexport const Option = ({ children, data, selectProps, ...props }: OptionProps) => {\n  const { formatMessage } = useIntl();\n  const { depth, value, children: options } = data;\n  const { maxDisplayDepth, openValues, onOptionToggle } = selectProps;\n  const isOpen = openValues.includes(value);\n\n  const Icon = isOpen ? ChevronUp : ChevronDown;\n\n  return (\n    <components.Option data={data} selectProps={selectProps} {...props}>\n      <Flex alignItems=\"start\">\n        <Typography textColor=\"neutral800\" ellipsis>\n          <span style={{ paddingLeft: `${Math.min(depth, maxDisplayDepth) * 14}px` }}>\n            {children}\n          </span>\n        </Typography>\n\n        {options && options?.length > 0 && (\n          <ToggleButton\n            aria-label={formatMessage({\n              id: 'app.utils.toggle',\n              defaultMessage: 'Toggle',\n            })}\n            tag=\"button\"\n            alignItems=\"center\"\n            hasRadius\n            justifyContent=\"center\"\n            marginLeft=\"auto\"\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.preventDefault();\n              event.stopPropagation();\n\n              onOptionToggle(value);\n            }}\n          >\n            <Icon width=\"1.4rem\" fill=\"neutral500\" />\n          </ToggleButton>\n        )}\n      </Flex>\n    </components.Option>\n  );\n};\n"],"names":["ToggleButton","styled","Flex","theme","colors","primary200","Option","children","data","selectProps","props","formatMessage","useIntl","depth","value","options","maxDisplayDepth","openValues","onOptionToggle","isOpen","includes","Icon","ChevronUp","ChevronDown","_jsx","components","_jsxs","alignItems","Typography","textColor","ellipsis","span","style","paddingLeft","Math","min","length","aria-label","id","defaultMessage","tag","hasRadius","justifyContent","marginLeft","onClick","event","preventDefault","stopPropagation","width","fill"],"mappings":";;;;;;;;;;AAUA,MAAMA,YAAAA,GAAeC,uBAAOC,CAAAA,iBAAAA,CAAK;;;;;;;sBAOX,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAE/D,CAAC;AAiBM,MAAMC,MAAS,GAAA,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,KAAoB,EAAA,GAAA;IAC3E,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEP,QAAUQ,EAAAA,OAAO,EAAE,GAAGP,IAAAA;AAC5C,IAAA,MAAM,EAAEQ,eAAe,EAAEC,UAAU,EAAEC,cAAc,EAAE,GAAGT,WAAAA;IACxD,MAAMU,MAAAA,GAASF,UAAWG,CAAAA,QAAQ,CAACN,KAAAA,CAAAA;IAEnC,MAAMO,IAAAA,GAAOF,SAASG,eAAYC,GAAAA,iBAAAA;IAElC,qBACEC,cAAA,CAACC,uBAAWnB,MAAM,EAAA;QAACE,IAAMA,EAAAA,IAAAA;QAAMC,WAAaA,EAAAA,WAAAA;AAAc,QAAA,GAAGC,KAAK;AAChE,QAAA,QAAA,gBAAAgB,eAACxB,CAAAA,iBAAAA,EAAAA;YAAKyB,UAAW,EAAA,OAAA;;8BACfH,cAACI,CAAAA,uBAAAA,EAAAA;oBAAWC,SAAU,EAAA,YAAA;oBAAaC,QAAQ,EAAA,IAAA;AACzC,oBAAA,QAAA,gBAAAN,cAACO,CAAAA,MAAAA,EAAAA;wBAAKC,KAAO,EAAA;4BAAEC,WAAa,EAAA,CAAC,EAAEC,IAAKC,CAAAA,GAAG,CAACtB,KAAOG,EAAAA,eAAAA,CAAAA,GAAmB,EAAG,CAAA,EAAE;AAAE,yBAAA;AACtET,wBAAAA,QAAAA,EAAAA;;;gBAIJQ,OAAWA,IAAAA,OAAAA,EAASqB,MAAS,GAAA,CAAA,kBAC5BZ,cAACxB,CAAAA,YAAAA,EAAAA;AACCqC,oBAAAA,YAAAA,EAAY1B,aAAc,CAAA;wBACxB2B,EAAI,EAAA,kBAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA,CAAA;oBACAC,GAAI,EAAA,QAAA;oBACJb,UAAW,EAAA,QAAA;oBACXc,SAAS,EAAA,IAAA;oBACTC,cAAe,EAAA,QAAA;oBACfC,UAAW,EAAA,MAAA;AACXC,oBAAAA,OAAAA,EAAS,CAACC,KAAAA,GAAAA;AACRA,wBAAAA,KAAAA,CAAMC,cAAc,EAAA;AACpBD,wBAAAA,KAAAA,CAAME,eAAe,EAAA;wBAErB7B,cAAeJ,CAAAA,KAAAA,CAAAA;AACjB,qBAAA;AAEA,oBAAA,QAAA,gBAAAU,cAACH,CAAAA,IAAAA,EAAAA;wBAAK2B,KAAM,EAAA,QAAA;wBAASC,IAAK,EAAA;;;;;;AAMtC;;;;"}

package/dist/admin/components/SelectTree/Option.mjs

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { Flex, Typography } from '@strapi/design-system';
+import { ChevronUp, ChevronDown } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { components } from 'react-select';
+import { styled } from 'styled-components';
+
+const ToggleButton = styled(Flex)`
+  align-self: flex-end;
+  height: 2.2rem;
+  width: 2.8rem;
+
+  &:hover,
+  &:focus {
+    background-color: ${({ theme })=>theme.colors.primary200};
+  }
+`;
+const Option = ({ children, data, selectProps, ...props })=>{
+    const { formatMessage } = useIntl();
+    const { depth, value, children: options } = data;
+    const { maxDisplayDepth, openValues, onOptionToggle } = selectProps;
+    const isOpen = openValues.includes(value);
+    const Icon = isOpen ? ChevronUp : ChevronDown;
+    return /*#__PURE__*/ jsx(components.Option, {
+        data: data,
+        selectProps: selectProps,
+        ...props,
+        children: /*#__PURE__*/ jsxs(Flex, {
+            alignItems: "start",
+            children: [
+                /*#__PURE__*/ jsx(Typography, {
+                    textColor: "neutral800",
+                    ellipsis: true,
+                    children: /*#__PURE__*/ jsx("span", {
+                        style: {
+                            paddingLeft: `${Math.min(depth, maxDisplayDepth) * 14}px`
+                        },
+                        children: children
+                    })
+                }),
+                options && options?.length > 0 && /*#__PURE__*/ jsx(ToggleButton, {
+                    "aria-label": formatMessage({
+                        id: 'app.utils.toggle',
+                        defaultMessage: 'Toggle'
+                    }),
+                    tag: "button",
+                    alignItems: "center",
+                    hasRadius: true,
+                    justifyContent: "center",
+                    marginLeft: "auto",
+                    onClick: (event)=>{
+                        event.preventDefault();
+                        event.stopPropagation();
+                        onOptionToggle(value);
+                    },
+                    children: /*#__PURE__*/ jsx(Icon, {
+                        width: "1.4rem",
+                        fill: "neutral500"
+                    })
+                })
+            ]
+        })
+    });
+};
+
+export { Option };
+//# sourceMappingURL=Option.mjs.map

package/dist/admin/components/SelectTree/Option.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.mjs","sources":["../../../../admin/src/components/SelectTree/Option.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, Typography } from '@strapi/design-system';\nimport { ChevronDown, ChevronUp } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { components, OptionProps as ReactSelectOptionProps } from 'react-select';\nimport { styled } from 'styled-components';\n\nimport type { Folder } from '../../../../shared/contracts/folders';\n\nconst ToggleButton = styled(Flex)`\n  align-self: flex-end;\n  height: 2.2rem;\n  width: 2.8rem;\n\n  &:hover,\n  &:focus {\n    background-color: ${({ theme }) => theme.colors.primary200};\n  }\n`;\n\ninterface SelectProps {\n  maxDisplayDepth: number;\n  openValues: string[];\n  onOptionToggle: (value: string) => void;\n}\n\ninterface FolderWithDepth extends Folder {\n  depth: number;\n  value: string;\n}\n\ninterface OptionProps extends ReactSelectOptionProps<FolderWithDepth, false> {\n  selectProps: SelectProps & ReactSelectOptionProps<FolderWithDepth, false>['selectProps'];\n}\n\nexport const Option = ({ children, data, selectProps, ...props }: OptionProps) => {\n  const { formatMessage } = useIntl();\n  const { depth, value, children: options } = data;\n  const { maxDisplayDepth, openValues, onOptionToggle } = selectProps;\n  const isOpen = openValues.includes(value);\n\n  const Icon = isOpen ? ChevronUp : ChevronDown;\n\n  return (\n    <components.Option data={data} selectProps={selectProps} {...props}>\n      <Flex alignItems=\"start\">\n        <Typography textColor=\"neutral800\" ellipsis>\n          <span style={{ paddingLeft: `${Math.min(depth, maxDisplayDepth) * 14}px` }}>\n            {children}\n          </span>\n        </Typography>\n\n        {options && options?.length > 0 && (\n          <ToggleButton\n            aria-label={formatMessage({\n              id: 'app.utils.toggle',\n              defaultMessage: 'Toggle',\n            })}\n            tag=\"button\"\n            alignItems=\"center\"\n            hasRadius\n            justifyContent=\"center\"\n            marginLeft=\"auto\"\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.preventDefault();\n              event.stopPropagation();\n\n              onOptionToggle(value);\n            }}\n          >\n            <Icon width=\"1.4rem\" fill=\"neutral500\" />\n          </ToggleButton>\n        )}\n      </Flex>\n    </components.Option>\n  );\n};\n"],"names":["ToggleButton","styled","Flex","theme","colors","primary200","Option","children","data","selectProps","props","formatMessage","useIntl","depth","value","options","maxDisplayDepth","openValues","onOptionToggle","isOpen","includes","Icon","ChevronUp","ChevronDown","_jsx","components","_jsxs","alignItems","Typography","textColor","ellipsis","span","style","paddingLeft","Math","min","length","aria-label","id","defaultMessage","tag","hasRadius","justifyContent","marginLeft","onClick","event","preventDefault","stopPropagation","width","fill"],"mappings":";;;;;;;;AAUA,MAAMA,YAAAA,GAAeC,MAAOC,CAAAA,IAAAA,CAAK;;;;;;;sBAOX,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAE/D,CAAC;AAiBM,MAAMC,MAAS,GAAA,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,KAAoB,EAAA,GAAA;IAC3E,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEP,QAAUQ,EAAAA,OAAO,EAAE,GAAGP,IAAAA;AAC5C,IAAA,MAAM,EAAEQ,eAAe,EAAEC,UAAU,EAAEC,cAAc,EAAE,GAAGT,WAAAA;IACxD,MAAMU,MAAAA,GAASF,UAAWG,CAAAA,QAAQ,CAACN,KAAAA,CAAAA;IAEnC,MAAMO,IAAAA,GAAOF,SAASG,SAAYC,GAAAA,WAAAA;IAElC,qBACEC,GAAA,CAACC,WAAWnB,MAAM,EAAA;QAACE,IAAMA,EAAAA,IAAAA;QAAMC,WAAaA,EAAAA,WAAAA;AAAc,QAAA,GAAGC,KAAK;AAChE,QAAA,QAAA,gBAAAgB,IAACxB,CAAAA,IAAAA,EAAAA;YAAKyB,UAAW,EAAA,OAAA;;8BACfH,GAACI,CAAAA,UAAAA,EAAAA;oBAAWC,SAAU,EAAA,YAAA;oBAAaC,QAAQ,EAAA,IAAA;AACzC,oBAAA,QAAA,gBAAAN,GAACO,CAAAA,MAAAA,EAAAA;wBAAKC,KAAO,EAAA;4BAAEC,WAAa,EAAA,CAAC,EAAEC,IAAKC,CAAAA,GAAG,CAACtB,KAAOG,EAAAA,eAAAA,CAAAA,GAAmB,EAAG,CAAA,EAAE;AAAE,yBAAA;AACtET,wBAAAA,QAAAA,EAAAA;;;gBAIJQ,OAAWA,IAAAA,OAAAA,EAASqB,MAAS,GAAA,CAAA,kBAC5BZ,GAACxB,CAAAA,YAAAA,EAAAA;AACCqC,oBAAAA,YAAAA,EAAY1B,aAAc,CAAA;wBACxB2B,EAAI,EAAA,kBAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA,CAAA;oBACAC,GAAI,EAAA,QAAA;oBACJb,UAAW,EAAA,QAAA;oBACXc,SAAS,EAAA,IAAA;oBACTC,cAAe,EAAA,QAAA;oBACfC,UAAW,EAAA,MAAA;AACXC,oBAAAA,OAAAA,EAAS,CAACC,KAAAA,GAAAA;AACRA,wBAAAA,KAAAA,CAAMC,cAAc,EAAA;AACpBD,wBAAAA,KAAAA,CAAME,eAAe,EAAA;wBAErB7B,cAAeJ,CAAAA,KAAAA,CAAAA;AACjB,qBAAA;AAEA,oBAAA,QAAA,gBAAAU,GAACH,CAAAA,IAAAA,EAAAA;wBAAK2B,KAAM,EAAA,QAAA;wBAASC,IAAK,EAAA;;;;;;AAMtC;;;;"}

package/dist/admin/components/SelectTree/SelectTree.js

@@ -0,0 +1,276 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var ReactSelect = require('react-select');
+var styledComponents = require('styled-components');
+var Option = require('./Option.js');
+var flattenTree = require('./utils/flattenTree.js');
+var getOpenValues = require('./utils/getOpenValues.js');
+var getValuesToClose = require('./utils/getValuesToClose.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const hasParent = (option)=>!option.parent;
+const SelectTree = ({ options: defaultOptions, maxDisplayDepth = 5, defaultValue, ...props })=>{
+    const flatDefaultOptions = React__namespace.useMemo(()=>flattenTree.flattenTree(defaultOptions), [
+        defaultOptions
+    ]);
+    const optionsFiltered = React__namespace.useMemo(()=>flatDefaultOptions.filter(hasParent), [
+        flatDefaultOptions
+    ]);
+    const [options, setOptions] = React__namespace.useState(optionsFiltered);
+    const [openValues, setOpenValues] = React__namespace.useState(getOpenValues.getOpenValues(flatDefaultOptions, defaultValue));
+    React__namespace.useEffect(()=>{
+        if (openValues.length === 0) {
+            setOptions(flatDefaultOptions.filter((option)=>option.parent === undefined));
+        } else {
+            const allOpenValues = openValues.reduce((acc, value)=>{
+                const options = flatDefaultOptions.filter((option)=>option.value === value || option.parent === value);
+                options.forEach((option)=>{
+                    const values = getOpenValues.getOpenValues(flatDefaultOptions, option);
+                    acc = [
+                        ...acc,
+                        ...values
+                    ];
+                });
+                return acc;
+            }, []);
+            const nextOptions = flatDefaultOptions.filter((option)=>allOpenValues.includes(option.value));
+            setOptions(nextOptions);
+        }
+    }, [
+        openValues,
+        flatDefaultOptions,
+        optionsFiltered
+    ]);
+    const handleToggle = (value)=>{
+        if (openValues.includes(value)) {
+            const valuesToClose = getValuesToClose.getValuesToClose(flatDefaultOptions, value);
+            setOpenValues((prev)=>prev.filter((prevData)=>!valuesToClose.includes(prevData)));
+        } else {
+            setOpenValues((prev)=>[
+                    ...prev,
+                    value
+                ]);
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(Select, {
+        components: {
+            Option: Option.Option
+        },
+        options: options,
+        defaultValue: defaultValue,
+        isSearchable: false,
+        /* -- custom props, used by the Option component */ maxDisplayDepth: maxDisplayDepth,
+        openValues: openValues,
+        onOptionToggle: handleToggle,
+        ...props
+    });
+};
+const Select = ({ components = {}, styles = {}, error, ariaErrorMessage, ...props })=>{
+    const theme = styledComponents.useTheme();
+    const customStyles = getSelectStyles(theme, error);
+    return /*#__PURE__*/ jsxRuntime.jsx(ReactSelect, {
+        menuPosition: "fixed",
+        components: {
+            ...components,
+            ClearIndicator,
+            DropdownIndicator,
+            IndicatorSeparator: ()=>null,
+            LoadingIndicator: ()=>null
+        },
+        "aria-errormessage": error && ariaErrorMessage,
+        "aria-invalid": !!error,
+        styles: {
+            ...customStyles,
+            ...styles
+        },
+        ...props
+    });
+};
+const IconBox = styledComponents.styled(designSystem.Box)`
+  background: transparent;
+  border: none;
+  position: relative;
+  z-index: 1;
+
+  svg {
+    height: 1.1rem;
+    width: 1.1rem;
+  }
+
+  svg path {
+    fill: ${({ theme })=>theme.colors.neutral600};
+  }
+`;
+const ClearIndicator = (props)=>{
+    const Component = ReactSelect.components.ClearIndicator;
+    return /*#__PURE__*/ jsxRuntime.jsx(Component, {
+        ...props,
+        children: /*#__PURE__*/ jsxRuntime.jsx(IconBox, {
+            tag: "button",
+            type: "button",
+            children: /*#__PURE__*/ jsxRuntime.jsx(icons.Cross, {})
+        })
+    });
+};
+const CarretBox = styledComponents.styled(IconBox)`
+  display: flex;
+  background: none;
+  border: none;
+
+  svg {
+    width: 0.9rem;
+  }
+`;
+const DropdownIndicator = ({ innerProps })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(CarretBox, {
+        paddingRight: 3,
+        ...innerProps,
+        children: /*#__PURE__*/ jsxRuntime.jsx(icons.CaretDown, {})
+    });
+};
+const getSelectStyles = (theme, error)=>{
+    return {
+        clearIndicator: (base)=>({
+                ...base,
+                padding: 0,
+                paddingRight: theme.spaces[3]
+            }),
+        container: (base)=>({
+                ...base,
+                background: theme.colors.neutral0,
+                lineHeight: 'normal'
+            }),
+        control (base, state) {
+            let borderColor = theme.colors.neutral200;
+            let boxShadowColor = undefined;
+            let backgroundColor = undefined;
+            if (state.isFocused) {
+                borderColor = theme.colors.primary600;
+                boxShadowColor = theme.colors.primary600;
+            } else if (error) {
+                borderColor = theme.colors.danger600;
+            }
+            if (state.isDisabled) {
+                backgroundColor = `${theme.colors.neutral150} !important`;
+            }
+            return {
+                ...base,
+                fontSize: theme.fontSizes[2],
+                height: 40,
+                border: `1px solid ${borderColor} !important`,
+                outline: 0,
+                backgroundColor,
+                borderRadius: theme.borderRadius,
+                boxShadow: boxShadowColor ? `${boxShadowColor} 0px 0px 0px 2px` : ''
+            };
+        },
+        indicatorsContainer: (base)=>({
+                ...base,
+                padding: 0,
+                paddingRight: theme.spaces[3]
+            }),
+        input: (base)=>({
+                ...base,
+                margin: 0,
+                padding: 0,
+                color: theme.colors.neutral800,
+                gridTemplateColumns: '0 100%'
+            }),
+        menuPortal: (base)=>({
+                ...base,
+                zIndex: theme.zIndices.dialog,
+                pointerEvents: 'auto'
+            }),
+        menu (base) {
+            return {
+                ...base,
+                width: '100%',
+                marginTop: theme.spaces[1],
+                backgroundColor: theme.colors.neutral0,
+                color: theme.colors.neutral800,
+                borderRadius: theme.borderRadius,
+                border: `1px solid ${theme.colors.neutral200}`,
+                boxShadow: theme.shadows.tableShadow,
+                fontSize: theme.fontSizes[2],
+                zIndex: 2
+            };
+        },
+        menuList: (base)=>({
+                ...base,
+                paddingLeft: theme.spaces[1],
+                paddingTop: theme.spaces[1],
+                paddingRight: theme.spaces[1],
+                paddingBottom: theme.spaces[1]
+            }),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        option (base, state) {
+            let backgroundColor = base?.backgroundColor;
+            if (state.isFocused || state.isSelected) {
+                backgroundColor = theme.colors.primary100;
+            }
+            return {
+                ...base,
+                color: theme.colors.neutral800,
+                lineHeight: theme.spaces[5],
+                backgroundColor,
+                borderRadius: theme.borderRadius,
+                '&:active': {
+                    backgroundColor: theme.colors.primary100
+                }
+            };
+        },
+        placeholder: (base)=>({
+                ...base,
+                color: theme.colors.neutral600,
+                marginLeft: 0,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                maxWidth: '80%'
+            }),
+        singleValue (base, state) {
+            let color = theme.colors.neutral800;
+            if (state.isDisabled) {
+                color = theme.colors.neutral600;
+            }
+            return {
+                ...base,
+                marginLeft: 0,
+                color
+            };
+        },
+        valueContainer: (base)=>({
+                ...base,
+                cursor: 'pointer',
+                padding: 0,
+                paddingLeft: theme.spaces[4],
+                marginLeft: 0,
+                marginRight: 0
+            })
+    };
+};
+
+exports.SelectTree = SelectTree;
+//# sourceMappingURL=SelectTree.js.map