@strapi/content-manager 0.0.0-experimental.e0df4d50334a17a1beb3d203bff414fbbff62f7b → 0.0.0-experimental.e100737b0ed96d0d80a5c6f4925c7374e63a342a

package/dist/admin/hooks/useDocumentLayout.mjs

@@ -0,0 +1,286 @@
+import * as React from 'react';
+import { useQueryParams, useStrapiApp, useNotification, useAPIErrorHandler } from '@strapi/admin/strapi-admin';
+import { HOOKS } from '../constants/hooks.mjs';
+import { useGetContentTypeConfigurationQuery } from '../services/contentTypes.mjs';
+import { getMainField } from '../utils/attributes.mjs';
+import { useContentTypeSchema } from './useContentTypeSchema.mjs';
+import { useDocument, useDoc } from './useDocument.mjs';
+
+/* -------------------------------------------------------------------------------------------------
+ * useDocumentLayout
+ * -----------------------------------------------------------------------------------------------*/ const DEFAULT_SETTINGS = {
+    bulkable: false,
+    filterable: false,
+    searchable: false,
+    pagination: false,
+    defaultSortBy: '',
+    defaultSortOrder: 'asc',
+    mainField: 'id',
+    pageSize: 10
+};
+/**
+ * @alpha
+ * @description This hook is used to get the layouts for either the edit view or list view of a specific content-type
+ * including the layouts for the components used in the content-type. It also runs the mutation hook waterfall so the data
+ * is consistent wherever it is used. It's a light wrapper around the `useDocument` hook, but provides the `skip` option a document
+ * is not fetched, however, it does fetch the schemas & components if they do not already exist in the cache.
+ *
+ * If the fetch fails, it will display a notification to the user.
+ *
+ * @example
+ * ```tsx
+ * const { model } = useParams<{ model: string }>();
+ * const { edit: { schema: layout } } = useDocumentLayout(model);
+ *
+ * return layout.map(panel => panel.map(row => row.map(field => <Field.Root {...field} />)))
+ * ```
+ *
+ */ const useDocumentLayout = (model)=>{
+    const { schema, components } = useDocument({
+        model,
+        collectionType: ''
+    }, {
+        skip: true
+    });
+    const [{ query }] = useQueryParams();
+    const runHookWaterfall = useStrapiApp('useDocumentLayout', (state)=>state.runHookWaterfall);
+    const { toggleNotification } = useNotification();
+    const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+    const { isLoading: isLoadingSchemas, schemas } = useContentTypeSchema();
+    const { data, isLoading: isLoadingConfigs, error, isFetching: isFetchingConfigs } = useGetContentTypeConfigurationQuery(model);
+    const isLoading = isLoadingSchemas || isFetchingConfigs || isLoadingConfigs;
+    React.useEffect(()=>{
+        if (error) {
+            toggleNotification({
+                type: 'danger',
+                message: formatAPIError(error)
+            });
+        }
+    }, [
+        error,
+        formatAPIError,
+        toggleNotification
+    ]);
+    const editLayout = React.useMemo(()=>data && !isLoading ? formatEditLayout(data, {
+            schemas,
+            schema,
+            components
+        }) : {
+            layout: [],
+            components: {},
+            metadatas: {},
+            options: {},
+            settings: DEFAULT_SETTINGS
+        }, [
+        data,
+        isLoading,
+        schemas,
+        schema,
+        components
+    ]);
+    const listLayout = React.useMemo(()=>{
+        return data && !isLoading ? formatListLayout(data, {
+            schemas,
+            schema,
+            components
+        }) : {
+            layout: [],
+            metadatas: {},
+            options: {},
+            settings: DEFAULT_SETTINGS
+        };
+    }, [
+        data,
+        isLoading,
+        schemas,
+        schema,
+        components
+    ]);
+    const { layout: edit } = React.useMemo(()=>runHookWaterfall(HOOKS.MUTATE_EDIT_VIEW_LAYOUT, {
+            layout: editLayout,
+            query
+        }), [
+        editLayout,
+        query,
+        runHookWaterfall
+    ]);
+    return {
+        error,
+        isLoading,
+        edit,
+        list: listLayout
+    };
+};
+/* -------------------------------------------------------------------------------------------------
+ * useDocLayout
+ * -----------------------------------------------------------------------------------------------*/ /**
+ * @internal this hook uses the internal useDoc hook, as such it shouldn't be used outside of the
+ * content-manager because it won't work as intended.
+ */ const useDocLayout = ()=>{
+    const { model } = useDoc();
+    return useDocumentLayout(model);
+};
+/**
+ * @internal
+ * @description takes the configuration data, the schema & the components used in the schema and formats the edit view
+ * versions of the schema & components. This is then used to render the edit view of the content-type.
+ */ const formatEditLayout = (data, { schemas, schema, components })=>{
+    let currentPanelIndex = 0;
+    /**
+   * The fields arranged by the panels, new panels are made for dynamic zones only.
+   */ const panelledEditAttributes = convertEditLayoutToFieldLayouts(data.contentType.layouts.edit, schema?.attributes, data.contentType.metadatas, {
+        configurations: data.components,
+        schemas: components
+    }, schemas).reduce((panels, row)=>{
+        if (row.some((field)=>field.type === 'dynamiczone')) {
+            panels.push([
+                row
+            ]);
+            currentPanelIndex += 2;
+        } else {
+            if (!panels[currentPanelIndex]) {
+                panels.push([
+                    row
+                ]);
+            } else {
+                panels[currentPanelIndex].push(row);
+            }
+        }
+        return panels;
+    }, []);
+    const componentEditAttributes = Object.entries(data.components).reduce((acc, [uid, configuration])=>{
+        acc[uid] = {
+            layout: convertEditLayoutToFieldLayouts(configuration.layouts.edit, components[uid].attributes, configuration.metadatas, {
+                configurations: data.components,
+                schemas: components
+            }),
+            settings: {
+                ...configuration.settings,
+                icon: components[uid].info.icon,
+                displayName: components[uid].info.displayName
+            }
+        };
+        return acc;
+    }, {});
+    const editMetadatas = Object.entries(data.contentType.metadatas).reduce((acc, [attribute, metadata])=>{
+        return {
+            ...acc,
+            [attribute]: metadata.edit
+        };
+    }, {});
+    return {
+        layout: panelledEditAttributes,
+        components: componentEditAttributes,
+        metadatas: editMetadatas,
+        settings: {
+            ...data.contentType.settings,
+            displayName: schema?.info.displayName
+        },
+        options: {
+            ...schema?.options,
+            ...schema?.pluginOptions,
+            ...data.contentType.options
+        }
+    };
+};
+/* -------------------------------------------------------------------------------------------------
+ * convertEditLayoutToFieldLayouts
+ * -----------------------------------------------------------------------------------------------*/ /**
+ * @internal
+ * @description takes the edit layout from either a content-type or a component
+ * and formats it into a generic object that can be used to correctly render
+ * the form fields.
+ */ const convertEditLayoutToFieldLayouts = (rows, attributes = {}, metadatas, components, schemas = [])=>{
+    return rows.map((row)=>row.map((field)=>{
+            const attribute = attributes[field.name];
+            if (!attribute) {
+                return null;
+            }
+            const { edit: metadata } = metadatas[field.name];
+            const settings = attribute.type === 'component' && components ? components.configurations[attribute.component].settings : {};
+            return {
+                attribute,
+                disabled: !metadata.editable,
+                hint: metadata.description,
+                label: metadata.label ?? '',
+                name: field.name,
+                // @ts-expect-error – mainField does exist on the metadata for a relation.
+                mainField: getMainField(attribute, metadata.mainField || settings.mainField, {
+                    schemas,
+                    components: components?.schemas ?? {}
+                }),
+                placeholder: metadata.placeholder ?? '',
+                required: attribute.required ?? false,
+                size: field.size,
+                unique: 'unique' in attribute ? attribute.unique : false,
+                visible: metadata.visible ?? true,
+                type: attribute.type
+            };
+        }).filter((field)=>field !== null));
+};
+/* -------------------------------------------------------------------------------------------------
+ * formatListLayout
+ * -----------------------------------------------------------------------------------------------*/ /**
+ * @internal
+ * @description takes the complete configuration data, the schema & the components used in the schema and
+ * formats a list view layout for the content-type. This is much simpler than the edit view layout as there
+ * are less options to consider.
+ */ const formatListLayout = (data, { schemas, schema, components })=>{
+    const listMetadatas = Object.entries(data.contentType.metadatas).reduce((acc, [attribute, metadata])=>{
+        return {
+            ...acc,
+            [attribute]: metadata.list
+        };
+    }, {});
+    /**
+   * The fields arranged by the panels, new panels are made for dynamic zones only.
+   */ const listAttributes = convertListLayoutToFieldLayouts(data.contentType.layouts.list, schema?.attributes, listMetadatas, {
+        configurations: data.components,
+        schemas: components
+    }, schemas);
+    return {
+        layout: listAttributes,
+        settings: {
+            ...data.contentType.settings,
+            displayName: schema?.info.displayName
+        },
+        metadatas: listMetadatas,
+        options: {
+            ...schema?.options,
+            ...schema?.pluginOptions,
+            ...data.contentType.options
+        }
+    };
+};
+/* -------------------------------------------------------------------------------------------------
+ * convertListLayoutToFieldLayouts
+ * -----------------------------------------------------------------------------------------------*/ /**
+ * @internal
+ * @description takes the columns from the list view configuration and formats them into a generic object
+ * combinining metadata and attribute data.
+ *
+ * @note We do use this to reformat the list of strings when updating the displayed headers for the list view.
+ */ const convertListLayoutToFieldLayouts = (columns, attributes = {}, metadatas, components, schemas = [])=>{
+    return columns.map((name)=>{
+        const attribute = attributes[name];
+        if (!attribute) {
+            return null;
+        }
+        const metadata = metadatas[name];
+        const settings = attribute.type === 'component' && components ? components.configurations[attribute.component].settings : {};
+        return {
+            attribute,
+            label: metadata.label ?? '',
+            mainField: getMainField(attribute, metadata.mainField || settings.mainField, {
+                schemas,
+                components: components?.schemas ?? {}
+            }),
+            name: name,
+            searchable: metadata.searchable ?? true,
+            sortable: metadata.sortable ?? true
+        };
+    }).filter((field)=>field !== null);
+};
+
+export { DEFAULT_SETTINGS, convertEditLayoutToFieldLayouts, convertListLayoutToFieldLayouts, useDocLayout, useDocumentLayout };
+//# sourceMappingURL=useDocumentLayout.mjs.map

