@contentful/field-editor-shared 2.4.2 → 2.5.0

package/dist/cjs/ReleaseEntityStatusBadge/Banner.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Banner", {
+    enumerable: true,
+    get: function() {
+        return Banner;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const styles = {
+    content: (0, _emotion.css)({
+        display: 'block'
+    }),
+    banner: (0, _emotion.css)({
+        background: _f36tokens.default.gray100,
+        padding: _f36tokens.default.spacingXs,
+        margin: `${_f36tokens.default.spacingXs} ${_f36tokens.default.spacingS}`,
+        borderRadius: _f36tokens.default.borderRadiusSmall
+    })
+};
+function Banner({ content, highlight }) {
+    return _react.default.createElement("div", {
+        className: styles.banner
+    }, _react.default.createElement(_f36components.Text, {
+        fontSize: "fontSizeS",
+        fontColor: "gray700",
+        className: styles.content
+    }, content), highlight && _react.default.createElement(_f36components.Text, {
+        fontSize: "fontSizeS",
+        fontColor: "gray700",
+        as: "strong",
+        fontWeight: "fontWeightDemiBold"
+    }, highlight));
+}

package/dist/cjs/ReleaseEntityStatusBadge/ReleaseEntityStatusBadge.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ReleaseEntityStatusBadge", {
+    enumerable: true,
+    get: function() {
+        return ReleaseEntityStatusBadge;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _f36components = require("@contentful/f36-components");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const config = {
+    publish: {
+        label: 'Will publish',
+        variant: 'positive'
+    },
+    unpublish: {
+        label: 'Becomes draft',
+        variant: 'warning'
+    },
+    'not-in-release': {
+        label: 'Not in release',
+        variant: 'secondary'
+    }
+};
+function ReleaseEntityStatusBadge({ className, action }) {
+    const badgeConfig = config[action];
+    return _react.default.createElement(_f36components.Badge, {
+        testId: "release-entity-action-status",
+        className: className,
+        variant: badgeConfig.variant
+    }, badgeConfig.label);
+}

package/dist/cjs/ReleaseEntityStatusBadge/ReleaseEntityStatusLocale.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ReleaseEntityStatusLocale", {
+    enumerable: true,
+    get: function() {
+        return ReleaseEntityStatusLocale;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const styles = {
+    locale: (0, _emotion.css)({
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap'
+    }),
+    status: (0, _emotion.css)({
+        flexShrink: 0
+    }),
+    localePublishStatus: (0, _emotion.css)({
+        display: 'flex',
+        gap: _f36tokens.default.spacingXs,
+        justifyContent: 'space-between',
+        padding: `${_f36tokens.default.spacingXs} ${_f36tokens.default.spacingS}`
+    })
+};
+function ReleaseEntityStatusLocale({ locale, label, variant }) {
+    return _react.default.createElement("div", {
+        className: styles.localePublishStatus,
+        "data-test-id": "locale-publishing-status"
+    }, _react.default.createElement(_f36components.Text, {
+        className: styles.locale,
+        fontColor: "gray700"
+    }, locale.name, ' ', _react.default.createElement(_f36components.Text, {
+        fontColor: "gray500"
+    }, "(", locale.code, ")", locale.default && ', Default')), _react.default.createElement(_f36components.Badge, {
+        className: styles.status,
+        variant: variant
+    }, label));
+}

package/dist/cjs/ReleaseEntityStatusBadge/ReleaseEntityStatusLocalesList.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ReleaseEntityStatusLocalesList", {
+    enumerable: true,
+    get: function() {
+        return ReleaseEntityStatusLocalesList;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _lodash = require("lodash");
+const _Banner = require("./Banner");
+const _ReleaseEntityStatusLocale = require("./ReleaseEntityStatusLocale");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function groupAndSortLocales(entries, activeLocales) {
+    const { selected, nonSelected } = entries.reduce((prev, [localeCode, localeStatusType])=>{
+        return activeLocales?.some((sl)=>sl.code === localeCode) ? {
+            ...prev,
+            selected: [
+                ...prev.selected,
+                localeStatusType
+            ]
+        } : {
+            ...prev,
+            nonSelected: [
+                ...prev.nonSelected,
+                localeStatusType
+            ]
+        };
+    }, {
+        selected: [],
+        nonSelected: []
+    });
+    return {
+        selected: (0, _lodash.sortBy)(selected, 'locale.name'),
+        nonSelected: nonSelected.sort((a, b)=>{
+            if (a.status === b.status) {
+                return a.locale.name.localeCompare(b.locale.name);
+            }
+            if (a.status === 'becomesDraft' || a.status === 'willPublish' && b.status === 'remainsDraft') {
+                return -1;
+            }
+            return 1;
+        })
+    };
+}
+function ReleaseEntityStatusLocalesList({ statusMap, activeLocales }) {
+    const entries = [
+        ...statusMap.entries()
+    ];
+    const counters = entries.reduce((prev, [, { status }])=>({
+            becomesDraft: prev.becomesDraft + (status === 'becomesDraft' ? 1 : 0),
+            willPublish: prev.willPublish + (status === 'willPublish' ? 1 : 0),
+            remainsDraft: prev.remainsDraft + (status === 'remainsDraft' ? 1 : 0)
+        }), {
+        willPublish: 0,
+        becomesDraft: 0,
+        remainsDraft: 0
+    });
+    const { selected, nonSelected } = groupAndSortLocales(entries, activeLocales);
+    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Banner.Banner, {
+        content: "The statuses of the locales for this content:",
+        highlight: `${counters.becomesDraft} becomes draft, ${counters.willPublish} will publish, ${counters.remainsDraft} remains draft`
+    }), _react.default.createElement("div", {
+        "data-test-id": "locale-publishing-selected"
+    }, _react.default.createElement(_f36components.MenuSectionTitle, null, "Locales in the entry editor:"), selected.map(({ locale, label, variant })=>_react.default.createElement(_ReleaseEntityStatusLocale.ReleaseEntityStatusLocale, {
+            key: `selected-${locale.code}`,
+            label: label,
+            variant: variant,
+            locale: locale
+        }))), nonSelected.length > 0 && _react.default.createElement("div", {
+        "data-test-id": "locale-publishing-others"
+    }, _react.default.createElement(_f36components.MenuSectionTitle, null, "Other locales:"), nonSelected.map(({ locale, label, variant })=>_react.default.createElement(_ReleaseEntityStatusLocale.ReleaseEntityStatusLocale, {
+            key: `others-${locale.code}`,
+            label: label,
+            variant: variant,
+            locale: locale
+        }))));
+}

package/dist/cjs/ReleaseEntityStatusBadge/ReleaseEntityStatusPopover.js

@@ -0,0 +1,277 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ReleaseEntityStatusPopover", {
+    enumerable: true,
+    get: function() {
+        return ReleaseEntityStatusPopover;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+const _constants = require("./constants");
+const _ReleaseEntityStatusLocalesList = require("./ReleaseEntityStatusLocalesList");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const getColor = ({ secondary, tertiary, isHover })=>{
+    const status = secondary || tertiary;
+    return isHover ? _constants.RELEASE_BADGES[status]?.hover : _constants.RELEASE_BADGES[status]?.default;
+};
+const generateDynamicStyles = (status)=>{
+    const wrapperClass = (0, _emotion.css)({
+        '& svg[data-status="secondary"]': {
+            fill: getColor({
+                secondary: status?.secondary,
+                isHover: false
+            })
+        },
+        '& svg[data-status="tertiary"]': {
+            fill: getColor({
+                tertiary: status?.tertiary,
+                isHover: false
+            })
+        },
+        '&:hover svg[data-status="secondary"]': {
+            fill: getColor({
+                secondary: status?.secondary,
+                isHover: true
+            })
+        },
+        '&:hover svg[data-status="tertiary"]': {
+            fill: getColor({
+                tertiary: status?.tertiary,
+                isHover: true
+            })
+        }
+    });
+    return wrapperClass;
+};
+const styles = {
+    badge: (0, _emotion.css)({
+        '&:focus': {
+            outline: 'none',
+            boxShadow: `inset ${_f36tokens.default.glowPrimary}`
+        }
+    }),
+    wrapper: (0, _emotion.css)({
+        '& svg': {
+            transition: 'fill 0.2s ease-in-out'
+        },
+        '& svg[data-status="tertiary"]': {
+            marginLeft: '-1px'
+        }
+    }),
+    popoverContent: (0, _emotion.css)({
+        maxWidth: '336px',
+        maxHeight: '368px',
+        overflowY: 'auto',
+        padding: `${_f36tokens.default.spacing2Xs} 0`
+    }),
+    skeletonBadge: (0, _emotion.css)({
+        flexShrink: 0,
+        display: 'block',
+        height: '20px',
+        width: '65px'
+    })
+};
+const determineBadgeStatus = (localesStatusMap, activeLocales)=>{
+    if (activeLocales && activeLocales.length === 1) {
+        const activeLocale = activeLocales.find((locale)=>localesStatusMap.has(locale.code));
+        return {
+            primary: localesStatusMap.get(activeLocale.code).status
+        };
+    }
+    let becomesDraftCount = 0, willPublishCount = 0, remainsDraftCount = 0;
+    for (const [localeCode, localeStatus] of localesStatusMap.entries()){
+        if (!activeLocales || activeLocales.find((selectedLocale)=>selectedLocale.code === localeCode)) {
+            switch(localeStatus.status){
+                case 'remainsDraft':
+                    remainsDraftCount += 1;
+                    break;
+                case 'becomesDraft':
+                    becomesDraftCount += 1;
+                    break;
+                case 'willPublish':
+                    willPublishCount += 1;
+                    break;
+            }
+        }
+    }
+    const hasRemainsDraft = remainsDraftCount > 0;
+    const hasWillPublish = willPublishCount > 0;
+    const hasBecomesDraft = becomesDraftCount > 0;
+    switch(true){
+        case hasRemainsDraft && hasWillPublish && hasBecomesDraft:
+            return {
+                primary: 'becomesDraft',
+                secondary: 'willPublish',
+                tertiary: 'remainsDraft'
+            };
+        case hasRemainsDraft && hasWillPublish:
+            return {
+                primary: 'willPublish',
+                secondary: 'remainsDraft'
+            };
+        case hasRemainsDraft && hasBecomesDraft:
+            return {
+                primary: 'becomesDraft',
+                secondary: 'remainsDraft'
+            };
+        case hasWillPublish && hasBecomesDraft:
+            return {
+                primary: 'becomesDraft',
+                secondary: 'willPublish'
+            };
+        case hasWillPublish:
+            return {
+                primary: 'willPublish',
+                secondary: 'willPublish'
+            };
+        case hasBecomesDraft:
+            return {
+                primary: 'becomesDraft',
+                secondary: 'becomesDraft'
+            };
+        case hasRemainsDraft:
+            return {
+                primary: 'remainsDraft',
+                secondary: 'remainsDraft'
+            };
+        default:
+            return {
+                primary: 'notInRelease',
+                secondary: 'notInRelease'
+            };
+    }
+};
+function ReleaseEntityStatusPopover({ ReleaseLocalesStatusMap, activeLocales, isLoading = false }) {
+    const [isOpen, setIsOpen] = (0, _react.useState)(false);
+    const timeoutRef = (0, _react.useRef)();
+    const onMouseEnter = (0, _react.useCallback)(()=>{
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(()=>{
+            setIsOpen(true);
+        }, 300);
+    }, []);
+    const onMouseLeave = (0, _react.useCallback)(()=>{
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(()=>{
+            setIsOpen(false);
+        }, 300);
+    }, []);
+    const status = determineBadgeStatus(ReleaseLocalesStatusMap, activeLocales);
+    const ariaLabel = status.secondary ? 'Multiple statuses' : status.primary;
+    const wrapperClass = generateDynamicStyles(status);
+    const ArrowDownIcon = (0, _f36components.generateIcon)({
+        name: 'ArrowDownIcon',
+        viewBox: '0 0 12 20',
+        path: _react.default.createElement("path", {
+            d: "M3.03076 8C2.20109 8 1.73228 8.95209 2.23814 9.60971L5.20727 13.4696C5.60757 13.99 6.39223 13.99 6.79252 13.4696L9.76166 9.60971C10.2675 8.95209 9.79871 8 8.96904 8L3.03076 8Z",
+            fill: "currentColor"
+        })
+    });
+    if (isLoading) {
+        return _react.default.createElement(_f36components.Skeleton.Container, {
+            className: styles.skeletonBadge
+        }, _react.default.createElement(_f36components.Skeleton.Image, {
+            testId: `Release-entity-locale-status-badge-skeleton`,
+            width: "65px",
+            height: "20px"
+        }));
+    }
+    return _react.default.createElement(_f36components.Popover, {
+        isOpen: ReleaseLocalesStatusMap && isOpen,
+        onClose: ()=>setIsOpen(false),
+        autoFocus: false,
+        placement: "bottom-end"
+    }, _react.default.createElement(_f36components.Popover.Trigger, null, _react.default.createElement(_f36components.Flex, {
+        "aria-label": ariaLabel,
+        alignItems: "center",
+        className: (0, _emotion.cx)(styles.wrapper, wrapperClass)
+    }, _react.default.createElement(_f36components.Badge, {
+        tabIndex: 0,
+        variant: _constants.RELEASE_BADGES[status.primary].variant,
+        onFocus: ()=>setIsOpen(true),
+        onBlur: ()=>setIsOpen(false),
+        endIcon: _react.default.createElement(ArrowDownIcon, {
+            color: _constants.RELEASE_BADGES[status.primary].icon
+        }),
+        onMouseOver: onMouseEnter,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave
+    }, _constants.RELEASE_BADGES[status.primary].label), status.secondary && _react.default.createElement("svg", {
+        "data-status": "secondary",
+        "aria-hidden": "true",
+        width: "4",
+        height: "18",
+        viewBox: "0 0 4 18"
+    }, _react.default.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M1.45942e-06 18H0.00296171C2.2121 18 4.00296 16.2091 4.00296 14V4C4.00296 1.79086 2.2121 0 0.00295914 0H0C0.830421 0.732944 1.35418 1.80531 1.35418 3V15C1.35418 16.1947 0.830422 17.2671 1.45942e-06 18Z"
+    })), status.tertiary && _react.default.createElement("svg", {
+        "data-status": "tertiary",
+        "aria-hidden": "true",
+        width: "5",
+        height: "16",
+        viewBox: "0 0 5 16"
+    }, _react.default.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M0.673828 16.0055H0.675391C2.88453 16.0055 4.67539 14.2146 4.67539 12.0055V3.9955C4.67539 1.88216 3.03648 0.151608 0.960312 0.00549316C1.78382 0.738158 2.30257 1.80597 2.30257 2.99493V12.7838C2.30257 14.1053 1.66172 15.2771 0.673828 16.0055Z"
+    })))), _react.default.createElement(_f36components.Popover.Content, {
+        className: styles.popoverContent,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave
+    }, !!ReleaseLocalesStatusMap && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_ReleaseEntityStatusLocalesList.ReleaseEntityStatusLocalesList, {
+        statusMap: ReleaseLocalesStatusMap,
+        activeLocales: activeLocales
+    }))));
+}

