pixelize-design-library 2.1.66 → 2.1.67

package/dist/Components/Table/Table.js

@@ -34,6 +34,7 @@ var TableHeader_1 = __importDefault(require("./Components/TableHeader"));
 var TableBody_1 = __importDefault(require("./Components/TableBody"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var useTable_1 = __importDefault(require("./Components/useTable"));
+var table_1 = require("../../Utils/table");
 var usePreferences_1 = require("../../Hooks/usePreferences");
 var TableSettings_1 = __importDefault(require("./TableSettings/TableSettings"));
 var HeaderActions_1 = __importDefault(require("./Components/HeaderActions"));
@@ -41,14 +42,14 @@ var Divider_1 = __importDefault(require("../Divider/Divider"));
 var TableSearch_1 = __importDefault(require("./Components/TableSearch"));
 function Table(_a) {
     var _b, _c, _d, _e, _f, _g;
-    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _h = _a.isCheckbox, isCheckbox = _h === void 0 ? false : _h, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _j = _a.noBorders, noBorders = _j === void 0 ? false : _j, _k = _a.isPagination, isPagination = _k === void 0 ? true : _k, onRowClick = _a.onRowClick, selections = _a.selections, _l = _a.isActionFreeze, isActionFreeze = _l === void 0 ? true : _l, _m = _a.preferencesUrl, preferencesUrl = _m === void 0 ? "" : _m, _o = _a.preferencesKey, preferencesKey = _o === void 0 ? "" : _o, _p = _a.preferencesName, preferencesName = _p === void 0 ? "" : _p, _q = _a.preferencesPage, preferencesPage = _q === void 0 ? "" : _q, _r = _a.authToken, authToken = _r === void 0 ? "" : _r, _s = _a.paginationMode, paginationMode = _s === void 0 ? "client" : _s, _t = _a.noOfRowsPerPage, noOfRowsPerPage = _t === void 0 ? 50 : _t, _u = _a.totalRecords, totalRecords = _u === void 0 ? 0 : _u, onPagination = _a.onPagination, _v = _a.isTableSettings, isTableSettings = _v === void 0 ? false : _v, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onColumnFilter = _a.onColumnFilter;
+    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _h = _a.isCheckbox, isCheckbox = _h === void 0 ? false : _h, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _j = _a.noBorders, noBorders = _j === void 0 ? false : _j, _k = _a.isPagination, isPagination = _k === void 0 ? true : _k, onRowClick = _a.onRowClick, selections = _a.selections, _l = _a.isActionFreeze, isActionFreeze = _l === void 0 ? true : _l, _m = _a.preferencesUrl, preferencesUrl = _m === void 0 ? "" : _m, _o = _a.preferencesKey, preferencesKey = _o === void 0 ? "" : _o, _p = _a.preferencesName, preferencesName = _p === void 0 ? "" : _p, _q = _a.preferencesPage, preferencesPage = _q === void 0 ? "" : _q, _r = _a.authToken, authToken = _r === void 0 ? "" : _r, _s = _a.paginationMode, paginationMode = _s === void 0 ? "client" : _s, _t = _a.noOfRowsPerPage, noOfRowsPerPage = _t === void 0 ? 50 : _t, _u = _a.totalRecords, totalRecords = _u === void 0 ? 0 : _u, onPagination = _a.onPagination, _v = _a.isTableSettings, isTableSettings = _v === void 0 ? false : _v, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _w = (0, react_1.useState)({}), columnsSearch = _w[0], setColumnsSearch = _w[1];
-    (0, react_1.useEffect)(function () {
-        if (onColumnFilter) {
-            onColumnFilter(columnsSearch);
-        }
-    }, [columnsSearch, onColumnFilter]);
+    //   useEffect(() => {
+    //   if (onColumnFilter) {
+    //     onColumnFilter(columnsSearch);
+    //   }
+    // }, [columnsSearch, onColumnFilter]);
     var isServerPagination = paginationMode === "server";
     var _x = (0, usePreferences_1.useGetPreferences)({
         baseUrl: preferencesUrl,
@@ -86,9 +87,9 @@ function Table(_a) {
         totalRecords: totalRecords,
         isServerPagination: isServerPagination,
     }), tableData = _y.tableData, isContent = _y.isContent, isLink = _y.isLink, headerRefs = _y.headerRefs, columnWidths = _y.columnWidths, handleSort = _y.handleSort, handleCheckbox = _y.handleCheckbox, filteredData = _y.filteredData, startRow = _y.startRow, endRow = _y.endRow, selection = _y.selection, columnsSort = _y.columnsSort, currentPage = _y.currentPage, pages = _y.pages, rowsPerPage = _y.rowsPerPage, handlePageSizeChange = _y.handlePageSizeChange, setCurrentPage = _y.setCurrentPage, columnsList = _y.columnsList, handleColumnPreferences = _y.handleColumnPreferences;
-    // const _filteredData = useMemo(() => {
-    //   return searchAndSortData(filteredData, columnsSearch);
-    // }, [columnsSearch, filteredData]);
+    var _filteredData = (0, react_1.useMemo)(function () {
+        return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
+    }, [columnsSearch, filteredData]);
     (0, react_1.useEffect)(function () {
         if (onPagination) {
             onPagination(currentPage + 1, noOfRowsPerPage);
@@ -128,6 +129,6 @@ function Table(_a) {
                                 ? false
                                 : "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch })),
                 react_1.default.createElement(react_3.Tbody, null,
-                    react_1.default.createElement(TableBody_1.default, { data: filteredData, columns: columnsList, startRow: startRow, endRow: endRow, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))));
+                    react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))));
 }
 exports.default = Table;

package/dist/Pages/KaTableExample.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const KaTableExample: () => React.JSX.Element;
+export default KaTableExample;

package/dist/Pages/KaTableExample.js

@@ -0,0 +1,259 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var KaTable_1 = __importDefault(require("../Components/KaTable/KaTable"));
+var KaTable_2 = require("../Components/KaTable/KaTable");
+var icons_1 = require("@chakra-ui/icons");
+var react_2 = require("@chakra-ui/react");
+var menuItems = [
+    { label: "Hide column", action: "hidecolumn" },
+    {
+        label: "Filter",
+        submenu: [
+            { label: "Filter by Date", action: "Filter by Date" },
+            { label: "Filter by Name", action: "Filter by Name" },
+            { label: "Filter by Status", action: "Filter by Status" },
+        ],
+    },
+];
+var DataType = KaTable_2.TableEnums.DataType;
+var dataArray = Array(5)
+    .fill(undefined)
+    .map(function (_, index) { return ({
+    column1: index % 2 === 0,
+    column2: "column:2 row:".concat(index + 1),
+    column3: "column:3 row:".concat(index + 1),
+    column4: "column:4 row:".concat(index + 1),
+    column5: "column:5 row:".concat(index + 1),
+    column6: index + 20,
+    column7: index + 25,
+    column8: index + 30,
+    column9: index + 35,
+    column10: index + 40,
+    column11: index + 45,
+    column12: index + 50,
+    column13: index + 55,
+    column14: index + 60,
+    column15: new Date(2022, 11, index),
+    id: index + 1,
+}); });
+var columns = [
+    {
+        key: "column1",
+        title: "Column 1",
+        dataType: DataType.Boolean,
+        width: 100,
+        columnFreeze: true,
+        customHeader: false,
+    },
+    {
+        key: "column2",
+        title: "Column 2",
+        dataType: DataType.String,
+        width: 250,
+        // visible: false,
+    },
+    {
+        key: "column3",
+        title: "Column 3",
+        dataType: DataType.Number,
+        width: 150,
+        filter: true,
+        menu: [
+            {
+                label: "Filter",
+                onClick: function () { return console.log("MENU Filter clicks"); },
+                submenu: [
+                    {
+                        label: "Filter by Date",
+                        onClick: function () { return console.log("SUBMENU Date clicks"); },
+                    },
+                    { label: "Filter by Name" },
+                    // { label: "Filter by Status", action: "Filter by Status" },
+                ],
+            },
+        ],
+    },
+    {
+        key: "column4",
+        title: "Column 4",
+        dataType: DataType.Number,
+        width: 150,
+        sortable: true,
+    },
+    {
+        key: "column5",
+        title: "Column 5",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column6",
+        title: "Column 6",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column7",
+        title: "Column 7",
+        dataType: DataType.Number,
+        width: 150,
+        sortable: true,
+    },
+    {
+        key: "column8",
+        title: "Column 8",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column9",
+        title: "Column 9",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column10",
+        title: "Column 10",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column11",
+        title: "Column 11",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column12",
+        title: "Column 12",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column13",
+        title: "Column 13",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column14",
+        title: "Column 14",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column15",
+        title: "Column 15",
+        dataType: DataType.Date,
+        width: 150,
+    },
+    {
+        key: "editColumn",
+        width: 80,
+        customHeader: false,
+    },
+];
+var KaTableExample = function () {
+    var _a = (0, react_1.useState)(false), actionButtons = _a[0], setActionButtons = _a[1];
+    var _b = (0, react_1.useState)([]), selectedRows = _b[0], setSelectedRows = _b[1];
+    // const kaTableFormat = (props: any) => {
+    //   if (props.column.dataType === DataType.Date) {
+    //     return (
+    //       props.value &&
+    //       props.value.toLocaleDateString("en", {
+    //         month: "2-digit",
+    //         day: "2-digit",
+    //         year: "numeric",
+    //       })
+    //     );
+    //   }
+    // };
+    var EditButton = function (_a) {
+        var dispatch = _a.dispatch, rowKeyValue = _a.rowKeyValue;
+        return (react_1.default.createElement("div", { className: "edit-cell-button" },
+            react_1.default.createElement(icons_1.EditIcon, null),
+            react_1.default.createElement(icons_1.DeleteIcon, null)));
+    };
+    // const handleSortChange = (newSortState: any, columnName: any) => {
+    //   console.log(`Sort state for ${columnName} changed to:`, newSortState);
+    // };
+    // const handleMenuItemClick = (action: any, columnName: any) => {
+    //   console.log(`Menu item clicked for ${columnName}:`, action);
+    // };
+    var handleCheckSelect = (0, react_1.useCallback)(function (selectedRows) {
+        console.log("CB", selectedRows);
+        if (selectedRows.length !== 0) {
+            setActionButtons(true);
+        }
+        else {
+            setActionButtons(false);
+        }
+        setSelectedRows(selectedRows);
+    }, []);
+    // console.log(actionButtons, "actionButtons");
+    var handleExample = function () {
+        setSelectedRows([]);
+    };
+    // console.log(selectedRows, "selectedRows");
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_2.Button, { onClick: handleExample }, "click here"),
+        react_1.default.createElement(KaTable_1.default, { data: dataArray, columns: columns, checkSelect: true, onRowClick: function (rowKeyValue) {
+                console.log("Row clicked", rowKeyValue);
+            }, selected: selectedRows, onSelectionChange: function (selectedRows) {
+                handleCheckSelect(selectedRows);
+            }, columnVisibility: true, 
+            // onSortChange={handleSortChange}
+            // onMenuItemClick={handleMenuItemClick}
+            // format={kaTableFormat}
+            childComponents: {
+                cellText: {
+                    content: function (props) {
+                        if (props.column.key === "editColumn") {
+                            return react_1.default.createElement(EditButton, __assign({}, props));
+                        }
+                    },
+                },
+            }, loading: {
+                enabled: false,
+                text: "Loading data",
+            } })));
+};
+exports.default = KaTableExample;

