npm - @strapi/content-manager - Versions diffs - 5.16.0 → 5.17.0-beta.0 - Mend

@strapi/content-manager 5.16.0 → 5.17.0-beta.0

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.

Files changed (43) hide show

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useForm, useField } from '@strapi/admin/strapi-admin';
-import { Box, useComposedRefs, IconButton, Menu, MenuItem, Flex, Accordion, Grid } from '@strapi/design-system';
+import { useForm, createRulesEngine, useField } from '@strapi/admin/strapi-admin';
+import { Box, useComposedRefs, IconButton, Menu, Flex, Accordion, Grid } from '@strapi/design-system';
 import { Trash, Drag, More } from '@strapi/icons';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
@@ -20,6 +20,7 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
     const { formatMessage } = useIntl();
     const formValues = useForm('DynamicComponent', (state)=>state.values);
     const { currentDocument, currentDocumentMeta } = useDocumentContext('DynamicComponent');
+    const rulesEngine = createRulesEngine();
     const { edit: { components } } = useDocumentLayout(currentDocumentMeta.model);
     const title = React.useMemo(()=>{
         const { mainField } = components[componentUid]?.settings ?? {
@@ -148,7 +149,7 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                                     /*#__PURE__*/ jsx(Menu.Label, {
                                                         children: category
                                                     }),
-                                                    components.map(({ displayName, uid })=>/*#__PURE__*/ jsx(MenuItem, {
+                                                    components.map(({ displayName, uid })=>/*#__PURE__*/ jsx(Menu.Item, {
                                                             onSelect: ()=>onAddComponent(uid, index),
                                                             children: displayName
                                                         }, componentUid))
@@ -171,7 +172,7 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                                     /*#__PURE__*/ jsx(Menu.Label, {
                                                         children: category
                                                     }),
-                                                    components.map(({ displayName, uid })=>/*#__PURE__*/ jsx(MenuItem, {
+                                                    components.map(({ displayName, uid })=>/*#__PURE__*/ jsx(Menu.Item, {
                                                             onSelect: ()=>onAddComponent(uid, index + 1),
                                                             children: displayName
                                                         }, componentUid))
@@ -227,7 +228,18 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                         paddingBottom: 6,
                                         children: /*#__PURE__*/ jsx(Grid.Root, {
                                             gap: 4,
-                                            children: components[componentUid]?.layout?.map((row, rowInd)=>/*#__PURE__*/ jsx(Grid.Item, {
+                                            children: components[componentUid]?.layout?.map((row, rowInd)=>{
+                                                const visibleFields = row.filter(({ ...field })=>{
+                                                    const condition = field.attribute.conditions?.visible;
+                                                    if (condition) {
+                                                        return rulesEngine.evaluate(condition, value);
+                                                    }
+                                                    return true;
+                                                });
+                                                if (visibleFields.length === 0) {
+                                                    return null; // Skip rendering the entire grid row
+                                                }
+                                                return /*#__PURE__*/ jsx(Grid.Item, {
                                                     col: 12,
                                                     s: 12,
                                                     xs: 12,
@@ -235,7 +247,7 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                                     alignItems: "stretch",
                                                     children: /*#__PURE__*/ jsx(ResponsiveGridRoot, {
                                                         gap: 4,
-                                                        children: row.map(({ size, ...field })=>{
+                                                        children: visibleFields.map(({ size, ...field })=>{
                                                             const fieldName = `${name}.${index}.${field.name}`;
                                                             const fieldWithTranslatedLabel = {
                                                                 ...field,
@@ -262,7 +274,8 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                                             }, fieldName);
                                                         })
                                                     })
-                                                }, rowInd))
+                                                }, rowInd);
+                                            })
                                         })
                                     })
                                 })

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicComponent.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useField } from '@strapi/admin/strapi-admin';\nimport {\n Accordion,\n Box,\n Flex,\n Grid,\n IconButton,\n useComposedRefs,\n Menu,\n MenuItem,\n BoxComponent,\n} from '@strapi/design-system';\nimport { Drag, More, Trash } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { COMPONENT_ICONS } from '../../../../../components/ComponentIcon';\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { useDocumentLayout } from '../../../../../hooks/useDocumentLayout';\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../../../../hooks/useDragAndDrop';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { InputRenderer, type InputRendererProps } from '../../InputRenderer';\n\nimport type { ComponentPickerProps } from './ComponentPicker';\n\ninterface DynamicComponentProps\n extends Pick<UseDragAndDropOptions, 'onGrabItem' \| 'onDropItem' \| 'onCancel'>,\n Pick<ComponentPickerProps, 'dynamicComponentsByCategory'> {\n componentUid: string;\n disabled?: boolean;\n index: number;\n name: string;\n onAddComponent: (componentUid: string, index: number) => void;\n onRemoveComponentClick: () => void;\n onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n componentUid,\n disabled,\n index,\n name,\n onRemoveComponentClick,\n onMoveComponent,\n onGrabItem,\n onDropItem,\n onCancel,\n dynamicComponentsByCategory = {},\n onAddComponent,\n children,\n}: DynamicComponentProps) => {\n const { formatMessage } = useIntl();\n const formValues = useForm('DynamicComponent', (state) => state.values);\n const { currentDocument, currentDocumentMeta } = useDocumentContext('DynamicComponent');\n\n const {\n edit: { components },\n } = useDocumentLayout(currentDocumentMeta.model);\n\n const title = React.useMemo(() => {\n const { mainField } = components[componentUid]?.settings ?? { mainField: 'id' };\n\n const mainFieldValue = getIn(formValues, `${name}.${index}.${mainField}`);\n\n const displayedValue =\n mainField === 'id' \|\| !mainFieldValue ? '' : String(mainFieldValue).trim();\n\n const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n return mainValue;\n }, [componentUid, components, formValues, name, index]);\n\n const { icon, displayName } = React.useMemo(() => {\n const [category] = componentUid.split('.');\n const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n (component) => component.uid === componentUid\n ) ?? { icon: null, displayName: null };\n\n return { icon, displayName };\n }, [componentUid, dynamicComponentsByCategory]);\n\n const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n useDragAndDrop(!disabled, {\n type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n index,\n item: {\n index,\n displayedValue: `${displayName} ${title}`,\n icon,\n },\n onMoveItem: onMoveComponent,\n onDropItem,\n onGrabItem,\n onCancel,\n });\n\n React.useEffect(() => {\n dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n }, [dragPreviewRef, index]);\n\n /*\n We don't need the accordion's to communicate with each other,\n * so a unique value for their state is enough.\n */\n const accordionValue = React.useId();\n\n const { value = [], rawError } = useField(`${name}.${index}`);\n\n const [collapseToOpen, setCollapseToOpen] = React.useState<string>('');\n\n React.useEffect(() => {\n if (rawError && value) {\n setCollapseToOpen(accordionValue);\n }\n }, [rawError, value, accordionValue]);\n\n const composedBoxRefs = useComposedRefs(boxRef, dropRef);\n\n const accordionActions = disabled ? null : (\n <>\n <IconButton\n variant=\"ghost\"\n label={formatMessage(\n {\n id: getTranslation('components.DynamicZone.delete-label'),\n defaultMessage: 'Delete {name}',\n },\n { name: title }\n )}\n onClick={onRemoveComponentClick}\n >\n <Trash />\n </IconButton>\n <IconButton\n variant=\"ghost\"\n onClick={(e) => e.stopPropagation()}\n data-handler-id={handlerId}\n ref={dragRef}\n label={formatMessage({\n id: getTranslation('components.DragHandle-label'),\n defaultMessage: 'Drag',\n })}\n onKeyDown={handleKeyDown}\n >\n <Drag />\n </IconButton>\n <Menu.Root>\n <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n <IconButton\n variant=\"ghost\"\n label={formatMessage({\n id: getTranslation('components.DynamicZone.more-actions'),\n defaultMessage: 'More actions',\n })}\n tag=\"span\"\n >\n <More aria-hidden focusable={false} />\n </IconButton>\n </Menu.Trigger>\n <Menu.Content>\n <Menu.SubRoot>\n <Menu.SubTrigger>\n {formatMessage({\n id: getTranslation('components.DynamicZone.add-item-above'),\n defaultMessage: 'Add component above',\n })}\n </Menu.SubTrigger>\n <Menu.SubContent>\n {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n <React.Fragment key={category}>\n <Menu.Label>{category}</Menu.Label>\n {components.map(({ displayName, uid }) => (\n <MenuItem key={componentUid} onSelect={() => onAddComponent(uid, index)}>\n {displayName}\n </MenuItem>\n ))}\n </React.Fragment>\n ))}\n </Menu.SubContent>\n </Menu.SubRoot>\n <Menu.SubRoot>\n <Menu.SubTrigger>\n {formatMessage({\n id: getTranslation('components.DynamicZone.add-item-below'),\n defaultMessage: 'Add component below',\n })}\n </Menu.SubTrigger>\n <Menu.SubContent>\n {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n <React.Fragment key={category}>\n <Menu.Label>{category}</Menu.Label>\n {components.map(({ displayName, uid }) => (\n <MenuItem key={componentUid} onSelect={() => onAddComponent(uid, index + 1)}>\n {displayName}\n </MenuItem>\n ))}\n </React.Fragment>\n ))}\n </Menu.SubContent>\n </Menu.SubRoot>\n </Menu.Content>\n </Menu.Root>\n </>\n );\n\n const accordionTitle = title ? `${displayName} ${title}` : displayName;\n\n return (\n <ComponentContainer tag=\"li\" width=\"100%\">\n <Flex justifyContent=\"center\">\n <Rectangle background=\"neutral200\" />\n </Flex>\n <StyledBox ref={composedBoxRefs} hasRadius>\n {isDragging ? (\n <Preview />\n ) : (\n <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n <Accordion.Item value={accordionValue}>\n <Accordion.Header>\n <Accordion.Trigger\n icon={\n icon && COMPONENT_ICONS[icon]\n ? COMPONENT_ICONS[icon]\n : COMPONENT_ICONS.dashboard\n }\n >\n {accordionTitle}\n </Accordion.Trigger>\n <Accordion.Actions>{accordionActions}</Accordion.Actions>\n </Accordion.Header>\n <Accordion.Content>\n <AccordionContentRadius background=\"neutral0\">\n <Box paddingLeft={6} paddingRight={6} paddingTop={6} paddingBottom={6}>\n <Grid.Root gap={4}>\n {components[componentUid]?.layout?.map((row, rowInd) => (\n <Grid.Item\n col={12}\n key={rowInd}\n s={12}\n xs={12}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n <ResponsiveGridRoot gap={4}>\n {row.map(({ size, ...field }) => {\n const fieldName = `${name}.${index}.${field.name}`;\n\n const fieldWithTranslatedLabel = {\n ...field,\n label: formatMessage({\n id: `content-manager.components.${componentUid}.${field.name}`,\n defaultMessage: field.label,\n }),\n };\n\n return (\n <ResponsiveGridItem\n col={size}\n key={fieldName}\n s={12}\n xs={12}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n {children ? (\n children({\n ...fieldWithTranslatedLabel,\n document: currentDocument,\n name: fieldName,\n })\n ) : (\n <InputRenderer\n {...fieldWithTranslatedLabel}\n document={currentDocument}\n name={fieldName}\n />\n )}\n </ResponsiveGridItem>\n );\n })}\n </ResponsiveGridRoot>\n </Grid.Item>\n ))}\n </Grid.Root>\n </Box>\n </AccordionContentRadius>\n </Accordion.Content>\n </Accordion.Item>\n </Accordion.Root>\n )}\n </StyledBox>\n </ComponentContainer>\n );\n};\n\n// TODO: Delete once https://github.com/strapi/design-system/pull/858\n// is merged and released.\nconst StyledBox = styled<BoxComponent>(Box)`\n > div:first-child {\n box-shadow: ${({ theme }) => theme.shadows.tableShadow};\n }\n`;\n\nconst AccordionContentRadius = styled<BoxComponent>(Box)`\n border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};\n`;\n\nconst Rectangle = styled<BoxComponent>(Box)`\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[4]};\n`;\n\nconst Preview = styled.span`\n display: block;\n background-color: ${({ theme }) => theme.colors.primary100};\n outline: 1px dashed ${({ theme }) => theme.colors.primary500};\n outline-offset: -1px;\n padding: ${({ theme }) => theme.spaces[6]};\n`;\n\nconst ComponentContainer = styled<BoxComponent<'li'>>(Box)`\n list-style: none;\n padding: 0;\n margin: 0;\n`;\n\nexport { DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","children","formatMessage","useIntl","formValues","useForm","state","values","currentDocument","currentDocumentMeta","useDocumentContext","edit","components","useDocumentLayout","model","title","React","useMemo","mainField","settings","mainFieldValue","getIn","displayedValue","String","trim","mainValue","length","icon","displayName","category","split","find","component","uid","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","value","rawError","useField","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","id","getTranslation","defaultMessage","onClick","Trash","e","stopPropagation","data-handler-id","ref","onKeyDown","Drag","Menu","Root","Trigger","size","endIcon","paddingLeft","paddingRight","tag","More","aria-hidden","focusable","Content","SubRoot","SubTrigger","SubContent","Object","entries","map","Fragment","Label","MenuItem","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","onValueChange","Item","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","Box","paddingTop","paddingBottom","Grid","gap","layout","row","rowInd","col","s","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","document","InputRenderer","styled","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500"],"mappings":"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"}
1	+ {"version":3,"file":"DynamicComponent.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useField, createRulesEngine } from '@strapi/admin/strapi-admin';\nimport {\n Accordion,\n Box,\n Flex,\n Grid,\n IconButton,\n useComposedRefs,\n Menu,\n BoxComponent,\n} from '@strapi/design-system';\nimport { Drag, More, Trash } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { COMPONENT_ICONS } from '../../../../../components/ComponentIcon';\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { useDocumentLayout } from '../../../../../hooks/useDocumentLayout';\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../../../../hooks/useDragAndDrop';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { InputRenderer, type InputRendererProps } from '../../InputRenderer';\n\nimport type { ComponentPickerProps } from './ComponentPicker';\n\ninterface DynamicComponentProps\n extends Pick<UseDragAndDropOptions, 'onGrabItem' \| 'onDropItem' \| 'onCancel'>,\n Pick<ComponentPickerProps, 'dynamicComponentsByCategory'> {\n componentUid: string;\n disabled?: boolean;\n index: number;\n name: string;\n onAddComponent: (componentUid: string, index: number) => void;\n onRemoveComponentClick: () => void;\n onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n componentUid,\n disabled,\n index,\n name,\n onRemoveComponentClick,\n onMoveComponent,\n onGrabItem,\n onDropItem,\n onCancel,\n dynamicComponentsByCategory = {},\n onAddComponent,\n children,\n}: DynamicComponentProps) => {\n const { formatMessage } = useIntl();\n const formValues = useForm('DynamicComponent', (state) => state.values);\n const { currentDocument, currentDocumentMeta } = useDocumentContext('DynamicComponent');\n const rulesEngine = createRulesEngine();\n\n const {\n edit: { components },\n } = useDocumentLayout(currentDocumentMeta.model);\n\n const title = React.useMemo(() => {\n const { mainField } = components[componentUid]?.settings ?? { mainField: 'id' };\n\n const mainFieldValue = getIn(formValues, `${name}.${index}.${mainField}`);\n\n const displayedValue =\n mainField === 'id' \|\| !mainFieldValue ? '' : String(mainFieldValue).trim();\n\n const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n return mainValue;\n }, [componentUid, components, formValues, name, index]);\n\n const { icon, displayName } = React.useMemo(() => {\n const [category] = componentUid.split('.');\n const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n (component) => component.uid === componentUid\n ) ?? { icon: null, displayName: null };\n\n return { icon, displayName };\n }, [componentUid, dynamicComponentsByCategory]);\n\n const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n useDragAndDrop(!disabled, {\n type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n index,\n item: {\n index,\n displayedValue: `${displayName} ${title}`,\n icon,\n },\n onMoveItem: onMoveComponent,\n onDropItem,\n onGrabItem,\n onCancel,\n });\n\n React.useEffect(() => {\n dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n }, [dragPreviewRef, index]);\n\n /*\n We don't need the accordion's to communicate with each other,\n * so a unique value for their state is enough.\n */\n const accordionValue = React.useId();\n\n const { value = [], rawError } = useField(`${name}.${index}`);\n\n const [collapseToOpen, setCollapseToOpen] = React.useState<string>('');\n\n React.useEffect(() => {\n if (rawError && value) {\n setCollapseToOpen(accordionValue);\n }\n }, [rawError, value, accordionValue]);\n\n const composedBoxRefs = useComposedRefs(boxRef, dropRef);\n\n const accordionActions = disabled ? null : (\n <>\n <IconButton\n variant=\"ghost\"\n label={formatMessage(\n {\n id: getTranslation('components.DynamicZone.delete-label'),\n defaultMessage: 'Delete {name}',\n },\n { name: title }\n )}\n onClick={onRemoveComponentClick}\n >\n <Trash />\n </IconButton>\n <IconButton\n variant=\"ghost\"\n onClick={(e) => e.stopPropagation()}\n data-handler-id={handlerId}\n ref={dragRef}\n label={formatMessage({\n id: getTranslation('components.DragHandle-label'),\n defaultMessage: 'Drag',\n })}\n onKeyDown={handleKeyDown}\n >\n <Drag />\n </IconButton>\n <Menu.Root>\n <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n <IconButton\n variant=\"ghost\"\n label={formatMessage({\n id: getTranslation('components.DynamicZone.more-actions'),\n defaultMessage: 'More actions',\n })}\n tag=\"span\"\n >\n <More aria-hidden focusable={false} />\n </IconButton>\n </Menu.Trigger>\n <Menu.Content>\n <Menu.SubRoot>\n <Menu.SubTrigger>\n {formatMessage({\n id: getTranslation('components.DynamicZone.add-item-above'),\n defaultMessage: 'Add component above',\n })}\n </Menu.SubTrigger>\n <Menu.SubContent>\n {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n <React.Fragment key={category}>\n <Menu.Label>{category}</Menu.Label>\n {components.map(({ displayName, uid }) => (\n <Menu.Item key={componentUid} onSelect={() => onAddComponent(uid, index)}>\n {displayName}\n </Menu.Item>\n ))}\n </React.Fragment>\n ))}\n </Menu.SubContent>\n </Menu.SubRoot>\n <Menu.SubRoot>\n <Menu.SubTrigger>\n {formatMessage({\n id: getTranslation('components.DynamicZone.add-item-below'),\n defaultMessage: 'Add component below',\n })}\n </Menu.SubTrigger>\n <Menu.SubContent>\n {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n <React.Fragment key={category}>\n <Menu.Label>{category}</Menu.Label>\n {components.map(({ displayName, uid }) => (\n <Menu.Item key={componentUid} onSelect={() => onAddComponent(uid, index + 1)}>\n {displayName}\n </Menu.Item>\n ))}\n </React.Fragment>\n ))}\n </Menu.SubContent>\n </Menu.SubRoot>\n </Menu.Content>\n </Menu.Root>\n </>\n );\n\n const accordionTitle = title ? `${displayName} ${title}` : displayName;\n\n return (\n <ComponentContainer tag=\"li\" width=\"100%\">\n <Flex justifyContent=\"center\">\n <Rectangle background=\"neutral200\" />\n </Flex>\n <StyledBox ref={composedBoxRefs} hasRadius>\n {isDragging ? (\n <Preview />\n ) : (\n <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n <Accordion.Item value={accordionValue}>\n <Accordion.Header>\n <Accordion.Trigger\n icon={\n icon && COMPONENT_ICONS[icon]\n ? COMPONENT_ICONS[icon]\n : COMPONENT_ICONS.dashboard\n }\n >\n {accordionTitle}\n </Accordion.Trigger>\n <Accordion.Actions>{accordionActions}</Accordion.Actions>\n </Accordion.Header>\n <Accordion.Content>\n <AccordionContentRadius background=\"neutral0\">\n <Box paddingLeft={6} paddingRight={6} paddingTop={6} paddingBottom={6}>\n <Grid.Root gap={4}>\n {components[componentUid]?.layout?.map((row, rowInd) => {\n const visibleFields = row.filter(({ ...field }) => {\n const condition = field.attribute.conditions?.visible;\n\n if (condition) {\n return rulesEngine.evaluate(condition, value);\n }\n\n return true;\n });\n\n if (visibleFields.length === 0) {\n return null; // Skip rendering the entire grid row\n }\n return (\n <Grid.Item\n col={12}\n key={rowInd}\n s={12}\n xs={12}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n <ResponsiveGridRoot gap={4}>\n {visibleFields.map(({ size, ...field }) => {\n const fieldName = `${name}.${index}.${field.name}`;\n\n const fieldWithTranslatedLabel = {\n ...field,\n label: formatMessage({\n id: `content-manager.components.${componentUid}.${field.name}`,\n defaultMessage: field.label,\n }),\n };\n\n return (\n <ResponsiveGridItem\n col={size}\n key={fieldName}\n s={12}\n xs={12}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n {children ? (\n children({\n ...fieldWithTranslatedLabel,\n document: currentDocument,\n name: fieldName,\n })\n ) : (\n <InputRenderer\n {...fieldWithTranslatedLabel}\n document={currentDocument}\n name={fieldName}\n />\n )}\n </ResponsiveGridItem>\n );\n })}\n </ResponsiveGridRoot>\n </Grid.Item>\n );\n })}\n </Grid.Root>\n </Box>\n </AccordionContentRadius>\n </Accordion.Content>\n </Accordion.Item>\n </Accordion.Root>\n )}\n </StyledBox>\n </ComponentContainer>\n );\n};\n\n// TODO: Delete once https://github.com/strapi/design-system/pull/858\n// is merged and released.\nconst StyledBox = styled<BoxComponent>(Box)`\n > div:first-child {\n box-shadow: ${({ theme }) => theme.shadows.tableShadow};\n }\n`;\n\nconst AccordionContentRadius = styled<BoxComponent>(Box)`\n border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};\n`;\n\nconst Rectangle = styled<BoxComponent>(Box)`\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[4]};\n`;\n\nconst Preview = styled.span`\n display: block;\n background-color: ${({ theme }) => theme.colors.primary100};\n outline: 1px dashed ${({ theme }) => theme.colors.primary500};\n outline-offset: -1px;\n padding: ${({ theme }) => theme.spaces[6]};\n`;\n\nconst ComponentContainer = styled<BoxComponent<'li'>>(Box)`\n list-style: none;\n padding: 0;\n margin: 0;\n`;\n\nexport { DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","children","formatMessage","useIntl","formValues","useForm","state","values","currentDocument","currentDocumentMeta","useDocumentContext","rulesEngine","createRulesEngine","edit","components","useDocumentLayout","model","title","React","useMemo","mainField","settings","mainFieldValue","getIn","displayedValue","String","trim","mainValue","length","icon","displayName","category","split","find","component","uid","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","value","rawError","useField","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","id","getTranslation","defaultMessage","onClick","Trash","e","stopPropagation","data-handler-id","ref","onKeyDown","Drag","Menu","Root","Trigger","size","endIcon","paddingLeft","paddingRight","tag","More","aria-hidden","focusable","Content","SubRoot","SubTrigger","SubContent","Object","entries","map","Fragment","Label","Item","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","Box","paddingTop","paddingBottom","Grid","gap","layout","row","rowInd","visibleFields","filter","field","condition","attribute","conditions","visible","evaluate","col","s","xs","direction","alignItems","ResponsiveGridRoot","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","document","InputRenderer","styled","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/WysiwygNav.js CHANGED Viewed

@@ -114,75 +114,63 @@ var utils = require('./utils/utils.js');
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Separator, {}),
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Bold, {
+                            fill: "neutral500"
+                        }),
                         onSelect: ()=>handleActionClick('Bold', editorRef),
                         disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                             tag: "span",
                             gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Bold, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
-                                }),
-                                formatMessage({
-                                    id: 'components.Blocks.modifiers.bold',
-                                    defaultMessage: 'Bold'
-                                })
-                            ]
+                            children: formatMessage({
+                                id: 'components.Blocks.modifiers.bold',
+                                defaultMessage: 'Bold'
+                            })
                         })
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Italic, {
+                            fill: "neutral500"
+                        }),
                         onSelect: ()=>handleActionClick('Italic', editorRef),
                         disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                             tag: "span",
                             gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Italic, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