package/dist/cjs/ReleaseEntityStatusBadge/constants.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "RELEASE_BADGES", {
+    enumerable: true,
+    get: function() {
+        return RELEASE_BADGES;
+    }
+});
+const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const RELEASE_BADGES = {
+    willPublish: {
+        label: 'Will publish',
+        variant: 'positive',
+        default: _f36tokens.default.green300,
+        hover: _f36tokens.default.green400,
+        icon: _f36tokens.default.green400
+    },
+    becomesDraft: {
+        label: 'Becomes draft',
+        variant: 'warning',
+        default: _f36tokens.default.orange300,
+        hover: _f36tokens.default.orange400,
+        icon: _f36tokens.default.orange400
+    },
+    remainsDraft: {
+        label: 'Remains draft',
+        variant: 'secondary',
+        default: _f36tokens.default.gray300,
+        hover: _f36tokens.default.gray400,
+        icon: _f36tokens.default.gray400
+    },
+    notInRelease: {
+        label: 'Not in release',
+        variant: 'secondary',
+        default: _f36tokens.default.gray300,
+        hover: _f36tokens.default.gray400,
+        icon: _f36tokens.default.gray400
+    }
+};

package/dist/cjs/ReleaseEntityStatusBadge/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./ReleaseEntityStatusPopover"), exports);
+_export_star(require("./ReleaseEntityStatusBadge"), exports);
+_export_star(require("./types"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/ReleaseEntityStatusBadge/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/index.js

@@ -114,6 +114,7 @@ const _shortenStorageUnit = require("./utils/shortenStorageUnit");
 _export_star(require("./hooks/useLocalePublishStatus"), exports);
 _export_star(require("./hooks/useActiveLocales"), exports);
 _export_star(require("./LocalePublishingEntityStatusBadge"), exports);
+_export_star(require("./ReleaseEntityStatusBadge"), exports);
 const _ModalDialogLauncher = /*#__PURE__*/ _interop_require_wildcard(require("./ModalDialogLauncher"));
 const _constraints = /*#__PURE__*/ _interop_require_wildcard(require("./utils/constraints"));
 const _entityHelpers = /*#__PURE__*/ _interop_require_wildcard(require("./utils/entityHelpers"));

package/dist/esm/ReleaseEntityStatusBadge/Banner.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Text } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+const styles = {
+    content: css({
+        display: 'block'
+    }),
+    banner: css({
+        background: tokens.gray100,
+        padding: tokens.spacingXs,
+        margin: `${tokens.spacingXs} ${tokens.spacingS}`,
+        borderRadius: tokens.borderRadiusSmall
+    })
+};
+export function Banner({ content, highlight }) {
+    return React.createElement("div", {
+        className: styles.banner
+    }, React.createElement(Text, {
+        fontSize: "fontSizeS",
+        fontColor: "gray700",
+        className: styles.content
+    }, content), highlight && React.createElement(Text, {
+        fontSize: "fontSizeS",
+        fontColor: "gray700",
+        as: "strong",
+        fontWeight: "fontWeightDemiBold"
+    }, highlight));
+}

package/dist/esm/ReleaseEntityStatusBadge/ReleaseEntityStatusBadge.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Badge } from '@contentful/f36-components';
+const config = {
+    publish: {
+        label: 'Will publish',
+        variant: 'positive'
+    },
+    unpublish: {
+        label: 'Becomes draft',
+        variant: 'warning'
+    },
+    'not-in-release': {
+        label: 'Not in release',
+        variant: 'secondary'
+    }
+};
+export function ReleaseEntityStatusBadge({ className, action }) {
+    const badgeConfig = config[action];
+    return React.createElement(Badge, {
+        testId: "release-entity-action-status",
+        className: className,
+        variant: badgeConfig.variant
+    }, badgeConfig.label);
+}

