@adiba-banking-cloud/backoffice 0.0.91 → 0.0.92

package/build/index.cjs.js/index.js

@@ -10,6 +10,7 @@ var HighchartsRounded = require('highcharts-rounded-corners');
 var IconSax = require('iconsax-react');
 var reactRouterDom = require('react-router-dom');
 var hooks = require('@mantine/hooks');
+var form = require('@mantine/form');
 require('@fontsource/poppins/100.css');
 require('@fontsource/poppins/200.css');
 require('@fontsource/poppins/300.css');
@@ -18,7 +19,6 @@ require('@fontsource/poppins/500.css');
 require('@fontsource/poppins/600.css');
 require('@fontsource/poppins/700.css');
 require('@fontsource/poppins/800.css');
-var form = require('@mantine/form');
 
 function _interopNamespaceDefault(e) {
 	var n = Object.create(null);
@@ -12206,27 +12206,36 @@ const SearchPanel = _ref3 => {
     },
     searchText = "Search",
     filterFn,
+    searchFn,
     children,
     ...rest
   } = _ref3;
   const [search, setSearch] = rest.searchState || React.useState("");
-  return /*#__PURE__*/React.createElement(SimplePanel, rest, /*#__PURE__*/React.createElement(core.Stack, null, /*#__PURE__*/React.createElement(core.Group, {
+  const form$1 = form.useForm({
+    initialValues: {
+      search: search
+    }
+  });
+  return /*#__PURE__*/React.createElement(SimplePanel, rest, /*#__PURE__*/React.createElement(core.Stack, null, /*#__PURE__*/React.createElement("form", {
+    onSubmit: form$1.onSubmit(values => {
+      searchFn ? searchFn(values) : void 0;
+    })
+  }, /*#__PURE__*/React.createElement(core.Group, {
     gap: 'xs'
-  }, /*#__PURE__*/React.createElement(core.TextInput, {
+  }, /*#__PURE__*/React.createElement(core.TextInput, _extends({
     fw: 300,
     name: "search",
     size: "md",
     radius: "md",
     flex: 1,
     value: search,
-    onChange: e => setSearch(e.currentTarget.value),
     placeholder: placeholder,
     leftSection: /*#__PURE__*/React.createElement(Icons, searchIcon),
     rightSection: typeof filterFn == 'function' ? /*#__PURE__*/React.createElement(core.ActionIcon, {
       variant: "transparent",
       onClick: filterFn
     }, /*#__PURE__*/React.createElement(Icons, filterIcon)) : /*#__PURE__*/React.createElement(React.Fragment, null)
-  }), /*#__PURE__*/React.createElement(core.Button, {
+  }, form$1.getInputProps("search"))), /*#__PURE__*/React.createElement(core.Button, {
     variant: "light",
     size: "md",
     fw: 300,
@@ -12235,7 +12244,7 @@ const SearchPanel = _ref3 => {
     maw: 150,
     type: "submit",
     leftSection: /*#__PURE__*/React.createElement(Icons, searchIcon)
-  }, searchText)), children));
+  }, searchText))), children));
 };
 
 const LabelPanelItem = _ref => {

package/build/index.esm.js/index.js

@@ -8,6 +8,7 @@ import HighchartsRounded from 'highcharts-rounded-corners';
 import * as IconSax from 'iconsax-react';
 import { Link } from 'react-router-dom';
 import { useDisclosure, useToggle } from '@mantine/hooks';
+import { useForm } from '@mantine/form';
 import '@fontsource/poppins/100.css';
 import '@fontsource/poppins/200.css';
 import '@fontsource/poppins/300.css';
@@ -16,7 +17,6 @@ import '@fontsource/poppins/500.css';
 import '@fontsource/poppins/600.css';
 import '@fontsource/poppins/700.css';
 import '@fontsource/poppins/800.css';
-import { useForm } from '@mantine/form';
 
 function _mergeNamespaces(n, m) {
 	m.forEach(function (e) {
@@ -12185,27 +12185,36 @@ const SearchPanel = _ref3 => {
     },
     searchText = "Search",
     filterFn,
+    searchFn,
     children,
     ...rest
   } = _ref3;
   const [search, setSearch] = rest.searchState || useState("");
-  return /*#__PURE__*/React.createElement(SimplePanel, rest, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Group, {
+  const form = useForm({
+    initialValues: {
+      search: search
+    }
+  });
+  return /*#__PURE__*/React.createElement(SimplePanel, rest, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement("form", {
+    onSubmit: form.onSubmit(values => {
+      searchFn ? searchFn(values) : void 0;
+    })
+  }, /*#__PURE__*/React.createElement(Group, {
     gap: 'xs'
-  }, /*#__PURE__*/React.createElement(TextInput, {
+  }, /*#__PURE__*/React.createElement(TextInput, _extends({
     fw: 300,
     name: "search",
     size: "md",
     radius: "md",
     flex: 1,
     value: search,
-    onChange: e => setSearch(e.currentTarget.value),
     placeholder: placeholder,
     leftSection: /*#__PURE__*/React.createElement(Icons, searchIcon),
     rightSection: typeof filterFn == 'function' ? /*#__PURE__*/React.createElement(ActionIcon, {
       variant: "transparent",
       onClick: filterFn
     }, /*#__PURE__*/React.createElement(Icons, filterIcon)) : /*#__PURE__*/React.createElement(React.Fragment, null)
-  }), /*#__PURE__*/React.createElement(Button, {
+  }, form.getInputProps("search"))), /*#__PURE__*/React.createElement(Button, {
     variant: "light",
     size: "md",
     fw: 300,
@@ -12214,7 +12223,7 @@ const SearchPanel = _ref3 => {
     maw: 150,
     type: "submit",
     leftSection: /*#__PURE__*/React.createElement(Icons, searchIcon)
-  }, searchText)), children));
+  }, searchText))), children));
 };
 
 const LabelPanelItem = _ref => {

package/build/typings/components/panels/simple/Simple.types.d.ts

@@ -21,5 +21,6 @@ export interface SearchPanelProps extends PanelProps {
     filterIcon?: IconsProps;
     searchText?: string;
     searchState?: [string, (value: string) => void];
+    searchFn?: (value: Record<string, any>) => void;
     filterFn?: () => void;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adiba-banking-cloud/backoffice",
   "author": "TUROG Technologies",
-  "version": "0.0.91",
+  "version": "0.0.92",
   "description": "An ADIBA component library for backoffice and dashboard applications",
   "license": "ISC",
   "main": "build/index.cjs.js",