-                                }),
-                                formatMessage({
-                                    id: 'components.Blocks.modifiers.italic',
-                                    defaultMessage: 'Italic'
-                                })
-                            ]
+                            children: formatMessage({
+                                id: 'components.Blocks.modifiers.italic',
+                                defaultMessage: 'Italic'
+                            })
                         })
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Underline, {
+                            fill: "neutral500"
+                        }),
                         onSelect: ()=>handleActionClick('Underline', editorRef),
                         disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                             tag: "span",
                             gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Underline, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
-                                }),
-                                formatMessage({
-                                    id: 'components.Blocks.modifiers.underline',
-                                    defaultMessage: 'Underline'
-                                })
-                            ]
+                            children: formatMessage({
+                                id: 'components.Blocks.modifiers.underline',
+                                defaultMessage: 'Underline'
+                            })
                         })
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.StrikeThrough, {
+                            fill: "neutral500"
+                        }),
                         onSelect: ()=>handleActionClick('Strikethrough', editorRef),
                         disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                             tag: "span",
                             gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.StrikeThrough, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
-                                }),
-                                formatMessage({
-                                    id: 'components.Blocks.modifiers.strikethrough',
-                                    defaultMessage: 'Strikethrough'
-                                })
-                            ]
+                            children: formatMessage({
+                                id: 'components.Blocks.modifiers.strikethrough',
+                                defaultMessage: 'Strikethrough'
+                            })
                         })
                     })
                 ]
