@adiba-banking-cloud/backoffice 0.2.3 → 0.2.5

package/build/index.cjs.js/{heatmap-QyWScAOZ.js → heatmap-Bha3If2E.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BHsXwqJB.js');
+var index = require('./index-BiOmZHuM.js');
 
 function _mergeNamespaces(n, m) {
 	m.forEach(function (e) {

package/build/index.cjs.js/{index-BHsXwqJB.js → index-BiOmZHuM.js}

@@ -12172,7 +12172,7 @@ const initChart$1 = props => {
   }
 
   // Fallback: use dynamic import (async, but will work in Vite/Storybook)
-  Promise.resolve().then(function () { return require('./heatmap-QyWScAOZ.js'); }).then(function (n) { return n.heatmap; }).then(heatmapModule => {
+  Promise.resolve().then(function () { return require('./heatmap-Bha3If2E.js'); }).then(function (n) { return n.heatmap; }).then(heatmapModule => {
     const moduleFn = typeof heatmapModule === "function" ? heatmapModule : heatmapModule?.default || heatmapModule;
     if (typeof moduleFn === "function") {
       moduleFn(Highcharts);
@@ -12971,41 +12971,81 @@ const SearchPanel = _ref3 => {
     },
     searchText = "Search",
     searchState,
+    searchInputValue,
     filterFn,
     searchFn,
+    onPillRemove,
     children,
     ...rest
   } = _ref3;
-  const [search, setSearch] = searchState || React.useState("");
+  const [searchPills] = searchState || React.useState([]);
+  const [inputValue, setInputValue] = React.useState(searchInputValue || "");
   const form$1 = form.useForm({
     initialValues: {
-      search: search
+      search: searchInputValue || ""
     }
   });
+
+  // Sync input value with searchInputValue prop
+  React.useEffect(() => {
+    if (searchInputValue !== undefined) {
+      setInputValue(searchInputValue);
+      form$1.setFieldValue("search", searchInputValue);
+    }
+  }, [searchInputValue]);
+  const handleRemovePill = value => {
+    if (onPillRemove) {
+      onPillRemove(value);
+    }
+  };
+  const handleSubmit = values => {
+    // On submit, call searchFn with the input value (search term)
+    // Don't add it as a pill - pills are for filters only
+    const searchValue = inputValue.trim();
+    if (searchFn) {
+      searchFn({
+        search: searchValue ? [searchValue] : []
+      });
+    }
+    setInputValue("");
+    form$1.setFieldValue("search", "");
+  };
+  const handleKeyDown = event => {
+    if (event.key === "Enter" && inputValue.trim()) {
+      event.preventDefault();
+      // Trigger form submit which calls searchFn
+      handleSubmit();
+    } else if (event.key === "Backspace" && inputValue.length === 0 && searchPills.length > 0) {
+      event.preventDefault();
+      handleRemovePill(searchPills[searchPills.length - 1]);
+    }
+  };
   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;
-    })
+    onSubmit: form$1.onSubmit(handleSubmit)
   }, /*#__PURE__*/React.createElement(core.Group, {
     gap: "xs"
-  }, /*#__PURE__*/React.createElement(core.TextInput, {
-    fw: 300,
-    name: "search",
+  }, /*#__PURE__*/React.createElement(core.PillsInput, {
     size: "md",
     radius: "md",
     flex: 1,
-    value: search,
-    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(Icons, filterIcon)) : undefined
+  }, /*#__PURE__*/React.createElement(core.Pill.Group, null, searchPills.map((pill, index) => /*#__PURE__*/React.createElement(core.Pill, {
+    key: `${pill}-${index}`,
+    withRemoveButton: true,
+    onRemove: () => handleRemovePill(pill)
+  }, pill)), /*#__PURE__*/React.createElement(core.PillsInput.Field, {
+    placeholder: placeholder,
+    value: inputValue,
     onChange: e => {
-      setSearch(e.currentTarget.value);
+      setInputValue(e.currentTarget.value);
       form$1.setFieldValue("search", e.currentTarget.value);
-    }
-  }), /*#__PURE__*/React.createElement(core.Button, {
+    },
+    onKeyDown: handleKeyDown
+  }))), /*#__PURE__*/React.createElement(core.Button, {
     variant: "light",
     size: "md",
     fw: 300,

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BHsXwqJB.js');
+var index = require('./index-BiOmZHuM.js');
 require('@mantine/modals');
 require('react');
 require('@mantine/core');

package/build/index.esm.js/{heatmap-CZ2o0bqY.js → heatmap-Dva-F8qJ.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from './index-BlLQ1b_6.js';
+import { g as getDefaultExportFromCjs } from './index-BmuCIg-s.js';
 
 function _mergeNamespaces(n, m) {
 	m.forEach(function (e) {

package/build/index.esm.js/{index-BlLQ1b_6.js → index-BmuCIg-s.js}

@@ -1,7 +1,7 @@
 import { modals } from '@mantine/modals';
 import * as React from 'react';
 import React__default, { useRef, useMemo, useEffect, useState } from 'react';
-import { Center, Image, Space, Popover, Button, Stack, Divider, Group, Text, Menu, Avatar, Badge, NavLink, Card, TextInput, ActionIcon, Box, Title, SegmentedControl, Breadcrumbs, Anchor, ColorSwatch, AspectRatio, Overlay, rem, SimpleGrid, Indicator, Table, createTheme, PinInput, Drawer as Drawer$1, ScrollArea, NumberInput, PasswordInput, Textarea, Grid, MantineProvider } from '@mantine/core';
+import { Center, Image, Space, Popover, Button, Stack, Divider, Group, Text, Menu, Avatar, Badge, NavLink, Card, PillsInput, ActionIcon, Pill, Box, Title, SegmentedControl, Breadcrumbs, Anchor, ColorSwatch, AspectRatio, Overlay, rem, SimpleGrid, Indicator, Table, createTheme, PinInput, Drawer as Drawer$1, ScrollArea, NumberInput, PasswordInput, TextInput, Textarea, Grid, MantineProvider } from '@mantine/core';
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 import _extends from '@babel/runtime/helpers/extends';
 import HighchartsReact from 'highcharts-react-official';
@@ -12151,7 +12151,7 @@ const initChart$1 = props => {
   }
 
   // Fallback: use dynamic import (async, but will work in Vite/Storybook)
-  import('./heatmap-CZ2o0bqY.js').then(function (n) { return n.h; }).then(heatmapModule => {
+  import('./heatmap-Dva-F8qJ.js').then(function (n) { return n.h; }).then(heatmapModule => {
     const moduleFn = typeof heatmapModule === "function" ? heatmapModule : heatmapModule?.default || heatmapModule;
     if (typeof moduleFn === "function") {
       moduleFn(Highcharts);
@@ -12950,41 +12950,81 @@ const SearchPanel = _ref3 => {
     },
     searchText = "Search",
     searchState,
+    searchInputValue,
     filterFn,
     searchFn,
+    onPillRemove,
     children,
     ...rest
   } = _ref3;
-  const [search, setSearch] = searchState || useState("");
+  const [searchPills] = searchState || useState([]);
+  const [inputValue, setInputValue] = useState(searchInputValue || "");
   const form = useForm({
     initialValues: {
-      search: search
+      search: searchInputValue || ""
     }
   });
+
+  // Sync input value with searchInputValue prop
+  React__default.useEffect(() => {
+    if (searchInputValue !== undefined) {
+      setInputValue(searchInputValue);
+      form.setFieldValue("search", searchInputValue);
+    }
+  }, [searchInputValue]);
+  const handleRemovePill = value => {
+    if (onPillRemove) {
+      onPillRemove(value);
+    }
+  };
+  const handleSubmit = values => {
+    // On submit, call searchFn with the input value (search term)
+    // Don't add it as a pill - pills are for filters only
+    const searchValue = inputValue.trim();
+    if (searchFn) {
+      searchFn({
+        search: searchValue ? [searchValue] : []
+      });
+    }
+    setInputValue("");
+    form.setFieldValue("search", "");
+  };
+  const handleKeyDown = event => {
+    if (event.key === "Enter" && inputValue.trim()) {
+      event.preventDefault();
+      // Trigger form submit which calls searchFn
+      handleSubmit();
+    } else if (event.key === "Backspace" && inputValue.length === 0 && searchPills.length > 0) {
+      event.preventDefault();
+      handleRemovePill(searchPills[searchPills.length - 1]);
+    }
+  };
   return /*#__PURE__*/React__default.createElement(SimplePanel, rest, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement("form", {
-    onSubmit: form.onSubmit(values => {
-      searchFn ? searchFn(values) : void 0;
-    })
+    onSubmit: form.onSubmit(handleSubmit)
   }, /*#__PURE__*/React__default.createElement(Group, {
     gap: "xs"
-  }, /*#__PURE__*/React__default.createElement(TextInput, {
-    fw: 300,
-    name: "search",
+  }, /*#__PURE__*/React__default.createElement(PillsInput, {
     size: "md",
     radius: "md",
     flex: 1,
-    value: search,
-    placeholder: placeholder,
     leftSection: /*#__PURE__*/React__default.createElement(Icons, searchIcon),
     rightSection: typeof filterFn == "function" ? /*#__PURE__*/React__default.createElement(ActionIcon, {
       variant: "transparent",
       onClick: filterFn
-    }, /*#__PURE__*/React__default.createElement(Icons, filterIcon)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null),
+    }, /*#__PURE__*/React__default.createElement(Icons, filterIcon)) : undefined
+  }, /*#__PURE__*/React__default.createElement(Pill.Group, null, searchPills.map((pill, index) => /*#__PURE__*/React__default.createElement(Pill, {
+    key: `${pill}-${index}`,
+    withRemoveButton: true,
+    onRemove: () => handleRemovePill(pill)
+  }, pill)), /*#__PURE__*/React__default.createElement(PillsInput.Field, {
+    placeholder: placeholder,
+    value: inputValue,
     onChange: e => {
-      setSearch(e.currentTarget.value);
+      setInputValue(e.currentTarget.value);
       form.setFieldValue("search", e.currentTarget.value);
-    }
-  }), /*#__PURE__*/React__default.createElement(Button, {
+    },
+    onKeyDown: handleKeyDown
+  }))), /*#__PURE__*/React__default.createElement(Button, {
     variant: "light",
     size: "md",
     fw: 300,

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

@@ -1,4 +1,4 @@
-export { A as ApplicationMenu, o as ApplicationPanel, k as AvatarLabelPanel, B as BasicHeatmap, C as CalendarHeatmap, n as ConnectionPanel, V as DEFAULT_API_TIMEOUT, Q as DEFAULT_PAGE_SIZE, D as DonutChart, z as Drawer, e as DynamicLogo, f as DynamicShigaLogo, E as EqualizerColumn, u as ErrorModal, F as File, d as Icons, v as InfoModal, I as InterpolatedHeatmap, L as LabelPanel, R as MAX_PAGE_SIZE, H as MaskedTilePanel, Y as ModalContentWrapper, M as MultiAxisArea, P as PageTitle, q as PaymentMethod, r as PaymentMethodAdd, j as SearchPanel, h as SideMenu, b as SimpleArea, S as SimpleColumn, G as SimpleForm, w as SimpleModal, i as SimplePanel, s as SimpleTable, l as SimpleText, c as StackedArea, a as StackedColumn, p as SubscriptionPlans, x as SuccessModal, J as TilePanel, m as TitleWithIndex, T as TitledPanel, y as TwoFactorModal, U as UserMenu, X as apiClient, W as createApiClient, _ as extractBetweenBraces, $ as extractOutsideBraces, t as theme, N as useManagedModals, K as useModal, O as useUrlFilters, Z as withProviders } from './index-BlLQ1b_6.js';
+export { A as ApplicationMenu, o as ApplicationPanel, k as AvatarLabelPanel, B as BasicHeatmap, C as CalendarHeatmap, n as ConnectionPanel, V as DEFAULT_API_TIMEOUT, Q as DEFAULT_PAGE_SIZE, D as DonutChart, z as Drawer, e as DynamicLogo, f as DynamicShigaLogo, E as EqualizerColumn, u as ErrorModal, F as File, d as Icons, v as InfoModal, I as InterpolatedHeatmap, L as LabelPanel, R as MAX_PAGE_SIZE, H as MaskedTilePanel, Y as ModalContentWrapper, M as MultiAxisArea, P as PageTitle, q as PaymentMethod, r as PaymentMethodAdd, j as SearchPanel, h as SideMenu, b as SimpleArea, S as SimpleColumn, G as SimpleForm, w as SimpleModal, i as SimplePanel, s as SimpleTable, l as SimpleText, c as StackedArea, a as StackedColumn, p as SubscriptionPlans, x as SuccessModal, J as TilePanel, m as TitleWithIndex, T as TitledPanel, y as TwoFactorModal, U as UserMenu, X as apiClient, W as createApiClient, _ as extractBetweenBraces, $ as extractOutsideBraces, t as theme, N as useManagedModals, K as useModal, O as useUrlFilters, Z as withProviders } from './index-BmuCIg-s.js';
 import '@mantine/modals';
 import 'react';
 import '@mantine/core';

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

@@ -20,7 +20,9 @@ export interface SearchPanelProps extends PanelProps {
     searchIcon?: IconsProps;
     filterIcon?: IconsProps;
     searchText?: string;
-    searchState?: [string, (value: string) => void];
+    searchState?: [string[], (value: string[]) => void];
+    searchInputValue?: string;
     searchFn?: (value: Record<string, any>) => void;
     filterFn?: () => void;
+    onPillRemove?: (value: string) => void;
 }

package/package.json

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