strapi-plugin-navigation 2.1.0-beta.2 → 2.2.1

package/admin/src/hooks/useNavigationManager.js

@@ -0,0 +1,41 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavigationManager = void 0;
+const react_1 = __importStar(require("react"));
+const NavigationManager_1 = require("../pages/View/components/NavigationManager");
+const useNavigationManager = () => {
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const open = (0, react_1.useCallback)(() => setIsOpened(true), [setIsOpened]);
+    const close = (0, react_1.useCallback)(() => setIsOpened(false), [setIsOpened]);
+    const modal = (0, react_1.useMemo)(() => isOpened ? (react_1.default.createElement(NavigationManager_1.NavigationManager, { initialState: { view: "INITIAL" }, isOpened: true, onClose: close })) : null, [isOpened, close]);
+    return (0, react_1.useMemo)(() => ({
+        navigationManagerModal: modal,
+        openNavigationManagerModal: open,
+        closeNavigationManagerModal: close,
+    }), [modal, open, close]);
+};
+exports.useNavigationManager = useNavigationManager;
+//# sourceMappingURL=useNavigationManager.js.map

package/admin/src/pages/DataManagerProvider/index.d.ts

@@ -1,4 +1,4 @@
-declare var _default: React.MemoExoticComponent<{
+declare const _default: React.MemoExoticComponent<{
     ({ children }: {
         children: any;
     }): JSX.Element;

package/admin/src/pages/DataManagerProvider/index.js

@@ -33,12 +33,13 @@ const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = require("lodash");
 const helper_plugin_1 = require("@strapi/helper-plugin");
 const DataManagerContext_1 = __importDefault(require("../../contexts/DataManagerContext"));
-const getTrad_1 = __importDefault(require("../../utils/getTrad"));
 const pluginId_1 = __importDefault(require("../../pluginId"));
 const init_1 = __importDefault(require("./init"));
+const translations_1 = require("../../translations");
 const reducer_1 = __importStar(require("./reducer"));
 const actions_1 = require("./actions");
 const parsers_1 = require("../View/utils/parsers");
+const utils_1 = require("../../utils");
 const i18nAwareItems = ({ items, config }) => config.i18nEnabled ? items.filter(({ localeCode }) => localeCode === config.defaultLocale) : items;
 const DataManagerProvider = ({ children }) => {
     const [reducerState, dispatch] = (0, react_1.useReducer)(reducer_1.default, reducer_1.initialState, init_1.default);
@@ -60,7 +61,7 @@ const DataManagerProvider = ({ children }) => {
     const passedActiveItems = (0, react_1.useMemo)(() => {
         return i18nAwareItems({ config, items });
     }, [config, items]);
-    const getNavigation = async (id, cfg) => {
+    const getNavigation = async (id, navigationConfig) => {
         try {
             if (activeId || id) {
                 dispatch({
@@ -74,7 +75,10 @@ const DataManagerProvider = ({ children }) => {
                     type: actions_1.GET_NAVIGATION_DATA_SUCCEEDED,
                     activeItem: {
                         ...activeItem,
-                        items: (0, parsers_1.prepareItemToViewPayload)(activeItem.items, null, cfg),
+                        items: (0, parsers_1.prepareItemToViewPayload)({
+                            config: navigationConfig,
+                            items: activeItem.items,
+                        }),
                     },
                 });
             }
@@ -83,7 +87,7 @@ const DataManagerProvider = ({ children }) => {
             console.error({ err });
             toggleNotification({
                 type: 'warning',
-                message: { id: (0, getTrad_1.default)('notification.error') },
+                message: (0, translations_1.getTrad)('notification.error'),
             });
         }
     };
@@ -119,7 +123,7 @@ const DataManagerProvider = ({ children }) => {
             console.error({ err });
             toggleNotification({
                 type: 'warning',
-                message: { id: (0, getTrad_1.default)('notification.error') },
+                message: (0, translations_1.getTrad)('notification.error'),
             });
         }
     };
@@ -135,7 +139,7 @@ const DataManagerProvider = ({ children }) => {
         if (!autoReload) {
             toggleNotification({
                 type: 'info',
-                message: { id: (0, getTrad_1.default)('notification.info.autoreaload-disable') },
+                message: { id: 'notification.info.autoreaload-disable' },
             });
         }
     }, [autoReload]);
@@ -186,6 +190,26 @@ const DataManagerProvider = ({ children }) => {
         });
         handleChangeSelection(targetId);
     };
+    const readNavigationItemFromLocale = async ({ locale, structureId }) => {
+        try {
+            const source = changedActiveItem.localizations?.find((navigation) => navigation.locale === locale);
+            if (!source) {
+                return (0, utils_1.errorStatusResourceFor)(['popup.item.form.i18n.locale.error.unavailable']);
+            }
+            const url = `/navigation/i18n/item/read/${source.id}/${changedActiveItem.id}?path=${structureId}`;
+            return (0, utils_1.resolvedResourceFor)(await (0, helper_plugin_1.request)(url, {
+                method: "GET",
+                signal,
+            }));
+        }
+        catch (error) {
+            let messageKey;
+            if (error instanceof Error) {
+                messageKey = (0, lodash_1.get)(error, 'response.payload.error.details.messageKey');
+            }
+            return (0, utils_1.errorStatusResourceFor)([messageKey ?? 'popup.item.form.i18n.locale.error.generic']);
+        }
+    };
     const handleChangeNavigationPopupVisibility = (visible) => {
         dispatch({
             type: actions_1.CHANGE_NAVIGATION_POPUP_VISIBILITY,
@@ -227,12 +251,15 @@ const DataManagerProvider = ({ children }) => {
                 type: actions_1.SUBMIT_NAVIGATION_SUCCEEDED,
                 navigation: {
                     ...navigation,
-                    items: (0, parsers_1.prepareItemToViewPayload)(navigation.items, null, config),
+                    items: (0, parsers_1.prepareItemToViewPayload)({
+                        config,
+                        items: navigation.items,
+                    }),
                 },
             });
             toggleNotification({
                 type: 'success',
-                message: { id: (0, getTrad_1.default)('notification.navigation.submit') },
+                message: (0, translations_1.getTrad)('notification.navigation.submit'),
             });
         }
         catch (err) {
@@ -245,16 +272,22 @@ const DataManagerProvider = ({ children }) => {
                 return toggleNotification({
                     type: 'warning',
                     message: {
-                        id: formatMessage((0, getTrad_1.default)('notification.navigation.error'), { ...err.response.payload.data, errorTitles: err.response.payload.data.errorTitles.join(' and ') })
+                        id: formatMessage((0, translations_1.getTrad)('notification.navigation.error'), { ...err.response.payload.data, errorTitles: err.response.payload.data.errorTitles.join(' and ') })
                     },
                 });
             }
             toggleNotification({
                 type: 'warning',
-                message: { id: (0, getTrad_1.default)('notification.error') },
+                message: (0, translations_1.getTrad)('notification.error'),
             });
         }
     };
+    const handleNavigationsDeletion = (ids) => Promise.all(ids.map(handleNavigationDeletion));
+    const handleNavigationDeletion = (id) => (0, helper_plugin_1.request)(`/${pluginId_1.default}/${id}`, {
+        method: "DELETE",
+        signal,
+    });
+    const hardReset = () => getDataRef.current();
     return (react_1.default.createElement(DataManagerContext_1.default.Provider, { value: {
             items: passedActiveItems,
             activeItem,
@@ -280,6 +313,9 @@ const DataManagerProvider = ({ children }) => {
             isInDevelopmentMode,
             error,
             availableLocale,
+            readNavigationItemFromLocale,
+            handleNavigationsDeletion,
+            hardReset,
         } }, isLoading ? react_1.default.createElement(helper_plugin_1.LoadingIndicatorPage, null) : children));
 };
 DataManagerProvider.propTypes = {

package/admin/src/pages/SettingsPage/components/CustomFieldForm/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Effect, NavigationItemCustomField, VoidEffect } from '../../../../../../types';
+interface ICustomFieldFormProps {
+    customField: Partial<NavigationItemCustomField>;
+    isEditForm: boolean;
+    onSubmit: Effect<NavigationItemCustomField>;
+    onClose: VoidEffect;
+    usedCustomFieldNames: string[];
+}
+declare const CustomFieldForm: React.FC<ICustomFieldFormProps>;
+export default CustomFieldForm;
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/SettingsPage/components/CustomFieldForm/index.js

@@ -0,0 +1,112 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const ModalLayout_1 = require("@strapi/design-system/ModalLayout");
+const Button_1 = require("@strapi/design-system/Button");
+const helper_plugin_1 = require("@strapi/helper-plugin");
+const Grid_1 = require("@strapi/design-system/Grid");
+const formik_1 = require("formik");
+const formDefinition = __importStar(require("../../utils/form"));
+const utils_1 = require("../../../../utils");
+const lodash_1 = require("lodash");
+const translations_1 = require("../../../../translations");
+const TextArrayInput_1 = __importDefault(require("../../../../components/TextArrayInput"));
+const tradPrefix = 'pages.settings.form.customFields.popup.';
+const customFieldsTypes = ["string", "boolean", "select"];
+const prepareSelectOptions = (options) => options.map((option, index) => ({
+    key: index,
+    metadatas: {
+        intlLabel: {
+            id: option,
+            defaultMessage: option,
+        }
+    },
+    value: option,
+    label: option,
+}));
+const CustomFieldForm = ({ isEditForm, customField, onSubmit, onClose, usedCustomFieldNames }) => {
+    const typeSelectOptions = prepareSelectOptions(customFieldsTypes);
+    const initialValues = (0, react_1.useMemo)(() => {
+        if ((0, lodash_1.isNil)(customField.type)) {
+            return formDefinition.defaultValues;
+        }
+        else if (customField.type === 'select') {
+            return {
+                type: customField.type,
+                name: customField.name || formDefinition.defaultValues.name,
+                label: customField.label || formDefinition.defaultValues.label,
+                required: customField.required || formDefinition.defaultValues.required,
+                options: customField.options || formDefinition.defaultValues.options,
+                multi: customField.multi || formDefinition.defaultValues.multi,
+            };
+        }
+        else {
+            return {
+                type: customField.type,
+                name: customField.name || formDefinition.defaultValues.name,
+                label: customField.label || formDefinition.defaultValues.label,
+                required: customField.required || formDefinition.defaultValues.required,
+                options: [],
+                multi: false,
+            };
+        }
+    }, [customField]);
+    const { handleChange, setFieldValue, values, errors, handleSubmit, isSubmitting, } = (0, formik_1.useFormik)({
+        initialValues,
+        onSubmit,
+        validationSchema: formDefinition.schemaFactory(usedCustomFieldNames),
+        validateOnChange: false,
+    });
+    const defaultProps = (0, react_1.useCallback)((fieldName) => ({
+        intlLabel: (0, translations_1.getTrad)(`${tradPrefix}${fieldName}.label`),
+        onChange: handleChange,
+        name: fieldName,
+        value: values[fieldName],
+        error: errors[fieldName],
+    }), [values, errors, handleChange]);
+    return (react_1.default.createElement("form", null,
+        react_1.default.createElement(ModalLayout_1.ModalBody, null,
+            react_1.default.createElement(Grid_1.Grid, { gap: 5 },
+                react_1.default.createElement(Grid_1.GridItem, { key: "name", col: 12 },
+                    react_1.default.createElement(helper_plugin_1.GenericInput, { ...defaultProps("name"), autoFocused: true, placeholder: (0, translations_1.getTrad)(`${tradPrefix}name.placeholder`), description: (0, translations_1.getTrad)(`${tradPrefix}name.description`), type: "text", disabled: isEditForm })),
+                react_1.default.createElement(Grid_1.GridItem, { key: "label", col: 12 },
+                    react_1.default.createElement(helper_plugin_1.GenericInput, { ...defaultProps("label"), placeholder: (0, translations_1.getTrad)(`${tradPrefix}label.placeholder`), description: (0, translations_1.getTrad)(`${tradPrefix}label.description`), type: "text" })),
+                react_1.default.createElement(Grid_1.GridItem, { key: "type", col: 12 },
+                    react_1.default.createElement(helper_plugin_1.GenericInput, { ...defaultProps("type"), options: typeSelectOptions, type: "select", disabled: isEditForm })),
+                values.type === 'select' && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(Grid_1.GridItem, { key: "multi", col: 12 },
+                        react_1.default.createElement(helper_plugin_1.GenericInput, { ...defaultProps("multi"), type: "bool" })),
+                    react_1.default.createElement(Grid_1.GridItem, { key: "options", col: 12 },
+                        react_1.default.createElement(TextArrayInput_1.default, { ...defaultProps("options"), onChange: v => setFieldValue("options", v), label: (0, utils_1.getMessage)(`${tradPrefix}options.label`), initialValue: values.options })))),
+                react_1.default.createElement(Grid_1.GridItem, { key: "required", col: 12 },
+                    react_1.default.createElement(helper_plugin_1.GenericInput, { ...defaultProps("required"), type: "bool", description: (0, translations_1.getTrad)(`${tradPrefix}required.description`) })))),
+        react_1.default.createElement(ModalLayout_1.ModalFooter, { startActions: react_1.default.createElement(Button_1.Button, { onClick: onClose, variant: "tertiary" }, (0, utils_1.getMessage)('popup.item.form.button.cancel')), endActions: react_1.default.createElement(Button_1.Button, { onClick: handleSubmit, disabled: !(0, lodash_1.isEmpty)(errors) || isSubmitting }, (0, utils_1.getMessage)(`popup.item.form.button.save`)) })));
+};
+exports.default = CustomFieldForm;
+//# sourceMappingURL=index.js.map

package/admin/src/pages/SettingsPage/components/CustomFieldModal/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Effect, NavigationItemCustomField, VoidEffect } from '../../../../../../types';
+interface ICustomFieldModalProps {
+    data: NavigationItemCustomField | null;
+    isOpen: boolean;
+    onClose: VoidEffect;
+    onSubmit: Effect<NavigationItemCustomField>;
+    usedCustomFieldNames: string[];
+}
+declare const CustomFieldModal: React.FC<ICustomFieldModalProps>;
+export default CustomFieldModal;
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/SettingsPage/components/CustomFieldModal/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Typography_1 = require("@strapi/design-system/Typography");
+const ModalLayout_1 = require("@strapi/design-system/ModalLayout");
+const CustomFieldForm_1 = __importDefault(require("../CustomFieldForm"));
+const utils_1 = require("../../../../utils");
+const lodash_1 = require("lodash");
+const CustomFieldModal = ({ isOpen, onClose, onSubmit, data, usedCustomFieldNames, }) => {
+    const isEditMode = !!data;
+    return (react_1.default.createElement(ModalLayout_1.ModalLayout, { onClose: onClose, isOpen: isOpen, labelledBy: "custom-field-modal" },
+        react_1.default.createElement(ModalLayout_1.ModalHeader, null,
+            react_1.default.createElement(Typography_1.Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", as: "h2", id: "asset-dialog-title" }, (0, utils_1.getMessage)(`pages.settings.form.customFields.popup.header.${isEditMode ? 'edit' : 'new'}`))),
+        react_1.default.createElement(CustomFieldForm_1.default, { isEditForm: isEditMode, customField: (0, lodash_1.pick)(data, "name", "label", "type", "required", "options", "multi"), onSubmit: onSubmit, onClose: onClose, usedCustomFieldNames: usedCustomFieldNames })));
+};
+exports.default = CustomFieldModal;
+//# sourceMappingURL=index.js.map

package/admin/src/pages/SettingsPage/components/CustomFieldTable/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Effect, NavigationItemCustomField } from '../../../../../../types';
+interface ICustomFieldTableProps {
+    data: NavigationItemCustomField[];
+    onOpenModal: (field: NavigationItemCustomField | null) => void;
+    onRemoveCustomField: Effect<NavigationItemCustomField>;
+    onToggleCustomField: Effect<NavigationItemCustomField>;
+}
+declare const CustomFieldTable: React.FC<ICustomFieldTableProps>;
+export default CustomFieldTable;
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/SettingsPage/components/CustomFieldTable/index.js

@@ -0,0 +1,105 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = require("lodash");
+const react_1 = __importStar(require("react"));
+const helper_plugin_1 = require("@strapi/helper-plugin");
+const VisuallyHidden_1 = require("@strapi/design-system/VisuallyHidden");
+const Table_1 = require("@strapi/design-system/Table");
+const icons_1 = require("@strapi/icons");
+const Typography_1 = require("@strapi/design-system/Typography");
+const Tooltip_1 = require("@strapi/design-system/Tooltip");
+const Stack_1 = require("@strapi/design-system/Stack");
+const IconButton_1 = require("@strapi/design-system/IconButton");
+const utils_1 = require("../../../../utils");
+const ConfirmationDialog_1 = __importDefault(require("../../../../components/ConfirmationDialog"));
+const translations_1 = require("../../../../translations");
+const refreshIcon = react_1.default.createElement(icons_1.Refresh, null);
+const plusIcon = react_1.default.createElement(icons_1.Plus, null);
+const tradPrefix = "pages.settings.form.customFields.table.";
+const CustomFieldTable = ({ data, onOpenModal, onRemoveCustomField, onToggleCustomField, }) => {
+    const [confirmationVisible, setIsConfirmationVisible] = (0, react_1.useState)(false);
+    const [fieldToRemove, setFieldToRemove] = (0, react_1.useState)(null);
+    const toggleNotification = (0, helper_plugin_1.useNotification)();
+    const customFields = (0, react_1.useMemo)(() => (0, lodash_1.sortBy)(data, "name"), [data]);
+    const handleRemove = (0, react_1.useCallback)((field) => {
+        setFieldToRemove(field);
+        setIsConfirmationVisible(true);
+    }, [setFieldToRemove, setIsConfirmationVisible]);
+    const cleanup = (0, react_1.useCallback)(() => {
+        setFieldToRemove(null);
+        setIsConfirmationVisible(false);
+    }, [setFieldToRemove, setIsConfirmationVisible]);
+    const handleConfirm = (0, react_1.useCallback)(() => {
+        if (fieldToRemove === null) {
+            toggleNotification({
+                type: 'warning',
+                message: {
+                    id: (0, translations_1.getTradId)(`${tradPrefix}confirmation.error`),
+                    default: 'Something went wrong',
+                }
+            });
+        }
+        else {
+            onRemoveCustomField(fieldToRemove);
+        }
+        cleanup();
+    }, [cleanup, fieldToRemove, translations_1.getTradId, onRemoveCustomField, toggleNotification]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ConfirmationDialog_1.default, { isVisible: confirmationVisible, header: (0, utils_1.getMessage)(`${tradPrefix}confirmation.header`), children: (0, utils_1.getMessage)(`${tradPrefix}confirmation.message`), labelConfirm: (0, utils_1.getMessage)(`${tradPrefix}confirmation.confirm`), iconConfirm: refreshIcon, mainIcon: refreshIcon, onConfirm: handleConfirm, onCancel: cleanup }),
+        react_1.default.createElement(Table_1.Table, { colCount: 4, rowCount: data.length + 1, footer: react_1.default.createElement(Table_1.TFooter, { onClick: (e) => { e.preventDefault(); onOpenModal(null); }, icon: plusIcon }, (0, utils_1.getMessage)(`${tradPrefix}footer`)) },
+            react_1.default.createElement(Table_1.Thead, null,
+                react_1.default.createElement(Table_1.Tr, null,
+                    react_1.default.createElement(Table_1.Th, { width: "20%" },
+                        react_1.default.createElement(Typography_1.Typography, { variant: "sigma", textColor: "neutral600" }, (0, utils_1.getMessage)(`${tradPrefix}header.name`))),
+                    react_1.default.createElement(Table_1.Th, { width: "60%" },
+                        react_1.default.createElement(Typography_1.Typography, { variant: "sigma", textColor: "neutral600" }, (0, utils_1.getMessage)(`${tradPrefix}header.label`))),
+                    react_1.default.createElement(Table_1.Th, { width: "15%" },
+                        react_1.default.createElement(Typography_1.Typography, { variant: "sigma", textColor: "neutral600" }, (0, utils_1.getMessage)(`${tradPrefix}header.type`))),
+                    react_1.default.createElement(Table_1.Th, { width: "5%" },
+                        react_1.default.createElement(Typography_1.Typography, { variant: "sigma", textColor: "neutral600" }, (0, utils_1.getMessage)(`${tradPrefix}header.required`))),
+                    react_1.default.createElement(Table_1.Th, null,
+                        react_1.default.createElement(VisuallyHidden_1.VisuallyHidden, null)))),
+            react_1.default.createElement(Table_1.Tbody, null, customFields.map(customField => (react_1.default.createElement(Table_1.Tr, { key: customField.name },
+                react_1.default.createElement(Table_1.Td, { width: '20%' },
+                    react_1.default.createElement(Typography_1.Typography, { fontWeight: "semiBold", textColor: "neutral800" }, customField.name)),
+                react_1.default.createElement(Table_1.Td, { width: "60%" },
+                    react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, customField.label)),
+                react_1.default.createElement(Table_1.Td, { width: "15%" },
+                    react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, customField.type)),
+                react_1.default.createElement(Table_1.Td, { width: "5%" },
+                    react_1.default.createElement(Tooltip_1.Tooltip, { description: (0, utils_1.getMessage)(`${tradPrefix}${customField.required ? "required" : "notRequired"}`) },
+                        react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, customField.required ? react_1.default.createElement(icons_1.Check, null) : react_1.default.createElement(icons_1.Minus, null)))),
+                react_1.default.createElement(Table_1.Td, null,
+                    react_1.default.createElement(Stack_1.Stack, { horizontal: true, size: 1 },
+                        react_1.default.createElement(IconButton_1.IconButton, { onClick: () => onOpenModal(customField), label: (0, utils_1.getMessage)(`${tradPrefix}edit`), icon: react_1.default.createElement(icons_1.Pencil, null), noBorder: true }),
+                        react_1.default.createElement(IconButton_1.IconButton, { onClick: () => onToggleCustomField(customField), label: (0, utils_1.getMessage)(`${tradPrefix}${customField.enabled ? 'disable' : 'enable'}`), icon: customField.enabled ? react_1.default.createElement(icons_1.Eye, null) : react_1.default.createElement(icons_1.EyeStriked, null), noBorder: true }),
+                        react_1.default.createElement(IconButton_1.IconButton, { onClick: () => handleRemove(customField), label: (0, utils_1.getMessage)(`${tradPrefix}remove`), icon: react_1.default.createElement(icons_1.Trash, null), noBorder: true }))))))))));
+};
+exports.default = CustomFieldTable;
+//# sourceMappingURL=index.js.map

package/admin/src/pages/SettingsPage/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
+declare const SettingsPage: () => JSX.Element;
 export default SettingsPage;
-declare function SettingsPage(): JSX.Element;
 //# sourceMappingURL=index.d.ts.map