@knovator/pagecreator-admin 0.7.2 → 0.7.4

package/index.cjs

@@ -2806,7 +2806,7 @@ const usePage = ({
     }
     onError(code, 'error', data === null || data === void 0 ? void 0 : data.message);
   }, [onError, onLogout]);
-  const getWidgets = React.useCallback((search, callback) => __awaiter(void 0, void 0, void 0, function* () {
+  const getWidgets = React.useCallback((search, collectionItems, callback) => __awaiter(void 0, void 0, void 0, function* () {
     try {
       setWidgetsLoading(true);
       const api = getApiType({
@@ -2821,6 +2821,7 @@ const usePage = ({
         url: api.url,
         onError: handleError(CALLBACK_CODES.GET_ALL),
         data: {
+          collectionItems: collectionItems || [],
           search: search || '',
           all: true,
           isActive: true
@@ -3685,193 +3686,6 @@ $$7({ global: true, forced: parseInt != $parseInt }, {
   parseInt: $parseInt
 });
 
-const Form = /*#__PURE__*/React.forwardRef(({
-  schema,
-  onSubmit,
-  data,
-  isUpdating: _isUpdating = false,
-  enable: _enable = true,
-  updates,
-  watcher
-}, ref) => {
-  const {
-    register,
-    formState: {
-      errors
-    },
-    handleSubmit,
-    reset,
-    setValue,
-    control,
-    setError,
-    watch
-  } = reactHookForm.useForm();
-  // setting update data in form
-  React.useEffect(() => {
-    if (!isEmpty(data)) {
-      reset(data);
-    }
-  }, [data, reset]);
-  // setting subscriber if watcher is provided
-  React.useEffect(() => {
-    if (watcher) {
-      const subscription = watch((value, {
-        name,
-        type
-      }) => watcher(value, name, type));
-      return () => subscription.unsubscribe();
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-    } else return () => {};
-  }, [watch, watcher]);
-  // setting values if updates are provided
-  React.useEffect(() => {
-    if (updates) {
-      Object.keys(updates).forEach(key => {
-        setValue(key, updates[key]);
-      });
-    }
-  }, [setValue, updates]);
-  const inputRenderer = schema => {
-    var _a, _b, _c, _d, _e, _f;
-    let input;
-    if (typeof schema.show !== 'undefined' && !schema.show) return null;
-    if (schema.type) {
-      switch (schema.type) {
-        case 'ReactSelect':
-          input = /*#__PURE__*/React__default["default"].createElement(CustomReactSelect, {
-            disabled: !_enable,
-            label: schema.label,
-            error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
-            onChange: value => {
-              if (value) {
-                setValue(schema.accessor, Array.isArray(value) ? value.map(item => item.value) : value.value);
-                if (schema.onChange) schema.onChange(value);
-              }
-            },
-            selectedOptions: schema.selectedOptions,
-            required: schema.required,
-            isMulti: schema.isMulti,
-            isSearchable: schema.isSearchable,
-            isLoading: schema.isLoading,
-            placeholder: schema.placeholder,
-            wrapperClassName: schema.wrapperClassName,
-            formatOptionLabel: schema.formatOptionLabel,
-            selectKey: schema.selectKey,
-            loadOptions: schema.loadOptions
-          });
-          break;
-        case 'checkbox':
-          input = /*#__PURE__*/React__default["default"].createElement(Input.Checkbox, {
-            error: (_d = (_c = errors[schema.accessor]) === null || _c === void 0 ? void 0 : _c.message) === null || _d === void 0 ? void 0 : _d.toString(),
-            switchClass: schema.switchClass,
-            label: schema.label,
-            rest: register(schema.accessor, schema.validations || {}),
-            className: "block",
-            disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable,
-            wrapperClassName: schema.wrapperClassName
-          });
-          break;
-        case 'select':
-          input = /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
-            control: control,
-            name: schema.accessor,
-            render: ({
-              field
-            }) => {
-              var _a, _b;
-              return /*#__PURE__*/React__default["default"].createElement(Input.Select, {
-                options: schema.options,
-                label: schema.label,
-                error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
-                onChange: e => field.onChange(e.target.value),
-                value: field.value,
-                className: "w-full",
-                disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
-                required: schema.required,
-                wrapperClassName: schema.wrapperClassName
-              });
-            }
-          });
-          break;
-        case 'srcset':
-          input = /*#__PURE__*/React__default["default"].createElement(Input.SrcSet, {
-            control: control,
-            register: register,
-            label: schema.label,
-            required: schema.required,
-            errors: errors[schema.accessor],
-            disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable
-          });
-          break;
-        case 'text':
-        case 'number':
-        case 'url':
-        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",
-            placeholder: schema.placeholder,
-            disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
-            required: schema.required,
-            onInput: schema.onInput,
-            wrapperClassName: schema.wrapperClassName
-          });
-          break;
-      }
-    } else if (schema.Input) {
-      input = /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "kms_input-wrapper"
-      }, /*#__PURE__*/React__default["default"].createElement("label", {
-        className: "kms_input-label"
-      }, schema.label), /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
-        control: control,
-        name: schema.accessor,
-        rules: schema.validations,
-        render: ({
-          field
-        }) => {
-          var _a, _b;
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          return schema.Input({
-            field,
-            error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
-            disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
-            setError: msg => setError.call(null, schema.accessor, {
-              type: 'custom',
-              message: msg
-            })
-          });
-        }
-      }));
-    } else throw new Error(`Please provide Input or type prop to render input Labeled ${schema.label}`);
-    return input;
-  };
-  const onFormSubmit = e => __awaiter(void 0, void 0, void 0, function* () {
-    e.preventDefault();
-    handleSubmit(data => {
-      const formattedData = schema.reduce((values, schemaItem) => {
-        // Do not add field if editing is disabled for it
-        if (_isUpdating && typeof schemaItem.editable !== 'undefined' && !schemaItem.editable) return values;
-        if (schemaItem.type === 'number') {
-          values[schemaItem.accessor] = data[schemaItem.accessor] === '' ? null : parseInt(data[schemaItem.accessor]);
-        } else values[schemaItem.accessor] = data[schemaItem.accessor];
-        return values;
-      }, {});
-      onSubmit(formattedData);
-    })();
-  });
-  return /*#__PURE__*/React__default["default"].createElement("form", {
-    onSubmit: onFormSubmit,
-    ref: ref,
-    className: "khb-form-items"
-  }, schema.map((schema, i) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
-    key: i
-  }, inputRenderer(schema))));
-});
-
 const SimpleForm = /*#__PURE__*/React.forwardRef(({
   schema,
   onSubmit,
@@ -4064,7 +3878,30 @@ const PageForm = ({
     canAdd,
     canUpdate
   } = usePageState();
+  const {
+    register,
+    formState: {
+      errors
+    },
+    handleSubmit,
+    reset,
+    setValue,
+    control,
+    setError,
+    getValues
+  } = reactHookForm.useForm();
   const callerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!isEmpty(data)) {
+      reset(data);
+    }
+  }, [data, reset]);
+  React.useEffect(() => {
+    if (formState === 'ADD') {
+      setSelectedWidgets([]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [formState]);
   // Form Utility Functions
   function handleCapitalize(event) {
     event.target.value = capitalizeFirstLetter(event.target.value);
@@ -4085,11 +3922,18 @@ const PageForm = ({
     return event;
   }
   function loadOptions(value, callback) {
+    let widgetItems = [];
+    if (formState === 'UPDATE') {
+      widgetItems = getValues('widgets');
+    }
+    widgetItems = Array.isArray(widgetItems) ? widgetItems : (data === null || data === void 0 ? void 0 : data.widgets) ? data === null || data === void 0 ? void 0 : data.widgets : [];
     if (callerRef.current) clearTimeout(callerRef.current);
     callerRef.current = setTimeout(() => {
-      getWidgets(value, widgetsData => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      getWidgets(value || '', widgetItems, widgetsData => {
         if (callback) callback(widgetsData);
-        if (formState === 'UPDATE' && data) setSelectedWidgets(data.widgets.map(widgetId => widgetsData.find(widget => widget['value'] === widgetId)).filter(widget => widget));
+        if (formState === 'UPDATE' && data) setSelectedWidgets(widgetItems.map(widgetId => widgetsData.find(widget => widget['value'] === widgetId)).filter(widget => widget));
       });
     }, 300);
   }
@@ -4147,15 +3991,17 @@ const PageForm = ({
   if (!canAdd && !canUpdate) return null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_form"
-  }, /*#__PURE__*/React__default["default"].createElement(Form, {
+  }, /*#__PURE__*/React__default["default"].createElement(SimpleForm, {
     schema: pageFormSchema,
     onSubmit: onPageFormSubmit,
     ref: formRef,
-    data: data,
     isUpdating: formState === 'UPDATE',
-    updates: {
-      widgets: selectedWidgets.map(widget => widget.value)
-    }
+    register: register,
+    errors: errors,
+    handleSubmit: handleSubmit,
+    setValue: setValue,
+    control: control,
+    setError: setError
   }), /*#__PURE__*/React__default["default"].createElement(DNDItemsList, {
     onDragEnd: onDragEnd,
     items: selectedWidgets
@@ -7218,7 +7064,6 @@ const WidgetForm = ({
   }, {
     label: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.label,
     placeholder: `Select ${selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.label}...`,
-    required: true,
     accessor: 'collectionItems',
     type: 'ReactSelect',
     options: collectionData,

package/index.css

@@ -682,9 +682,6 @@ video {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.whitespace-nowrap {
-  white-space: nowrap;
-}
 .whitespace-pre-wrap {
   white-space: pre-wrap;
 }
@@ -926,26 +923,26 @@ video {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
 .text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
-.text-gray-400 {
+.text-gray-500 {
   --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
+  color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-.text-red-600 {
+.text-gray-400 {
   --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
+  color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
+}
 .opacity-100 {
   opacity: 1;
 }
@@ -1023,23 +1020,6 @@ video {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
 }
-@media (prefers-color-scheme: dark) {
-
-  .khb_btn-primary {
-    --tw-bg-opacity: 1;
-    background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-  }
-
-  .khb_btn-primary:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-  }
-
-  .khb_btn-primary:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
-  }
-}
 .khb_btn-primary:disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(30 64 175 / var(--tw-bg-opacity));
@@ -1079,23 +1059,6 @@ video {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
 }
-@media (prefers-color-scheme: dark) {
-
-  .khb_btn-success {
-    --tw-bg-opacity: 1;
-    background-color: rgb(22 163 74 / var(--tw-bg-opacity));
-  }
-
-  .khb_btn-success:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(21 128 61 / var(--tw-bg-opacity));
-  }
-
-  .khb_btn-success:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity));
-  }
-}
 .khb_btn-danger {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
@@ -1110,23 +1073,6 @@ video {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
 }
-@media (prefers-color-scheme: dark) {
-
-  .khb_btn-danger {
-    --tw-bg-opacity: 1;
-    background-color: rgb(220 38 38 / var(--tw-bg-opacity));
-  }
-
-  .khb_btn-danger:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(185 28 28 / var(--tw-bg-opacity));
-  }
-
-  .khb_btn-danger:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity));
-  }
-}
 .khb_btn-danger:disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(153 27 27 / var(--tw-bg-opacity));
@@ -1207,13 +1153,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-@media (prefers-color-scheme: dark) {
-
-  .khb_table {
-    --tw-text-opacity: 1;
-    color: rgb(156 163 175 / var(--tw-text-opacity));
-  }
-}
 .khb_thead {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1223,15 +1162,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
-@media (prefers-color-scheme: dark) {
-
-  .khb_thead {
-    --tw-bg-opacity: 1;
-    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-    --tw-text-opacity: 1;
-    color: rgb(156 163 175 / var(--tw-text-opacity));
-  }
-}
 .khb_table-heading {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -1247,20 +1177,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-@media (prefers-color-scheme: dark) {
-
-  .khb_table-row {
-    --tw-border-opacity: 1;
-    border-color: rgb(55 65 81 / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-  }
-
-  .khb_table-row:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-  }
-}
 .khb_table-row-heading {
   white-space: nowrap;
   padding-top: 1rem;
@@ -1271,13 +1187,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
-@media (prefers-color-scheme: dark) {
-
-  .khb_table-row-heading {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
-}
 .khb_table-row-data {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -1317,23 +1226,6 @@ video {
   --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));
@@ -1376,23 +1268,6 @@ video {
   --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));
@@ -1424,37 +1299,16 @@ video {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-@media (prefers-color-scheme: dark) {
-
-  .khb_pagination-total {
-    --tw-text-opacity: 1;
-    color: rgb(156 163 175 / var(--tw-text-opacity));
-  }
-}
 .khb_pagination-total-showing {
   font-weight: 600;
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
-@media (prefers-color-scheme: dark) {
-
-  .khb_pagination-total-showing {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
-}
 .khb_pagination-total-items {
   font-weight: 600;
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
-@media (prefers-color-scheme: dark) {
-
-  .khb_pagination-total-items {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
-}
 .khb_pagination-actions {
   display: inline-flex;
   align-items: center;
@@ -1523,13 +1377,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity));
 }
-@media (prefers-color-scheme: dark) {
-
-  .khb_input-error {
-    --tw-text-opacity: 1;
-    color: rgb(239 68 68 / var(--tw-text-opacity));
-  }
-}
 .khb_input-xs {
   padding: 0.375rem;
   font-size: 0.875rem;
@@ -1554,13 +1401,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
-@media (prefers-color-scheme: dark) {
-
-  .khb_input-label {
-    --tw-text-opacity: 1;
-    color: rgb(209 213 219 / var(--tw-text-opacity));
-  }
-}
 .khb_input-label-required {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity));
@@ -2273,23 +2113,6 @@ input:checked + .slider:before {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
 }
-@media (prefers-color-scheme: dark) {
-
-  .khb_tabs-add {
-    --tw-bg-opacity: 1;
-    background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-  }
-
-  .khb_tabs-add:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-  }
-
-  .khb_tabs-add:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
-  }
-}
 .khb_tabs-add:disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(30 64 175 / var(--tw-bg-opacity));
@@ -2366,10 +2189,6 @@ input:checked + .slider:before {
   --tw-bg-opacity: 1;
   background-color: rgb(153 27 27 / var(--tw-bg-opacity));
 }
-.hover\:bg-gray-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
 .hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -2396,79 +2215,10 @@ input:checked + .slider:before {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + 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);
 }
-.focus\:ring-blue-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
-}
-.focus\:ring-green-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
-}
-.focus\:ring-red-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
-}
 .focus\:ring-blue-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
-@media (prefers-color-scheme: dark) {
-
-  .dark\:border-gray-700 {
-    --tw-border-opacity: 1;
-    border-color: rgb(55 65 81 / var(--tw-border-opacity));
-  }
-
-  .dark\:bg-blue-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-green-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(22 163 74 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-red-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(220 38 38 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-gray-700 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-gray-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-blue-700:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-green-700:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(21 128 61 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-red-700:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(185 28 28 / var(--tw-bg-opacity));
-  }
-
-  .dark\:focus\:ring-green-800:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity));
-  }
-
-  .dark\:focus\:ring-red-900:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity));
-  }
-}
 @media (min-width: 640px) {
 
   .sm\:my-8 {

package/index.js

@@ -2,7 +2,7 @@ import React, { createContext, useContext, useRef, useState, useCallback, useEff
 import fetchUrl, { setAPIConfig } from '@knovator/api';
 import classNames from 'classnames';
 import ReactSelect from 'react-select/async';
-import { useFieldArray, useForm, Controller } from 'react-hook-form';
+import { useFieldArray, Controller, useForm } from 'react-hook-form';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { useDropzone } from 'react-dropzone';
@@ -2794,7 +2794,7 @@ const usePage = ({
     }
     onError(code, 'error', data === null || data === void 0 ? void 0 : data.message);
   }, [onError, onLogout]);
-  const getWidgets = useCallback((search, callback) => __awaiter(void 0, void 0, void 0, function* () {
+  const getWidgets = useCallback((search, collectionItems, callback) => __awaiter(void 0, void 0, void 0, function* () {
     try {
       setWidgetsLoading(true);
       const api = getApiType({
@@ -2809,6 +2809,7 @@ const usePage = ({
         url: api.url,
         onError: handleError(CALLBACK_CODES.GET_ALL),
         data: {
+          collectionItems: collectionItems || [],
           search: search || '',
           all: true,
           isActive: true
@@ -3673,193 +3674,6 @@ $$7({ global: true, forced: parseInt != $parseInt }, {
   parseInt: $parseInt
 });
 
-const Form = /*#__PURE__*/forwardRef(({
-  schema,
-  onSubmit,
-  data,
-  isUpdating: _isUpdating = false,
-  enable: _enable = true,
-  updates,
-  watcher
-}, ref) => {
-  const {
-    register,
-    formState: {
-      errors
-    },
-    handleSubmit,
-    reset,
-    setValue,
-    control,
-    setError,
-    watch
-  } = useForm();
-  // setting update data in form
-  useEffect(() => {
-    if (!isEmpty(data)) {
-      reset(data);
-    }
-  }, [data, reset]);
-  // setting subscriber if watcher is provided
-  useEffect(() => {
-    if (watcher) {
-      const subscription = watch((value, {
-        name,
-        type
-      }) => watcher(value, name, type));
-      return () => subscription.unsubscribe();
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-    } else return () => {};
-  }, [watch, watcher]);
-  // setting values if updates are provided
-  useEffect(() => {
-    if (updates) {
-      Object.keys(updates).forEach(key => {
-        setValue(key, updates[key]);
-      });
-    }
-  }, [setValue, updates]);
-  const inputRenderer = schema => {
-    var _a, _b, _c, _d, _e, _f;
-    let input;
-    if (typeof schema.show !== 'undefined' && !schema.show) return null;
-    if (schema.type) {
-      switch (schema.type) {
-        case 'ReactSelect':
-          input = /*#__PURE__*/React.createElement(CustomReactSelect, {
-            disabled: !_enable,
-            label: schema.label,
-            error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
-            onChange: value => {
-              if (value) {
-                setValue(schema.accessor, Array.isArray(value) ? value.map(item => item.value) : value.value);
-                if (schema.onChange) schema.onChange(value);
-              }
-            },
-            selectedOptions: schema.selectedOptions,
-            required: schema.required,
-            isMulti: schema.isMulti,
-            isSearchable: schema.isSearchable,
-            isLoading: schema.isLoading,
-            placeholder: schema.placeholder,
-            wrapperClassName: schema.wrapperClassName,
-            formatOptionLabel: schema.formatOptionLabel,
-            selectKey: schema.selectKey,
-            loadOptions: schema.loadOptions
-          });
-          break;
-        case 'checkbox':
-          input = /*#__PURE__*/React.createElement(Input.Checkbox, {
-            error: (_d = (_c = errors[schema.accessor]) === null || _c === void 0 ? void 0 : _c.message) === null || _d === void 0 ? void 0 : _d.toString(),
-            switchClass: schema.switchClass,
-            label: schema.label,
-            rest: register(schema.accessor, schema.validations || {}),
-            className: "block",
-            disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable,
-            wrapperClassName: schema.wrapperClassName
-          });
-          break;
-        case 'select':
-          input = /*#__PURE__*/React.createElement(Controller, {
-            control: control,
-            name: schema.accessor,
-            render: ({
-              field
-            }) => {
-              var _a, _b;
-              return /*#__PURE__*/React.createElement(Input.Select, {
-                options: schema.options,
-                label: schema.label,
-                error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
-                onChange: e => field.onChange(e.target.value),
-                value: field.value,
-                className: "w-full",
-                disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
-                required: schema.required,
-                wrapperClassName: schema.wrapperClassName
-              });
-            }
-          });
-          break;
-        case 'srcset':
-          input = /*#__PURE__*/React.createElement(Input.SrcSet, {
-            control: control,
-            register: register,
-            label: schema.label,
-            required: schema.required,
-            errors: errors[schema.accessor],
-            disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable
-          });
-          break;
-        case 'text':
-        case 'number':
-        case 'url':
-        default:
-          input = /*#__PURE__*/React.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",
-            placeholder: schema.placeholder,
-            disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
-            required: schema.required,
-            onInput: schema.onInput,
-            wrapperClassName: schema.wrapperClassName
-          });
-          break;
-      }
-    } else if (schema.Input) {
-      input = /*#__PURE__*/React.createElement("div", {
-        className: "kms_input-wrapper"
-      }, /*#__PURE__*/React.createElement("label", {
-        className: "kms_input-label"
-      }, schema.label), /*#__PURE__*/React.createElement(Controller, {
-        control: control,
-        name: schema.accessor,
-        rules: schema.validations,
-        render: ({
-          field
-        }) => {
-          var _a, _b;
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          return schema.Input({
-            field,
-            error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
-            disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
-            setError: msg => setError.call(null, schema.accessor, {
-              type: 'custom',
-              message: msg
-            })
-          });
-        }
-      }));
-    } else throw new Error(`Please provide Input or type prop to render input Labeled ${schema.label}`);
-    return input;
-  };
-  const onFormSubmit = e => __awaiter(void 0, void 0, void 0, function* () {
-    e.preventDefault();
-    handleSubmit(data => {
-      const formattedData = schema.reduce((values, schemaItem) => {
-        // Do not add field if editing is disabled for it
-        if (_isUpdating && typeof schemaItem.editable !== 'undefined' && !schemaItem.editable) return values;
-        if (schemaItem.type === 'number') {
-          values[schemaItem.accessor] = data[schemaItem.accessor] === '' ? null : parseInt(data[schemaItem.accessor]);
-        } else values[schemaItem.accessor] = data[schemaItem.accessor];
-        return values;
-      }, {});
-      onSubmit(formattedData);
-    })();
-  });
-  return /*#__PURE__*/React.createElement("form", {
-    onSubmit: onFormSubmit,
-    ref: ref,
-    className: "khb-form-items"
-  }, schema.map((schema, i) => /*#__PURE__*/React.createElement(React.Fragment, {
-    key: i
-  }, inputRenderer(schema))));
-});
-
 const SimpleForm = /*#__PURE__*/forwardRef(({
   schema,
   onSubmit,
@@ -4052,7 +3866,30 @@ const PageForm = ({
     canAdd,
     canUpdate
   } = usePageState();
+  const {
+    register,
+    formState: {
+      errors
+    },
+    handleSubmit,
+    reset,
+    setValue,
+    control,
+    setError,
+    getValues
+  } = useForm();
   const callerRef = useRef(null);
+  useEffect(() => {
+    if (!isEmpty(data)) {
+      reset(data);
+    }
+  }, [data, reset]);
+  useEffect(() => {
+    if (formState === 'ADD') {
+      setSelectedWidgets([]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [formState]);
   // Form Utility Functions
   function handleCapitalize(event) {
     event.target.value = capitalizeFirstLetter(event.target.value);
@@ -4073,11 +3910,18 @@ const PageForm = ({
     return event;
   }
   function loadOptions(value, callback) {
+    let widgetItems = [];
+    if (formState === 'UPDATE') {
+      widgetItems = getValues('widgets');
+    }
+    widgetItems = Array.isArray(widgetItems) ? widgetItems : (data === null || data === void 0 ? void 0 : data.widgets) ? data === null || data === void 0 ? void 0 : data.widgets : [];
     if (callerRef.current) clearTimeout(callerRef.current);
     callerRef.current = setTimeout(() => {
-      getWidgets(value, widgetsData => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      getWidgets(value || '', widgetItems, widgetsData => {
         if (callback) callback(widgetsData);
-        if (formState === 'UPDATE' && data) setSelectedWidgets(data.widgets.map(widgetId => widgetsData.find(widget => widget['value'] === widgetId)).filter(widget => widget));
+        if (formState === 'UPDATE' && data) setSelectedWidgets(widgetItems.map(widgetId => widgetsData.find(widget => widget['value'] === widgetId)).filter(widget => widget));
       });
     }, 300);
   }
@@ -4135,15 +3979,17 @@ const PageForm = ({
   if (!canAdd && !canUpdate) return null;
   return /*#__PURE__*/React.createElement("div", {
     className: "khb_form"
-  }, /*#__PURE__*/React.createElement(Form, {
+  }, /*#__PURE__*/React.createElement(SimpleForm, {
     schema: pageFormSchema,
     onSubmit: onPageFormSubmit,
     ref: formRef,
-    data: data,
     isUpdating: formState === 'UPDATE',
-    updates: {
-      widgets: selectedWidgets.map(widget => widget.value)
-    }
+    register: register,
+    errors: errors,
+    handleSubmit: handleSubmit,
+    setValue: setValue,
+    control: control,
+    setError: setError
   }), /*#__PURE__*/React.createElement(DNDItemsList, {
     onDragEnd: onDragEnd,
     items: selectedWidgets
@@ -7206,7 +7052,6 @@ const WidgetForm = ({
   }, {
     label: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.label,
     placeholder: `Select ${selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.label}...`,
-    required: true,
     accessor: 'collectionItems',
     type: 'ReactSelect',
     options: collectionData,

package/package.json

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

package/src/lib/hooks/usePage.d.ts

@@ -24,7 +24,7 @@ declare const usePage: ({ routes, defaultLimit, canList, preConfirmDelete, }: Us
     widgets: ObjectType[];
     itemData: any;
     formState: FormActionTypes | undefined;
-    getWidgets: (search?: string, callback?: ((data: any) => void) | undefined) => Promise<void>;
+    getWidgets: (search?: string, collectionItems?: string[], callback?: ((data: any) => void) | undefined) => Promise<void>;
     onCloseForm: () => void;
     widgetsLoading: boolean;
     selectedWidgets: {

package/src/lib/types/context.d.ts

@@ -70,7 +70,7 @@ export interface PageContextType {
     list: any[];
     searchText: string;
     changeSearch: (val: string) => void;
-    getWidgets: (search?: string, callback?: (data: any) => void) => void;
+    getWidgets: (search: string, collectionItems: string[], callback?: (data: any) => void) => void;
     formState: FormActionTypes | undefined;
     closeForm: () => void;
     onPageFormSubmit: (data: any) => void;