@strapi/content-manager 5.0.0-beta.6 → 5.0.0-beta.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_chunks/{CardDragPreview-DSVYodBX.js → CardDragPreview-C0QyJgRA.js} +10 -14
- package/dist/_chunks/CardDragPreview-C0QyJgRA.js.map +1 -0
- package/dist/_chunks/{CardDragPreview-ikSG4M46.mjs → CardDragPreview-DOxamsuj.mjs} +7 -9
- package/dist/_chunks/CardDragPreview-DOxamsuj.mjs.map +1 -0
- package/dist/_chunks/{ComponentConfigurationPage--2aLCv-G.mjs → ComponentConfigurationPage-CuWgXugY.mjs} +3 -3
- package/dist/_chunks/{ComponentConfigurationPage--2aLCv-G.mjs.map → ComponentConfigurationPage-CuWgXugY.mjs.map} +1 -1
- package/dist/_chunks/{ComponentConfigurationPage-43KmCNQE.js → ComponentConfigurationPage-by0e_kNd.js} +3 -3
- package/dist/_chunks/{ComponentConfigurationPage-43KmCNQE.js.map → ComponentConfigurationPage-by0e_kNd.js.map} +1 -1
- package/dist/_chunks/{ComponentIcon-BBQsYCVn.js → ComponentIcon-BXdiCGQp.js} +8 -2
- package/dist/_chunks/ComponentIcon-BXdiCGQp.js.map +1 -0
- package/dist/_chunks/{ComponentIcon-BOFnK76n.mjs → ComponentIcon-u4bIXTFY.mjs} +9 -3
- package/dist/_chunks/ComponentIcon-u4bIXTFY.mjs.map +1 -0
- package/dist/_chunks/{EditConfigurationPage-BfFzJ4Br.js → EditConfigurationPage-CqBeCPGH.js} +3 -3
- package/dist/_chunks/{EditConfigurationPage-BfFzJ4Br.js.map → EditConfigurationPage-CqBeCPGH.js.map} +1 -1
- package/dist/_chunks/{EditConfigurationPage-CUcGHHvQ.mjs → EditConfigurationPage-DbI4KMyz.mjs} +3 -3
- package/dist/_chunks/{EditConfigurationPage-CUcGHHvQ.mjs.map → EditConfigurationPage-DbI4KMyz.mjs.map} +1 -1
- package/dist/_chunks/{EditViewPage-CzOT5Kpj.js → EditViewPage-ChgloMyO.js} +7 -9
- package/dist/_chunks/EditViewPage-ChgloMyO.js.map +1 -0
- package/dist/_chunks/{EditViewPage-Bm8lgcm6.mjs → EditViewPage-dFPBya9U.mjs} +6 -6
- package/dist/_chunks/EditViewPage-dFPBya9U.mjs.map +1 -0
- package/dist/_chunks/{Field-Dlh0uGnL.mjs → Field-C1nUKcdS.mjs} +500 -608
- package/dist/_chunks/Field-C1nUKcdS.mjs.map +1 -0
- package/dist/_chunks/{Field-Caef4JjM.js → Field-dLk-vgLL.js} +552 -661
- package/dist/_chunks/Field-dLk-vgLL.js.map +1 -0
- package/dist/_chunks/{Form-BzuAjtRq.js → Form-CbXtmHC_.js} +21 -19
- package/dist/_chunks/Form-CbXtmHC_.js.map +1 -0
- package/dist/_chunks/{Form-EnaQL_6L.mjs → Form-DOlpi7Js.mjs} +21 -18
- package/dist/_chunks/Form-DOlpi7Js.mjs.map +1 -0
- package/dist/_chunks/{History-D6sbCJvo.mjs → History-BFNUAiGc.mjs} +32 -43
- package/dist/_chunks/History-BFNUAiGc.mjs.map +1 -0
- package/dist/_chunks/{History-C17LiyRg.js → History-BjDfohBr.js} +32 -44
- package/dist/_chunks/History-BjDfohBr.js.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-Ce4qs7qE.mjs → ListConfigurationPage-DDi0KqFm.mjs} +14 -14
- package/dist/_chunks/ListConfigurationPage-DDi0KqFm.mjs.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-Dks5SX6f.js → ListConfigurationPage-IQBgWTaa.js} +17 -19
- package/dist/_chunks/ListConfigurationPage-IQBgWTaa.js.map +1 -0
- package/dist/_chunks/{ListViewPage-Be7S5aKL.mjs → ListViewPage-BPjljUsH.mjs} +25 -45
- package/dist/_chunks/ListViewPage-BPjljUsH.mjs.map +1 -0
- package/dist/_chunks/{ListViewPage-BwrZrPsh.js → ListViewPage-CZYGqlvF.js} +31 -51
- package/dist/_chunks/ListViewPage-CZYGqlvF.js.map +1 -0
- package/dist/_chunks/{NoContentTypePage-Cu5r1-JT.js → NoContentTypePage-BOAI6VZ1.js} +5 -5
- package/dist/_chunks/NoContentTypePage-BOAI6VZ1.js.map +1 -0
- package/dist/_chunks/{NoContentTypePage-CIPmYQMm.mjs → NoContentTypePage-DaWw67K-.mjs} +7 -7
- package/dist/_chunks/NoContentTypePage-DaWw67K-.mjs.map +1 -0
- package/dist/_chunks/{NoPermissionsPage-DhJ7LYrr.mjs → NoPermissionsPage-CZrJH00p.mjs} +5 -6
- package/dist/_chunks/NoPermissionsPage-CZrJH00p.mjs.map +1 -0
- package/dist/_chunks/{NoPermissionsPage-C-j6TEUF.js → NoPermissionsPage-cYEtLc_e.js} +4 -5
- package/dist/_chunks/NoPermissionsPage-cYEtLc_e.js.map +1 -0
- package/dist/_chunks/{Relations-CY7AtkDA.mjs → Relations-DTowyge2.mjs} +66 -56
- package/dist/_chunks/Relations-DTowyge2.mjs.map +1 -0
- package/dist/_chunks/{Relations-Czs-uZ-s.js → Relations-DU6B7irU.js} +70 -61
- package/dist/_chunks/Relations-DU6B7irU.js.map +1 -0
- package/dist/_chunks/{en-C-V1_90f.js → en-DTULi5-d.js} +3 -1
- package/dist/_chunks/{en-C-V1_90f.js.map → en-DTULi5-d.js.map} +1 -1
- package/dist/_chunks/{en-MBPul9Su.mjs → en-GCOTL6jR.mjs} +3 -1
- package/dist/_chunks/{en-MBPul9Su.mjs.map → en-GCOTL6jR.mjs.map} +1 -1
- package/dist/_chunks/{index-DNVx8ssZ.mjs → index-BaGHmIir.mjs} +507 -202
- package/dist/_chunks/index-BaGHmIir.mjs.map +1 -0
- package/dist/_chunks/{index-X_2tafck.js → index-CCJeB7Rw.js} +502 -198
- package/dist/_chunks/index-CCJeB7Rw.js.map +1 -0
- package/dist/_chunks/{layout-Dnh0PNp9.mjs → layout-BinjszSQ.mjs} +13 -13
- package/dist/_chunks/layout-BinjszSQ.mjs.map +1 -0
- package/dist/_chunks/{layout-dBc7wN7L.js → layout-ni_L9kT1.js} +14 -16
- package/dist/_chunks/layout-ni_L9kT1.js.map +1 -0
- package/dist/_chunks/{relations-4pHtBrHJ.js → relations-CeJAJc5I.js} +2 -2
- package/dist/_chunks/{relations-4pHtBrHJ.js.map → relations-CeJAJc5I.js.map} +1 -1
- package/dist/_chunks/{relations-Dx7tMKJN.mjs → relations-c91ji5eR.mjs} +2 -2
- package/dist/_chunks/{relations-Dx7tMKJN.mjs.map → relations-c91ji5eR.mjs.map} +1 -1
- package/dist/_chunks/useDragAndDrop-DdHgKsqq.mjs.map +1 -1
- package/dist/_chunks/useDragAndDrop-J0TUUbR6.js.map +1 -1
- package/dist/_chunks/usePrev-B9w_-eYc.js +15 -0
- package/dist/_chunks/usePrev-B9w_-eYc.js.map +1 -0
- package/dist/_chunks/usePrev-DH6iah0A.mjs +16 -0
- package/dist/_chunks/usePrev-DH6iah0A.mjs.map +1 -0
- package/dist/admin/index.js +2 -1
- package/dist/admin/index.js.map +1 -1
- package/dist/admin/index.mjs +5 -4
- package/dist/admin/src/components/ComponentIcon.d.ts +6 -3
- package/dist/admin/src/content-manager.d.ts +3 -3
- package/dist/admin/src/exports.d.ts +1 -0
- package/dist/admin/src/history/services/historyVersion.d.ts +1 -1
- package/dist/admin/src/hooks/useDocument.d.ts +5 -8
- package/dist/admin/src/hooks/useDocumentActions.d.ts +24 -3
- package/dist/admin/src/hooks/useDocumentLayout.d.ts +2 -2
- package/dist/admin/src/hooks/useDragAndDrop.d.ts +4 -4
- package/dist/admin/src/hooks/useKeyboardDragAndDrop.d.ts +1 -1
- package/dist/admin/src/pages/EditView/components/DocumentActions.d.ts +3 -1
- package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksInput.d.ts +3 -3
- package/dist/admin/src/pages/EditView/components/FormInputs/Component/Input.d.ts +2 -2
- package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.d.ts +3 -5
- package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.d.ts +1 -1
- package/dist/admin/src/pages/EditView/components/FormInputs/Relations.d.ts +10 -18
- package/dist/admin/src/pages/EditView/components/FormInputs/UID.d.ts +2 -2
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.d.ts +3 -49
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/Field.d.ts +2 -2
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/WysiwygStyles.d.ts +67 -52
- package/dist/admin/src/pages/EditView/components/InputRenderer.d.ts +2 -10
- package/dist/admin/src/services/api.d.ts +2 -3
- package/dist/admin/src/services/components.d.ts +2 -2
- package/dist/admin/src/services/contentTypes.d.ts +5 -5
- package/dist/admin/src/services/documents.d.ts +29 -17
- package/dist/admin/src/services/init.d.ts +2 -2
- package/dist/admin/src/services/relations.d.ts +3 -3
- package/dist/admin/src/services/uid.d.ts +3 -3
- package/dist/admin/src/utils/api.d.ts +4 -18
- package/dist/admin/src/utils/validation.d.ts +1 -6
- package/dist/server/index.js +529 -407
- package/dist/server/index.js.map +1 -1
- package/dist/server/index.mjs +537 -415
- package/dist/server/index.mjs.map +1 -1
- package/dist/server/src/controllers/collection-types.d.ts.map +1 -1
- package/dist/server/src/controllers/single-types.d.ts.map +1 -1
- package/dist/server/src/controllers/utils/metadata.d.ts +8 -0
- package/dist/server/src/controllers/utils/metadata.d.ts.map +1 -0
- package/dist/server/src/controllers/validation/dimensions.d.ts +9 -0
- package/dist/server/src/controllers/validation/dimensions.d.ts.map +1 -0
- package/dist/server/src/controllers/validation/index.d.ts +1 -1
- package/dist/server/src/history/services/history.d.ts +2 -4
- package/dist/server/src/history/services/history.d.ts.map +1 -1
- package/dist/server/src/history/services/index.d.ts +6 -2
- package/dist/server/src/history/services/index.d.ts.map +1 -1
- package/dist/server/src/history/services/lifecycles.d.ts +9 -0
- package/dist/server/src/history/services/lifecycles.d.ts.map +1 -0
- package/dist/server/src/history/services/utils.d.ts +41 -9
- package/dist/server/src/history/services/utils.d.ts.map +1 -1
- package/dist/server/src/history/utils.d.ts +6 -2
- package/dist/server/src/history/utils.d.ts.map +1 -1
- package/dist/server/src/index.d.ts +18 -39
- package/dist/server/src/index.d.ts.map +1 -1
- package/dist/server/src/services/document-manager.d.ts +13 -12
- package/dist/server/src/services/document-manager.d.ts.map +1 -1
- package/dist/server/src/services/document-metadata.d.ts +8 -29
- package/dist/server/src/services/document-metadata.d.ts.map +1 -1
- package/dist/server/src/services/index.d.ts +18 -39
- package/dist/server/src/services/index.d.ts.map +1 -1
- package/dist/server/src/services/utils/populate.d.ts +8 -1
- package/dist/server/src/services/utils/populate.d.ts.map +1 -1
- package/dist/shared/contracts/collection-types.d.ts +14 -6
- package/dist/shared/contracts/collection-types.d.ts.map +1 -1
- package/dist/shared/contracts/relations.d.ts +2 -2
- package/dist/shared/contracts/relations.d.ts.map +1 -1
- package/package.json +13 -14
- package/dist/_chunks/CardDragPreview-DSVYodBX.js.map +0 -1
- package/dist/_chunks/CardDragPreview-ikSG4M46.mjs.map +0 -1
- package/dist/_chunks/ComponentIcon-BBQsYCVn.js.map +0 -1
- package/dist/_chunks/ComponentIcon-BOFnK76n.mjs.map +0 -1
- package/dist/_chunks/EditViewPage-Bm8lgcm6.mjs.map +0 -1
- package/dist/_chunks/EditViewPage-CzOT5Kpj.js.map +0 -1
- package/dist/_chunks/Field-Caef4JjM.js.map +0 -1
- package/dist/_chunks/Field-Dlh0uGnL.mjs.map +0 -1
- package/dist/_chunks/Form-BzuAjtRq.js.map +0 -1
- package/dist/_chunks/Form-EnaQL_6L.mjs.map +0 -1
- package/dist/_chunks/History-C17LiyRg.js.map +0 -1
- package/dist/_chunks/History-D6sbCJvo.mjs.map +0 -1
- package/dist/_chunks/ListConfigurationPage-Ce4qs7qE.mjs.map +0 -1
- package/dist/_chunks/ListConfigurationPage-Dks5SX6f.js.map +0 -1
- package/dist/_chunks/ListViewPage-Be7S5aKL.mjs.map +0 -1
- package/dist/_chunks/ListViewPage-BwrZrPsh.js.map +0 -1
- package/dist/_chunks/NoContentTypePage-CIPmYQMm.mjs.map +0 -1
- package/dist/_chunks/NoContentTypePage-Cu5r1-JT.js.map +0 -1
- package/dist/_chunks/NoPermissionsPage-C-j6TEUF.js.map +0 -1
- package/dist/_chunks/NoPermissionsPage-DhJ7LYrr.mjs.map +0 -1
- package/dist/_chunks/Relations-CY7AtkDA.mjs.map +0 -1
- package/dist/_chunks/Relations-Czs-uZ-s.js.map +0 -1
- package/dist/_chunks/index-DNVx8ssZ.mjs.map +0 -1
- package/dist/_chunks/index-X_2tafck.js.map +0 -1
- package/dist/_chunks/layout-Dnh0PNp9.mjs.map +0 -1
- package/dist/_chunks/layout-dBc7wN7L.js.map +0 -1
- package/dist/_chunks/urls-CbOsUOoW.mjs +0 -7
- package/dist/_chunks/urls-CbOsUOoW.mjs.map +0 -1
- package/dist/_chunks/urls-DzZya_gm.js +0 -6
- package/dist/_chunks/urls-DzZya_gm.js.map +0 -1
- package/dist/admin/src/pages/ListView/components/BulkActions/PublishAction.d.ts +0 -31
- package/dist/server/src/controllers/utils/dimensions.d.ts +0 -5
- package/dist/server/src/controllers/utils/dimensions.d.ts.map +0 -1
@@ -1,7 +1,7 @@
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
2
2
|
import * as React from "react";
|
3
3
|
import { createContext, useQueryParams, useField, useNotification, useFocusInputField, useForm } from "@strapi/admin/strapi-admin";
|
4
|
-
import { Flex, TextButton, Combobox, ComboboxOption, Typography, VisuallyHidden, Box, useComposedRefs, IconButton, Tooltip, Link } from "@strapi/design-system";
|
4
|
+
import { Flex, TextButton, Field, Combobox, ComboboxOption, Typography, VisuallyHidden, Box, useComposedRefs, IconButton, Tooltip, Link } from "@strapi/design-system";
|
5
5
|
import { ArrowClockwise, Drag, Cross } from "@strapi/icons";
|
6
6
|
import { generateNKeysBetween } from "fractional-indexing";
|
7
7
|
import pipe from "lodash/fp/pipe";
|
@@ -9,10 +9,10 @@ import { getEmptyImage } from "react-dnd-html5-backend";
|
|
9
9
|
import { useIntl } from "react-intl";
|
10
10
|
import { NavLink } from "react-router-dom";
|
11
11
|
import { FixedSizeList } from "react-window";
|
12
|
-
import styled from "styled-components";
|
13
|
-
import { b as useDoc, c as buildValidParams, C as COLLECTION_TYPES, g as getTranslation, D as DocumentStatus } from "./index-
|
12
|
+
import { styled } from "styled-components";
|
13
|
+
import { b as useDoc, c as buildValidParams, C as COLLECTION_TYPES, g as getTranslation, D as DocumentStatus } from "./index-BaGHmIir.mjs";
|
14
14
|
import { u as useDragAndDrop, I as ItemTypes, D as DROP_SENSITIVITY } from "./useDragAndDrop-DdHgKsqq.mjs";
|
15
|
-
import { u as useGetRelationsQuery, g as getRelationLabel, a as useLazySearchRelationsQuery } from "./relations-
|
15
|
+
import { u as useGetRelationsQuery, g as getRelationLabel, a as useLazySearchRelationsQuery } from "./relations-c91ji5eR.mjs";
|
16
16
|
const [ComponentProvider, useComponent] = createContext("ComponentContext", {
|
17
17
|
id: void 0,
|
18
18
|
level: -1,
|
@@ -198,11 +198,15 @@ const addLabelAndHref = ({ mainField, href }) => (relations) => relations.map((r
|
|
198
198
|
};
|
199
199
|
});
|
200
200
|
const RelationsInput = ({
|
201
|
+
hint,
|
201
202
|
id,
|
202
203
|
model,
|
204
|
+
label,
|
205
|
+
labelAction,
|
203
206
|
name,
|
204
207
|
mainField,
|
205
208
|
placeholder,
|
209
|
+
required,
|
206
210
|
unique: _unique,
|
207
211
|
"aria-label": _ariaLabel,
|
208
212
|
onChange,
|
@@ -278,49 +282,53 @@ const RelationsInput = ({
|
|
278
282
|
React.useLayoutEffect(() => {
|
279
283
|
setTextValue("");
|
280
284
|
}, [field.value]);
|
281
|
-
return /* @__PURE__ */
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
/* @__PURE__ */ jsx(
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
285
|
+
return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, hint, name, required, children: [
|
286
|
+
/* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
|
287
|
+
/* @__PURE__ */ jsx(
|
288
|
+
Combobox,
|
289
|
+
{
|
290
|
+
ref: fieldRef,
|
291
|
+
name,
|
292
|
+
autocomplete: "none",
|
293
|
+
placeholder: placeholder || formatMessage({
|
294
|
+
id: getTranslation("relation.add"),
|
295
|
+
defaultMessage: "Add relation"
|
296
|
+
}),
|
297
|
+
hasMoreItems: hasNextPage,
|
298
|
+
loading: isLoading,
|
299
|
+
onOpenChange: () => {
|
300
|
+
handleSearch(textValue ?? "");
|
301
|
+
},
|
302
|
+
noOptionsMessage: () => formatMessage({
|
303
|
+
id: getTranslation("relation.notAvailable"),
|
304
|
+
defaultMessage: "No relations available"
|
305
|
+
}),
|
306
|
+
loadingMessage: formatMessage({
|
307
|
+
id: getTranslation("relation.isLoading"),
|
308
|
+
defaultMessage: "Relations are loading"
|
309
|
+
}),
|
310
|
+
onLoadMore: handleLoadMore,
|
311
|
+
textValue,
|
312
|
+
onChange: handleChange,
|
313
|
+
onTextValueChange: (text) => {
|
314
|
+
setTextValue(text);
|
315
|
+
},
|
316
|
+
onInputChange: (event) => {
|
317
|
+
handleSearch(event.currentTarget.value);
|
318
|
+
},
|
319
|
+
...props,
|
320
|
+
children: options.map((opt) => {
|
321
|
+
const textValue2 = getRelationLabel(opt, mainField);
|
322
|
+
return /* @__PURE__ */ jsx(ComboboxOption, { value: opt.id.toString(), textValue: textValue2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, justifyContent: "space-between", children: [
|
323
|
+
/* @__PURE__ */ jsx(Typography, { ellipsis: true, children: textValue2 }),
|
324
|
+
opt.status ? /* @__PURE__ */ jsx(DocumentStatus, { status: opt.status }) : null
|
325
|
+
] }) }, opt.id);
|
326
|
+
})
|
327
|
+
}
|
328
|
+
),
|
329
|
+
/* @__PURE__ */ jsx(Field.Error, {}),
|
330
|
+
/* @__PURE__ */ jsx(Field.Hint, {})
|
331
|
+
] });
|
324
332
|
};
|
325
333
|
const RELATION_ITEM_HEIGHT = 50;
|
326
334
|
const RELATION_GUTTER = 4;
|
@@ -465,7 +473,7 @@ const RelationsList = ({
|
|
465
473
|
};
|
466
474
|
const canReorder = !ONE_WAY_RELATIONS.includes(relationType);
|
467
475
|
const dynamicListHeight = data.length > RELATIONS_TO_DISPLAY ? Math.min(data.length, RELATIONS_TO_DISPLAY) * (RELATION_ITEM_HEIGHT + RELATION_GUTTER) + RELATION_ITEM_HEIGHT / 2 : Math.min(data.length, RELATIONS_TO_DISPLAY) * (RELATION_ITEM_HEIGHT + RELATION_GUTTER);
|
468
|
-
return /* @__PURE__ */ jsxs(ShadowBox, { overflowDirection: overflow, children: [
|
476
|
+
return /* @__PURE__ */ jsxs(ShadowBox, { $overflowDirection: overflow, children: [
|
469
477
|
/* @__PURE__ */ jsx(VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
|
470
478
|
id: getTranslation("dnd.instructions"),
|
471
479
|
defaultMessage: `Press spacebar to grab and re-order`
|
@@ -516,7 +524,7 @@ const ShadowBox = styled(Box)`
|
|
516
524
|
content: '';
|
517
525
|
background: linear-gradient(rgba(3, 3, 5, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
|
518
526
|
top: 0;
|
519
|
-
opacity: ${({ overflowDirection }) => overflowDirection === "top-bottom" || overflowDirection === "top" ? 1 : 0};
|
527
|
+
opacity: ${({ $overflowDirection }) => $overflowDirection === "top-bottom" || $overflowDirection === "top" ? 1 : 0};
|
520
528
|
transition: opacity 0.2s ease-in-out;
|
521
529
|
}
|
522
530
|
|
@@ -525,7 +533,7 @@ const ShadowBox = styled(Box)`
|
|
525
533
|
content: '';
|
526
534
|
background: linear-gradient(0deg, rgba(3, 3, 5, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
|
527
535
|
bottom: 0;
|
528
|
-
opacity: ${({ overflowDirection }) => overflowDirection === "top-bottom" || overflowDirection === "bottom" ? 1 : 0};
|
536
|
+
opacity: ${({ $overflowDirection }) => $overflowDirection === "top-bottom" || $overflowDirection === "bottom" ? 1 : 0};
|
529
537
|
transition: opacity 0.2s ease-in-out;
|
530
538
|
}
|
531
539
|
`;
|
@@ -570,7 +578,7 @@ const ListItem = ({ data, index, style }) => {
|
|
570
578
|
Box,
|
571
579
|
{
|
572
580
|
style,
|
573
|
-
|
581
|
+
tag: "li",
|
574
582
|
ref: dropRef,
|
575
583
|
"aria-describedby": ariaDescribedBy,
|
576
584
|
cursor: canDrag ? "all-scroll" : "default",
|
@@ -592,10 +600,11 @@ const ListItem = ({ data, index, style }) => {
|
|
592
600
|
canDrag ? /* @__PURE__ */ jsx(
|
593
601
|
IconButton,
|
594
602
|
{
|
595
|
-
|
603
|
+
tag: "div",
|
596
604
|
role: "button",
|
597
605
|
tabIndex: 0,
|
598
|
-
|
606
|
+
withTooltip: false,
|
607
|
+
label: formatMessage({
|
599
608
|
id: getTranslation("components.RelationInput.icon-button-aria-label"),
|
600
609
|
defaultMessage: "Drag"
|
601
610
|
}),
|
@@ -606,7 +615,7 @@ const ListItem = ({ data, index, style }) => {
|
|
606
615
|
}
|
607
616
|
) : null,
|
608
617
|
/* @__PURE__ */ jsxs(Flex, { width: "100%", minWidth: 0, justifyContent: "space-between", children: [
|
609
|
-
/* @__PURE__ */ jsx(Box, { minWidth: 0, paddingTop: 1, paddingBottom: 1, paddingRight: 4, children: /* @__PURE__ */ jsx(Tooltip, { description: label, children: href ? /* @__PURE__ */ jsx(LinkEllipsis, {
|
618
|
+
/* @__PURE__ */ jsx(Box, { minWidth: 0, paddingTop: 1, paddingBottom: 1, paddingRight: 4, children: /* @__PURE__ */ jsx(Tooltip, { description: label, children: href ? /* @__PURE__ */ jsx(LinkEllipsis, { tag: NavLink, to: href, children: label }) : /* @__PURE__ */ jsx(Typography, { textColor: disabled ? "neutral600" : "primary600", ellipsis: true, children: label }) }) }),
|
610
619
|
status ? /* @__PURE__ */ jsx(DocumentStatus, { status }) : null
|
611
620
|
] })
|
612
621
|
] }),
|
@@ -673,12 +682,13 @@ const RelationItemPlaceholder = () => /* @__PURE__ */ jsx(
|
|
673
682
|
height: `calc(100% - ${RELATION_GUTTER}px)`
|
674
683
|
}
|
675
684
|
);
|
685
|
+
const MemoizedRelationsField = React.memo(RelationsField);
|
676
686
|
export {
|
677
687
|
ComponentProvider as C,
|
678
688
|
DisconnectButton as D,
|
679
689
|
FlexWrapper as F,
|
680
690
|
LinkEllipsis as L,
|
681
|
-
|
691
|
+
MemoizedRelationsField as M,
|
682
692
|
useComponent as u
|
683
693
|
};
|
684
|
-
//# sourceMappingURL=Relations-
|
694
|
+
//# sourceMappingURL=Relations-DTowyge2.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Relations-DTowyge2.mjs","sources":["../../admin/src/pages/EditView/components/FormInputs/ComponentContext.tsx","../../admin/src/pages/EditView/components/FormInputs/Relations.tsx"],"sourcesContent":["import { createContext } from '@strapi/admin/strapi-admin';\n\ninterface ComponentContextValue {\n /**\n * The id of the component. It will be undefined if the component\n * has not been created in the database yet. This could be on a new\n * or existing entry.\n */\n id?: number;\n /**\n * The level of the component. This is used to determine the nesting\n * of the component. The default is set to -1 so that the base level is 0\n * for the top level component, and increases by 1 for each level of nesting.\n */\n level: number;\n /**\n * The uid of the component. This is used to determine the type of the\n * component. Within an attribute, it is normally the `component` value.\n * It will be undefined if the hook is not called within the confines\n * of a provider.\n */\n uid?: string;\n /**\n * The type of component parent. It will be undefined if the hook\n * is not called within the confines of a provider.\n */\n type?: 'dynamiczone' | 'repeatable' | 'component';\n}\n\n/**\n * We use this component to wrap any individual component field in the Edit View,\n * this could be a component field in a dynamic zone, a component within a repeatable space,\n * or even nested components.\n *\n * We primarily need this to provide the component id to the components so that they can\n * correctly fetch their relations.\n */\nconst [ComponentProvider, useComponent] = createContext<ComponentContextValue>('ComponentContext', {\n id: undefined,\n level: -1,\n uid: undefined,\n type: undefined,\n});\n\nexport { ComponentProvider, useComponent };\n","import * as React from 'react';\n\nimport {\n type InputProps,\n useField,\n useForm,\n useNotification,\n useFocusInputField,\n useQueryParams,\n} from '@strapi/admin/strapi-admin';\nimport {\n Box,\n Combobox,\n ComboboxOption,\n Flex,\n IconButton,\n TextButton,\n Tooltip,\n Typography,\n VisuallyHidden,\n useComposedRefs,\n Link,\n Field,\n FlexComponent,\n BoxComponent,\n} from '@strapi/design-system';\nimport { Cross, Drag, ArrowClockwise } from '@strapi/icons';\nimport { generateNKeysBetween } from 'fractional-indexing';\nimport pipe from 'lodash/fp/pipe';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\nimport { FixedSizeList, ListChildComponentProps } from 'react-window';\nimport { styled } from 'styled-components';\n\nimport { RelationDragPreviewProps } from '../../../../components/DragPreviews/RelationDragPreview';\nimport { COLLECTION_TYPES } from '../../../../constants/collections';\nimport { ItemTypes } from '../../../../constants/dragAndDrop';\nimport { useDoc } from '../../../../hooks/useDocument';\nimport { type EditFieldLayout } from '../../../../hooks/useDocumentLayout';\nimport {\n DROP_SENSITIVITY,\n UseDragAndDropOptions,\n useDragAndDrop,\n} from '../../../../hooks/useDragAndDrop';\nimport {\n useGetRelationsQuery,\n useLazySearchRelationsQuery,\n RelationResult,\n} from '../../../../services/relations';\nimport { buildValidParams } from '../../../../utils/api';\nimport { getRelationLabel } from '../../../../utils/relations';\nimport { getTranslation } from '../../../../utils/translations';\nimport { DocumentStatus } from '../DocumentStatus';\n\nimport { useComponent } from './ComponentContext';\n\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * RelationsField\n * -----------------------------------------------------------------------------------------------*/\nconst RELATIONS_TO_DISPLAY = 5;\nconst ONE_WAY_RELATIONS = ['oneWay', 'oneToOne', 'manyToOne', 'oneToManyMorph', 'oneToOneMorph'];\n\ntype RelationPosition =\n | (Pick<RelationResult, 'status' | 'locale'> & {\n before: string;\n end?: never;\n })\n | { end: boolean; before?: never; status?: never; locale?: never };\n\ninterface Relation extends Pick<RelationResult, 'documentId' | 'id' | 'locale' | 'status'> {\n href: string;\n label: string;\n position?: RelationPosition;\n __temp_key__: string;\n}\n\ninterface RelationsFieldProps\n extends Omit<Extract<EditFieldLayout, { type: 'relation' }>, 'size' | 'hint'>,\n Pick<InputProps, 'hint'> {}\n\ninterface RelationsFormValue {\n connect?: Relation[];\n disconnect?: Pick<Relation, 'id'>[];\n}\n\n/**\n * TODO: we get a rather ugly flash when we remove a single relation from the list leaving\n * no other relations when we press save. The initial relation re-renders, probably because\n * of the lag in the Form cleaning it's \"disconnect\" array, whilst our data has not been invalidated.\n *\n * Could we invalidate relation data on the document actions? Should we?\n */\n\n/**\n * @internal\n * @description The relations field holds a lot of domain logic for handling relations which is rather complicated\n * At present we do not expose this to plugin developers, however, they are able to overwrite it themselves should\n * they wish to do so.\n */\nconst RelationsField = React.forwardRef<HTMLDivElement, RelationsFieldProps>(\n ({ disabled, label, ...props }, ref) => {\n const [currentPage, setCurrentPage] = React.useState(1);\n const { document, model: documentModel } = useDoc();\n const documentId = document?.documentId;\n const { formatMessage } = useIntl();\n const [{ query }] = useQueryParams();\n const params = buildValidParams(query);\n\n const isMorph = props.attribute.relation.toLowerCase().includes('morph');\n const isDisabled = isMorph || disabled;\n\n const { id: componentId, uid } = useComponent('RelationsField', ({ uid, id }) => ({ id, uid }));\n\n /**\n * We'll always have a documentId in a created entry, so we look for a componentId first.\n * Same with `uid` and `documentModel`.\n */\n const id = componentId ? componentId.toString() : documentId;\n const model = uid ?? documentModel;\n\n /**\n * The `name` prop is a complete path to the field, e.g. `field1.field2.field3`.\n * Where the above example would a nested field within two components, however\n * we only require the field on the component not the complete path since we query\n * individual components. Therefore we split the string and take the last item.\n */\n const [targetField] = props.name.split('.').slice(-1);\n\n const { data, isLoading, isFetching } = useGetRelationsQuery(\n {\n model,\n targetField,\n // below we don't run the query if there is no id.\n id: id!,\n params: {\n ...params,\n pageSize: RELATIONS_TO_DISPLAY,\n page: currentPage,\n },\n },\n {\n refetchOnMountOrArgChange: true,\n skip: !id,\n selectFromResult: (result) => {\n return {\n ...result,\n data: {\n ...result.data,\n results: result.data?.results ? result.data.results : [],\n },\n };\n },\n }\n );\n\n const handleLoadMore = () => {\n setCurrentPage((prev) => prev + 1);\n };\n\n const field = useField(props.name);\n\n const isFetchingMoreRelations = isLoading || isFetching;\n\n const realServerRelationsCount =\n 'pagination' in data && data.pagination ? data.pagination.total : 0;\n /**\n * Items that are already connected, but reordered would be in\n * this list, so to get an accurate figure, we remove them.\n */\n const relationsConnected =\n (field.value?.connect ?? []).filter(\n (rel: Relation) => data.results.findIndex((relation) => relation.id === rel.id) === -1\n ).length ?? 0;\n const relationsDisconnected = field.value?.disconnect?.length ?? 0;\n\n const relationsCount = realServerRelationsCount + relationsConnected - relationsDisconnected;\n\n /**\n * This is it, the source of truth for reordering in conjunction with partial loading & updating\n * of relations. Relations on load are given __temp_key__ when fetched, because we don't want to\n * create brand new keys everytime the data updates, just keep adding them onto the newly loaded ones.\n */\n const relations = React.useMemo(() => {\n const ctx = {\n field: field.value,\n // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.\n href: `../${COLLECTION_TYPES}/${props.attribute.targetModel}`,\n mainField: props.mainField,\n };\n\n /**\n * Tidy up our data.\n */\n const transformations = pipe(\n removeConnected(ctx),\n removeDisconnected(ctx),\n addLabelAndHref(ctx)\n );\n\n const transformedRels = transformations([...data.results]);\n\n /**\n * THIS IS CRUCIAL. If you don't sort by the __temp_key__ which comes from fractional indexing\n * then the list will be in the wrong order.\n */\n return [...transformedRels, ...(field.value?.connect ?? [])].sort((a, b) => {\n if (a.__temp_key__ < b.__temp_key__) return -1;\n if (a.__temp_key__ > b.__temp_key__) return 1;\n return 0;\n });\n }, [\n data.results,\n field.value,\n // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.\n props.attribute.targetModel,\n props.mainField,\n ]);\n\n const handleConnect: RelationsInputProps['onChange'] = (relation) => {\n const [lastItemInList] = relations.slice(-1);\n\n const item = {\n id: relation.id,\n status: relation.status,\n /**\n * If there's a last item, that's the first key we use to generate out next one.\n */\n __temp_key__: generateNKeysBetween(lastItemInList?.__temp_key__ ?? null, null, 1)[0],\n // Fallback to `id` if there is no `mainField` value, which will overwrite the above `id` property with the exact same data.\n [props.mainField?.name ?? 'documentId']: relation[props.mainField?.name ?? 'documentId'],\n label: getRelationLabel(relation, props.mainField),\n // @ts-expect-error – targetModel does exist on the attribute, but it's not typed.\n href: `../${COLLECTION_TYPES}/${props.attribute.targetModel}/${relation.documentId}`,\n };\n\n if (ONE_WAY_RELATIONS.includes(props.attribute.relation)) {\n field.onChange(`${props.name}.connect`, [item]);\n } else {\n field.onChange(`${props.name}.connect`, [...(field.value?.connect ?? []), item]);\n }\n };\n\n return (\n <Flex\n ref={ref}\n direction=\"column\"\n gap={3}\n justifyContent=\"space-between\"\n alignItems=\"stretch\"\n wrap=\"wrap\"\n >\n <StyledFlex direction=\"column\" alignItems=\"start\" gap={2} width=\"100%\">\n <RelationsInput\n disabled={isDisabled}\n id={id}\n label={`${label} ${relationsCount > 0 ? `(${relationsCount})` : ''}`}\n model={model}\n onChange={handleConnect}\n {...props}\n />\n {'pagination' in data &&\n data.pagination &&\n data.pagination.pageCount > data.pagination.page ? (\n <TextButton\n disabled={isFetchingMoreRelations}\n onClick={handleLoadMore}\n loading={isFetchingMoreRelations}\n startIcon={<ArrowClockwise />}\n // prevent the label from line-wrapping\n shrink={0}\n >\n {formatMessage({\n id: getTranslation('relation.loadMore'),\n defaultMessage: 'Load More',\n })}\n </TextButton>\n ) : null}\n </StyledFlex>\n <RelationsList\n data={relations}\n serverData={data.results}\n disabled={isDisabled}\n name={props.name}\n isLoading={isFetchingMoreRelations}\n relationType={props.attribute.relation}\n />\n </Flex>\n );\n }\n);\n\n/**\n * TODO: this can be removed once we stop shipping Inputs with\n * labels wrapped round in DS@2.\n */\nconst StyledFlex = styled<FlexComponent>(Flex)`\n & > div {\n width: 100%;\n }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Relation Transformations\n * -----------------------------------------------------------------------------------------------*/\n\ninterface TransformationContext extends Pick<RelationsFieldProps, 'mainField'> {\n field?: RelationsFormValue;\n href: string;\n}\n\n/**\n * If it's in the connected array, it can get out of our data array,\n * we'll be putting it back in later and sorting it anyway.\n */\nconst removeConnected =\n ({ field }: TransformationContext) =>\n (relations: RelationResult[]) => {\n return relations.filter((relation) => {\n const connectedRelations = field?.connect ?? [];\n\n return connectedRelations.findIndex((rel) => rel.id === relation.id) === -1;\n });\n };\n\n/**\n * @description Removes relations that are in the `disconnect` array of the field\n */\nconst removeDisconnected =\n ({ field }: TransformationContext) =>\n (relations: RelationResult[]): RelationResult[] =>\n relations.filter((relation) => {\n const disconnectedRelations = field?.disconnect ?? [];\n\n return disconnectedRelations.findIndex((rel) => rel.id === relation.id) === -1;\n });\n\n/**\n * @description Adds a label and href to the relation object we use this to render\n * a better UI where we can link to the relation and display a human-readable label.\n */\nconst addLabelAndHref =\n ({ mainField, href }: TransformationContext) =>\n (relations: RelationResult[]): Relation[] =>\n relations.map((relation) => {\n return {\n ...relation,\n // Fallback to `id` if there is no `mainField` value, which will overwrite the above `documentId` property with the exact same data.\n [mainField?.name ?? 'documentId']: relation[mainField?.name ?? 'documentId'],\n label: getRelationLabel(relation, mainField),\n href: `${href}/${relation.documentId}`,\n };\n });\n\n/* -------------------------------------------------------------------------------------------------\n * RelationsInput\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RelationsInputProps extends Omit<RelationsFieldProps, 'type'> {\n id?: string;\n model: string;\n onChange: (\n relation: Pick<RelationResult, 'documentId' | 'id' | 'locale' | 'status'> & {\n [key: string]: any;\n }\n ) => void;\n}\n\n/**\n * @description Contains all the logic for the combobox that can search\n * for relations and then add them to the field's connect array.\n */\nconst RelationsInput = ({\n hint,\n id,\n model,\n label,\n labelAction,\n name,\n mainField,\n placeholder,\n required,\n unique: _unique,\n 'aria-label': _ariaLabel,\n onChange,\n ...props\n}: RelationsInputProps) => {\n const [textValue, setTextValue] = React.useState<string | undefined>('');\n const [searchParams, setSearchParams] = React.useState({\n _q: '',\n page: 1,\n });\n const { toggleNotification } = useNotification();\n const [{ query }] = useQueryParams();\n\n const { formatMessage } = useIntl();\n const fieldRef = useFocusInputField<HTMLInputElement>(name);\n const field = useField<RelationsFormValue>(name);\n\n const [searchForTrigger, { data, isLoading }] = useLazySearchRelationsQuery();\n\n /**\n * Because we're using a lazy query, we need to trigger the search\n * when the component mounts and when the search params change.\n * We also need to trigger the search when the field value changes\n * so that we can filter out the relations that are already connected.\n */\n React.useEffect(() => {\n /**\n * The `name` prop is a complete path to the field, e.g. `field1.field2.field3`.\n * Where the above example would a nested field within two components, however\n * we only require the field on the component not the complete path since we query\n * individual components. Therefore we split the string and take the last item.\n */\n const [targetField] = name.split('.').slice(-1);\n searchForTrigger({\n model,\n targetField,\n params: {\n ...buildValidParams(query),\n id: id ?? '',\n pageSize: 10,\n idsToInclude: field.value?.disconnect?.map((rel) => rel.id.toString()) ?? [],\n idsToOmit: field.value?.connect?.map((rel) => rel.id.toString()) ?? [],\n ...searchParams,\n },\n });\n }, [\n field.value?.connect,\n field.value?.disconnect,\n id,\n model,\n name,\n query,\n searchForTrigger,\n searchParams,\n ]);\n\n const handleSearch = async (search: string) => {\n setSearchParams((s) => ({ ...s, _q: search, page: 1 }));\n };\n\n const hasNextPage = data?.pagination ? data.pagination.page < data.pagination.pageCount : false;\n\n const options = data?.results ?? [];\n\n const handleChange = (relationId?: string) => {\n if (!relationId) {\n return;\n }\n\n const relation = options.find((opt) => opt.id.toString() === relationId);\n\n if (!relation) {\n // This is very unlikely to happen, but it ensures we don't have any data for.\n console.error(\n \"You've tried to add a relation with an id that does not exist in the options you can see, this is likely a bug with Strapi. Please open an issue.\"\n );\n\n toggleNotification({\n message: formatMessage({\n id: getTranslation('relation.error-adding-relation'),\n defaultMessage: 'An error occurred while trying to add the relation.',\n }),\n type: 'danger',\n });\n\n return;\n }\n\n /**\n * You need to give this relation a correct _temp_key_ but\n * this component doesn't know about those ones, you can't rely\n * on the connect array because that doesn't hold items that haven't\n * moved. So use a callback to fill in the gaps when connecting.\n *\n */\n onChange(relation);\n };\n\n const handleLoadMore = () => {\n if (!data || !data.pagination) {\n return;\n } else if (data.pagination.page < data.pagination.pageCount) {\n setSearchParams((s) => ({ ...s, page: s.page + 1 }));\n }\n };\n\n React.useLayoutEffect(() => {\n setTextValue('');\n }, [field.value]);\n\n return (\n <Field.Root error={field.error} hint={hint} name={name} required={required}>\n <Field.Label action={labelAction}>{label}</Field.Label>\n <Combobox\n ref={fieldRef}\n name={name}\n autocomplete=\"none\"\n placeholder={\n placeholder ||\n formatMessage({\n id: getTranslation('relation.add'),\n defaultMessage: 'Add relation',\n })\n }\n hasMoreItems={hasNextPage}\n loading={isLoading}\n onOpenChange={() => {\n handleSearch(textValue ?? '');\n }}\n noOptionsMessage={() =>\n formatMessage({\n id: getTranslation('relation.notAvailable'),\n defaultMessage: 'No relations available',\n })\n }\n loadingMessage={formatMessage({\n id: getTranslation('relation.isLoading'),\n defaultMessage: 'Relations are loading',\n })}\n onLoadMore={handleLoadMore}\n textValue={textValue}\n onChange={handleChange}\n onTextValueChange={(text) => {\n setTextValue(text);\n }}\n onInputChange={(event) => {\n handleSearch(event.currentTarget.value);\n }}\n {...props}\n >\n {options.map((opt) => {\n const textValue = getRelationLabel(opt, mainField);\n\n return (\n <ComboboxOption key={opt.id} value={opt.id.toString()} textValue={textValue}>\n <Flex gap={2} justifyContent=\"space-between\">\n <Typography ellipsis>{textValue}</Typography>\n {opt.status ? <DocumentStatus status={opt.status} /> : null}\n </Flex>\n </ComboboxOption>\n );\n })}\n </Combobox>\n <Field.Error />\n <Field.Hint />\n </Field.Root>\n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * RelationsList\n * -----------------------------------------------------------------------------------------------*/\nconst RELATION_ITEM_HEIGHT = 50;\nconst RELATION_GUTTER = 4;\n\ninterface RelationsListProps extends Pick<RelationsFieldProps, 'disabled' | 'name'> {\n data: Relation[];\n isLoading?: boolean;\n relationType: Schema.Attribute.RelationKind.Any;\n /**\n * The existing relations connected on the server. We need these to diff against.\n */\n serverData: RelationResult[];\n}\n\nconst RelationsList = ({\n data,\n serverData,\n disabled,\n name,\n isLoading,\n relationType,\n}: RelationsListProps) => {\n const ariaDescriptionId = React.useId();\n const { formatMessage } = useIntl();\n const listRef = React.useRef<FixedSizeList>(null);\n const outerListRef = React.useRef<HTMLUListElement>(null);\n const [overflow, setOverflow] = React.useState<'top' | 'bottom' | 'top-bottom'>();\n const [liveText, setLiveText] = React.useState('');\n const field = useField(name);\n const removeFieldRow = useForm('RelationsList', (state) => state.removeFieldRow);\n const addFieldRow = useForm('RelationsList', (state) => state.addFieldRow);\n\n React.useEffect(() => {\n if (data.length <= RELATIONS_TO_DISPLAY) {\n return setOverflow(undefined);\n }\n\n const handleNativeScroll = (e: Event) => {\n const el = e.target as HTMLUListElement;\n const parentScrollContainerHeight = (el.parentNode as HTMLDivElement).scrollHeight;\n const maxScrollBottom = el.scrollHeight - el.scrollTop;\n\n if (el.scrollTop === 0) {\n return setOverflow('bottom');\n }\n\n if (maxScrollBottom === parentScrollContainerHeight) {\n return setOverflow('top');\n }\n\n return setOverflow('top-bottom');\n };\n\n const outerListRefCurrent = outerListRef?.current;\n\n if (!isLoading && data.length > 0 && outerListRefCurrent) {\n outerListRef.current.addEventListener('scroll', handleNativeScroll);\n }\n\n return () => {\n if (outerListRefCurrent) {\n outerListRefCurrent.removeEventListener('scroll', handleNativeScroll);\n }\n };\n }, [isLoading, data.length]);\n\n const getItemPos = (index: number) => `${index + 1} of ${data.length}`;\n\n const handleMoveItem: UseDragAndDropOptions['onMoveItem'] = (newIndex, oldIndex) => {\n const item = data[oldIndex];\n\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.reorder'),\n defaultMessage: '{item}, moved. New position in list: {position}.',\n },\n {\n item: item.label ?? item.documentId,\n position: getItemPos(newIndex),\n }\n )\n );\n\n /**\n * Splicing mutates the array, so we need to create a new array\n */\n const newData = [...data];\n const currentRow = data[oldIndex];\n\n const startKey =\n oldIndex > newIndex ? newData[newIndex - 1]?.__temp_key__ : newData[newIndex]?.__temp_key__;\n const endKey =\n oldIndex > newIndex ? newData[newIndex]?.__temp_key__ : newData[newIndex + 1]?.__temp_key__;\n\n /**\n * We're moving the relation between two other relations, so\n * we need to generate a new key that keeps the order\n */\n const [newKey] = generateNKeysBetween(startKey, endKey, 1);\n\n newData.splice(oldIndex, 1);\n newData.splice(newIndex, 0, { ...currentRow, __temp_key__: newKey });\n\n /**\n * Now we diff against the server to understand what's different so we\n * can keep the connect array nice and tidy. It also needs reversing because\n * we reverse the relations from the server in the first place.\n */\n const connectedRelations = newData\n .reduce<Relation[]>((acc, relation, currentIndex, array) => {\n const relationOnServer = serverData.find(\n (oldRelation) => oldRelation.documentId === relation.documentId\n );\n\n const relationInFront = array[currentIndex + 1];\n\n if (!relationOnServer || relationOnServer.__temp_key__ !== relation.__temp_key__) {\n const position = relationInFront\n ? {\n before: relationInFront.documentId,\n locale: relationInFront.locale,\n status: relationInFront.status,\n }\n : { end: true };\n\n const relationWithPosition: Relation = { ...relation, position };\n\n return [...acc, relationWithPosition];\n }\n\n return acc;\n }, [])\n .toReversed();\n\n field.onChange(`${name}.connect`, connectedRelations);\n };\n\n const handleGrabItem: UseDragAndDropOptions['onGrabItem'] = (index) => {\n const item = data[index];\n\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.grab-item'),\n defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,\n },\n {\n item: item.label ?? item.documentId,\n position: getItemPos(index),\n }\n )\n );\n };\n\n const handleDropItem: UseDragAndDropOptions['onDropItem'] = (index) => {\n const { href: _href, label, ...item } = data[index];\n\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.drop-item'),\n defaultMessage: `{item}, dropped. Final position in list: {position}.`,\n },\n {\n item: label ?? item.documentId,\n position: getItemPos(index),\n }\n )\n );\n };\n\n const handleCancel: UseDragAndDropOptions['onCancel'] = (index) => {\n const item = data[index];\n\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.cancel-item'),\n defaultMessage: '{item}, dropped. Re-order cancelled.',\n },\n {\n item: item.label ?? item.documentId,\n }\n )\n );\n };\n\n const handleDisconnect: ListItemProps['data']['handleDisconnect'] = (relation) => {\n if (field.value && field.value.connect) {\n /**\n * A relation will exist in the `connect` array _if_ it has\n * been added without saving. In this case, we just remove it\n * from the connect array\n */\n const indexOfRelationInConnectArray = field.value.connect.findIndex(\n (rel: NonNullable<RelationsFormValue['connect']>[number]) => rel.id === relation.id\n );\n\n if (indexOfRelationInConnectArray >= 0) {\n removeFieldRow(`${name}.connect`, indexOfRelationInConnectArray);\n return;\n }\n }\n\n addFieldRow(`${name}.disconnect`, { id: relation.id });\n };\n\n /**\n * These relation types will only ever have one item\n * in their list, so you can't reorder a single item!\n */\n const canReorder = !ONE_WAY_RELATIONS.includes(relationType);\n\n const dynamicListHeight =\n data.length > RELATIONS_TO_DISPLAY\n ? Math.min(data.length, RELATIONS_TO_DISPLAY) * (RELATION_ITEM_HEIGHT + RELATION_GUTTER) +\n RELATION_ITEM_HEIGHT / 2\n : Math.min(data.length, RELATIONS_TO_DISPLAY) * (RELATION_ITEM_HEIGHT + RELATION_GUTTER);\n\n return (\n <ShadowBox $overflowDirection={overflow}>\n <VisuallyHidden id={ariaDescriptionId}>\n {formatMessage({\n id: getTranslation('dnd.instructions'),\n defaultMessage: `Press spacebar to grab and re-order`,\n })}\n </VisuallyHidden>\n <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n {/* @ts-expect-error – width is expected, but we've not needed to pass it before. */}\n <FixedSizeList\n height={dynamicListHeight}\n ref={listRef}\n outerRef={outerListRef}\n itemCount={data.length}\n itemSize={RELATION_ITEM_HEIGHT + RELATION_GUTTER}\n itemData={{\n ariaDescribedBy: ariaDescriptionId,\n canDrag: canReorder,\n disabled,\n handleCancel,\n handleDropItem,\n handleGrabItem,\n handleMoveItem,\n name,\n handleDisconnect,\n relations: data,\n }}\n itemKey={(index) => data[index].id}\n innerElementType=\"ol\"\n >\n {ListItem}\n </FixedSizeList>\n </ShadowBox>\n );\n};\n\nconst ShadowBox = styled<BoxComponent>(Box)<{\n $overflowDirection?: 'top-bottom' | 'top' | 'bottom';\n}>`\n position: relative;\n overflow: hidden;\n flex: 1;\n\n &:before,\n &:after {\n position: absolute;\n width: 100%;\n height: 4px;\n z-index: 1;\n }\n\n &:before {\n /* TODO: as for DS Table component we would need this to be handled by the DS theme */\n content: '';\n background: linear-gradient(rgba(3, 3, 5, 0.2) 0%, rgba(0, 0, 0, 0) 100%);\n top: 0;\n opacity: ${({ $overflowDirection }) =>\n $overflowDirection === 'top-bottom' || $overflowDirection === 'top' ? 1 : 0};\n transition: opacity 0.2s ease-in-out;\n }\n\n &:after {\n /* TODO: as for DS Table component we would need this to be handled by the DS theme */\n content: '';\n background: linear-gradient(0deg, rgba(3, 3, 5, 0.2) 0%, rgba(0, 0, 0, 0) 100%);\n bottom: 0;\n opacity: ${({ $overflowDirection }) =>\n $overflowDirection === 'top-bottom' || $overflowDirection === 'bottom' ? 1 : 0};\n transition: opacity 0.2s ease-in-out;\n }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * ListItem\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ListItemProps extends Pick<ListChildComponentProps, 'style' | 'index'> {\n data: {\n ariaDescribedBy: string;\n canDrag?: boolean;\n disabled?: boolean;\n handleCancel: UseDragAndDropOptions['onCancel'];\n handleDropItem: UseDragAndDropOptions['onDropItem'];\n handleGrabItem: UseDragAndDropOptions['onGrabItem'];\n handleMoveItem: UseDragAndDropOptions['onMoveItem'];\n handleDisconnect: (relation: Relation) => void;\n name: string;\n relations: Relation[];\n };\n}\n\nconst ListItem = ({ data, index, style }: ListItemProps) => {\n const {\n ariaDescribedBy,\n canDrag = false,\n disabled = false,\n handleCancel,\n handleDisconnect,\n handleDropItem,\n handleGrabItem,\n handleMoveItem,\n name,\n relations,\n } = data;\n const { formatMessage } = useIntl();\n\n const { href, documentId, label, status } = relations[index];\n\n const [{ handlerId, isDragging, handleKeyDown }, relationRef, dropRef, dragRef, dragPreviewRef] =\n useDragAndDrop<number, Omit<RelationDragPreviewProps, 'width'>, HTMLDivElement>(\n canDrag && !disabled,\n {\n type: `${ItemTypes.RELATION}_${name}`,\n index,\n item: {\n displayedValue: label,\n status,\n id: documentId,\n index,\n },\n onMoveItem: handleMoveItem,\n onDropItem: handleDropItem,\n onGrabItem: handleGrabItem,\n onCancel: handleCancel,\n dropSensitivity: DROP_SENSITIVITY.REGULAR,\n }\n );\n\n const composedRefs = useComposedRefs<HTMLDivElement>(relationRef, dragRef);\n\n React.useEffect(() => {\n dragPreviewRef(getEmptyImage());\n }, [dragPreviewRef]);\n\n return (\n <Box\n style={style}\n tag=\"li\"\n ref={dropRef}\n aria-describedby={ariaDescribedBy}\n cursor={canDrag ? 'all-scroll' : 'default'}\n >\n {isDragging ? (\n <RelationItemPlaceholder />\n ) : (\n <Flex\n paddingTop={2}\n paddingBottom={2}\n paddingLeft={canDrag ? 2 : 4}\n paddingRight={4}\n hasRadius\n borderColor=\"neutral200\"\n background={disabled ? 'neutral150' : 'neutral0'}\n justifyContent=\"space-between\"\n ref={composedRefs}\n data-handler-id={handlerId}\n >\n <FlexWrapper gap={1}>\n {canDrag ? (\n <IconButton\n tag=\"div\"\n role=\"button\"\n tabIndex={0}\n withTooltip={false}\n label={formatMessage({\n id: getTranslation('components.RelationInput.icon-button-aria-label'),\n defaultMessage: 'Drag',\n })}\n borderWidth={0}\n onKeyDown={handleKeyDown}\n disabled={disabled}\n >\n <Drag />\n </IconButton>\n ) : null}\n <Flex width=\"100%\" minWidth={0} justifyContent=\"space-between\">\n <Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>\n <Tooltip description={label}>\n {href ? (\n <LinkEllipsis tag={NavLink} to={href}>\n {label}\n </LinkEllipsis>\n ) : (\n <Typography textColor={disabled ? 'neutral600' : 'primary600'} ellipsis>\n {label}\n </Typography>\n )}\n </Tooltip>\n </Box>\n {status ? <DocumentStatus status={status} /> : null}\n </Flex>\n </FlexWrapper>\n <Box paddingLeft={4}>\n <DisconnectButton\n disabled={disabled}\n type=\"button\"\n onClick={() => handleDisconnect(relations[index])}\n aria-label={formatMessage({\n id: getTranslation('relation.disconnect'),\n defaultMessage: 'Remove',\n })}\n >\n <Cross width=\"12px\" />\n </DisconnectButton>\n </Box>\n </Flex>\n )}\n </Box>\n );\n};\n\nconst FlexWrapper = styled<FlexComponent>(Flex)`\n width: 100%;\n /* Used to prevent endAction to be pushed out of container */\n min-width: 0;\n\n & > div[role='button'] {\n cursor: all-scroll;\n }\n`;\n\nconst DisconnectButton = styled.button`\n svg path {\n fill: ${({ theme, disabled }) =>\n disabled ? theme.colors.neutral600 : theme.colors.neutral500};\n }\n\n &:hover svg path,\n &:focus svg path {\n fill: ${({ theme, disabled }) => !disabled && theme.colors.neutral600};\n }\n`;\n\nconst LinkEllipsis = styled(Link)`\n display: block;\n\n & > span {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n }\n`;\n\nconst RelationItemPlaceholder = () => (\n <Box\n paddingTop={2}\n paddingBottom={2}\n paddingLeft={4}\n paddingRight={4}\n hasRadius\n borderStyle=\"dashed\"\n borderColor=\"primary600\"\n borderWidth=\"1px\"\n background=\"primary100\"\n height={`calc(100% - ${RELATION_GUTTER}px)`}\n />\n);\n\nconst MemoizedRelationsField = React.memo(RelationsField);\n\nexport { MemoizedRelationsField as RelationsInput, FlexWrapper, DisconnectButton, LinkEllipsis };\nexport type { RelationsFieldProps };\n"],"names":["uid","id","textValue"],"mappings":"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"}
|
@@ -10,10 +10,10 @@ const reactDndHtml5Backend = require("react-dnd-html5-backend");
|
|
10
10
|
const reactIntl = require("react-intl");
|
11
11
|
const reactRouterDom = require("react-router-dom");
|
12
12
|
const reactWindow = require("react-window");
|
13
|
-
const
|
14
|
-
const index = require("./index-
|
13
|
+
const styledComponents = require("styled-components");
|
14
|
+
const index = require("./index-CCJeB7Rw.js");
|
15
15
|
const useDragAndDrop = require("./useDragAndDrop-J0TUUbR6.js");
|
16
|
-
const relations = require("./relations-
|
16
|
+
const relations = require("./relations-CeJAJc5I.js");
|
17
17
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
18
18
|
function _interopNamespace(e) {
|
19
19
|
if (e && e.__esModule)
|
@@ -35,7 +35,6 @@ function _interopNamespace(e) {
|
|
35
35
|
}
|
36
36
|
const React__namespace = /* @__PURE__ */ _interopNamespace(React);
|
37
37
|
const pipe__default = /* @__PURE__ */ _interopDefault(pipe);
|
38
|
-
const styled__default = /* @__PURE__ */ _interopDefault(styled);
|
39
38
|
const [ComponentProvider, useComponent] = strapiAdmin.createContext("ComponentContext", {
|
40
39
|
id: void 0,
|
41
40
|
level: -1,
|
@@ -196,7 +195,7 @@ const RelationsField = React__namespace.forwardRef(
|
|
196
195
|
);
|
197
196
|
}
|
198
197
|
);
|
199
|
-
const StyledFlex =
|
198
|
+
const StyledFlex = styledComponents.styled(designSystem.Flex)`
|
200
199
|
& > div {
|
201
200
|
width: 100%;
|
202
201
|
}
|
@@ -221,11 +220,15 @@ const addLabelAndHref = ({ mainField, href }) => (relations$1) => relations$1.ma
|
|
221
220
|
};
|
222
221
|
});
|
223
222
|
const RelationsInput = ({
|
223
|
+
hint,
|
224
224
|
id,
|
225
225
|
model,
|
226
|
+
label,
|
227
|
+
labelAction,
|
226
228
|
name,
|
227
229
|
mainField,
|
228
230
|
placeholder,
|
231
|
+
required,
|
229
232
|
unique: _unique,
|
230
233
|
"aria-label": _ariaLabel,
|
231
234
|
onChange,
|
@@ -301,49 +304,53 @@ const RelationsInput = ({
|
|
301
304
|
React__namespace.useLayoutEffect(() => {
|
302
305
|
setTextValue("");
|
303
306
|
}, [field.value]);
|
304
|
-
return /* @__PURE__ */ jsxRuntime.
|
305
|
-
designSystem.
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
307
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, hint, name, required, children: [
|
308
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
|
309
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
310
|
+
designSystem.Combobox,
|
311
|
+
{
|
312
|
+
ref: fieldRef,
|
313
|
+
name,
|
314
|
+
autocomplete: "none",
|
315
|
+
placeholder: placeholder || formatMessage({
|
316
|
+
id: index.getTranslation("relation.add"),
|
317
|
+
defaultMessage: "Add relation"
|
318
|
+
}),
|
319
|
+
hasMoreItems: hasNextPage,
|
320
|
+
loading: isLoading,
|
321
|
+
onOpenChange: () => {
|
322
|
+
handleSearch(textValue ?? "");
|
323
|
+
},
|
324
|
+
noOptionsMessage: () => formatMessage({
|
325
|
+
id: index.getTranslation("relation.notAvailable"),
|
326
|
+
defaultMessage: "No relations available"
|
327
|
+
}),
|
328
|
+
loadingMessage: formatMessage({
|
329
|
+
id: index.getTranslation("relation.isLoading"),
|
330
|
+
defaultMessage: "Relations are loading"
|
331
|
+
}),
|
332
|
+
onLoadMore: handleLoadMore,
|
333
|
+
textValue,
|
334
|
+
onChange: handleChange,
|
335
|
+
onTextValueChange: (text) => {
|
336
|
+
setTextValue(text);
|
337
|
+
},
|
338
|
+
onInputChange: (event) => {
|
339
|
+
handleSearch(event.currentTarget.value);
|
340
|
+
},
|
341
|
+
...props,
|
342
|
+
children: options.map((opt) => {
|
343
|
+
const textValue2 = relations.getRelationLabel(opt, mainField);
|
344
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: opt.id.toString(), textValue: textValue2, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, justifyContent: "space-between", children: [
|
345
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { ellipsis: true, children: textValue2 }),
|
346
|
+
opt.status ? /* @__PURE__ */ jsxRuntime.jsx(index.DocumentStatus, { status: opt.status }) : null
|
347
|
+
] }) }, opt.id);
|
348
|
+
})
|
349
|
+
}
|
350
|
+
),
|
351
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {}),
|
352
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
|
353
|
+
] });
|
347
354
|
};
|
348
355
|
const RELATION_ITEM_HEIGHT = 50;
|
349
356
|
const RELATION_GUTTER = 4;
|
@@ -488,7 +495,7 @@ const RelationsList = ({
|
|
488
495
|
};
|
489
496
|
const canReorder = !ONE_WAY_RELATIONS.includes(relationType);
|
490
497
|
const dynamicListHeight = data.length > RELATIONS_TO_DISPLAY ? Math.min(data.length, RELATIONS_TO_DISPLAY) * (RELATION_ITEM_HEIGHT + RELATION_GUTTER) + RELATION_ITEM_HEIGHT / 2 : Math.min(data.length, RELATIONS_TO_DISPLAY) * (RELATION_ITEM_HEIGHT + RELATION_GUTTER);
|
491
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(ShadowBox, { overflowDirection: overflow, children: [
|
498
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(ShadowBox, { $overflowDirection: overflow, children: [
|
492
499
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
|
493
500
|
id: index.getTranslation("dnd.instructions"),
|
494
501
|
defaultMessage: `Press spacebar to grab and re-order`
|
@@ -521,7 +528,7 @@ const RelationsList = ({
|
|
521
528
|
)
|
522
529
|
] });
|
523
530
|
};
|
524
|
-
const ShadowBox =
|
531
|
+
const ShadowBox = styledComponents.styled(designSystem.Box)`
|
525
532
|
position: relative;
|
526
533
|
overflow: hidden;
|
527
534
|
flex: 1;
|
@@ -539,7 +546,7 @@ const ShadowBox = styled__default.default(designSystem.Box)`
|
|
539
546
|
content: '';
|
540
547
|
background: linear-gradient(rgba(3, 3, 5, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
|
541
548
|
top: 0;
|
542
|
-
opacity: ${({ overflowDirection }) => overflowDirection === "top-bottom" || overflowDirection === "top" ? 1 : 0};
|
549
|
+
opacity: ${({ $overflowDirection }) => $overflowDirection === "top-bottom" || $overflowDirection === "top" ? 1 : 0};
|
543
550
|
transition: opacity 0.2s ease-in-out;
|
544
551
|
}
|
545
552
|
|
@@ -548,7 +555,7 @@ const ShadowBox = styled__default.default(designSystem.Box)`
|
|
548
555
|
content: '';
|
549
556
|
background: linear-gradient(0deg, rgba(3, 3, 5, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
|
550
557
|
bottom: 0;
|
551
|
-
opacity: ${({ overflowDirection }) => overflowDirection === "top-bottom" || overflowDirection === "bottom" ? 1 : 0};
|
558
|
+
opacity: ${({ $overflowDirection }) => $overflowDirection === "top-bottom" || $overflowDirection === "bottom" ? 1 : 0};
|
552
559
|
transition: opacity 0.2s ease-in-out;
|
553
560
|
}
|
554
561
|
`;
|
@@ -593,7 +600,7 @@ const ListItem = ({ data, index: index$1, style }) => {
|
|
593
600
|
designSystem.Box,
|
594
601
|
{
|
595
602
|
style,
|
596
|
-
|
603
|
+
tag: "li",
|
597
604
|
ref: dropRef,
|
598
605
|
"aria-describedby": ariaDescribedBy,
|
599
606
|
cursor: canDrag ? "all-scroll" : "default",
|
@@ -615,10 +622,11 @@ const ListItem = ({ data, index: index$1, style }) => {
|
|
615
622
|
canDrag ? /* @__PURE__ */ jsxRuntime.jsx(
|
616
623
|
designSystem.IconButton,
|
617
624
|
{
|
618
|
-
|
625
|
+
tag: "div",
|
619
626
|
role: "button",
|
620
627
|
tabIndex: 0,
|
621
|
-
|
628
|
+
withTooltip: false,
|
629
|
+
label: formatMessage({
|
622
630
|
id: index.getTranslation("components.RelationInput.icon-button-aria-label"),
|
623
631
|
defaultMessage: "Drag"
|
624
632
|
}),
|
@@ -629,7 +637,7 @@ const ListItem = ({ data, index: index$1, style }) => {
|
|
629
637
|
}
|
630
638
|
) : null,
|
631
639
|
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { width: "100%", minWidth: 0, justifyContent: "space-between", children: [
|
632
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { minWidth: 0, paddingTop: 1, paddingBottom: 1, paddingRight: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { description: label, children: href ? /* @__PURE__ */ jsxRuntime.jsx(LinkEllipsis, {
|
640
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { minWidth: 0, paddingTop: 1, paddingBottom: 1, paddingRight: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { description: label, children: href ? /* @__PURE__ */ jsxRuntime.jsx(LinkEllipsis, { tag: reactRouterDom.NavLink, to: href, children: label }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: disabled ? "neutral600" : "primary600", ellipsis: true, children: label }) }) }),
|
633
641
|
status ? /* @__PURE__ */ jsxRuntime.jsx(index.DocumentStatus, { status }) : null
|
634
642
|
] })
|
635
643
|
] }),
|
@@ -652,7 +660,7 @@ const ListItem = ({ data, index: index$1, style }) => {
|
|
652
660
|
}
|
653
661
|
);
|
654
662
|
};
|
655
|
-
const FlexWrapper =
|
663
|
+
const FlexWrapper = styledComponents.styled(designSystem.Flex)`
|
656
664
|
width: 100%;
|
657
665
|
/* Used to prevent endAction to be pushed out of container */
|
658
666
|
min-width: 0;
|
@@ -661,7 +669,7 @@ const FlexWrapper = styled__default.default(designSystem.Flex)`
|
|
661
669
|
cursor: all-scroll;
|
662
670
|
}
|
663
671
|
`;
|
664
|
-
const DisconnectButton =
|
672
|
+
const DisconnectButton = styledComponents.styled.button`
|
665
673
|
svg path {
|
666
674
|
fill: ${({ theme, disabled }) => disabled ? theme.colors.neutral600 : theme.colors.neutral500};
|
667
675
|
}
|
@@ -671,7 +679,7 @@ const DisconnectButton = styled__default.default.button`
|
|
671
679
|
fill: ${({ theme, disabled }) => !disabled && theme.colors.neutral600};
|
672
680
|
}
|
673
681
|
`;
|
674
|
-
const LinkEllipsis =
|
682
|
+
const LinkEllipsis = styledComponents.styled(designSystem.Link)`
|
675
683
|
display: block;
|
676
684
|
|
677
685
|
& > span {
|
@@ -696,10 +704,11 @@ const RelationItemPlaceholder = () => /* @__PURE__ */ jsxRuntime.jsx(
|
|
696
704
|
height: `calc(100% - ${RELATION_GUTTER}px)`
|
697
705
|
}
|
698
706
|
);
|
707
|
+
const MemoizedRelationsField = React__namespace.memo(RelationsField);
|
699
708
|
exports.ComponentProvider = ComponentProvider;
|
700
709
|
exports.DisconnectButton = DisconnectButton;
|
701
710
|
exports.FlexWrapper = FlexWrapper;
|
702
711
|
exports.LinkEllipsis = LinkEllipsis;
|
703
|
-
exports.
|
712
|
+
exports.MemoizedRelationsField = MemoizedRelationsField;
|
704
713
|
exports.useComponent = useComponent;
|
705
|
-
//# sourceMappingURL=Relations-
|
714
|
+
//# sourceMappingURL=Relations-DU6B7irU.js.map
|