package/dist/Pages/datePick.js

@@ -59,10 +59,13 @@ var DatePick = function () {
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("h2", null, "Single Date Picker"),
         react_1.default.createElement("h2", null, "Date "),
+        react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDate, onChange: handleDateChange, dateFormat: "dd/MM/yyyy", pickerType: "date", width: "300px", error: true, errorMessage: "Invalid date", disableToday: true }),
         react_1.default.createElement("h2", null, "time "),
+        react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedTime, onChange: handleTimeChange, dateFormat: "HH:mm", pickerType: "time", width: "300px", error: true, errorMessage: "Invalid date" }),
         react_1.default.createElement("h2", null, "datetime "),
         react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDateTime, onChange: handleDateTimeChange, dateFormat: "dd/MM/yyyy HH:mm", pickerType: "datetime", width: "300px", error: true, errorMessage: "Invalid date" }),
         react_1.default.createElement("br", null),
-        react_1.default.createElement("h2", null, "Date Range Picker")));
+        react_1.default.createElement("h2", null, "Date Range Picker"),
+        react_1.default.createElement(DatePicker_1.default, { isRange: true, dateFormat: "dd/MM/yyyy", pickerType: "date", onChange: handleDateRangeChange, selectedDate: selectedDateRange, width: "300px", error: true, errorMessage: "Invalid date" })));
 };
 exports.default = DatePick;

