@knovator/pagecreator-admin 0.5.3 → 0.5.4

package/index.cjs

@@ -1737,7 +1737,8 @@ const TRANSLATION_PAIRS_WIDGET = {
   'widget.webPerRowRequired': 'Web Per Row is required',
   'widget.tabletPerRowRequired': 'Tablet Per Row is required',
   'widget.mobilePerRowRequired': 'Mobile Per Row is required',
-  'widget.tabDeleteTitle': 'Are you sure you want to delete this tab?'
+  'widget.tabDeleteTitle': 'Are you sure you want to delete this tab?',
+  'widget.widgetTitleInfo': 'HTML is supported'
 };
 const TRANSLATION_PAIRS_ITEM = {
   'item.title': 'Title',
@@ -3256,6 +3257,7 @@ const Input$1 = ({
   onInput,
   onBlur,
   value,
+  info,
   onChange,
   wrapperClassName
 }) => {
@@ -3278,7 +3280,9 @@ const Input$1 = ({
     onBlur: onBlur
   })), error && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "khb_input-error "
-  }, error));
+  }, error), info && /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "khb_input-info"
+  }, info));
 };
 
 const Select = ({
@@ -3330,7 +3334,8 @@ const CustomReactSelect = ({
   placeholder,
   wrapperClassName,
   formatOptionLabel,
-  listCode
+  listCode,
+  customStyles
 }) => {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClassName
@@ -3351,7 +3356,8 @@ const CustomReactSelect = ({
     isLoading: isLoading,
     onKeyDown: e => onSearch && onSearch(e.target.value),
     placeholder: placeholder,
-    formatOptionLabel: formatOptionLabel ? option => formatOptionLabel(listCode, option) : undefined
+    formatOptionLabel: formatOptionLabel ? option => formatOptionLabel(listCode, option) : undefined,
+    styles: customStyles
   }), error && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "khb_input-error "
   }, error));
