@contentful/field-editor-shared 1.6.0 → 1.7.0

package/dist/cjs/LocalePublishingEntityStatusBadge/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 = _interop_require_default(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36tokens = _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/LocalePublishingEntityStatusBadge/LocalePublishingPopover.js

@@ -0,0 +1,311 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LocalePublishingPopover", {
+    enumerable: true,
+    get: function() {
+        return LocalePublishingPopover;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+const _entityHelpers = _interop_require_wildcard(require("../utils/entityHelpers"));
+const _LocalePublishingStatusList = require("./LocalePublishingStatusList");
+const _ScheduledBanner = require("./ScheduledBanner");
+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 colors = {
+    published: {
+        default: _f36tokens.default.green300,
+        hover: _f36tokens.default.green400,
+        icon: _f36tokens.default.green400
+    },
+    draft: {
+        default: _f36tokens.default.orange300,
+        hover: _f36tokens.default.orange400,
+        icon: _f36tokens.default.orange400
+    },
+    changed: {
+        default: _f36tokens.default.blue300,
+        hover: _f36tokens.default.blue400,
+        icon: _f36tokens.default.blue400
+    },
+    archived: {
+        default: _f36tokens.default.gray300,
+        hover: _f36tokens.default.gray400,
+        icon: _f36tokens.default.gray400
+    },
+    deleted: {
+        default: _f36tokens.default.red300,
+        hover: _f36tokens.default.red400,
+        icon: _f36tokens.default.red400
+    },
+    new: {
+        default: _f36tokens.default.blue600,
+        hover: _f36tokens.default.blue700,
+        icon: _f36tokens.default.blue700
+    }
+};
+const getColor = ({ secondary, tertiary, isHover })=>{
+    const status = secondary || tertiary;
+    return isHover ? colors[status]?.hover : colors[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 getIconColor = (status)=>colors[status].icon;
+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`
+    })
+};
+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"
+    })
+});
+const determineBadgeStatus = (localesStatusMap, activeLocales)=>{
+    if (!localesStatusMap) return;
+    if (localesStatusMap.size === 1) return {
+        primary: [
+            ...localesStatusMap.values()
+        ][0].status
+    };
+    let draftCount = 0, publishedCount = 0, changedCount = 0;
+    for (const localeStatus of localesStatusMap.values()){
+        if (!activeLocales || activeLocales.find((selectedLocale)=>selectedLocale.code === localeStatus.locale.code)) {
+            switch(localeStatus.status){
+                case 'changed':
+                    changedCount += 1;
+                    break;
+                case 'draft':
+                    draftCount += 1;
+                    break;
+                case 'published':
+                    publishedCount += 1;
+                    break;
+            }
+        }
+    }
+    const hasChanged = changedCount > 0;
+    const hasPublished = publishedCount > 0;
+    const hasDraft = draftCount > 0;
+    switch(true){
+        case hasChanged && hasPublished && hasDraft:
+            return {
+                primary: 'changed',
+                secondary: 'published',
+                tertiary: 'draft'
+            };
+        case hasChanged && hasPublished:
+            return {
+                primary: 'changed',
+                secondary: 'published'
+            };
+        case hasChanged && hasDraft:
+            return {
+                primary: 'changed',
+                secondary: 'draft'
+            };
+        case hasPublished && hasDraft:
+            return {
+                primary: 'published',
+                secondary: 'draft'
+            };
+        case hasChanged:
+            return {
+                primary: 'changed',
+                secondary: 'changed'
+            };
+        case hasPublished:
+            return {
+                primary: 'published',
+                secondary: 'published'
+            };
+        default:
+            return {
+                primary: 'draft',
+                secondary: 'draft'
+            };
+    }
+};
+function LocalePublishingPopover({ entity, jobs, isScheduled, localesStatusMap, activeLocales }) {
+    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 entityStatus = _entityHelpers.getEntityStatus(entity.sys, activeLocales?.map((locale)=>locale.code));
+    if ([
+        'archived',
+        'deleted'
+    ].includes(entityStatus)) {
+        return _react.default.createElement(_f36components.EntityStatusBadge, {
+            className: styles.badge,
+            testId: "entity-state",
+            entityStatus: entityStatus,
+            tabIndex: 0,
+            isScheduled: isScheduled
+        });
+    }
+    const status = determineBadgeStatus(localesStatusMap, activeLocales);
+    const ariaLabel = status && status.secondary ? 'Multiple statuses' : status?.primary;
+    const wrapperClass = generateDynamicStyles(status);
+    return _react.default.createElement(_f36components.Popover, {
+        isOpen: localesStatusMap && 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.EntityStatusBadge, {
+        className: styles.badge,
+        testId: "entity-state",
+        entityStatus: entityStatus,
+        tabIndex: 0,
+        onFocus: ()=>setIsOpen(true),
+        onBlur: ()=>setIsOpen(false),
+        endIcon: _react.default.createElement(ArrowDownIcon, {
+            color: getIconColor(entityStatus)
+        }),
+        onMouseOver: onMouseEnter,
+        isScheduled: isScheduled,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave
+    }), 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
+    }, !!localesStatusMap && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_ScheduledBanner.ScheduledBanner, {
+        entityId: entity.sys.id,
+        jobs: jobs
+    }), _react.default.createElement(_LocalePublishingStatusList.LocalePublishingStatusList, {
+        isScheduled: isScheduled,
+        statusMap: localesStatusMap,
+        activeLocales: activeLocales
+    }))));
+}

package/dist/cjs/LocalePublishingEntityStatusBadge/LocalePublishingStatus.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LocalePublishingStatus", {
+    enumerable: true,
+    get: function() {
+        return LocalePublishingStatus;
+    }
+});
+const _react = _interop_require_default(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36tokens = _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 LocalePublishingStatus({ locale, status, isScheduled }) {
+    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.EntityStatusBadge, {
+        entityStatus: status,
+        isScheduled: isScheduled,
+        className: styles.status
+    }));
+}

package/dist/cjs/LocalePublishingEntityStatusBadge/LocalePublishingStatusList.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LocalePublishingStatusList", {
+    enumerable: true,
+    get: function() {
+        return LocalePublishingStatusList;
+    }
+});
+const _react = _interop_require_default(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _lodash = require("lodash");
+const _Banner = require("./Banner");
+const _LocalePublishingStatus = require("./LocalePublishingStatus");
+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 === 'changed' || a.status === 'published' && b.status === 'draft') {
+                return -1;
+            }
+            return 1;
+        })
+    };
+}
+function LocalePublishingStatusList({ isScheduled, statusMap, activeLocales }) {
+    const entries = [
+        ...statusMap.entries()
+    ];
+    const counters = entries.reduce((prev, [, { status }])=>({
+            changed: prev.changed + (status === 'changed' ? 1 : 0),
+            published: prev.published + (status === 'published' ? 1 : 0),
+            draft: prev.draft + (status === 'draft' ? 1 : 0)
+        }), {
+        published: 0,
+        changed: 0,
+        draft: 0
+    });
+    const { selected, nonSelected } = groupAndSortLocales(entries, activeLocales);
+    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Banner.Banner, {
+        content: "The entry has locales with the following statuses:",
+        highlight: `${counters.changed} changed, ${counters.published} published, ${counters.draft} 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, status })=>_react.default.createElement(_LocalePublishingStatus.LocalePublishingStatus, {
+            key: `selected-${locale.code}`,
+            status: status,
+            locale: locale,
+            isScheduled: isScheduled
+        }))), nonSelected.length > 0 && _react.default.createElement("div", {
+        "data-test-id": "locale-publishing-others"
+    }, _react.default.createElement(_f36components.MenuSectionTitle, null, "Other locales:"), nonSelected.map(({ locale, status })=>_react.default.createElement(_LocalePublishingStatus.LocalePublishingStatus, {
+            key: `others-${locale.code}`,
+            status: status,
+            locale: locale,
+            isScheduled: isScheduled
+        }))));
+}