package/dist/Pages/table.js

@@ -6,10 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableExample = void 0;
 var react_1 = __importDefault(require("react"));
 var Table_1 = __importDefault(require("../Components/Table/Table"));
+var react_2 = require("@chakra-ui/react");
 var tableData = [
     {
         id: 1,
-        name: "John Doe1",
+        name: (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: "0.5rem" },
+            react_1.default.createElement("span", null, "\uD83D\uDE00"),
+            " John Doe1")),
         age: 30,
         gender: "Male",
         onLink: function (url) {

package/dist/Theme/Default/fonts.d.ts

@@ -0,0 +1,35 @@
+import "@fontsource/ubuntu-sans";
+declare const fontOptions: {
+    fonts: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+    fontWeights: {
+        hairline: number;
+        thin: number;
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+        black: number;
+    };
+};
+export default fontOptions;

package/dist/Theme/Default/fonts.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@fontsource/ubuntu-sans");
+var fontOptions = {
+    fonts: {
+        body: "Ubuntu Sans, serif",
+        heading: "Ubuntu Sans, serif",
+        mono: "Ubuntu Sans, monospace",
+    },
+    fontSizes: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem",
+        "2xl": "1.5rem",
+        "3xl": "1.875rem",
+        "4xl": "2.25rem",
+        "5xl": "3rem",
+        "6xl": "3.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6rem",
+        "9xl": "8rem",
+    },
+    fontWeights: {
+        hairline: 100,
+        thin: 200,
+        light: 300,
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+        extrabold: 800,
+        black: 900,
+    },
+};
+exports.default = fontOptions;

