@pallasoft/ps-table-components 1.7.0 → 1.8.0

package/dist/components/ps-table-toolbar.js

@@ -13,6 +13,6 @@ const PsTableToolbar = ({ actions, columns, filters, isSearchable, onClearFilter
     const filterableColumns = columns.filter((column) => column.filter);
     const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
     const activeCount = filterableColumns.filter((column) => ps_table_query_service_1.PsTableQueryService.isActive(filters[column.id])).length;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-center gap-2', children: [isSearchable ? ((0, jsx_runtime_1.jsxs)("label", { className: 'relative basis-full sm:min-w-[12rem] sm:flex-1 sm:basis-auto sm:max-w-xs', children: [(0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: searchPlaceholder }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: ps_icons_1.PsIconKey.Search }), (0, jsx_runtime_1.jsx)("input", { className: 'ps-input-control ps-focus-ring min-h-10 rounded-full pl-10 text-sm', onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, type: 'search', value: search })] })) : null, filterableColumns.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: toolbarButtonClassName, children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Filter }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only sm:not-sr-only', children: "Filters" }), activeCount > 0 ? ((0, jsx_runtime_1.jsx)("span", { className: 'inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-[color:var(--ps-color-primary-contrast)]', children: activeCount })) : null] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar max-h-[min(34rem,80vh)] w-[min(22rem,calc(100vw-2rem))] overflow-y-auto outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": 'Filters', className: 'flex flex-col gap-4 p-4 outline-none', children: (0, jsx_runtime_1.jsxs)(ps_core_components_1.PsLayer, { zIndex: zIndex, children: [filterableColumns.map((column) => ((0, jsx_runtime_1.jsx)(ps_table_filter_field_1.PsTableFilterField, { kind: column.filter ? column.filter.kind : 'text', label: column.label, onChange: (value) => onFilterChange(column.id, value), options: ps_table_query_service_1.PsTableQueryService.options(rows, column), value: filters[column.id] ? filters[column.id] : {} }, column.id))), (0, jsx_runtime_1.jsx)("div", { className: 'flex justify-end border-t border-line pt-3', children: (0, jsx_runtime_1.jsx)("button", { className: 'ps-focus-ring rounded-lg px-2 py-1 text-sm font-semibold text-ink/65 hover:text-ink disabled:opacity-40', disabled: activeCount === 0, onClick: onClearFilters, type: 'button', children: "Clear all" }) })] }) }) })] })) : null, activeCount > 0 ? ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring rounded-full px-3 py-2 text-sm font-semibold text-ink/65 hover:text-ink'), onClick: onClearFilters, type: 'button', children: "Clear filters" })) : null, actions ? (0, jsx_runtime_1.jsx)("div", { className: 'ml-auto flex items-center gap-2', children: actions }) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-center gap-2', children: [isSearchable ? ((0, jsx_runtime_1.jsxs)("label", { className: 'relative basis-full sm:min-w-[12rem] sm:flex-1 sm:basis-auto sm:max-w-xs', children: [(0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: searchPlaceholder }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: ps_icons_1.PsIconKey.Search }), (0, jsx_runtime_1.jsx)("input", { className: 'ps-input-control ps-focus-ring min-h-10 rounded-full pl-10 text-sm', onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, type: 'search', value: search })] })) : null, filterableColumns.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: toolbarButtonClassName, children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Filter }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only sm:not-sr-only', children: "Filters" }), activeCount > 0 ? ((0, jsx_runtime_1.jsx)("span", { className: 'inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-[color:var(--ps-color-primary-contrast)]', children: activeCount })) : null] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar max-h-[min(34rem,80vh)] w-[min(22rem,calc(100vw-2rem))] overflow-y-auto outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": 'Filters', className: 'flex flex-col gap-4 p-4 outline-none', children: (0, jsx_runtime_1.jsxs)(ps_core_components_1.PsLayer, { zIndex: zIndex, children: [filterableColumns.map((column) => ((0, jsx_runtime_1.jsx)(ps_table_filter_field_1.PsTableFilterField, { kind: column.filter ? column.filter.kind : 'text', label: column.label, onChange: (value) => onFilterChange(column.id, value), options: ps_table_query_service_1.PsTableQueryService.options(rows, column), value: filters[column.id] ? filters[column.id] : {} }, column.id))), (0, jsx_runtime_1.jsx)("div", { className: 'flex justify-end border-t border-line pt-3', children: (0, jsx_runtime_1.jsx)("button", { className: 'ps-focus-ring rounded-lg px-2 py-1 text-sm font-semibold text-ink/65 hover:text-ink disabled:opacity-40', disabled: activeCount === 0, onClick: onClearFilters, type: 'button', children: "Clear all" }) })] }) }) })] })) : null, activeCount > 0 ? ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring rounded-full px-3 py-2 text-sm font-semibold text-ink/65 hover:text-ink'), onClick: onClearFilters, type: 'button', children: "Clear filters" })) : null, actions ? ((0, jsx_runtime_1.jsx)("div", { className: 'ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2', children: actions })) : null] }));
 };
 exports.PsTableToolbar = PsTableToolbar;

