ar-design 0.2.21 → 0.2.23

package/dist/components/data-display/table/index.js

@@ -4,7 +4,7 @@ import { ARIcon } from "../../icons";
 import Button from "../../form/button";
 import Checkbox from "../../form/checkbox";
 import Pagination from "../../navigation/pagination";
-import React, { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
+import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Input from "../../form/input";
 import Popover from "../../feedback/popover";
 const Table = forwardRef(({ children, title, description, data, columns, actions, selections, previousSelections, searchedParams, pagination, config = { isSearchable: false }, }, ref) => {
@@ -26,6 +26,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
     const [_searchedParams, setSearchedParams] = useState(undefined);
     const [checkboxSelectedParams, setCheckboxSelectedParams] = useState(undefined);
     // states -> Pagination
+    const [totalRecords, setTotalRecords] = useState(0);
     const [currentPage, setCurrentPage] = useState(1);
     if (config && Object.keys(config.scroll || {}).length > 0) {
         if (_tableContent.current && config.scroll) {
@@ -104,12 +105,10 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                 clearTimeout(_searchTimeOut.current);
             _searchTimeOut.current = setTimeout(() => {
                 setSearchedParams((prev) => ({ ...prev, [event.target.name]: event.target.value }));
-                setCurrentPage(1);
                 pagination && pagination.onChange(1);
             }, 750);
         }
         else {
-            setCurrentPage(1);
             setSearchedText((prev) => ({ ...prev, [event.target.name]: event.target.value }));
         }
     };
@@ -158,10 +157,16 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
             return false;
         });
     };
-    const getData = useCallback(() => {
+    const getData = useMemo(() => {
         let _data = [...data];
-        if (searchedText)
+        if (searchedText) {
             _data = _data.filter((item) => deepSearch(item, searchedText));
+            setTotalRecords(_data.length);
+            setCurrentPage(1);
+        }
+        else {
+            setTotalRecords(data.length);
+        }
         if (pagination && !config.isServerSide) {
             const indexOfLastRow = currentPage * pagination.perPage;
             const indexOfFirstRow = indexOfLastRow - pagination.perPage;
@@ -274,7 +279,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                                     })), windowBlur: true },
                                     React.createElement(Button, { variant: "borderless", icon: { element: React.createElement(ARIcon, { icon: "Filter", stroke: "var(--primary)", size: 16 }) } })))))));
                         })))),
-                React.createElement("tbody", null, getData().map((item, index) => (React.createElement("tr", { key: `row-${index}-${Math.random()}` },
+                React.createElement("tbody", null, getData.map((item, index) => (React.createElement("tr", { key: `row-${index}-${Math.random()}` },
                     selections && (React.createElement("td", { key: `selection-${index}`, className: "sticky-left", "data-sticky-position": "left" },
                         React.createElement(Checkbox, { ref: (element) => (_checkboxItems.current[index] = element), status: "primary", checked: selectionItems.some((selectionItem) => JSON.stringify(selectionItem) === JSON.stringify(item)), onChange: (event) => {
                                 if (event.target.checked)
@@ -325,13 +330,13 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
             React.createElement("span", null,
                 React.createElement("strong", null,
                     "Showing ",
-                    getData().length),
+                    getData.length),
                 " ",
                 React.createElement("span", null,
                     "of ",
-                    pagination?.perPage ?? getData().length,
+                    pagination?.perPage ?? getData.length,
                     " agreement")),
-            React.createElement(Pagination, { totalRecords: pagination.totalRecords, currentPage: currentPage, perPage: pagination.perPage, onChange: (currentPage) => {
+            React.createElement(Pagination, { totalRecords: config.isServerSide ? pagination.totalRecords : totalRecords ?? 0, currentPage: currentPage, perPage: pagination.perPage, onChange: (currentPage) => {
                     config.isServerSide && pagination.onChange(currentPage);
                     setCurrentPage(currentPage);
                 } })))));

package/dist/components/form/select/index.js

@@ -270,8 +270,6 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                     if (event.key === "Enter")
                         return;
                     setSearchText(event.currentTarget.value);
-                }, onBlur: () => {
-                    setTimeout(() => setOptionsOpen(false), 100);
                 }, placeholder: placeholder, validation: validation, disabled: disabled })),
             React.createElement("span", { className: `button-clear ${!disabled && (multiple ? value.length > 0 : value) ? "opened" : "closed"}`, onClick: (event) => {
                     if (disabled)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.2.21",
+  "version": "0.2.23",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",