@knovator/pagecreator-admin 0.3.2 → 0.4.0

package/index.cjs

@@ -1680,6 +1680,7 @@ const DEFAULT_PERMISSIONS = {
   update: true
 };
 const TRANSLATION_PAIRS_COMMON = {
+  confirmationRequired: 'Confirmation Required',
   permanentlyDelete: 'You are about to permanently delete the',
   lossOfData: 'This action can lead to data loss. To prevent accidental actions we ask you to confirm your intention.',
   pleaseType: 'Please type',
@@ -1697,7 +1698,8 @@ const TRANSLATION_PAIRS_COMMON = {
   deleteButtonText: 'Delete',
   saveButtonText: 'Save',
   showing: 'Showing',
-  of: 'of'
+  of: 'of',
+  typeHerePlaceholder: 'Type Here'
 };
 const TRANSLATION_PAIRS_WIDGET = {
   'widget.name': 'Name',
@@ -1710,6 +1712,7 @@ const TRANSLATION_PAIRS_WIDGET = {
   'widget.itemsTypePlaceholder': 'Select Items Type',
   'widget.widgetType': 'Widget Type',
   'widget.widgetTypeRequired': 'Widget Type is required',
+  'widget.color': 'Color',
   'widget.code': 'Code',
   'widget.codePlaceholder': 'Enter code',
   'widget.codeRequired': 'Code is required',
@@ -1735,6 +1738,8 @@ const TRANSLATION_PAIRS_WIDGET = {
 const TRANSLATION_PAIRS_ITEM = {
   'item.title': 'Title',
   'item.titlePlaceholder': 'Enter title',
+  'item.subtitle': 'Subtitle',
+  'item.subTitlePlaceholder': 'Enter Subtitle',
   'item.altText': 'Alt Text',
   'item.altTextPlaceholder': 'Enter alt text',
   'item.link': 'Link',
@@ -2768,8 +2773,9 @@ const getApiType = ({
 };
 
 const usePage = ({
-  defaultLimit,
   routes,
+  defaultLimit,
+  canList: _canList = true,
   preConfirmDelete
 }) => {
   const [list, setList] = React.useState([]);
@@ -2975,10 +2981,10 @@ const usePage = ({
     });
   };
   React.useEffect(() => {
-    getPages();
+    if (_canList) getPages();
     getWidgets();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pageSize, currentPage]);
+  }, [pageSize, currentPage, _canList]);
   return {
     list,
     getPages,
@@ -3080,21 +3086,6 @@ function usePageState() {
   return context;
 }
 
-const Button = ({
-  type: _type = 'primary',
-  size: _size = 'base',
-  onClick,
-  className,
-  children,
-  disabled
-}) => {
-  return /*#__PURE__*/React__default["default"].createElement("button", {
-    className: classNames__default["default"]('khb_btn', `khb_btn-${_type}`, `khb_btn-${_size}`, className),
-    onClick: onClick,
-    disabled: disabled
-  }, children);
-};
-
 const Pencil = ({
   srText,
   className
@@ -3161,7 +3152,7 @@ const Table = ({
   }, loader) : /*#__PURE__*/React__default["default"].createElement("table", {
     className: "khb_table"
   }, /*#__PURE__*/React__default["default"].createElement("thead", {
-    className: "khb_table-thead"
+    className: "khb_thead"
   }, /*#__PURE__*/React__default["default"].createElement("tr", null, dataKeys.map((key, i) => /*#__PURE__*/React__default["default"].createElement("th", {
     scope: "col",
     className: "khb_table-heading",
@@ -3169,17 +3160,22 @@ const Table = ({
   }, key.label)), actions && ((actions === null || actions === void 0 ? void 0 : actions.edit) || (actions === null || actions === void 0 ? void 0 : actions.delete)) && /*#__PURE__*/React__default["default"].createElement("th", {
     scope: "col",
     className: "khb_table-heading"
-  }, "Actions"))), /*#__PURE__*/React__default["default"].createElement("tbody", null, data.length > 0 ? data.map((item, i) => /*#__PURE__*/React__default["default"].createElement("tr", {
+  }, "Actions"))), /*#__PURE__*/React__default["default"].createElement("tbody", {
+    className: "khb_tbody"
+  }, data.length > 0 ? data.map((item, i) => /*#__PURE__*/React__default["default"].createElement("tr", {
     className: "khb_table-row",
     key: item['id'] || item['_id'] || i
   }, dataKeys.map((key, j) => cellItemRenderer(item, key, j)), actions && /*#__PURE__*/React__default["default"].createElement("td", {
     className: "khb_table-row-actions"
-  }, actions.edit && /*#__PURE__*/React__default["default"].createElement(Button, {
-    size: "xs",
+  }, actions.edit && typeof actions.edit === 'function' ? /*#__PURE__*/React__default["default"].createElement("button", {
+    className: "khb_actions-update",
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     onClick: () => actions.edit(item)
-  }, /*#__PURE__*/React__default["default"].createElement(Pencil, null)), actions.delete && /*#__PURE__*/React__default["default"].createElement(Button, {
-    size: "xs",
-    type: "danger",
+  }, /*#__PURE__*/React__default["default"].createElement(Pencil, null)) : null, actions.delete && typeof actions.delete === 'function' && /*#__PURE__*/React__default["default"].createElement("button", {
+    className: "khb_actions-delete",
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     onClick: () => actions.delete(item)
   }, /*#__PURE__*/React__default["default"].createElement(Trash, null))))) : /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
     colSpan: ((dataKeys === null || dataKeys === void 0 ? void 0 : dataKeys.length) || 0) + 1
@@ -3189,7 +3185,6 @@ const Table = ({
 const PageTable = () => {
   const {
     list,
-    canList,
     onChangeFormState,
     t,
     loading,
@@ -3199,26 +3194,23 @@ const PageTable = () => {
   } = usePageState();
   const onUpdateClick = item => onChangeFormState('UPDATE', item);
   const onDeleteClick = item => onChangeFormState('DELETE', item);
-  if (Array.isArray(list) && canList) {
-    return /*#__PURE__*/React__default["default"].createElement(Table, {
-      data: list,
-      loader: loader,
-      loading: loading,
-      dataKeys: [{
-        label: t('page.tableName'),
-        dataKey: 'name',
-        highlight: true
-      }, {
-        label: t('page.tableCode'),
-        dataKey: 'code'
-      }],
-      actions: {
-        edit: canUpdate ? onUpdateClick : undefined,
-        delete: canDelete ? onDeleteClick : undefined
-      }
-    });
-  }
-  return null;
+  return /*#__PURE__*/React__default["default"].createElement(Table, {
+    data: list,
+    loader: loader,
+    loading: loading,
+    dataKeys: [{
+      label: t('page.tableName'),
+      dataKey: 'name',
+      highlight: true
+    }, {
+      label: t('page.tableCode'),
+      dataKey: 'code'
+    }],
+    actions: {
+      edit: canUpdate ? onUpdateClick : undefined,
+      delete: canDelete ? onDeleteClick : undefined
+    }
+  });
 };
 
 const Checkbox = ({
@@ -3520,10 +3512,11 @@ var Input = Object.assign(Input$1, {
 const PageSearch = () => {
   const {
     getPages,
-    t
+    t,
+    canList
   } = usePageState();
   const callerRef = React.useRef(null);
-  const [search, setSearch] = React.useState("");
+  const [search, setSearch] = React.useState('');
   const onChangeSearch = str => {
     setSearch(str);
     if (callerRef.current) clearTimeout(callerRef.current);
@@ -3534,8 +3527,9 @@ const PageSearch = () => {
   return /*#__PURE__*/React__default["default"].createElement(Input, {
     type: "search",
     value: search,
+    disabled: !canList,
     onChange: e => onChangeSearch(e.target.value),
-    placeholder: t("page.searchPages")
+    placeholder: t('page.searchPages')
   });
 };
 
@@ -3931,13 +3925,14 @@ const SimpleForm = /*#__PURE__*/React.forwardRef(({
         case 'text':
         case 'number':
         case 'url':
+        case 'color':
         default:
           input = /*#__PURE__*/React__default["default"].createElement(Input, {
             rest: register(schema.accessor, schema.validations || {}),
             label: schema.label,
             error: (_f = (_e = errors[schema.accessor]) === null || _e === void 0 ? void 0 : _e.message) === null || _f === void 0 ? void 0 : _f.toString(),
             type: schema.type,
-            className: "w-full p-2",
+            className: classNames__default["default"]('w-full p-2', schema.className),
             placeholder: schema.placeholder,
             disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
             required: schema.required,
@@ -4104,6 +4099,21 @@ const PageForm = ({
   }));
 };
 
+const Button = ({
+  type: _type = 'primary',
+  size: _size = 'base',
+  onClick,
+  className,
+  children,
+  disabled
+}) => {
+  return /*#__PURE__*/React__default["default"].createElement("button", {
+    className: classNames__default["default"]('khb_btn', `khb_btn-${_type}`, `khb_btn-${_size}`, className),
+    onClick: onClick,
+    disabled: disabled
+  }, children);
+};
+
 const AddButton$1 = () => {
   const {
     onChangeFormState,
@@ -4154,7 +4164,9 @@ const Pagination = ({
   setCurrentPage,
   showingText: _showingText = TRANSLATION_PAIRS_COMMON.showing,
   pageText: _pageText = TRANSLATION_PAIRS_COMMON.page,
-  ofText: _ofText = TRANSLATION_PAIRS_COMMON.of
+  ofText: _ofText = TRANSLATION_PAIRS_COMMON.of,
+  previousContent,
+  nextContent
 }) => {
   const [localCurrentPage, setLocalCurrentPage] = React.useState(currentPage);
   const updatePagination = () => {
@@ -4185,16 +4197,17 @@ const Pagination = ({
     className: "khb_pagination-total"
   }, _showingText, ' ', /*#__PURE__*/React__default["default"].createElement("span", {
     className: "khb_pagination-total-showing"
-  }, (currentPage - 1) * pageSize + 1), ' ', "-", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
+  }, !totalRecords ? 0 : (currentPage - 1) * pageSize + 1), ' ', "-", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
     className: "khb_pagination-total-showing"
   }, Math.min(currentPage * pageSize, totalRecords)), ' ', _ofText, " ", totalRecords), /*#__PURE__*/React__default["default"].createElement("ul", {
     className: "khb_pagination-actions"
   }, /*#__PURE__*/React__default["default"].createElement(Button, {
     size: "xs",
     type: "secondary",
+    className: "khb_pagination-previous",
     disabled: currentPage - 1 === 0,
     onClick: () => onPaginationButtonClick('previous')
-  }, /*#__PURE__*/React__default["default"].createElement(ChevronLeft, {
+  }, previousContent || /*#__PURE__*/React__default["default"].createElement(ChevronLeft, {
     srText: "Previous"
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_pagination-pager"
@@ -4205,13 +4218,15 @@ const Pagination = ({
     id: "page",
     value: localCurrentPage,
     onChange: e => setLocalCurrentPage(Number(e.target.value)),
-    onBlur: updatePagination
+    onBlur: updatePagination,
+    disabled: !totalRecords
   }), ' ', "/ ", totalPages), /*#__PURE__*/React__default["default"].createElement(Button, {
     size: "xs",
     type: "secondary",
-    disabled: currentPage === totalPages,
+    className: "khb_pagination-next",
+    disabled: currentPage === totalPages || !totalRecords,
     onClick: () => onPaginationButtonClick('next')
-  }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, {
+  }, nextContent || /*#__PURE__*/React__default["default"].createElement(ChevronRight, {
     srText: "Next"
   }))));
 };
@@ -4226,9 +4241,11 @@ const PagePagination = () => {
     setCurrentPage
   } = usePageState();
   return /*#__PURE__*/React__default["default"].createElement(Pagination, {
-    ofText: t("of"),
-    pageText: t("page"),
-    showingText: t("showing"),
+    ofText: t('of'),
+    pageText: t('page'),
+    showingText: t('showing'),
+    nextContent: t('nextContent'),
+    previousContent: t('previousContent'),
     totalPages: totalPages,
     totalRecords: totalRecords,
     currentPage: currentPage,
@@ -4292,11 +4309,13 @@ const DeleteModal = ({
   onClose,
   itemData,
   onConfirmDelete,
-  permanentlyDelete: _permanentlyDelete = TRANSLATION_PAIRS_COMMON.permanentlyDelete,
-  lossOfData: _lossOfData = TRANSLATION_PAIRS_COMMON.lossOfData,
-  pleaseType: _pleaseType = TRANSLATION_PAIRS_COMMON.pleaseType,
-  toProceedOrCancel: _toProceedOrCancel = TRANSLATION_PAIRS_COMMON.toProceedOrCancel,
-  confirm: _confirm = TRANSLATION_PAIRS_COMMON.confirm
+  confirmationRequired,
+  permanentlyDelete,
+  lossOfData,
+  pleaseType,
+  toProceedOrCancel,
+  confirm,
+  typeHerePlaceholder
 }) => {
   const [userInput, setUserInput] = React.useState('');
   React.useEffect(() => {
@@ -4305,19 +4324,19 @@ const DeleteModal = ({
   return itemData ? /*#__PURE__*/React__default["default"].createElement(Modal, {
     open: formState === 'DELETE' && itemData ? true : false,
     onClose: onClose,
-    title: "Confirmation Required"
+    title: confirmationRequired || TRANSLATION_PAIRS_COMMON.confirmationRequired
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_delete-header"
-  }, /*#__PURE__*/React__default["default"].createElement("p", null, _permanentlyDelete, " ", /*#__PURE__*/React__default["default"].createElement("b", null, itemData['name']))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("p", null, permanentlyDelete || TRANSLATION_PAIRS_COMMON.permanentlyDelete, ' ', /*#__PURE__*/React__default["default"].createElement("b", null, itemData['name']))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_delete-content"
-  }, /*#__PURE__*/React__default["default"].createElement("p", null, _lossOfData), /*#__PURE__*/React__default["default"].createElement("p", {
+  }, /*#__PURE__*/React__default["default"].createElement("p", null, lossOfData || TRANSLATION_PAIRS_COMMON.lossOfData), /*#__PURE__*/React__default["default"].createElement("p", {
     className: "khb_delete-note"
-  }, _pleaseType, ' ', /*#__PURE__*/React__default["default"].createElement("b", {
+  }, pleaseType || TRANSLATION_PAIRS_COMMON.pleaseType, ' ', /*#__PURE__*/React__default["default"].createElement("b", {
     className: "text-black font-bold"
-  }, itemData['name']), ' ', _toProceedOrCancel)), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, itemData['name']), ' ', toProceedOrCancel || TRANSLATION_PAIRS_COMMON.toProceedOrCancel)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_delete-actions"
   }, /*#__PURE__*/React__default["default"].createElement(Input, {
-    placeholder: "Type Here",
+    placeholder: typeHerePlaceholder || TRANSLATION_PAIRS_COMMON.typeHerePlaceholder,
     className: "khb_delete-input",
     value: userInput,
     onChange: e => setUserInput(e.target.value)
@@ -4326,7 +4345,7 @@ const DeleteModal = ({
   }, /*#__PURE__*/React__default["default"].createElement(Button, {
     disabled: userInput !== (itemData === null || itemData === void 0 ? void 0 : itemData['name']),
     onClick: onConfirmDelete
-  }, _confirm)))) : null;
+  }, confirm || TRANSLATION_PAIRS_COMMON.confirm)))) : null;
 };
 
 const Drawer = ({
@@ -4382,7 +4401,7 @@ const Drawer = ({
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     className: "khb_drawer-header-title"
   }, title)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "relative flex-1 px-6 py-6 overflow-auto"
+    className: "khb_darwer-content"
   }, children), footerContent && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_drawer-footer"
   }, footerContent)))))));
@@ -4461,8 +4480,12 @@ const Page = ({
   loader,
   explicitForm: _explicitForm = false,
   children,
-  permissions: _permissions = DEFAULT_PERMISSIONS
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  permissions: _permissions = {},
+  preConfirmDelete
 }) => {
+  const derivedPermissions = Object.assign(DEFAULT_PERMISSIONS, _permissions);
   const formRef = React.useRef(null);
   const derivedT = createTranslation(t, Object.assign(Object.assign({}, TRANSLATION_PAIRS_COMMON), TRANSLATION_PAIRS_PAGE));
   const {
@@ -4485,7 +4508,9 @@ const Page = ({
     onChangeWidgetSequence,
     getPages
   } = usePage({
-    defaultLimit: 10
+    defaultLimit: 10,
+    preConfirmDelete,
+    canList: derivedPermissions.list
   });
   return /*#__PURE__*/React__default["default"].createElement(PageContextProvider, {
     t: derivedT,
@@ -4508,10 +4533,10 @@ const Page = ({
     formState: formState,
     closeForm: onCloseForm,
     // permissions
-    canAdd: _permissions === null || _permissions === void 0 ? void 0 : _permissions.add,
-    canDelete: _permissions === null || _permissions === void 0 ? void 0 : _permissions.delete,
-    canUpdate: _permissions === null || _permissions === void 0 ? void 0 : _permissions.update,
-    canList: _permissions === null || _permissions === void 0 ? void 0 : _permissions.list
+    canAdd: derivedPermissions.add,
+    canDelete: derivedPermissions.delete,
+    canUpdate: derivedPermissions.update,
+    canList: derivedPermissions.list
   }, children ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(AddButton$1, null), /*#__PURE__*/React__default["default"].createElement(PageSearch, null), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_table-wrapper"
   }, /*#__PURE__*/React__default["default"].createElement(PageTable, null), /*#__PURE__*/React__default["default"].createElement(PagePagination, null))), !_explicitForm && /*#__PURE__*/React__default["default"].createElement(Drawer, {
@@ -4527,7 +4552,14 @@ const Page = ({
     formState: formState,
     itemData: itemData,
     onClose: onCloseForm,
-    onConfirmDelete: onCofirmDeletePage
+    onConfirmDelete: onCofirmDeletePage,
+    confirmationRequired: derivedT('confirmationRequired'),
+    confirm: derivedT('confirm'),
+    lossOfData: derivedT('lossOfData'),
+    permanentlyDelete: derivedT('permanentlyDelete'),
+    pleaseType: derivedT('pleaseType'),
+    toProceedOrCancel: derivedT('toProceedOrCancel'),
+    typeHerePlaceholder: derivedT('typeHerePlaceholder')
   }));
 };
 Page.Table = PageTable;
@@ -4539,6 +4571,7 @@ Page.FormActions = PageFormActions;
 Page.FormWrapper = PageFormWrapper;
 
 const useWidget = ({
+  canList: _canList = true,
   defaultLimit,
   routes,
   preConfirmDelete
@@ -4960,9 +4993,9 @@ const useWidget = ({
     }
   });
   React.useEffect(() => {
-    getWidgets();
+    if (_canList) getWidgets();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pageSize, currentPage]);
+  }, [pageSize, currentPage, _canList]);
   return {
     list,
     getWidgets,
@@ -6196,7 +6229,9 @@ const WidgetTable = () => {
   } = useProviderState();
   const {
     list,
-    canList,
+    canUpdate,
+    canDelete,
+    canPartialUpdate,
     onChangeFormState,
     onPartialUpdateWidget,
     loading,
@@ -6210,7 +6245,25 @@ const WidgetTable = () => {
   }, [onPartialUpdateWidget]);
   const onUpdateClick = item => onChangeFormState('UPDATE', item);
   const onDeleteClick = item => onChangeFormState('DELETE', item);
-  if (!canList) return null;
+  const dataKeys = [{
+    label: t('widget.tableName'),
+    dataKey: 'name',
+    highlight: true
+  }, {
+    label: t('widget.tableCode'),
+    dataKey: 'code'
+  }];
+  if (canPartialUpdate) dataKeys.push({
+    label: t('widget.tableActive'),
+    dataKey: 'isActive',
+    Cell: ({
+      row
+    }) => canPartialUpdate ? /*#__PURE__*/React__default["default"].createElement(Toggle, {
+      switchClass: switchClass,
+      isChecked: row === null || row === void 0 ? void 0 : row.isActive,
+      onChange: status => updateClosure(row, 'isActive', status)
+    }) : null
+  });
   return /*#__PURE__*/React__default["default"].createElement(Table, {
     data: list,
     loader: loader,
@@ -6222,20 +6275,10 @@ const WidgetTable = () => {
     }, {
       label: t('widget.tableCode'),
       dataKey: 'code'
-    }, {
-      label: t('widget.tableActive'),
-      dataKey: 'isActive',
-      Cell: ({
-        row
-      }) => /*#__PURE__*/React__default["default"].createElement(Toggle, {
-        switchClass: switchClass,
-        isChecked: row === null || row === void 0 ? void 0 : row.isActive,
-        onChange: status => updateClosure(row, 'isActive', status)
-      })
     }],
     actions: {
-      edit: onUpdateClick,
-      delete: onDeleteClick
+      edit: canUpdate ? onUpdateClick : false,
+      delete: canDelete ? onDeleteClick : false
     }
   });
 };
@@ -6736,6 +6779,11 @@ const WidgetForm = ({
     type: 'checkbox',
     show: showAutoPlay,
     switchClass: switchClass
+  }, {
+    label: t('widget.color'),
+    accessor: 'backgroundColor',
+    type: 'color',
+    className: 'khb_input-color'
   }, {
     label: t('widget.webPerRow'),
     accessor: 'webPerRow',
@@ -6792,6 +6840,11 @@ const WidgetForm = ({
     accessor: 'title',
     type: 'text',
     placeholder: t('item.titlePlaceholder')
+  }, {
+    label: `${t('item.subtitle')}`,
+    accessor: 'subtitle',
+    type: 'text',
+    placeholder: t('item.subTitlePlaceholder')
   }, {
     label: `${t('item.altText')}`,
     accessor: 'altText',
@@ -6921,6 +6974,8 @@ const WidgetPagination = () => {
     ofText: t('of'),
     pageText: t('page'),
     showingText: t('showing'),
+    nextContent: t('nextContent'),
+    previousContent: t('previousContent'),
     totalPages: totalPages,
     totalRecords: totalRecords,
     currentPage: currentPage,
@@ -6932,7 +6987,8 @@ const WidgetPagination = () => {
 const WidgetSearch = () => {
   const {
     getWidgets,
-    t
+    t,
+    canList
   } = useWidgetState();
   const callerRef = React.useRef(null);
   const [search, setSearch] = React.useState('');
@@ -6946,6 +7002,7 @@ const WidgetSearch = () => {
   return /*#__PURE__*/React__default["default"].createElement(Input, {
     type: "search",
     value: search,
+    disabled: !canList,
     onChange: e => onChangeSearch(e.target.value),
     placeholder: t('widget.searchPlaceholder')
   });
@@ -6969,7 +7026,7 @@ const WidgetFormActions = ({
     if (!formRef) {
       return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is required to submit the form!`);
     } else if (!formRef.current) {
-      return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is empty, make sure it's passed as 'ref' prop to the form!`);
+      return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is empty, make sure it's passed as 'formRef' prop to the form!`);
     }
     // formRef is provided
     e === null || e === void 0 ? void 0 : e.preventDefault();
@@ -7007,12 +7064,15 @@ const Widget = ({
   routes,
   loader,
   explicitForm: _explicitForm = false,
-  permissions: _permissions = DEFAULT_PERMISSIONS,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  permissions: _permissions = {},
   preConfirmDelete,
   formatListItem,
   formatOptionLabel,
   children
 }) => {
+  const derivedPermissions = Object.assign(DEFAULT_PERMISSIONS, _permissions);
   const widgetFormRef = React.useRef(null);
   const derivedT = createTranslation(t, Object.assign(Object.assign(Object.assign({}, TRANSLATION_PAIRS_COMMON), TRANSLATION_PAIRS_WIDGET), TRANSLATION_PAIRS_ITEM));
   const {
@@ -7045,6 +7105,7 @@ const Widget = ({
     itemsLoading,
     onItemFormSubmit
   } = useWidget({
+    canList: derivedPermissions.list,
     routes,
     defaultLimit: 10,
     preConfirmDelete
@@ -7081,11 +7142,11 @@ const Widget = ({
     itemsLoading: itemsLoading,
     onItemFormSubmit: onItemFormSubmit,
     // Permissions
-    canAdd: _permissions.add,
-    canDelete: _permissions.delete,
-    canList: _permissions.list,
-    canUpdate: _permissions.update,
-    canPartialUpdate: _permissions.partialUpdate,
+    canAdd: derivedPermissions.add,
+    canDelete: derivedPermissions.delete,
+    canList: derivedPermissions.list,
+    canUpdate: derivedPermissions.update,
+    canPartialUpdate: derivedPermissions.partialUpdate,
     formState: formState,
     closeForm: onCloseForm
   }, children ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(AddButton, null), /*#__PURE__*/React__default["default"].createElement(WidgetSearch, null), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7103,7 +7164,14 @@ const Widget = ({
     formState: formState,
     itemData: itemData,
     onClose: onCloseForm,
-    onConfirmDelete: onCofirmDeleteWidget
+    onConfirmDelete: onCofirmDeleteWidget,
+    confirmationRequired: derivedT('confirmationRequired'),
+    confirm: derivedT('confirm'),
+    lossOfData: derivedT('lossOfData'),
+    permanentlyDelete: derivedT('permanentlyDelete'),
+    pleaseType: derivedT('pleaseType'),
+    toProceedOrCancel: derivedT('toProceedOrCancel'),
+    typeHerePlaceholder: derivedT('typeHerePlaceholder')
   }));
 };
 Widget.Table = WidgetTable;