@appcorp/shadcn 1.0.18 → 1.0.20

package/components/enhanced-table-header-action.d.ts

@@ -2,6 +2,8 @@ import { FC } from "react";
 import { HeaderAction } from "./enhanced-table";
 interface EnhancedTableHeaderActionProps {
     headerActions: HeaderAction[];
+    numberOfFilters?: number;
+    onClearFilters?: () => void;
 }
 export declare const EnhancedTableHeaderAction: FC<EnhancedTableHeaderActionProps>;
 export {};

package/components/enhanced-table-header-action.js

@@ -5,17 +5,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EnhancedTableHeaderAction = void 0;
 var react_1 = __importDefault(require("react"));
+var lucide_react_1 = require("lucide-react");
 var button_1 = require("./button");
+var badge_1 = require("./badge");
 var EnhancedTableHeaderAction = function (_a) {
-    var headerActions = _a.headerActions;
+    var headerActions = _a.headerActions, numberOfFilters = _a.numberOfFilters, onClearFilters = _a.onClearFilters;
     return (react_1.default.createElement(react_1.default.Fragment, null, headerActions.length > 0 && (react_1.default.createElement("div", { className: "flex gap-2" }, headerActions
         .filter(function (action) { return action.enabled !== false; })
         .sort(function (a, b) { return (a.order || 0) - (b.order || 0); })
-        .map(function (action, index) { return (react_1.default.createElement(button_1.Button, { key: action.id || action.key || index, variant: action.variant || "default", onClick: function () {
-            if (action.onClick)
-                action.onClick();
-            if (action.handleOnClick)
-                action.handleOnClick();
-        } }, action.label)); })))));
+        .map(function (action, index) {
+        var isFilterButton = action.label
+            .toLowerCase()
+            .includes("filter");
+        var showFilterIndicators = isFilterButton && numberOfFilters && numberOfFilters > 0;
+        return (react_1.default.createElement("div", { key: action.id || action.key || index, className: "relative" },
+            react_1.default.createElement(button_1.Button, { variant: action.variant || "default", onClick: function () {
+                    if (action.onClick)
+                        action.onClick();
+                    if (action.handleOnClick)
+                        action.handleOnClick();
+                } }, action.label),
+            showFilterIndicators && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(badge_1.Badge, { variant: "secondary", className: "absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0 text-xs rounded-full" }, numberOfFilters),
+                onClearFilters && (react_1.default.createElement("button", { onClick: function (e) {
+                        e.stopPropagation();
+                        onClearFilters();
+                    }, className: "absolute -top-2 -left-2 h-5 w-5 rounded-full bg-muted hover:bg-muted/80 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors", "aria-label": "Clear all filters" },
+                    react_1.default.createElement(lucide_react_1.X, { className: "h-3 w-3" })))))));
+    })))));
 };
 exports.EnhancedTableHeaderAction = EnhancedTableHeaderAction;

package/components/enhanced-table.d.ts