package/dist/constants/ps-table-search-config.d.ts

@@ -0,0 +1,6 @@
+export declare const PsTableSearchConfig: {
+    readonly currencySymbols: RegExp;
+    readonly diacritics: RegExp;
+    readonly thousandsSeparator: RegExp;
+    readonly whitespace: RegExp;
+};

package/dist/constants/ps-table-search-config.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableSearchConfig = void 0;
+exports.PsTableSearchConfig = {
+    currencySymbols: /[$€£¥]/g,
+    diacritics: /[̀-ͯ]/g,
+    thousandsSeparator: /(\d),(?=\d{3}\b)/g,
+    whitespace: /\s+/g,
+};

package/dist/index.d.ts

@@ -9,3 +9,4 @@ export * from './interfaces/table-query';
 export * from './interfaces/table-row-action';
 export * from './interfaces/table-sort';
 export * from './services/ps-table-query-service';
+export * from './services/ps-table-search-service';

package/dist/index.js

@@ -25,3 +25,4 @@ __exportStar(require("./interfaces/table-query"), exports);
 __exportStar(require("./interfaces/table-row-action"), exports);
 __exportStar(require("./interfaces/table-sort"), exports);
 __exportStar(require("./services/ps-table-query-service"), exports);
+__exportStar(require("./services/ps-table-search-service"), exports);

package/dist/services/ps-table-query-service.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTableQueryService = void 0;
 const table_filter_kind_1 = require("../constants/table-filter-kind");
+const ps_table_search_service_1 = require("./ps-table-search-service");
 class PsTableQueryService {
     static isActive(value) {
         if (!value)
@@ -39,8 +40,7 @@ class PsTableQueryService {
         return true;
     }
     static apply(rows, columns, filters, search, getSearchText, sort) {
-        const query = search.trim().toLowerCase();
-        const filtered = rows.filter((row) => (query === '' || !getSearchText || getSearchText(row).toLowerCase().includes(query)) &&
+        const filtered = rows.filter((row) => (!getSearchText || ps_table_search_service_1.PsTableSearchService.matches(getSearchText(row), search)) &&
             columns.every((column) => PsTableQueryService.matchesFilter(row, column, filters[column.id] ? filters[column.id] : {})));
         const sortColumn = sort ? columns.find((column) => column.id === sort.columnId) : undefined;
         if (!sort || !sortColumn || !sortColumn.sortValue)

package/dist/services/ps-table-search-service.d.ts

@@ -0,0 +1,5 @@
+export declare class PsTableSearchService {
+    static normalise(value: string): string;
+    static tokens(query: string): string[];
+    static matches(text: string, query: string): boolean;
+}

package/dist/services/ps-table-search-service.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableSearchService = void 0;
+const ps_table_search_config_1 = require("../constants/ps-table-search-config");
+class PsTableSearchService {
+    static normalise(value) {
+        return value
+            .normalize('NFD')
+            .replace(ps_table_search_config_1.PsTableSearchConfig.diacritics, '')
+            .toLowerCase()
+            .replace(ps_table_search_config_1.PsTableSearchConfig.thousandsSeparator, '$1')
+            .replace(ps_table_search_config_1.PsTableSearchConfig.currencySymbols, ' ')
+            .replace(ps_table_search_config_1.PsTableSearchConfig.whitespace, ' ')
+            .trim();
+    }
+    static tokens(query) {
+        const normalised = PsTableSearchService.normalise(query);
+        return normalised === '' ? [] : normalised.split(' ');
+    }
+    static matches(text, query) {
+        const tokens = PsTableSearchService.tokens(query);
+        if (tokens.length === 0)
+            return true;
+        const haystack = PsTableSearchService.normalise(text);
+        return tokens.every((token) => haystack.includes(token));
+    }
+}
+exports.PsTableSearchService = PsTableSearchService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-table-components",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -68,10 +68,10 @@
 		"url": "git+https://github.com/pallasoft/ps-table-components.git"
 	},
 	"dependencies": {
-		"@pallasoft/ps-core-components": "^2.2.0",
+		"@pallasoft/ps-core-components": "^2.3.1",
 		"@pallasoft/ps-design-system": "^1.3.0",
 		"@pallasoft/ps-icons": "^1.5.0",
-		"@pallasoft/ps-input-components": "^1.8.0",
+		"@pallasoft/ps-input-components": "^1.9.0",
 		"@pallasoft/ps-motion-components": "^1.1.0",
 		"react-aria-components": "^1.21.1"
 	}