@@ -3889,7 +3895,8 @@ const SimpleForm = /*#__PURE__*/React.forwardRef(({
             placeholder: schema.placeholder,
             wrapperClassName: schema.wrapperClassName,
             formatOptionLabel: schema.formatOptionLabel,
-            listCode: schema.listCode
+            listCode: schema.listCode,
+            customStyles: schema.customStyles
           });
           break;
         case 'checkbox':
@@ -3941,7 +3948,8 @@ const SimpleForm = /*#__PURE__*/React.forwardRef(({
             disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
             required: schema.required,
             onInput: schema.onInput,
-            wrapperClassName: schema.wrapperClassName
+            wrapperClassName: schema.wrapperClassName,
+            info: schema.info
           });
           break;
       }
@@ -6187,6 +6195,7 @@ const WidgetContextProvider = ({
   mobileItems: _mobileItems = [],
   itemsLoading: _itemsLoading = false,
   onItemFormSubmit: _onItemFormSubmit = () => {},
+  reactSelectStyles: _reactSelectStyles = {},
   // other
   children
 }) => {
@@ -6215,6 +6224,7 @@ const WidgetContextProvider = ({
       collectionData: _collectionData,
       formatListItem,
       formatOptionLabel,
+      reactSelectStyles: _reactSelectStyles,
       // Pagination
       currentPage: _currentPage,
       limits: _limits,
@@ -6730,6 +6740,7 @@ const Tabs = ({
   listCode,
   formatItem,
   deleteTitle,
+  customStyles,
   noButtonText,
   yesButtonText,
   onItemsSearch,
@@ -6810,6 +6821,7 @@ const Tabs = ({
       isLoading: isItemsLoading,
       placeholder: itemsPlaceholder,
       listCode: listCode,
+      customStyles: customStyles,
       // wrapperClassName={schema.wrapperClassName}
       formatOptionLabel: formatOptionLabel
     })
@@ -6873,7 +6885,8 @@ const WidgetForm = ({
     collectionData,
     collectionDataLoading,
     formatListItem,
-    formatOptionLabel
+    formatOptionLabel,
+    reactSelectStyles
   } = useWidgetState();
   const callerRef = React.useRef(null);
   const [webItemsVisible, setWebItemsVisible] = React.useState(false);
@@ -7055,7 +7068,8 @@ const WidgetForm = ({
     placeholder: t('widget.widgetTitlePlaceholder'),
     validations: {
       required: t('widget.widgetTitleRequired')
-    }
+    },
+    info: t('widget.widgetTitleInfo')
   }, {
     label: `${t('widget.widgetType')}`,
     required: true,
@@ -7135,7 +7149,8 @@ const WidgetForm = ({
     isLoading: collectionDataLoading,
     show: !itemsEnabled && selectedWidgetType !== 'Tabs',
     formatOptionLabel: formatOptionLabel,
-    listCode: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value
+    listCode: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value,
+    customStyles: reactSelectStyles || {}
   }];
   const itemFormSchema = [{
     label: `${t('item.title')}`,
@@ -7227,7 +7242,8 @@ const WidgetForm = ({
     listCode: (selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value) || '',
     onCollectionItemsIndexChange: onTabItemsIndexChange,
     tabCollectionItems: tabCollectionItems,
-    formatItem: formatListItem
+    formatItem: formatListItem,
+    customStyles: reactSelectStyles || {}
   }) : null, !itemsEnabled && selectedWidgetType !== 'Tabs' && /*#__PURE__*/React__default["default"].createElement(DNDItemsList, {
     items: selectedCollectionItems,
     onDragEnd: onCollectionIndexChange,

package/index.css

@@ -937,6 +937,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
 .text-red-600 {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity));
@@ -1504,6 +1508,13 @@ video {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
+.khb_input-info {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
 .khb_input-error {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1611,7 +1622,7 @@ video {
 .khb_drawer-container-2 {
   position: relative;
   width: 100vw;
-  max-width: 48rem;
+  max-width: 72rem;
 }
 .khb_drawer-close-section {
   position: absolute;

package/index.js

@@ -1725,7 +1725,8 @@ const TRANSLATION_PAIRS_WIDGET = {
   'widget.webPerRowRequired': 'Web Per Row is required',
   'widget.tabletPerRowRequired': 'Tablet Per Row is required',
   'widget.mobilePerRowRequired': 'Mobile Per Row is required',
-  'widget.tabDeleteTitle': 'Are you sure you want to delete this tab?'
+  'widget.tabDeleteTitle': 'Are you sure you want to delete this tab?',
+  'widget.widgetTitleInfo': 'HTML is supported'
 };
 const TRANSLATION_PAIRS_ITEM = {
   'item.title': 'Title',
@@ -3244,6 +3245,7 @@ const Input$1 = ({
   onInput,
   onBlur,
   value,
+  info,
   onChange,
   wrapperClassName
 }) => {
@@ -3266,7 +3268,9 @@ const Input$1 = ({
     onBlur: onBlur
   })), error && /*#__PURE__*/React.createElement("p", {
     className: "khb_input-error "
-  }, error));
+  }, error), info && /*#__PURE__*/React.createElement("p", {
+    className: "khb_input-info"
+  }, info));
 };
 
 const Select = ({
@@ -3318,7 +3322,8 @@ const CustomReactSelect = ({
   placeholder,
   wrapperClassName,
   formatOptionLabel,
-  listCode
+  listCode,
+  customStyles
 }) => {
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClassName
@@ -3339,7 +3344,8 @@ const CustomReactSelect = ({
     isLoading: isLoading,
     onKeyDown: e => onSearch && onSearch(e.target.value),
     placeholder: placeholder,
-    formatOptionLabel: formatOptionLabel ? option => formatOptionLabel(listCode, option) : undefined
+    formatOptionLabel: formatOptionLabel ? option => formatOptionLabel(listCode, option) : undefined,
+    styles: customStyles
   }), error && /*#__PURE__*/React.createElement("p", {
     className: "khb_input-error "
   }, error));
@@ -3877,7 +3883,8 @@ const SimpleForm = /*#__PURE__*/forwardRef(({
             placeholder: schema.placeholder,
             wrapperClassName: schema.wrapperClassName,
             formatOptionLabel: schema.formatOptionLabel,
-            listCode: schema.listCode
+            listCode: schema.listCode,
+            customStyles: schema.customStyles
           });
           break;
         case 'checkbox':
@@ -3929,7 +3936,8 @@ const SimpleForm = /*#__PURE__*/forwardRef(({
             disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
             required: schema.required,
             onInput: schema.onInput,
-            wrapperClassName: schema.wrapperClassName
+            wrapperClassName: schema.wrapperClassName,
+            info: schema.info
           });
           break;
       }
@@ -6175,6 +6183,7 @@ const WidgetContextProvider = ({
   mobileItems: _mobileItems = [],
   itemsLoading: _itemsLoading = false,
   onItemFormSubmit: _onItemFormSubmit = () => {},
+  reactSelectStyles: _reactSelectStyles = {},
   // other
   children
 }) => {
@@ -6203,6 +6212,7 @@ const WidgetContextProvider = ({
       collectionData: _collectionData,
       formatListItem,
       formatOptionLabel,
+      reactSelectStyles: _reactSelectStyles,
       // Pagination
       currentPage: _currentPage,
       limits: _limits,
@@ -6718,6 +6728,7 @@ const Tabs = ({
   listCode,
   formatItem,
   deleteTitle,
+  customStyles,
   noButtonText,
   yesButtonText,
   onItemsSearch,
@@ -6798,6 +6809,7 @@ const Tabs = ({
       isLoading: isItemsLoading,
       placeholder: itemsPlaceholder,
       listCode: listCode,
+      customStyles: customStyles,
       // wrapperClassName={schema.wrapperClassName}
       formatOptionLabel: formatOptionLabel
     })
@@ -6861,7 +6873,8 @@ const WidgetForm = ({
     collectionData,
     collectionDataLoading,
     formatListItem,
-    formatOptionLabel
+    formatOptionLabel,
+    reactSelectStyles
   } = useWidgetState();
   const callerRef = useRef(null);
   const [webItemsVisible, setWebItemsVisible] = useState(false);
@@ -7043,7 +7056,8 @@ const WidgetForm = ({
     placeholder: t('widget.widgetTitlePlaceholder'),
     validations: {
       required: t('widget.widgetTitleRequired')
-    }
+    },
+    info: t('widget.widgetTitleInfo')
   }, {
     label: `${t('widget.widgetType')}`,
     required: true,
@@ -7123,7 +7137,8 @@ const WidgetForm = ({
     isLoading: collectionDataLoading,
     show: !itemsEnabled && selectedWidgetType !== 'Tabs',
     formatOptionLabel: formatOptionLabel,
-    listCode: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value
+    listCode: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value,
+    customStyles: reactSelectStyles || {}
   }];
   const itemFormSchema = [{
     label: `${t('item.title')}`,
@@ -7215,7 +7230,8 @@ const WidgetForm = ({
     listCode: (selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value) || '',
     onCollectionItemsIndexChange: onTabItemsIndexChange,
     tabCollectionItems: tabCollectionItems,
-    formatItem: formatListItem
+    formatItem: formatListItem,
+    customStyles: reactSelectStyles || {}
   }) : null, !itemsEnabled && selectedWidgetType !== 'Tabs' && /*#__PURE__*/React.createElement(DNDItemsList, {
     items: selectedCollectionItems,
     onDragEnd: onCollectionIndexChange,

package/package.json

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