package/dist/esm/ReleaseEntityStatusBadge/ReleaseEntityStatusLocale.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Badge, Text } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+const styles = {
+    locale: css({
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap'
+    }),
+    status: css({
+        flexShrink: 0
+    }),
+    localePublishStatus: css({
+        display: 'flex',
+        gap: tokens.spacingXs,
+        justifyContent: 'space-between',
+        padding: `${tokens.spacingXs} ${tokens.spacingS}`
+    })
+};
+export function ReleaseEntityStatusLocale({ locale, label, variant }) {
+    return React.createElement("div", {
+        className: styles.localePublishStatus,
+        "data-test-id": "locale-publishing-status"
+    }, React.createElement(Text, {
+        className: styles.locale,
+        fontColor: "gray700"
+    }, locale.name, ' ', React.createElement(Text, {
+        fontColor: "gray500"
+    }, "(", locale.code, ")", locale.default && ', Default')), React.createElement(Badge, {
+        className: styles.status,
+        variant: variant
+    }, label));
+}

package/dist/esm/ReleaseEntityStatusBadge/ReleaseEntityStatusLocalesList.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { MenuSectionTitle } from '@contentful/f36-components';
+import { sortBy } from 'lodash';
+import { Banner } from './Banner';
+import { ReleaseEntityStatusLocale } from './ReleaseEntityStatusLocale';
+function groupAndSortLocales(entries, activeLocales) {
+    const { selected, nonSelected } = entries.reduce((prev, [localeCode, localeStatusType])=>{
+        return activeLocales?.some((sl)=>sl.code === localeCode) ? {
+            ...prev,
+            selected: [
+                ...prev.selected,
+                localeStatusType
+            ]
+        } : {
+            ...prev,
+            nonSelected: [
+                ...prev.nonSelected,
+                localeStatusType
+            ]
+        };
+    }, {
+        selected: [],
+        nonSelected: []
+    });
+    return {
+        selected: sortBy(selected, 'locale.name'),
+        nonSelected: nonSelected.sort((a, b)=>{
+            if (a.status === b.status) {
+                return a.locale.name.localeCompare(b.locale.name);
+            }
+            if (a.status === 'becomesDraft' || a.status === 'willPublish' && b.status === 'remainsDraft') {
+                return -1;
+            }
+            return 1;
+        })
+    };
+}
+export function ReleaseEntityStatusLocalesList({ statusMap, activeLocales }) {
+    const entries = [
+        ...statusMap.entries()
+    ];
+    const counters = entries.reduce((prev, [, { status }])=>({
+            becomesDraft: prev.becomesDraft + (status === 'becomesDraft' ? 1 : 0),
+            willPublish: prev.willPublish + (status === 'willPublish' ? 1 : 0),
+            remainsDraft: prev.remainsDraft + (status === 'remainsDraft' ? 1 : 0)
+        }), {
+        willPublish: 0,
+        becomesDraft: 0,
+        remainsDraft: 0
+    });
+    const { selected, nonSelected } = groupAndSortLocales(entries, activeLocales);
+    return React.createElement(React.Fragment, null, React.createElement(Banner, {
+        content: "The statuses of the locales for this content:",
+        highlight: `${counters.becomesDraft} becomes draft, ${counters.willPublish} will publish, ${counters.remainsDraft} remains draft`
+    }), React.createElement("div", {
+        "data-test-id": "locale-publishing-selected"
+    }, React.createElement(MenuSectionTitle, null, "Locales in the entry editor:"), selected.map(({ locale, label, variant })=>React.createElement(ReleaseEntityStatusLocale, {
+            key: `selected-${locale.code}`,
+            label: label,
+            variant: variant,
+            locale: locale
+        }))), nonSelected.length > 0 && React.createElement("div", {
+        "data-test-id": "locale-publishing-others"
+    }, React.createElement(MenuSectionTitle, null, "Other locales:"), nonSelected.map(({ locale, label, variant })=>React.createElement(ReleaseEntityStatusLocale, {
+            key: `others-${locale.code}`,
+            label: label,
+            variant: variant,
+            locale: locale
+        }))));
+}