package/dist/admin/hooks/useDocumentLayout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDocumentLayout.mjs","sources":["../../../admin/src/hooks/useDocumentLayout.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { SerializedError } from '@reduxjs/toolkit';\nimport {\n  useNotification,\n  useStrapiApp,\n  useAPIErrorHandler,\n  useQueryParams,\n} from '@strapi/admin/strapi-admin';\n\nimport { HOOKS } from '../constants/hooks';\nimport { useGetContentTypeConfigurationQuery } from '../services/contentTypes';\nimport { BaseQueryError } from '../utils/api';\nimport { getMainField } from '../utils/attributes';\n\nimport { useContentTypeSchema } from './useContentTypeSchema';\nimport {\n  type ComponentsDictionary,\n  type Document,\n  type Schema,\n  useDoc,\n  useDocument,\n} from './useDocument';\n\nimport type { ComponentConfiguration } from '../../../shared/contracts/components';\nimport type {\n  Metadatas,\n  FindContentTypeConfiguration,\n  Settings,\n} from '../../../shared/contracts/content-types';\nimport type { Filters, InputProps, Table } from '@strapi/admin/strapi-admin';\nimport type { Schema as SchemaUtils } from '@strapi/types';\n\ntype LayoutOptions = Schema['options'] & Schema['pluginOptions'] & object;\n\ninterface LayoutSettings extends Settings {\n  displayName?: string;\n  icon?: never;\n}\n\ninterface ListFieldLayout\n  extends Table.Header<Document, ListFieldLayout>,\n    Pick<Filters.Filter, 'mainField'> {\n  attribute: SchemaUtils.Attribute.AnyAttribute | { type: 'custom' };\n}\n\ninterface ListLayout {\n  layout: ListFieldLayout[];\n  components?: never;\n  metadatas: {\n    [K in keyof Metadatas]: Metadatas[K]['list'];\n  };\n  options: LayoutOptions;\n  settings: LayoutSettings;\n}\ninterface EditFieldSharedProps\n  extends Omit<InputProps, 'hint' | 'label' | 'type'>,\n    Pick<Filters.Filter, 'mainField'> {\n  hint?: string;\n  label: string;\n  size: number;\n  unique?: boolean;\n  visible?: boolean;\n}\n\n/**\n * Map over all the types in Attribute Types and use that to create a union of new types where the attribute type\n * is under the property attribute and the type is under the property type.\n */\ntype EditFieldLayout = {\n  [K in SchemaUtils.Attribute.Kind]: EditFieldSharedProps & {\n    attribute: Extract<SchemaUtils.Attribute.AnyAttribute, { type: K }>;\n    type: K;\n  };\n}[SchemaUtils.Attribute.Kind];\n\ninterface EditLayout {\n  layout: Array<Array<EditFieldLayout[]>>;\n  components: {\n    [uid: string]: {\n      layout: Array<EditFieldLayout[]>;\n      settings: ComponentConfiguration['settings'] & {\n        displayName?: string;\n        icon?: string;\n      };\n    };\n  };\n  metadatas: {\n    [K in keyof Metadatas]: Metadatas[K]['edit'];\n  };\n  options: LayoutOptions;\n  settings: LayoutSettings;\n}\n\ntype UseDocumentLayout = (model: string) => {\n  error?: BaseQueryError | SerializedError;\n  isLoading: boolean;\n  /**\n   * This is the layout for the edit view,\n   */\n  edit: EditLayout;\n  list: ListLayout;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * useDocumentLayout\n * -----------------------------------------------------------------------------------------------*/\n\nconst DEFAULT_SETTINGS = {\n  bulkable: false,\n  filterable: false,\n  searchable: false,\n  pagination: false,\n  defaultSortBy: '',\n  defaultSortOrder: 'asc',\n  mainField: 'id',\n  pageSize: 10,\n};\n\n/**\n * @alpha\n * @description This hook is used to get the layouts for either the edit view or list view of a specific content-type\n * including the layouts for the components used in the content-type. It also runs the mutation hook waterfall so the data\n * is consistent wherever it is used. It's a light wrapper around the `useDocument` hook, but provides the `skip` option a document\n * is not fetched, however, it does fetch the schemas & components if they do not already exist in the cache.\n *\n * If the fetch fails, it will display a notification to the user.\n *\n * @example\n * ```tsx\n * const { model } = useParams<{ model: string }>();\n * const { edit: { schema: layout } } = useDocumentLayout(model);\n *\n * return layout.map(panel => panel.map(row => row.map(field => <Field.Root {...field} />)))\n * ```\n *\n */\nconst useDocumentLayout: UseDocumentLayout = (model) => {\n  const { schema, components } = useDocument({ model, collectionType: '' }, { skip: true });\n  const [{ query }] = useQueryParams();\n  const runHookWaterfall = useStrapiApp('useDocumentLayout', (state) => state.runHookWaterfall);\n  const { toggleNotification } = useNotification();\n  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();\n  const { isLoading: isLoadingSchemas, schemas } = useContentTypeSchema();\n\n  const {\n    data,\n    isLoading: isLoadingConfigs,\n    error,\n    isFetching: isFetchingConfigs,\n  } = useGetContentTypeConfigurationQuery(model);\n\n  const isLoading = isLoadingSchemas || isFetchingConfigs || isLoadingConfigs;\n\n  React.useEffect(() => {\n    if (error) {\n      toggleNotification({\n        type: 'danger',\n        message: formatAPIError(error),\n      });\n    }\n  }, [error, formatAPIError, toggleNotification]);\n\n  const editLayout = React.useMemo(\n    () =>\n      data && !isLoading\n        ? formatEditLayout(data, { schemas, schema, components })\n        : ({\n            layout: [],\n            components: {},\n            metadatas: {},\n            options: {},\n            settings: DEFAULT_SETTINGS,\n          } as EditLayout),\n    [data, isLoading, schemas, schema, components]\n  );\n\n  const listLayout = React.useMemo(() => {\n    return data && !isLoading\n      ? formatListLayout(data, { schemas, schema, components })\n      : ({\n          layout: [],\n          metadatas: {},\n          options: {},\n          settings: DEFAULT_SETTINGS,\n        } as ListLayout);\n  }, [data, isLoading, schemas, schema, components]);\n\n  const { layout: edit } = React.useMemo(\n    () =>\n      runHookWaterfall(HOOKS.MUTATE_EDIT_VIEW_LAYOUT, {\n        layout: editLayout,\n        query,\n      }),\n    [editLayout, query, runHookWaterfall]\n  );\n\n  return {\n    error,\n    isLoading,\n    edit,\n    list: listLayout,\n  } satisfies ReturnType<UseDocumentLayout>;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * useDocLayout\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * @internal this hook uses the internal useDoc hook, as such it shouldn't be used outside of the\n * content-manager because it won't work as intended.\n */\nconst useDocLayout = () => {\n  const { model } = useDoc();\n  return useDocumentLayout(model);\n};\n\n/* -------------------------------------------------------------------------------------------------\n * formatEditLayout\n * -----------------------------------------------------------------------------------------------*/\ntype LayoutData = FindContentTypeConfiguration.Response['data'];\n\n/**\n * @internal\n * @description takes the configuration data, the schema & the components used in the schema and formats the edit view\n * versions of the schema & components. This is then used to render the edit view of the content-type.\n */\nconst formatEditLayout = (\n  data: LayoutData,\n  {\n    schemas,\n    schema,\n    components,\n  }: { schemas: Schema[]; schema?: Schema; components: ComponentsDictionary }\n): EditLayout => {\n  let currentPanelIndex = 0;\n  /**\n   * The fields arranged by the panels, new panels are made for dynamic zones only.\n   */\n  const panelledEditAttributes = convertEditLayoutToFieldLayouts(\n    data.contentType.layouts.edit,\n    schema?.attributes,\n    data.contentType.metadatas,\n    { configurations: data.components, schemas: components },\n    schemas\n  ).reduce<Array<EditFieldLayout[][]>>((panels, row) => {\n    if (row.some((field) => field.type === 'dynamiczone')) {\n      panels.push([row]);\n      currentPanelIndex += 2;\n    } else {\n      if (!panels[currentPanelIndex]) {\n        panels.push([row]);\n      } else {\n        panels[currentPanelIndex].push(row);\n      }\n    }\n\n    return panels;\n  }, []);\n\n  const componentEditAttributes = Object.entries(data.components).reduce<EditLayout['components']>(\n    (acc, [uid, configuration]) => {\n      acc[uid] = {\n        layout: convertEditLayoutToFieldLayouts(\n          configuration.layouts.edit,\n          components[uid].attributes,\n          configuration.metadatas,\n          { configurations: data.components, schemas: components }\n        ),\n        settings: {\n          ...configuration.settings,\n          icon: components[uid].info.icon,\n          displayName: components[uid].info.displayName,\n        },\n      };\n      return acc;\n    },\n    {}\n  );\n\n  const editMetadatas = Object.entries(data.contentType.metadatas).reduce<EditLayout['metadatas']>(\n    (acc, [attribute, metadata]) => {\n      return {\n        ...acc,\n        [attribute]: metadata.edit,\n      };\n    },\n    {}\n  );\n\n  return {\n    layout: panelledEditAttributes,\n    components: componentEditAttributes,\n    metadatas: editMetadatas,\n    settings: {\n      ...data.contentType.settings,\n      displayName: schema?.info.displayName,\n    },\n    options: {\n      ...schema?.options,\n      ...schema?.pluginOptions,\n      ...data.contentType.options,\n    },\n  };\n};\n\n/* -------------------------------------------------------------------------------------------------\n * convertEditLayoutToFieldLayouts\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * @internal\n * @description takes the edit layout from either a content-type or a component\n * and formats it into a generic object that can be used to correctly render\n * the form fields.\n */\nconst convertEditLayoutToFieldLayouts = (\n  rows: LayoutData['contentType']['layouts']['edit'],\n  attributes: Schema['attributes'] = {},\n  metadatas: Metadatas,\n  components?: {\n    configurations: Record<string, ComponentConfiguration>;\n    schemas: ComponentsDictionary;\n  },\n  schemas: Schema[] = []\n) => {\n  return rows.map((row) =>\n    row\n      .map((field) => {\n        const attribute = attributes[field.name];\n\n        if (!attribute) {\n          return null;\n        }\n\n        const { edit: metadata } = metadatas[field.name];\n\n        const settings: Partial<Settings> =\n          attribute.type === 'component' && components\n            ? components.configurations[attribute.component].settings\n            : {};\n\n        return {\n          attribute,\n          disabled: !metadata.editable,\n          hint: metadata.description,\n          label: metadata.label ?? '',\n          name: field.name,\n          // @ts-expect-error – mainField does exist on the metadata for a relation.\n          mainField: getMainField(attribute, metadata.mainField || settings.mainField, {\n            schemas,\n            components: components?.schemas ?? {},\n          }),\n          placeholder: metadata.placeholder ?? '',\n          required: attribute.required ?? false,\n          size: field.size,\n          unique: 'unique' in attribute ? attribute.unique : false,\n          visible: metadata.visible ?? true,\n          type: attribute.type,\n        };\n      })\n      .filter((field) => field !== null)\n  ) as EditFieldLayout[][];\n};\n\n/* -------------------------------------------------------------------------------------------------\n * formatListLayout\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * @internal\n * @description takes the complete configuration data, the schema & the components used in the schema and\n * formats a list view layout for the content-type. This is much simpler than the edit view layout as there\n * are less options to consider.\n */\nconst formatListLayout = (\n  data: LayoutData,\n  {\n    schemas,\n    schema,\n    components,\n  }: { schemas: Schema[]; schema?: Schema; components: ComponentsDictionary }\n): ListLayout => {\n  const listMetadatas = Object.entries(data.contentType.metadatas).reduce<ListLayout['metadatas']>(\n    (acc, [attribute, metadata]) => {\n      return {\n        ...acc,\n        [attribute]: metadata.list,\n      };\n    },\n    {}\n  );\n  /**\n   * The fields arranged by the panels, new panels are made for dynamic zones only.\n   */\n  const listAttributes = convertListLayoutToFieldLayouts(\n    data.contentType.layouts.list,\n    schema?.attributes,\n    listMetadatas,\n    { configurations: data.components, schemas: components },\n    schemas\n  );\n\n  return {\n    layout: listAttributes,\n    settings: { ...data.contentType.settings, displayName: schema?.info.displayName },\n    metadatas: listMetadatas,\n    options: {\n      ...schema?.options,\n      ...schema?.pluginOptions,\n      ...data.contentType.options,\n    },\n  };\n};\n\n/* -------------------------------------------------------------------------------------------------\n * convertListLayoutToFieldLayouts\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * @internal\n * @description takes the columns from the list view configuration and formats them into a generic object\n * combinining metadata and attribute data.\n *\n * @note We do use this to reformat the list of strings when updating the displayed headers for the list view.\n */\nconst convertListLayoutToFieldLayouts = (\n  columns: LayoutData['contentType']['layouts']['list'],\n  attributes: Schema['attributes'] = {},\n  metadatas: ListLayout['metadatas'],\n  components?: {\n    configurations: Record<string, ComponentConfiguration>;\n    schemas: ComponentsDictionary;\n  },\n  schemas: Schema[] = []\n) => {\n  return columns\n    .map((name) => {\n      const attribute = attributes[name];\n\n      if (!attribute) {\n        return null;\n      }\n\n      const metadata = metadatas[name];\n\n      const settings: Partial<Settings> =\n        attribute.type === 'component' && components\n          ? components.configurations[attribute.component].settings\n          : {};\n\n      return {\n        attribute,\n        label: metadata.label ?? '',\n        mainField: getMainField(attribute, metadata.mainField || settings.mainField, {\n          schemas,\n          components: components?.schemas ?? {},\n        }),\n        name: name,\n        searchable: metadata.searchable ?? true,\n        sortable: metadata.sortable ?? true,\n      } satisfies ListFieldLayout;\n    })\n    .filter((field) => field !== null) as ListFieldLayout[];\n};\n\nexport {\n  useDocLayout,\n  useDocumentLayout,\n  convertListLayoutToFieldLayouts,\n  convertEditLayoutToFieldLayouts,\n  DEFAULT_SETTINGS,\n};\nexport type { EditLayout, EditFieldLayout, ListLayout, ListFieldLayout, UseDocumentLayout };\n"],"names":["DEFAULT_SETTINGS","bulkable","filterable","searchable","pagination","defaultSortBy","defaultSortOrder","mainField","pageSize","useDocumentLayout","model","schema","components","useDocument","collectionType","skip","query","useQueryParams","runHookWaterfall","useStrapiApp","state","toggleNotification","useNotification","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","isLoading","isLoadingSchemas","schemas","useContentTypeSchema","data","isLoadingConfigs","error","isFetching","isFetchingConfigs","useGetContentTypeConfigurationQuery","React","useEffect","type","message","editLayout","useMemo","formatEditLayout","layout","metadatas","options","settings","listLayout","formatListLayout","edit","HOOKS","MUTATE_EDIT_VIEW_LAYOUT","list","useDocLayout","useDoc","currentPanelIndex","panelledEditAttributes","convertEditLayoutToFieldLayouts","contentType","layouts","attributes","configurations","reduce","panels","row","some","field","push","componentEditAttributes","Object","entries","acc","uid","configuration","icon","info","displayName","editMetadatas","attribute","metadata","pluginOptions","rows","map","name","component","disabled","editable","hint","description","label","getMainField","placeholder","required","size","unique","visible","filter","listMetadatas","listAttributes","convertListLayoutToFieldLayouts","columns","sortable"],"mappings":"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"}

package/dist/admin/hooks/useDragAndDrop.js

@@ -0,0 +1,193 @@
+'use strict';
+
+var React = require('react');
+var reactDnd = require('react-dnd');
+var useKeyboardDragAndDrop = require('./useKeyboardDragAndDrop.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 DIRECTIONS = {
+    UPWARD: 'upward',
+    DOWNWARD: 'downward'
+};
+const DROP_SENSITIVITY = {
+    REGULAR: 'regular',
+    IMMEDIATE: 'immediate'
+};
+/**
+ * A utility hook abstracting the general drag and drop hooks from react-dnd.
+ * Centralising the same behaviours and by default offering keyboard support.
+ */ const useDragAndDrop = (active, { type = 'STRAPI_DND', index, item, onStart, onEnd, onGrabItem, onDropItem, onCancel, onMoveItem, dropSensitivity = DROP_SENSITIVITY.REGULAR })=>{
+    const objectRef = React__namespace.useRef(null);
+    const [{ handlerId, isOver }, dropRef] = reactDnd.useDrop({
+        accept: type,
+        collect (monitor) {
+            return {
+                handlerId: monitor.getHandlerId(),
+                isOver: monitor.isOver({
+                    shallow: true
+                })
+            };
+        },
+        drop (item) {
+            const draggedIndex = item.index;
+            const newIndex = index;
+            if (isOver && onDropItem) {
+                onDropItem(draggedIndex, newIndex);
+            }
+        },
+        hover (item, monitor) {
+            if (!objectRef.current || !onMoveItem) {
+                return;
+            }
+            const dragIndex = item.index;
+            const newIndex = index;
+            const hoverBoundingRect = objectRef.current?.getBoundingClientRect();
+            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+            const clientOffset = monitor.getClientOffset();
+            if (!clientOffset) return;
+            const hoverClientY = clientOffset && clientOffset.y - hoverBoundingRect.top;
+            if (typeof dragIndex === 'number' && typeof newIndex === 'number') {
+                if (dragIndex === newIndex) {
+                    // Don't replace items with themselves
+                    return;
+                }
+                if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {
+                    // Dragging downwards
+                    if (dragIndex < newIndex && hoverClientY < hoverMiddleY) {
+                        return;
+                    }
+                    // Dragging upwards
+                    if (dragIndex > newIndex && hoverClientY > hoverMiddleY) {
+                        return;
+                    }
+                }
+                // Time to actually perform the action
+                onMoveItem(newIndex, dragIndex);
+                item.index = newIndex;
+            } else {
+                // Using numbers as indices doesn't work for nested list items with path like [1, 1, 0]
+                if (Array.isArray(dragIndex) && Array.isArray(newIndex)) {
+                    // Indices comparison to find item position in nested list
+                    const minLength = Math.min(dragIndex.length, newIndex.length);
+                    let areEqual = true;
+                    let isLessThan = false;
+                    let isGreaterThan = false;
+                    for(let i = 0; i < minLength; i++){
+                        if (dragIndex[i] < newIndex[i]) {
+                            isLessThan = true;
+                            areEqual = false;
+                            break;
+                        } else if (dragIndex[i] > newIndex[i]) {
+                            isGreaterThan = true;
+                            areEqual = false;
+                            break;
+                        }
+                    }
+                    // Don't replace items with themselves
+                    if (areEqual && dragIndex.length === newIndex.length) {
+                        return;
+                    }
+                    if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {
+                        // Dragging downwards
+                        if (isLessThan && !isGreaterThan && hoverClientY < hoverMiddleY) {
+                            return;
+                        }
+                        // Dragging upwards
+                        if (isGreaterThan && !isLessThan && hoverClientY > hoverMiddleY) {
+                            return;
+                        }
+                    }
+                }
+                onMoveItem(newIndex, dragIndex);
+                item.index = newIndex;
+            }
+        }
+    });
+    const getDragDirection = (monitor)=>{
+        if (monitor && monitor.isDragging() && !monitor.didDrop() && monitor.getInitialClientOffset() && monitor.getClientOffset()) {
+            const deltaY = monitor.getInitialClientOffset().y - monitor.getClientOffset().y;
+            if (deltaY > 0) return DIRECTIONS.UPWARD;
+            if (deltaY < 0) return DIRECTIONS.DOWNWARD;
+            return null;
+        }
+        return null;
+    };
+    const [{ isDragging, direction }, dragRef, dragPreviewRef] = reactDnd.useDrag({
+        type,
+        item () {
+            if (onStart) {
+                onStart();
+            }
+            /**
+       * This will be attached and it helps define the preview sizes
+       * when a component is flexy e.g. Relations
+       */ const { width } = objectRef.current?.getBoundingClientRect() ?? {};
+            return {
+                index,
+                width,
+                ...item
+            };
+        },
+        end () {
+            if (onEnd) {
+                onEnd();
+            }
+        },
+        canDrag: active,
+        /**
+     * This is useful when the item is in a virtualized list.
+     * However, if we don't have an ID then we want the libraries
+     * defaults to take care of this.
+     */ isDragging: item?.id ? (monitor)=>{
+            return item.id === monitor.getItem().id;
+        } : undefined,
+        collect: (monitor)=>({
+                isDragging: monitor.isDragging(),
+                initialOffset: monitor.getInitialClientOffset(),
+                currentOffset: monitor.getClientOffset(),
+                direction: getDragDirection(monitor)
+            })
+    });
+    const handleKeyDown = useKeyboardDragAndDrop.useKeyboardDragAndDrop(active, index, {
+        onGrabItem,
+        onDropItem,
+        onCancel,
+        onMoveItem
+    });
+    return [
+        {
+            handlerId,
+            isDragging,
+            handleKeyDown,
+            isOverDropTarget: isOver,
+            direction
+        },
+        objectRef,
+        dropRef,
+        dragRef,
+        dragPreviewRef
+    ];
+};
+
+exports.DIRECTIONS = DIRECTIONS;
+exports.DROP_SENSITIVITY = DROP_SENSITIVITY;
+exports.useDragAndDrop = useDragAndDrop;
+//# sourceMappingURL=useDragAndDrop.js.map

package/dist/admin/hooks/useDragAndDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragAndDrop.js","sources":["../../../admin/src/hooks/useDragAndDrop.ts"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  useDrag,\n  useDrop,\n  type HandlerManager,\n  type ConnectDragSource,\n  type ConnectDropTarget,\n  type ConnectDragPreview,\n  type DragSourceMonitor,\n} from 'react-dnd';\n\nimport {\n  useKeyboardDragAndDrop,\n  type UseKeyboardDragAndDropCallbacks,\n} from './useKeyboardDragAndDrop';\n\nimport type { Data } from '@strapi/types';\n\nconst DIRECTIONS = {\n  UPWARD: 'upward',\n  DOWNWARD: 'downward',\n} as const;\n\nconst DROP_SENSITIVITY = {\n  REGULAR: 'regular',\n  IMMEDIATE: 'immediate',\n} as const;\n\ninterface UseDragAndDropOptions<\n  TIndex extends number | Array<number> = number,\n  TItem extends { index: TIndex } = { index: TIndex },\n> extends UseKeyboardDragAndDropCallbacks<TIndex> {\n  type?: string;\n  index: TIndex;\n  item?: TItem;\n  onStart?: () => void;\n  onEnd?: () => void;\n  dropSensitivity?: (typeof DROP_SENSITIVITY)[keyof typeof DROP_SENSITIVITY];\n}\n\ntype Identifier = ReturnType<HandlerManager['getHandlerId']>;\n\ntype UseDragAndDropReturn<E extends Element = HTMLElement> = [\n  props: {\n    handlerId: Identifier;\n    isDragging: boolean;\n    handleKeyDown: <E extends Element>(event: React.KeyboardEvent<E>) => void;\n    isOverDropTarget: boolean;\n    direction: (typeof DIRECTIONS)[keyof typeof DIRECTIONS] | null;\n  },\n  objectRef: React.RefObject<E>,\n  dropRef: ConnectDropTarget,\n  dragRef: ConnectDragSource,\n  dragPreviewRef: ConnectDragPreview,\n];\n\ntype DropCollectedProps = {\n  handlerId: Identifier;\n  isOver: boolean;\n};\n\n/**\n * A utility hook abstracting the general drag and drop hooks from react-dnd.\n * Centralising the same behaviours and by default offering keyboard support.\n */\nconst useDragAndDrop = <\n  TIndex extends number | Array<number>,\n  TItem extends { index: TIndex; id?: Data.ID; [key: string]: unknown } = {\n    index: TIndex;\n    [key: string]: unknown;\n  },\n  E extends Element = HTMLElement,\n>(\n  active: boolean,\n  {\n    type = 'STRAPI_DND',\n    index,\n    item,\n    onStart,\n    onEnd,\n    onGrabItem,\n    onDropItem,\n    onCancel,\n    onMoveItem,\n    dropSensitivity = DROP_SENSITIVITY.REGULAR,\n  }: UseDragAndDropOptions<TIndex, TItem>\n): UseDragAndDropReturn<E> => {\n  const objectRef = React.useRef<E>(null);\n\n  const [{ handlerId, isOver }, dropRef] = useDrop<TItem, void, DropCollectedProps>({\n    accept: type,\n    collect(monitor) {\n      return {\n        handlerId: monitor.getHandlerId(),\n        isOver: monitor.isOver({ shallow: true }),\n      };\n    },\n    drop(item) {\n      const draggedIndex = item.index;\n      const newIndex = index;\n\n      if (isOver && onDropItem) {\n        onDropItem(draggedIndex, newIndex);\n      }\n    },\n    hover(item, monitor) {\n      if (!objectRef.current || !onMoveItem) {\n        return;\n      }\n\n      const dragIndex = item.index;\n      const newIndex = index;\n\n      const hoverBoundingRect = objectRef.current?.getBoundingClientRect();\n      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n      const clientOffset = monitor.getClientOffset();\n      if (!clientOffset) return;\n\n      const hoverClientY = clientOffset && clientOffset.y - hoverBoundingRect.top;\n      if (typeof dragIndex === 'number' && typeof newIndex === 'number') {\n        if (dragIndex === newIndex) {\n          // Don't replace items with themselves\n          return;\n        }\n\n        if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {\n          // Dragging downwards\n          if (dragIndex < newIndex && hoverClientY < hoverMiddleY) {\n            return;\n          }\n\n          // Dragging upwards\n          if (dragIndex > newIndex && hoverClientY > hoverMiddleY) {\n            return;\n          }\n        }\n\n        // Time to actually perform the action\n        onMoveItem(newIndex, dragIndex);\n        item.index = newIndex;\n      } else {\n        // Using numbers as indices doesn't work for nested list items with path like [1, 1, 0]\n        if (Array.isArray(dragIndex) && Array.isArray(newIndex)) {\n          // Indices comparison to find item position in nested list\n          const minLength = Math.min(dragIndex.length, newIndex.length);\n          let areEqual = true;\n          let isLessThan = false;\n          let isGreaterThan = false;\n\n          for (let i = 0; i < minLength; i++) {\n            if (dragIndex[i] < newIndex[i]) {\n              isLessThan = true;\n              areEqual = false;\n              break;\n            } else if (dragIndex[i] > newIndex[i]) {\n              isGreaterThan = true;\n              areEqual = false;\n              break;\n            }\n          }\n\n          // Don't replace items with themselves\n          if (areEqual && dragIndex.length === newIndex.length) {\n            return;\n          }\n\n          if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {\n            // Dragging downwards\n            if (isLessThan && !isGreaterThan && hoverClientY < hoverMiddleY) {\n              return;\n            }\n\n            // Dragging upwards\n            if (isGreaterThan && !isLessThan && hoverClientY > hoverMiddleY) {\n              return;\n            }\n          }\n        }\n\n        onMoveItem(newIndex, dragIndex);\n        item.index = newIndex;\n      }\n    },\n  });\n\n  const getDragDirection = (monitor: DragSourceMonitor<TItem, void>) => {\n    if (\n      monitor &&\n      monitor.isDragging() &&\n      !monitor.didDrop() &&\n      monitor.getInitialClientOffset() &&\n      monitor.getClientOffset()\n    ) {\n      const deltaY = monitor.getInitialClientOffset()!.y - monitor.getClientOffset()!.y;\n\n      if (deltaY > 0) return DIRECTIONS.UPWARD;\n\n      if (deltaY < 0) return DIRECTIONS.DOWNWARD;\n\n      return null;\n    }\n\n    return null;\n  };\n\n  const [{ isDragging, direction }, dragRef, dragPreviewRef] = useDrag({\n    type,\n    item() {\n      if (onStart) {\n        onStart();\n      }\n\n      /**\n       * This will be attached and it helps define the preview sizes\n       * when a component is flexy e.g. Relations\n       */\n      const { width } = objectRef.current?.getBoundingClientRect() ?? {};\n\n      return { index, width, ...item };\n    },\n    end() {\n      if (onEnd) {\n        onEnd();\n      }\n    },\n    canDrag: active,\n    /**\n     * This is useful when the item is in a virtualized list.\n     * However, if we don't have an ID then we want the libraries\n     * defaults to take care of this.\n     */\n    isDragging: item?.id\n      ? (monitor) => {\n          return item.id === monitor.getItem().id;\n        }\n      : undefined,\n    collect: (monitor) => ({\n      isDragging: monitor.isDragging(),\n      initialOffset: monitor.getInitialClientOffset(),\n      currentOffset: monitor.getClientOffset(),\n      direction: getDragDirection(monitor),\n    }),\n  });\n\n  const handleKeyDown = useKeyboardDragAndDrop(active, index, {\n    onGrabItem,\n    onDropItem,\n    onCancel,\n    onMoveItem,\n  });\n\n  return [\n    { handlerId, isDragging, handleKeyDown, isOverDropTarget: isOver, direction },\n    objectRef,\n    dropRef,\n    dragRef,\n    dragPreviewRef,\n  ];\n};\n\nexport {\n  useDragAndDrop,\n  UseDragAndDropReturn,\n  UseDragAndDropOptions,\n  DIRECTIONS,\n  DROP_SENSITIVITY,\n};\n"],"names":["DIRECTIONS","UPWARD","DOWNWARD","DROP_SENSITIVITY","REGULAR","IMMEDIATE","useDragAndDrop","active","type","index","item","onStart","onEnd","onGrabItem","onDropItem","onCancel","onMoveItem","dropSensitivity","objectRef","React","useRef","handlerId","isOver","dropRef","useDrop","accept","collect","monitor","getHandlerId","shallow","drop","draggedIndex","newIndex","hover","current","dragIndex","hoverBoundingRect","getBoundingClientRect","hoverMiddleY","bottom","top","clientOffset","getClientOffset","hoverClientY","y","Array","isArray","minLength","Math","min","length","areEqual","isLessThan","isGreaterThan","i","getDragDirection","isDragging","didDrop","getInitialClientOffset","deltaY","direction","dragRef","dragPreviewRef","useDrag","width","end","canDrag","id","getItem","undefined","initialOffset","currentOffset","handleKeyDown","useKeyboardDragAndDrop","isOverDropTarget"],"mappings":"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"}