@@ -224,39 +212,33 @@ var utils = require('./utils/utils.js');
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Separator, {}),
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.BulletList, {
+                            fill: "neutral500"
+                        }),
                         onSelect: ()=>handleActionClick('BulletList', editorRef),
                         disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                             tag: "span",
                             gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.BulletList, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
-                                }),
-                                formatMessage({
-                                    id: 'components.Blocks.blocks.unorderedList',
-                                    defaultMessage: 'Bulleted list'
-                                })
-                            ]
+                            children: formatMessage({
+                                id: 'components.Blocks.blocks.unorderedList',
+                                defaultMessage: 'Bulleted list'
+                            })
                         })
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.NumberList, {
+                            fill: "neutral500"
+                        }),
                         onSelect: ()=>handleActionClick('NumberList', editorRef),
                         disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                             tag: "span",
                             gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.NumberList, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
-                                }),
-                                formatMessage({
-                                    id: 'components.Blocks.blocks.orderedList',
-                                    defaultMessage: 'Numbered list'
-                                })
-                            ]
+                            children: formatMessage({
+                                id: 'components.Blocks.blocks.orderedList',
+                                defaultMessage: 'Numbered list'
+                            })
                         })
                     })
                 ]
@@ -326,79 +308,65 @@ var utils = require('./utils/utils.js');
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Separator, {}),
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Code, {
+                            fill: "neutral500"
+                        }),
                         onSelect: ()=>handleActionClick('Code', editorRef),
                         disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                             tag: "span",
                             gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Code, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