package/dist/esm/ReleaseEntityStatusBadge/ReleaseEntityStatusPopover.js

@@ -0,0 +1,221 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { Badge, Flex, generateIcon, Popover, Skeleton } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { cx, css } from 'emotion';
+import { RELEASE_BADGES } from './constants';
+import { ReleaseEntityStatusLocalesList } from './ReleaseEntityStatusLocalesList';
+const getColor = ({ secondary, tertiary, isHover })=>{
+    const status = secondary || tertiary;
+    return isHover ? RELEASE_BADGES[status]?.hover : RELEASE_BADGES[status]?.default;
+};
+const generateDynamicStyles = (status)=>{
+    const wrapperClass = css({
+        '& svg[data-status="secondary"]': {
+            fill: getColor({
+                secondary: status?.secondary,
+                isHover: false
+            })
+        },
+        '& svg[data-status="tertiary"]': {
+            fill: getColor({
+                tertiary: status?.tertiary,
+                isHover: false
+            })
+        },
+        '&:hover svg[data-status="secondary"]': {
+            fill: getColor({
+                secondary: status?.secondary,
+                isHover: true
+            })
+        },
+        '&:hover svg[data-status="tertiary"]': {
+            fill: getColor({
+                tertiary: status?.tertiary,
+                isHover: true
+            })
+        }
+    });
+    return wrapperClass;
+};
+const styles = {
+    badge: css({
+        '&:focus': {
+            outline: 'none',
+            boxShadow: `inset ${tokens.glowPrimary}`
+        }
+    }),
+    wrapper: css({
+        '& svg': {
+            transition: 'fill 0.2s ease-in-out'
+        },
+        '& svg[data-status="tertiary"]': {
+            marginLeft: '-1px'
+        }
+    }),
+    popoverContent: css({
+        maxWidth: '336px',
+        maxHeight: '368px',
+        overflowY: 'auto',
+        padding: `${tokens.spacing2Xs} 0`
+    }),
+    skeletonBadge: css({
+        flexShrink: 0,
+        display: 'block',
+        height: '20px',
+        width: '65px'
+    })
+};
+const determineBadgeStatus = (localesStatusMap, activeLocales)=>{
+    if (activeLocales && activeLocales.length === 1) {
+        const activeLocale = activeLocales.find((locale)=>localesStatusMap.has(locale.code));
+        return {
+            primary: localesStatusMap.get(activeLocale.code).status
+        };
+    }
+    let becomesDraftCount = 0, willPublishCount = 0, remainsDraftCount = 0;
+    for (const [localeCode, localeStatus] of localesStatusMap.entries()){
+        if (!activeLocales || activeLocales.find((selectedLocale)=>selectedLocale.code === localeCode)) {
+            switch(localeStatus.status){
+                case 'remainsDraft':
+                    remainsDraftCount += 1;
+                    break;
+                case 'becomesDraft':
+                    becomesDraftCount += 1;
+                    break;
+                case 'willPublish':
+                    willPublishCount += 1;
+                    break;
+            }
+        }
+    }
+    const hasRemainsDraft = remainsDraftCount > 0;
+    const hasWillPublish = willPublishCount > 0;
+    const hasBecomesDraft = becomesDraftCount > 0;
+    switch(true){
+        case hasRemainsDraft && hasWillPublish && hasBecomesDraft:
+            return {
+                primary: 'becomesDraft',
+                secondary: 'willPublish',
+                tertiary: 'remainsDraft'
+            };
+        case hasRemainsDraft && hasWillPublish:
+            return {
+                primary: 'willPublish',
+                secondary: 'remainsDraft'
+            };
+        case hasRemainsDraft && hasBecomesDraft:
+            return {
+                primary: 'becomesDraft',
+                secondary: 'remainsDraft'
+            };
+        case hasWillPublish && hasBecomesDraft:
+            return {
+                primary: 'becomesDraft',
+                secondary: 'willPublish'
+            };
+        case hasWillPublish:
+            return {
+                primary: 'willPublish',
+                secondary: 'willPublish'
+            };
+        case hasBecomesDraft:
+            return {
+                primary: 'becomesDraft',
+                secondary: 'becomesDraft'
+            };
+        case hasRemainsDraft:
+            return {
+                primary: 'remainsDraft',
+                secondary: 'remainsDraft'
+            };
+        default:
+            return {
+                primary: 'notInRelease',
+                secondary: 'notInRelease'
+            };
+    }
+};
+export function ReleaseEntityStatusPopover({ ReleaseLocalesStatusMap, activeLocales, isLoading = false }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const timeoutRef = useRef();
+    const onMouseEnter = useCallback(()=>{
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(()=>{
+            setIsOpen(true);
+        }, 300);
+    }, []);
+    const onMouseLeave = useCallback(()=>{
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(()=>{
+            setIsOpen(false);
+        }, 300);
+    }, []);
+    const status = determineBadgeStatus(ReleaseLocalesStatusMap, activeLocales);
+    const ariaLabel = status.secondary ? 'Multiple statuses' : status.primary;
+    const wrapperClass = generateDynamicStyles(status);
+    const ArrowDownIcon = generateIcon({
+        name: 'ArrowDownIcon',
+        viewBox: '0 0 12 20',
+        path: React.createElement("path", {
+            d: "M3.03076 8C2.20109 8 1.73228 8.95209 2.23814 9.60971L5.20727 13.4696C5.60757 13.99 6.39223 13.99 6.79252 13.4696L9.76166 9.60971C10.2675 8.95209 9.79871 8 8.96904 8L3.03076 8Z",
+            fill: "currentColor"
+        })
+    });
+    if (isLoading) {
+        return React.createElement(Skeleton.Container, {
+            className: styles.skeletonBadge
+        }, React.createElement(Skeleton.Image, {
+            testId: `Release-entity-locale-status-badge-skeleton`,
+            width: "65px",
+            height: "20px"
+        }));
+    }
+    return React.createElement(Popover, {
+        isOpen: ReleaseLocalesStatusMap && isOpen,
+        onClose: ()=>setIsOpen(false),
+        autoFocus: false,
+        placement: "bottom-end"
+    }, React.createElement(Popover.Trigger, null, React.createElement(Flex, {
+        "aria-label": ariaLabel,
+        alignItems: "center",
+        className: cx(styles.wrapper, wrapperClass)
+    }, React.createElement(Badge, {
+        tabIndex: 0,
+        variant: RELEASE_BADGES[status.primary].variant,
+        onFocus: ()=>setIsOpen(true),
+        onBlur: ()=>setIsOpen(false),
+        endIcon: React.createElement(ArrowDownIcon, {
+            color: RELEASE_BADGES[status.primary].icon
+        }),
+        onMouseOver: onMouseEnter,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave
+    }, RELEASE_BADGES[status.primary].label), status.secondary && React.createElement("svg", {
+        "data-status": "secondary",
+        "aria-hidden": "true",
+        width: "4",
+        height: "18",
+        viewBox: "0 0 4 18"
+    }, React.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M1.45942e-06 18H0.00296171C2.2121 18 4.00296 16.2091 4.00296 14V4C4.00296 1.79086 2.2121 0 0.00295914 0H0C0.830421 0.732944 1.35418 1.80531 1.35418 3V15C1.35418 16.1947 0.830422 17.2671 1.45942e-06 18Z"
+    })), status.tertiary && React.createElement("svg", {
+        "data-status": "tertiary",
+        "aria-hidden": "true",
+        width: "5",
+        height: "16",
+        viewBox: "0 0 5 16"
+    }, React.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M0.673828 16.0055H0.675391C2.88453 16.0055 4.67539 14.2146 4.67539 12.0055V3.9955C4.67539 1.88216 3.03648 0.151608 0.960312 0.00549316C1.78382 0.738158 2.30257 1.80597 2.30257 2.99493V12.7838C2.30257 14.1053 1.66172 15.2771 0.673828 16.0055Z"
+    })))), React.createElement(Popover.Content, {
+        className: styles.popoverContent,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave
+    }, !!ReleaseLocalesStatusMap && React.createElement(React.Fragment, null, React.createElement(ReleaseEntityStatusLocalesList, {
+        statusMap: ReleaseLocalesStatusMap,
+        activeLocales: activeLocales
+    }))));
+}