package/dist/Utils/table.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -10,7 +33,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.globalSearchFilter = exports.TableCellCalculation = exports.pageSizeCalculation = exports.useDebounce = exports.debounce = exports.searchAndSortData = exports.calculateLeftOffset = exports.SortMultiColumnData = void 0;
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var useCustomTheme_1 = require("../Theme/useCustomTheme");
 function SortMultiColumnData(data, sortConfig) {
     if (!sortConfig.length)
@@ -37,11 +60,62 @@ var calculateLeftOffset = function (columns, index) {
     return columns.slice(0, index).reduce(function (sum, width) { return sum + width; }, 0);
 };
 exports.calculateLeftOffset = calculateLeftOffset;
+// export const searchAndSortData = (
+//   data: DataObject[],
+//   searchValues: Record<string, string>
+// ) => {
+//   const filteredData = data.filter((item) => {
+//     return Object.keys(searchValues).every((key) => {
+//       const searchValue = searchValues[key].toLowerCase();
+//       return item[key].toString().toLowerCase().includes(searchValue);
+//     });
+//   });
+//   return filteredData.sort((a, b) => {
+//     let aMatchCount = 0;
+//     let bMatchCount = 0;
+//     Object.keys(searchValues).forEach((key) => {
+//       const searchValue = searchValues[key].toLowerCase();
+//       if (a[key] && a[key].toString().toLowerCase() === searchValue) {
+//         aMatchCount++;
+//       }
+//       if (b[key] && b[key].toString().toLowerCase() === searchValue) {
+//         bMatchCount++;
+//       }
+//       if (a[key] && a[key].toString().toLowerCase().includes(searchValue)) {
+//         aMatchCount += 0.5;
+//       }
+//       if (b[key] && b[key].toString().toLowerCase().includes(searchValue)) {
+//         bMatchCount += 0.5;
+//       }
+//     });
+//     return bMatchCount - aMatchCount;
+//   });
+// };
+var getStringValue = function (value) {
+    if (typeof value === "string" || typeof value === "number") {
+        return String(value);
+    }
+    // Handle React elements
+    if (react_1.default.isValidElement(value)) {
+        var element = value;
+        var children = element.props.children;
+        if (typeof children === "string")
+            return children;
+        if (Array.isArray(children)) {
+            return children
+                .map(function (child) { return (typeof child === "string" ? child : ""); })
+                .join(" ");
+        }
+        return "";
+    }
+    return "";
+};
 var searchAndSortData = function (data, searchValues) {
     var filteredData = data.filter(function (item) {
         return Object.keys(searchValues).every(function (key) {
             var searchValue = searchValues[key].toLowerCase();
-            return item[key].toString().toLowerCase().includes(searchValue);
+            var itemValue = getStringValue(item[key]).toLowerCase();
+            return itemValue.includes(searchValue);
         });
     });
     return filteredData.sort(function (a, b) {
@@ -49,18 +123,16 @@ var searchAndSortData = function (data, searchValues) {
         var bMatchCount = 0;
         Object.keys(searchValues).forEach(function (key) {
             var searchValue = searchValues[key].toLowerCase();
-            if (a[key] && a[key].toString().toLowerCase() === searchValue) {
+            var aValue = getStringValue(a[key]).toLowerCase();
+            var bValue = getStringValue(b[key]).toLowerCase();
+            if (aValue === searchValue)
                 aMatchCount++;
-            }
-            if (b[key] && b[key].toString().toLowerCase() === searchValue) {
+            if (bValue === searchValue)
                 bMatchCount++;
-            }
-            if (a[key] && a[key].toString().toLowerCase().includes(searchValue)) {
+            if (aValue.includes(searchValue))
                 aMatchCount += 0.5;
-            }
-            if (b[key] && b[key].toString().toLowerCase().includes(searchValue)) {
+            if (bValue.includes(searchValue))
                 bMatchCount += 0.5;
-            }
         });
         return bMatchCount - aMatchCount;
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.1.66",
+  "version": "2.1.67",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",