package/dist/cjs/LocalePublishingEntityStatusBadge/ScheduledBanner.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ScheduledBanner", {
+    enumerable: true,
+    get: function() {
+        return ScheduledBanner;
+    }
+});
+const _react = _interop_require_default(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _lodash = require("lodash");
+const _Banner = require("./Banner");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function ScheduledBanner({ entityId, jobs }) {
+    const scheduledJobs = jobs.filter((job)=>job.entity.sys.id === entityId);
+    const sortedScheduledJobs = (0, _lodash.orderBy)(scheduledJobs, [
+        'scheduledFor.datetime'
+    ], [
+        'asc'
+    ]);
+    const scheduledAction = sortedScheduledJobs[0];
+    if (!scheduledAction) {
+        return null;
+    }
+    const pendingJobsCount = scheduledJobs.length - 1;
+    const lowerCaseAction = scheduledAction.action.toLowerCase();
+    const action = lowerCaseAction === ScheduledActionTypes['patch+publish'] ? `${lowerCaseAction} (via Schedule Series)` : lowerCaseAction;
+    return _react.default.createElement(_Banner.Banner, {
+        content: `All locales are scheduled to ${action} on:`,
+        highlight: `${(0, _f36components.formatDateAndTime)(scheduledAction.scheduledFor.datetime)}${pendingJobsCount > 0 ? ` [and +${pendingJobsCount} more]` : ''}`
+    });
+}

package/dist/cjs/LocalePublishingEntityStatusBadge/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./LocalePublishingPopover"), 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/index.js

@@ -111,9 +111,23 @@ const _PredefinedValuesError = require("./PredefinedValuesError");
 const _typesEntity = require("./typesEntity");
 const _isValidImage = require("./utils/isValidImage");
 const _shortenStorageUnit = require("./utils/shortenStorageUnit");
+_export_star(require("./LocalePublishingEntityStatusBadge"), exports);
 const _ModalDialogLauncher = _interop_require_wildcard(require("./ModalDialogLauncher"));
 const _constraints = _interop_require_wildcard(require("./utils/constraints"));
 const _entityHelpers = _interop_require_wildcard(require("./utils/entityHelpers"));
+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;
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();

package/dist/esm/LocalePublishingEntityStatusBadge/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/LocalePublishingEntityStatusBadge/LocalePublishingPopover.js

@@ -0,0 +1,255 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { EntityStatusBadge, Flex, Popover, generateIcon } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { cx, css } from 'emotion';
+import * as entityHelpers from '../utils/entityHelpers';
+import { LocalePublishingStatusList } from './LocalePublishingStatusList';
+import { ScheduledBanner } from './ScheduledBanner';
+const colors = {
+    published: {
+        default: tokens.green300,
+        hover: tokens.green400,
+        icon: tokens.green400
+    },
+    draft: {
+        default: tokens.orange300,
+        hover: tokens.orange400,
+        icon: tokens.orange400
+    },
+    changed: {
+        default: tokens.blue300,
+        hover: tokens.blue400,
+        icon: tokens.blue400
+    },
+    archived: {
+        default: tokens.gray300,
+        hover: tokens.gray400,
+        icon: tokens.gray400
+    },
+    deleted: {
+        default: tokens.red300,
+        hover: tokens.red400,
+        icon: tokens.red400
+    },
+    new: {
+        default: tokens.blue600,
+        hover: tokens.blue700,
+        icon: tokens.blue700
+    }
+};
+const getColor = ({ secondary, tertiary, isHover })=>{
+    const status = secondary || tertiary;
+    return isHover ? colors[status]?.hover : colors[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 getIconColor = (status)=>colors[status].icon;
+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`
+    })
+};
+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"
+    })
+});
+const determineBadgeStatus = (localesStatusMap, activeLocales)=>{
+    if (!localesStatusMap) return;
+    if (localesStatusMap.size === 1) return {
+        primary: [
+            ...localesStatusMap.values()
+        ][0].status
+    };
+    let draftCount = 0, publishedCount = 0, changedCount = 0;
+    for (const localeStatus of localesStatusMap.values()){
+        if (!activeLocales || activeLocales.find((selectedLocale)=>selectedLocale.code === localeStatus.locale.code)) {
+            switch(localeStatus.status){
+                case 'changed':
+                    changedCount += 1;
+                    break;
+                case 'draft':
+                    draftCount += 1;
+                    break;
+                case 'published':
+                    publishedCount += 1;
+                    break;
+            }
+        }
+    }
+    const hasChanged = changedCount > 0;
+    const hasPublished = publishedCount > 0;
+    const hasDraft = draftCount > 0;
+    switch(true){
+        case hasChanged && hasPublished && hasDraft:
+            return {
+                primary: 'changed',
+                secondary: 'published',
+                tertiary: 'draft'
+            };
+        case hasChanged && hasPublished:
+            return {
+                primary: 'changed',
+                secondary: 'published'
+            };
+        case hasChanged && hasDraft:
+            return {
+                primary: 'changed',
+                secondary: 'draft'
+            };
+        case hasPublished && hasDraft:
+            return {
+                primary: 'published',
+                secondary: 'draft'
+            };
+        case hasChanged:
+            return {
+                primary: 'changed',
+                secondary: 'changed'
+            };
+        case hasPublished:
+            return {
+                primary: 'published',
+                secondary: 'published'
+            };
+        default:
+            return {
+                primary: 'draft',
+                secondary: 'draft'
+            };
+    }
+};
+export function LocalePublishingPopover({ entity, jobs, isScheduled, localesStatusMap, activeLocales }) {
+    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 entityStatus = entityHelpers.getEntityStatus(entity.sys, activeLocales?.map((locale)=>locale.code));
+    if ([
+        'archived',
+        'deleted'
+    ].includes(entityStatus)) {
+        return React.createElement(EntityStatusBadge, {
+            className: styles.badge,
+            testId: "entity-state",
+            entityStatus: entityStatus,
+            tabIndex: 0,
+            isScheduled: isScheduled
+        });
+    }
+    const status = determineBadgeStatus(localesStatusMap, activeLocales);
+    const ariaLabel = status && status.secondary ? 'Multiple statuses' : status?.primary;
+    const wrapperClass = generateDynamicStyles(status);
+    return React.createElement(Popover, {
+        isOpen: localesStatusMap && 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(EntityStatusBadge, {
+        className: styles.badge,
+        testId: "entity-state",
+        entityStatus: entityStatus,
+        tabIndex: 0,
+        onFocus: ()=>setIsOpen(true),
+        onBlur: ()=>setIsOpen(false),
+        endIcon: React.createElement(ArrowDownIcon, {
+            color: getIconColor(entityStatus)
+        }),
+        onMouseOver: onMouseEnter,
+        isScheduled: isScheduled,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave
+    }), 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
+    }, !!localesStatusMap && React.createElement(React.Fragment, null, React.createElement(ScheduledBanner, {
+        entityId: entity.sys.id,
+        jobs: jobs
+    }), React.createElement(LocalePublishingStatusList, {
+        isScheduled: isScheduled,
+        statusMap: localesStatusMap,
+        activeLocales: activeLocales
+    }))));
+}

package/dist/esm/LocalePublishingEntityStatusBadge/LocalePublishingStatus.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { EntityStatusBadge, 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 LocalePublishingStatus({ locale, status, isScheduled }) {
+    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(EntityStatusBadge, {
+        entityStatus: status,
+        isScheduled: isScheduled,
+        className: styles.status
+    }));
+}

package/dist/esm/LocalePublishingEntityStatusBadge/LocalePublishingStatusList.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { MenuSectionTitle } from '@contentful/f36-components';
+import { sortBy } from 'lodash';
+import { Banner } from './Banner';
+import { LocalePublishingStatus } from './LocalePublishingStatus';
+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 === 'changed' || a.status === 'published' && b.status === 'draft') {
+                return -1;
+            }
+            return 1;
+        })
+    };
+}
+export function LocalePublishingStatusList({ isScheduled, statusMap, activeLocales }) {
+    const entries = [
+        ...statusMap.entries()
+    ];
+    const counters = entries.reduce((prev, [, { status }])=>({
+            changed: prev.changed + (status === 'changed' ? 1 : 0),
+            published: prev.published + (status === 'published' ? 1 : 0),
+            draft: prev.draft + (status === 'draft' ? 1 : 0)
+        }), {
+        published: 0,
+        changed: 0,
+        draft: 0
+    });
+    const { selected, nonSelected } = groupAndSortLocales(entries, activeLocales);
+    return React.createElement(React.Fragment, null, React.createElement(Banner, {
+        content: "The entry has locales with the following statuses:",
+        highlight: `${counters.changed} changed, ${counters.published} published, ${counters.draft} draft`
+    }), React.createElement("div", {
+        "data-test-id": "locale-publishing-selected"
+    }, React.createElement(MenuSectionTitle, null, "Locales in the entry editor:"), selected.map(({ locale, status })=>React.createElement(LocalePublishingStatus, {
+            key: `selected-${locale.code}`,
+            status: status,
+            locale: locale,
+            isScheduled: isScheduled
+        }))), nonSelected.length > 0 && React.createElement("div", {
+        "data-test-id": "locale-publishing-others"
+    }, React.createElement(MenuSectionTitle, null, "Other locales:"), nonSelected.map(({ locale, status })=>React.createElement(LocalePublishingStatus, {
+            key: `others-${locale.code}`,
+            status: status,
+            locale: locale,
+            isScheduled: isScheduled
+        }))));
+}

package/dist/esm/LocalePublishingEntityStatusBadge/ScheduledBanner.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { formatDateAndTime } from '@contentful/f36-components';
+import { orderBy } from 'lodash';
+import { Banner } from './Banner';
+export function ScheduledBanner({ entityId, jobs }) {
+    const scheduledJobs = jobs.filter((job)=>job.entity.sys.id === entityId);
+    const sortedScheduledJobs = orderBy(scheduledJobs, [
+        'scheduledFor.datetime'
+    ], [
+        'asc'
+    ]);
+    const scheduledAction = sortedScheduledJobs[0];
+    if (!scheduledAction) {
+        return null;
+    }
+    const pendingJobsCount = scheduledJobs.length - 1;
+    const lowerCaseAction = scheduledAction.action.toLowerCase();
+    const action = lowerCaseAction === ScheduledActionTypes['patch+publish'] ? `${lowerCaseAction} (via Schedule Series)` : lowerCaseAction;
+    return React.createElement(Banner, {
+        content: `All locales are scheduled to ${action} on:`,
+        highlight: `${formatDateAndTime(scheduledAction.scheduledFor.datetime)}${pendingJobsCount > 0 ? ` [and +${pendingJobsCount} more]` : ''}`
+    });
+}

package/dist/esm/LocalePublishingEntityStatusBadge/index.js

@@ -0,0 +1 @@
+export * from './LocalePublishingPopover';

package/dist/esm/index.js

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

package/dist/types/CharCounter.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 interface CharCounterProps {
     value?: string;
     checkConstraint: (n: number) => boolean;
 }
-export declare function CharCounter(props: CharCounterProps): JSX.Element;
+export declare function CharCounter(props: CharCounterProps): React.JSX.Element;
 export {};

package/dist/types/CharValidation.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ValidationType } from './types';
 interface CharValidationProps {
     constraints: ValidationType;
 }
-export declare function CharValidation(props: CharValidationProps): JSX.Element;
+export declare function CharValidation(props: CharValidationProps): React.JSX.Element;
 export {};

package/dist/types/LocalePublishingEntityStatusBadge/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/LocalePublishingEntityStatusBadge/LocalePublishingPopover.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { LocaleProps, EntryProps, AssetProps, ScheduledActionProps } from 'contentful-management';
+export type LocalePublishStatus = {
+    status: 'draft' | 'published' | 'changed';
+    locale: LocaleProps;
+};
+export type LocalePublishStatusMap = Map<string, LocalePublishStatus>;
+type LocalePublishingPopoverProps = {
+    entity: EntryProps | AssetProps;
+    jobs: ScheduledActionProps[];
+    isScheduled: boolean;
+    activeLocales: LocaleProps[] | null;
+    localesStatusMap?: LocalePublishStatusMap;
+};
+export declare function LocalePublishingPopover({ entity, jobs, isScheduled, localesStatusMap, activeLocales, }: LocalePublishingPopoverProps): React.JSX.Element;
+export {};

package/dist/types/LocalePublishingEntityStatusBadge/LocalePublishingStatus.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { LocaleProps } from 'contentful-management';
+type LocalePublishingStatusProps = {
+    locale: LocaleProps;
+    status: 'draft' | 'published' | 'changed';
+    isScheduled: boolean;
+};
+export declare function LocalePublishingStatus({ locale, status, isScheduled, }: LocalePublishingStatusProps): React.JSX.Element;
+export {};

package/dist/types/LocalePublishingEntityStatusBadge/LocalePublishingStatusList.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { LocaleProps } from 'contentful-management';
+import type { LocalePublishStatusMap } from './LocalePublishingPopover';
+type LocalePublishingStatusListProps = {
+    isScheduled: boolean;
+    statusMap: LocalePublishStatusMap;
+    activeLocales: LocaleProps[] | null;
+};
+export declare function LocalePublishingStatusList({ isScheduled, statusMap, activeLocales, }: LocalePublishingStatusListProps): React.JSX.Element;
+export {};

package/dist/types/LocalePublishingEntityStatusBadge/ScheduledBanner.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ScheduledActionProps } from 'contentful-management';
+type ScheduledBannerProps = {
+    entityId: string;
+    jobs: ScheduledActionProps[];
+};
+export declare function ScheduledBanner({ entityId, jobs }: ScheduledBannerProps): React.JSX.Element | null;
+export {};

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

@@ -0,0 +1 @@
+export * from './LocalePublishingPopover';

package/dist/types/ModalDialogLauncher.d.ts

@@ -4,7 +4,7 @@ export declare function open(componentRenderer: (params: {
     onClose: Function;
     isShown: boolean;
 }) => any): Promise<unknown>;
-export declare function openDialog<T>(options: OpenCustomWidgetOptions, Component: React.SFC<{
+export declare function openDialog<T>(options: OpenCustomWidgetOptions, Component: React.FC<{
     onClose: (result: T) => void;
 }>): Promise<unknown>;
 declare const _default: {

package/dist/types/PredefinedValuesError.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare function PredefinedValuesError(): JSX.Element;
+import * as React from 'react';
+export declare function PredefinedValuesError(): React.JSX.Element;

package/dist/types/index.d.ts

@@ -10,6 +10,7 @@ export { shortenStorageUnit, toLocaleString } from './utils/shortenStorageUnit';
 export { ModalDialogLauncher };
 export { entityHelpers };
 export { ConstraintsUtils };
+export * from './LocalePublishingEntityStatusBadge';
 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": "1.6.0",
+  "version": "1.7.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -36,11 +36,13 @@
   },
   "devDependencies": {
     "@contentful/app-sdk": "^4.29.0",
-    "@contentful/field-editor-test-utils": "^1.5.0"
+    "@contentful/field-editor-test-utils": "^1.5.2"
   },
   "dependencies": {
-    "@contentful/f36-note": "^4.2.8",
-    "@contentful/f36-tokens": "^4.0.0",
+    "@contentful/f36-components": "^4.70.0",
+    "@contentful/f36-note": "^4.70.0",
+    "@contentful/f36-tokens": "^4.0.5",
+    "contentful-management": "^11.35.1",
     "emotion": "^10.0.17",
     "fast-deep-equal": "^3.1.3",
     "lodash": "^4.17.15"
@@ -52,5 +54,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "6598ec65e210c4e84bed073f8b50c8bdb883a9a4"
+  "gitHead": "d734036ff89da141dbb91ade0342fb7f82cfe167"
 }