package/dist/esm/ReleaseEntityStatusBadge/constants.js

@@ -0,0 +1,31 @@
+import tokens from '@contentful/f36-tokens';
+export const RELEASE_BADGES = {
+    willPublish: {
+        label: 'Will publish',
+        variant: 'positive',
+        default: tokens.green300,
+        hover: tokens.green400,
+        icon: tokens.green400
+    },
+    becomesDraft: {
+        label: 'Becomes draft',
+        variant: 'warning',
+        default: tokens.orange300,
+        hover: tokens.orange400,
+        icon: tokens.orange400
+    },
+    remainsDraft: {
+        label: 'Remains draft',
+        variant: 'secondary',
+        default: tokens.gray300,
+        hover: tokens.gray400,
+        icon: tokens.gray400
+    },
+    notInRelease: {
+        label: 'Not in release',
+        variant: 'secondary',
+        default: tokens.gray300,
+        hover: tokens.gray400,
+        icon: tokens.gray400
+    }
+};

package/dist/esm/ReleaseEntityStatusBadge/index.js

@@ -0,0 +1,3 @@
+export * from './ReleaseEntityStatusPopover';
+export * from './ReleaseEntityStatusBadge';
+export * from './types';

package/dist/esm/ReleaseEntityStatusBadge/types.js

