@knovator/pagecreator-admin 0.3.2 → 0.3.3

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',
@@ -3080,21 +3082,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 +3148,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 +3156,18 @@ 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 && /*#__PURE__*/React__default["default"].createElement("button", {
+    className: "khb_actions-update",
     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)), actions.delete && /*#__PURE__*/React__default["default"].createElement("button", {
+    className: "khb_actions-delete",
     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
@@ -4104,6 +4092,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 +4157,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 = () => {
@@ -4192,9 +4197,10 @@ const Pagination = ({
   }, /*#__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"
@@ -4209,9 +4215,10 @@ const Pagination = ({
   }), ' ', "/ ", totalPages), /*#__PURE__*/React__default["default"].createElement(Button, {
     size: "xs",
     type: "secondary",
+    className: "khb_pagination-next",
     disabled: currentPage === totalPages,
     onClick: () => onPaginationButtonClick('next')
-  }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, {
+  }, nextContent || /*#__PURE__*/React__default["default"].createElement(ChevronRight, {
     srText: "Next"
   }))));
 };
@@ -4226,9 +4233,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 +4301,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 +4316,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 +4337,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 +4393,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)))))));
@@ -4527,7 +4538,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;
@@ -6921,6 +6939,8 @@ const WidgetPagination = () => {
     ofText: t('of'),
     pageText: t('page'),
     showingText: t('showing'),
+    nextContent: t('nextContent'),
+    previousContent: t('previousContent'),
     totalPages: totalPages,
     totalRecords: totalRecords,
     currentPage: currentPage,
@@ -7103,7 +7123,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;

package/index.css

@@ -652,9 +652,6 @@ video {
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
-.overflow-auto {
-  overflow: auto;
-}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1171,7 +1168,7 @@ video {
     color: rgb(156 163 175 / var(--tw-text-opacity));
   }
 }
-.khb_table-thead {
+.khb_thead {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
   font-size: 0.75rem;
@@ -1182,7 +1179,7 @@ video {
 }
 @media (prefers-color-scheme: dark) {
 
-  .khb_table-thead {
+  .khb_thead {
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
@@ -1244,6 +1241,124 @@ video {
 .khb_table-row-actions {
   padding: 0.125rem;
 }
+.khb_actions-update {
+  margin: 0.25rem;
+  border-radius: 0.5rem;
+  text-align: center;
+  font-weight: 500;
+}
+.khb_actions-update:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.khb_actions-update:disabled {
+  cursor: not-allowed;
+}
+.khb_actions-update {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.khb_actions-update:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+}
+.khb_actions-update:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
+}
+@media (prefers-color-scheme: dark) {
+
+  .khb_actions-update {
+    --tw-bg-opacity: 1;
+    background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+  }
+
+  .khb_actions-update:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+  }
+
+  .khb_actions-update:focus {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
+  }
+}
+.khb_actions-update:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+}
+.khb_actions-update {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.khb_actions-delete {
+  margin: 0.25rem;
+  border-radius: 0.5rem;
+  text-align: center;
+  font-weight: 500;
+}
+.khb_actions-delete:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.khb_actions-delete:disabled {
+  cursor: not-allowed;
+}
+.khb_actions-delete {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.khb_actions-delete:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
+}
+.khb_actions-delete:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
+}
+@media (prefers-color-scheme: dark) {
+
+  .khb_actions-delete {
+    --tw-bg-opacity: 1;
+    background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+  }
+
+  .khb_actions-delete:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+  }
+
+  .khb_actions-delete:focus {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity));
+  }
+}
+.khb_actions-delete:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
+}
+.khb_actions-delete {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
 /* \ End of Table */
 
 /* Pagination */

package/index.js

@@ -1668,6 +1668,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',
@@ -1685,7 +1686,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',
@@ -3068,21 +3070,6 @@ function usePageState() {
   return context;
 }
 
-const Button = ({
-  type: _type = 'primary',
-  size: _size = 'base',
-  onClick,
-  className,
-  children,
-  disabled
-}) => {
-  return /*#__PURE__*/React.createElement("button", {
-    className: classNames('khb_btn', `khb_btn-${_type}`, `khb_btn-${_size}`, className),
-    onClick: onClick,
-    disabled: disabled
-  }, children);
-};
-
 const Pencil = ({
   srText,
   className
@@ -3149,7 +3136,7 @@ const Table = ({
   }, loader) : /*#__PURE__*/React.createElement("table", {
     className: "khb_table"
   }, /*#__PURE__*/React.createElement("thead", {
-    className: "khb_table-thead"
+    className: "khb_thead"
   }, /*#__PURE__*/React.createElement("tr", null, dataKeys.map((key, i) => /*#__PURE__*/React.createElement("th", {
     scope: "col",
     className: "khb_table-heading",
@@ -3157,17 +3144,18 @@ 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.createElement("th", {
     scope: "col",
     className: "khb_table-heading"
-  }, "Actions"))), /*#__PURE__*/React.createElement("tbody", null, data.length > 0 ? data.map((item, i) => /*#__PURE__*/React.createElement("tr", {
+  }, "Actions"))), /*#__PURE__*/React.createElement("tbody", {
+    className: "khb_tbody"
+  }, data.length > 0 ? data.map((item, i) => /*#__PURE__*/React.createElement("tr", {
     className: "khb_table-row",
     key: item['id'] || item['_id'] || i
   }, dataKeys.map((key, j) => cellItemRenderer(item, key, j)), actions && /*#__PURE__*/React.createElement("td", {
     className: "khb_table-row-actions"
-  }, actions.edit && /*#__PURE__*/React.createElement(Button, {
-    size: "xs",
+  }, actions.edit && /*#__PURE__*/React.createElement("button", {
+    className: "khb_actions-update",
     onClick: () => actions.edit(item)
-  }, /*#__PURE__*/React.createElement(Pencil, null)), actions.delete && /*#__PURE__*/React.createElement(Button, {
-    size: "xs",
-    type: "danger",
+  }, /*#__PURE__*/React.createElement(Pencil, null)), actions.delete && /*#__PURE__*/React.createElement("button", {
+    className: "khb_actions-delete",
     onClick: () => actions.delete(item)
   }, /*#__PURE__*/React.createElement(Trash, null))))) : /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
     colSpan: ((dataKeys === null || dataKeys === void 0 ? void 0 : dataKeys.length) || 0) + 1
@@ -4092,6 +4080,21 @@ const PageForm = ({
   }));
 };
 
+const Button = ({
+  type: _type = 'primary',
+  size: _size = 'base',
+  onClick,
+  className,
+  children,
+  disabled
+}) => {
+  return /*#__PURE__*/React.createElement("button", {
+    className: classNames('khb_btn', `khb_btn-${_type}`, `khb_btn-${_size}`, className),
+    onClick: onClick,
+    disabled: disabled
+  }, children);
+};
+
 const AddButton$1 = () => {
   const {
     onChangeFormState,
@@ -4142,7 +4145,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] = useState(currentPage);
   const updatePagination = () => {
@@ -4180,9 +4185,10 @@ const Pagination = ({
   }, /*#__PURE__*/React.createElement(Button, {
     size: "xs",
     type: "secondary",
+    className: "khb_pagination-previous",
     disabled: currentPage - 1 === 0,
     onClick: () => onPaginationButtonClick('previous')
-  }, /*#__PURE__*/React.createElement(ChevronLeft, {
+  }, previousContent || /*#__PURE__*/React.createElement(ChevronLeft, {
     srText: "Previous"
   })), /*#__PURE__*/React.createElement("div", {
     className: "khb_pagination-pager"
@@ -4197,9 +4203,10 @@ const Pagination = ({
   }), ' ', "/ ", totalPages), /*#__PURE__*/React.createElement(Button, {
     size: "xs",
     type: "secondary",
+    className: "khb_pagination-next",
     disabled: currentPage === totalPages,
     onClick: () => onPaginationButtonClick('next')
-  }, /*#__PURE__*/React.createElement(ChevronRight, {
+  }, nextContent || /*#__PURE__*/React.createElement(ChevronRight, {
     srText: "Next"
   }))));
 };
@@ -4214,9 +4221,11 @@ const PagePagination = () => {
     setCurrentPage
   } = usePageState();
   return /*#__PURE__*/React.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,
@@ -4280,11 +4289,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] = useState('');
   useEffect(() => {
@@ -4293,19 +4304,19 @@ const DeleteModal = ({
   return itemData ? /*#__PURE__*/React.createElement(Modal, {
     open: formState === 'DELETE' && itemData ? true : false,
     onClose: onClose,
-    title: "Confirmation Required"
+    title: confirmationRequired || TRANSLATION_PAIRS_COMMON.confirmationRequired
   }, /*#__PURE__*/React.createElement("div", {
     className: "khb_delete-header"
-  }, /*#__PURE__*/React.createElement("p", null, _permanentlyDelete, " ", /*#__PURE__*/React.createElement("b", null, itemData['name']))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("p", null, permanentlyDelete || TRANSLATION_PAIRS_COMMON.permanentlyDelete, ' ', /*#__PURE__*/React.createElement("b", null, itemData['name']))), /*#__PURE__*/React.createElement("div", {
     className: "khb_delete-content"
-  }, /*#__PURE__*/React.createElement("p", null, _lossOfData), /*#__PURE__*/React.createElement("p", {
+  }, /*#__PURE__*/React.createElement("p", null, lossOfData || TRANSLATION_PAIRS_COMMON.lossOfData), /*#__PURE__*/React.createElement("p", {
     className: "khb_delete-note"
-  }, _pleaseType, ' ', /*#__PURE__*/React.createElement("b", {
+  }, pleaseType || TRANSLATION_PAIRS_COMMON.pleaseType, ' ', /*#__PURE__*/React.createElement("b", {
     className: "text-black font-bold"
-  }, itemData['name']), ' ', _toProceedOrCancel)), /*#__PURE__*/React.createElement("div", {
+  }, itemData['name']), ' ', toProceedOrCancel || TRANSLATION_PAIRS_COMMON.toProceedOrCancel)), /*#__PURE__*/React.createElement("div", {
     className: "khb_delete-actions"
   }, /*#__PURE__*/React.createElement(Input, {
-    placeholder: "Type Here",
+    placeholder: typeHerePlaceholder || TRANSLATION_PAIRS_COMMON.typeHerePlaceholder,
     className: "khb_delete-input",
     value: userInput,
     onChange: e => setUserInput(e.target.value)
@@ -4314,7 +4325,7 @@ const DeleteModal = ({
   }, /*#__PURE__*/React.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 = ({
@@ -4370,7 +4381,7 @@ const Drawer = ({
   }, /*#__PURE__*/React.createElement("p", {
     className: "khb_drawer-header-title"
   }, title)), /*#__PURE__*/React.createElement("div", {
-    className: "relative flex-1 px-6 py-6 overflow-auto"
+    className: "khb_darwer-content"
   }, children), footerContent && /*#__PURE__*/React.createElement("div", {
     className: "khb_drawer-footer"
   }, footerContent)))))));
@@ -4515,7 +4526,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;
@@ -6909,6 +6927,8 @@ const WidgetPagination = () => {
     ofText: t('of'),
     pageText: t('page'),
     showingText: t('showing'),
+    nextContent: t('nextContent'),
+    previousContent: t('previousContent'),
     totalPages: totalPages,
     totalRecords: totalRecords,
     currentPage: currentPage,
@@ -7091,7 +7111,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knovator/pagecreator-admin",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "dependencies": {
     "classnames": "^2.3.1",
     "react-beautiful-dnd": "^13.1.0",