-                                }),
-                                formatMessage({
-                                    id: 'components.Wysiwyg.blocks.code',
-                                    defaultMessage: 'Code'
-                                })
-                            ]
+                            children: formatMessage({
+                                id: 'components.Wysiwyg.blocks.code',
+                                defaultMessage: 'Code'
+                            })
                         })
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
-                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Image, {}),
+                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Image, {
+                            fill: "neutral500"
+                        }),
                         onSelect: ()=>{
                             onToggleMediaLib();
                         },
                         disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                             tag: "span",
                             gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Image, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
-                                }),
-                                formatMessage({
-                                    id: 'components.Blocks.blocks.image',
-                                    defaultMessage: 'Image'
-                                })
-                            ]
+                            children: formatMessage({
+                                id: 'components.Blocks.blocks.image',
+                                defaultMessage: 'Image'
+                            })
                         })
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
-                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {}),
+                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {
+                            fill: "neutral500"
+                        }),
                         onSelect: ()=>handleActionClick('Link', editorRef),
                         disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                             tag: "span",
                             gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
-                                }),
-                                formatMessage({
-                                    id: 'components.Blocks.popover.link',
-                                    defaultMessage: 'Link'
-                                })
-                            ]
+                            children: formatMessage({
+                                id: 'components.Blocks.popover.link',
+                                defaultMessage: 'Link'
+                            })
                         })
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Quotes, {
+                            fill: "neutral500"
+                        }),
                         onSelect: ()=>handleActionClick('Quote', editorRef),
                         disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                             tag: "span",
                             gap: 2,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Quotes, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