@@ -0,0 +1 @@
+export { };

package/dist/esm/index.js

@@ -12,6 +12,7 @@ export { ModalDialogLauncher };
 export { entityHelpers };
 export { ConstraintsUtils };
 export * from './LocalePublishingEntityStatusBadge';
+export * from './ReleaseEntityStatusBadge';
 import * as ModalDialogLauncher from './ModalDialogLauncher';
 import * as ConstraintsUtils from './utils/constraints';
 import * as entityHelpers from './utils/entityHelpers';

package/dist/types/ReleaseEntityStatusBadge/Banner.d.ts

@@ -0,0 +1,5 @@
+import React, { ReactNode } from 'react';
+export declare function Banner({ content, highlight }: {
+    content: ReactNode;
+    highlight?: ReactNode;
+}): React.JSX.Element;

package/dist/types/ReleaseEntityStatusBadge/ReleaseEntityStatusBadge.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ReleaseAction } from './types';
+type ReleaseEntityActionBadgeProps = {
+    action: ReleaseAction;
+    className?: string;
+};
+export declare function ReleaseEntityStatusBadge({ className, action }: ReleaseEntityActionBadgeProps): React.JSX.Element;
+export {};

package/dist/types/ReleaseEntityStatusBadge/ReleaseEntityStatusLocale.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BadgeVariant } from '@contentful/f36-components';
+import type { LocaleProps } from 'contentful-management';
+type ReleaseEntityStatusLocaleProps = {
+    locale: Pick<LocaleProps, 'code' | 'default' | 'name'>;
+    label: string;
+    variant: BadgeVariant;
+};
+export declare function ReleaseEntityStatusLocale({ locale, label, variant, }: ReleaseEntityStatusLocaleProps): React.JSX.Element;
+export {};