@@ -69,6 +69,8 @@ export interface EnhancedTableProps {
     handleSearchInput: (key: string, value: string) => void;
     headerActions: HeaderAction[];
     rowActions: RowAction[];
+    numberOfFilters?: number;
+    onClearFilters?: () => void;
     loading: boolean;
     isRTL?: boolean;
     translationLabels?: {

package/components/enhanced-table.js

@@ -42,7 +42,7 @@ var COMPONENT_TYPE;
     COMPONENT_TYPE["BOOLEAN"] = "BOOLEAN";
 })(COMPONENT_TYPE || (exports.COMPONENT_TYPE = COMPONENT_TYPE = {}));
 var EnhancedTable = function (_a) {
-    var currentPage = _a.currentPage, handleNextOnClick = _a.handleNextOnClick, handleOnSelect = _a.handleOnSelect, handlePreviousOnClick = _a.handlePreviousOnClick, handleSearchInput = _a.handleSearchInput, headerActions = _a.headerActions, isNextDisabled = _a.isNextDisabled, isPreviousDisabled = _a.isPreviousDisabled, _b = _a.isRTL, isRTL = _b === void 0 ? false : _b, listOptions = _a.listOptions, loading = _a.loading, _c = _a.nodeSelectKey, nodeSelectKey = _c === void 0 ? "pageLimit" : _c, pageLimit = _a.pageLimit, rowActions = _a.rowActions, _d = _a.searchDisabled, searchDisabled = _d === void 0 ? false : _d, _e = _a.searchEnabled, searchEnabled = _e === void 0 ? true : _e, _f = _a.searchId, searchId = _f === void 0 ? "table-search" : _f, _g = _a.searchPlaceholder, searchPlaceholder = _g === void 0 ? "Search..." : _g, searchValue = _a.searchValue, tableBodyCols = _a.tableBodyCols, tableBodyRows = _a.tableBodyRows, tableDescription = _a.tableDescription, tableHeading = _a.tableHeading, tableHeadItems = _a.tableHeadItems, totalPages = _a.totalPages, _h = _a.translationLabels, translationLabels = _h === void 0 ? {} : _h;
+    var currentPage = _a.currentPage, handleNextOnClick = _a.handleNextOnClick, handleOnSelect = _a.handleOnSelect, handlePreviousOnClick = _a.handlePreviousOnClick, handleSearchInput = _a.handleSearchInput, headerActions = _a.headerActions, isNextDisabled = _a.isNextDisabled, isPreviousDisabled = _a.isPreviousDisabled, _b = _a.isRTL, isRTL = _b === void 0 ? false : _b, listOptions = _a.listOptions, loading = _a.loading, _c = _a.nodeSelectKey, nodeSelectKey = _c === void 0 ? "pageLimit" : _c, numberOfFilters = _a.numberOfFilters, onClearFilters = _a.onClearFilters, pageLimit = _a.pageLimit, rowActions = _a.rowActions, _d = _a.searchDisabled, searchDisabled = _d === void 0 ? false : _d, _e = _a.searchEnabled, searchEnabled = _e === void 0 ? true : _e, _f = _a.searchId, searchId = _f === void 0 ? "table-search" : _f, _g = _a.searchPlaceholder, searchPlaceholder = _g === void 0 ? "Search..." : _g, searchValue = _a.searchValue, tableBodyCols = _a.tableBodyCols, tableBodyRows = _a.tableBodyRows, tableDescription = _a.tableDescription, tableHeading = _a.tableHeading, tableHeadItems = _a.tableHeadItems, totalPages = _a.totalPages, _h = _a.translationLabels, translationLabels = _h === void 0 ? {} : _h;
     // Default translation values
     var defaultLabels = {
         booleanYes: "Yes",
@@ -205,7 +205,7 @@ var EnhancedTable = function (_a) {
                 tableDescription && (react_1.default.createElement("p", { className: "text-muted-foreground" }, tableDescription))),
             react_1.default.createElement("div", { className: "flex flex-row items-center justify-end gap-2" },
                 react_1.default.createElement(enhanced_table_header_search_1.EnhancedTableHeaderSearch, { handleSearchInput: handleSearchInput, loading: loading, searchDisabled: searchDisabled, searchEnabled: searchEnabled, searchId: searchId, searchPlaceholder: searchPlaceholder, searchValue: searchValue }),
-                react_1.default.createElement(enhanced_table_header_action_1.EnhancedTableHeaderAction, { headerActions: headerActions }))),
+                react_1.default.createElement(enhanced_table_header_action_1.EnhancedTableHeaderAction, { headerActions: headerActions, numberOfFilters: numberOfFilters, onClearFilters: onClearFilters }))),
         react_1.default.createElement("div", { className: "border rounded-md" },
             react_1.default.createElement(table_1.Table, null,
                 react_1.default.createElement(table_1.TableHeader, null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/shadcn",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "scripts": {
     "build:next": "next build",
     "build:storybook": "storybook build -c .storybook -o .out",
@@ -57,6 +57,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/color": "^4.2.0",
     "@types/jest": "^30.0.0",
     "@types/lodash.throttle": "^4",
     "@types/node": "^24.7.2",