-                                }),
-                                formatMessage({
-                                    id: 'components.Blocks.blocks.quote',
-                                    defaultMessage: 'Quote'
-                                })
-                            ]
+                            children: formatMessage({
+                                id: 'components.Blocks.blocks.quote',
+                                defaultMessage: 'Quote'
+                            })
                         })
                     })
                 ]
@@ -432,7 +400,7 @@ var utils = require('./utils/utils.js');
                         /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
                             value: "h1",
                             startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingOne, {
-                                fill: "neutral600"
+                                fill: "neutral500"
                             }),
                             children: formatMessage({
                                 id: 'components.Wysiwyg.selectOptions.H1',
@@ -442,7 +410,7 @@ var utils = require('./utils/utils.js');
                         /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
                             value: "h2",
                             startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingTwo, {
-                                fill: "neutral600"
+                                fill: "neutral500"
                             }),
                             children: formatMessage({
                                 id: 'components.Wysiwyg.selectOptions.H2',
@@ -452,7 +420,7 @@ var utils = require('./utils/utils.js');
                         /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
                             value: "h3",
                             startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingThree, {
-                                fill: "neutral600"
+                                fill: "neutral500"
                             }),
                             children: formatMessage({
                                 id: 'components.Wysiwyg.selectOptions.H3',
@@ -462,7 +430,7 @@ var utils = require('./utils/utils.js');
                         /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
                             value: "h4",
                             startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingFour, {
-                                fill: "neutral600"
+                                fill: "neutral500"
                             }),
                             children: formatMessage({
                                 id: 'components.Wysiwyg.selectOptions.H4',
@@ -472,7 +440,7 @@ var utils = require('./utils/utils.js');
                         /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
                             value: "h5",
                             startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingFive, {
-                                fill: "neutral600"
+                                fill: "neutral500"
                             }),
                             children: formatMessage({
                                 id: 'components.Wysiwyg.selectOptions.H5',
@@ -482,7 +450,7 @@ var utils = require('./utils/utils.js');
                         /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
                             value: "h6",
                             startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingSix, {
-                                fill: "neutral600"
+                                fill: "neutral500"
                             }),
                             children: formatMessage({
                                 id: 'components.Wysiwyg.selectOptions.H6',