package/dist/types/ReleaseEntityStatusBadge/ReleaseEntityStatusLocalesList.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { LocaleProps } from 'contentful-management';
+import { ReleaseLocalesStatusMap } from './types';
+type ReleaseEntityStatusLocalesListProps = {
+    statusMap: ReleaseLocalesStatusMap;
+    activeLocales?: Pick<LocaleProps, 'code'>[];
+};
+export declare function ReleaseEntityStatusLocalesList({ statusMap, activeLocales, }: ReleaseEntityStatusLocalesListProps): React.JSX.Element;
+export {};

package/dist/types/ReleaseEntityStatusBadge/ReleaseEntityStatusPopover.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { LocaleProps } from 'contentful-management';
+import type { ReleaseLocalesStatusMap } from './types';
+type ReleaseLocalePublishingPopoverProps = {
+    ReleaseLocalesStatusMap: ReleaseLocalesStatusMap;
+    activeLocales: Pick<LocaleProps, 'code'>[];
+    isLoading?: boolean;
+};
+export declare function ReleaseEntityStatusPopover({ ReleaseLocalesStatusMap, activeLocales, isLoading, }: ReleaseLocalePublishingPopoverProps): React.JSX.Element;
+export {};

package/dist/types/ReleaseEntityStatusBadge/constants.d.ts

@@ -0,0 +1,30 @@
+export declare const RELEASE_BADGES: {
+    readonly willPublish: {
+        readonly label: "Will publish";
+        readonly variant: "positive";
+        readonly default: string;
+        readonly hover: string;
+        readonly icon: string;
+    };
+    readonly becomesDraft: {
+        readonly label: "Becomes draft";
+        readonly variant: "warning";
+        readonly default: string;
+        readonly hover: string;
+        readonly icon: string;
+    };
+    readonly remainsDraft: {
+        readonly label: "Remains draft";
+        readonly variant: "secondary";
+        readonly default: string;
+        readonly hover: string;
+        readonly icon: string;
+    };
+    readonly notInRelease: {
+        readonly label: "Not in release";
+        readonly variant: "secondary";
+        readonly default: string;
+        readonly hover: string;
+        readonly icon: string;
+    };
+};

package/dist/types/ReleaseEntityStatusBadge/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ReleaseEntityStatusPopover';
+export * from './ReleaseEntityStatusBadge';
+export * from './types';

package/dist/types/ReleaseEntityStatusBadge/types.d.ts

@@ -0,0 +1,11 @@
+import { BadgeVariant } from '@contentful/f36-components';
+import { LocaleProps } from 'contentful-management/types';
+export type ReleaseAction = 'publish' | 'unpublish' | 'not-in-release';
+export type ReleaseEntityStatus = 'willPublish' | 'becomesDraft' | 'remainsDraft' | 'notInRelease';
+export type ReleaseLocalesStatus = {
+    status: ReleaseEntityStatus;
+    variant: BadgeVariant;
+    label: string;
+    locale: LocaleProps;
+};
+export type ReleaseLocalesStatusMap = Map<string, ReleaseLocalesStatus>;

package/dist/types/index.d.ts

@@ -13,6 +13,7 @@ export { ModalDialogLauncher };
 export { entityHelpers };
 export { ConstraintsUtils };
 export * from './LocalePublishingEntityStatusBadge';
+export * from './ReleaseEntityStatusBadge';
 import * as ModalDialogLauncher from './ModalDialogLauncher';
 import * as ConstraintsUtils from './utils/constraints';
 import * as entityHelpers from './utils/entityHelpers';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-shared",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -55,5 +55,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "6bee4a59a3c19a95d2cadde3ef0c78112788626e"
+  "gitHead": "4d6650d34ceb61f6445e0734a7ac53ff37c20529"
 }