@appcorp/shadcn 1.1.92 → 1.1.93

package/components/enhanced-combobox.d.ts

@@ -48,6 +48,8 @@ interface EnhancedComboboxProps {
     info?: string;
     /** Optional error text displayed below the component (error state). */
     error?: string;
+    /** Optional key used for lookup within the original options object (defaults to 'id'). */
+    lookupKey?: string;
     /** `data-testid` for the trigger button (e.g. `my-combobox-trigger`). */
     testIdTrigger?: string;
     /** `data-testid` for the search input inside the popover. */
@@ -69,7 +71,7 @@ interface EnhancedComboboxProps {
     /** `data-testid` for the scroll-down button (when scroll indicators enabled). */
     testIdScrollDown?: string;
 }
-export declare function EnhancedCombobox({ className, disabled, emptyText, error, id, info, label, loading, maxHeight, onSearchChange, onValueChange, options, placeholder, required, searchPlaceholder, showScrollIndicators, value, virtualizeThreshold, testIdTrigger, testIdSearchInput, testIdPopoverContent, testIdEmpty, testIdList, testIdOptionPrefix, testIdScrollUp, testIdScrollDown, }: EnhancedComboboxProps): React.JSX.Element;
+export declare function EnhancedCombobox({ className, disabled, emptyText, error, id, info, label, loading, lookupKey, maxHeight, onSearchChange, onValueChange, options, placeholder, required, searchPlaceholder, showScrollIndicators, value, virtualizeThreshold, testIdTrigger, testIdSearchInput, testIdPopoverContent, testIdEmpty, testIdList, testIdOptionPrefix, testIdScrollUp, testIdScrollDown, }: EnhancedComboboxProps): React.JSX.Element;
 interface CompanyComboboxProps {
     companies: Array<{
         id?: string;

package/components/enhanced-combobox.js

@@ -129,13 +129,16 @@ function VirtualizedList(_a) {
         bottomSpacer > 0 && react_1.default.createElement("div", { style: { height: bottomSpacer } })));
 }
 function EnhancedCombobox(_a) {
-    var className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.emptyText, emptyText = _c === void 0 ? "No options found." : _c, error = _a.error, id = _a.id, info = _a.info, label = _a.label, _d = _a.loading, loading = _d === void 0 ? false : _d, _e = _a.maxHeight, maxHeight = _e === void 0 ? 256 : _e, onSearchChange = _a.onSearchChange, onValueChange = _a.onValueChange, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.placeholder, placeholder = _g === void 0 ? "Select option..." : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchPlaceholder, searchPlaceholder = _j === void 0 ? "Search..." : _j, _k = _a.showScrollIndicators, showScrollIndicators = _k === void 0 ? true : _k, value = _a.value, _l = _a.virtualizeThreshold, virtualizeThreshold = _l === void 0 ? 50 : _l, testIdTrigger = _a.testIdTrigger, testIdSearchInput = _a.testIdSearchInput, testIdPopoverContent = _a.testIdPopoverContent, testIdEmpty = _a.testIdEmpty, testIdList = _a.testIdList, testIdOptionPrefix = _a.testIdOptionPrefix, testIdScrollUp = _a.testIdScrollUp, testIdScrollDown = _a.testIdScrollDown;
+    var className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.emptyText, emptyText = _c === void 0 ? "No options found." : _c, error = _a.error, id = _a.id, info = _a.info, label = _a.label, _d = _a.loading, loading = _d === void 0 ? false : _d, lookupKey = _a.lookupKey, _e = _a.maxHeight, maxHeight = _e === void 0 ? 256 : _e, onSearchChange = _a.onSearchChange, onValueChange = _a.onValueChange, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.placeholder, placeholder = _g === void 0 ? "Select option..." : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchPlaceholder, searchPlaceholder = _j === void 0 ? "Search..." : _j, _k = _a.showScrollIndicators, showScrollIndicators = _k === void 0 ? true : _k, value = _a.value, _l = _a.virtualizeThreshold, virtualizeThreshold = _l === void 0 ? 50 : _l, testIdTrigger = _a.testIdTrigger, testIdSearchInput = _a.testIdSearchInput, testIdPopoverContent = _a.testIdPopoverContent, testIdEmpty = _a.testIdEmpty, testIdList = _a.testIdList, testIdOptionPrefix = _a.testIdOptionPrefix, testIdScrollUp = _a.testIdScrollUp, testIdScrollDown = _a.testIdScrollDown;
     var _m = (0, react_1.useState)(false), open = _m[0], setOpen = _m[1];
     var _o = (0, react_1.useState)(""), searchValue = _o[0], setSearchValue = _o[1];
     var _p = (0, react_1.useState)(false), canScrollUp = _p[0], setCanScrollUp = _p[1];
     var _q = (0, react_1.useState)(false), canScrollDown = _q[0], setCanScrollDown = _q[1];
     var scrollContainerRef = (0, react_1.useRef)(null);
-    var selectedOption = options.find(function (option) { return option.value === value; });
+    var selectedOption = options.find(function (option) {
+        return option.value === value ||
+            option[lookupKey] === value;
+    });
     var shouldVirtualize = options.length > virtualizeThreshold;
     // Filter options based on search - always handle filtering at this level for virtualization
     var filteredOptions = react_1.default.useMemo(function () {

package/hooks/use-enhanced-combobox.d.ts

@@ -4,9 +4,11 @@ interface UseEnhancedComboboxProps<T extends {
     name: string;
 }> {
     emptyText?: string;
+    error?: string;
     id: string;
     info: string;
     label: string;
+    lookupKey?: keyof T;
     onValueChange: (value: string) => void;
     options: T[];
     placeholder: string;
@@ -18,7 +20,7 @@ interface UseEnhancedComboboxProps<T extends {
 export declare const useEnhancedCombobox: <T extends {
     id: string;
     name: string;
-}>({ emptyText, id, info, label, onValueChange, options, placeholder, required, searchEndpoint, searchPlaceholder, value, }: UseEnhancedComboboxProps<T>) => {
+}>({ emptyText, error, id, info, label, lookupKey, onValueChange, options, placeholder, required, searchEndpoint, searchPlaceholder, value, }: UseEnhancedComboboxProps<T>) => {
     enhancedComboboxElement: React.JSX.Element;
 };
 export {};

package/hooks/use-enhanced-combobox.js

@@ -76,10 +76,10 @@ var api_methods_1 = require("@react-pakistan/util-functions/constants/api-method
 var use_debounce_1 = require("@react-pakistan/util-functions/hooks/use-debounce");
 var enhanced_combobox_1 = require("../components/enhanced-combobox");
 var useEnhancedCombobox = function (_a) {
-    var emptyText = _a.emptyText, id = _a.id, info = _a.info, label = _a.label, onValueChange = _a.onValueChange, options = _a.options, placeholder = _a.placeholder, required = _a.required, searchEndpoint = _a.searchEndpoint, searchPlaceholder = _a.searchPlaceholder, value = _a.value;
-    var _b = (0, react_1.useState)(""), searchQuery = _b[0], setSearchQuery = _b[1];
-    var _c = (0, react_1.useState)([]), searchOptions = _c[0], setSearchOptions = _c[1];
-    var _d = (0, react_1.useState)(false), loading = _d[0], setLoading = _d[1];
+    var emptyText = _a.emptyText, error = _a.error, id = _a.id, info = _a.info, label = _a.label, _b = _a.lookupKey, lookupKey = _b === void 0 ? "id" : _b, onValueChange = _a.onValueChange, options = _a.options, placeholder = _a.placeholder, required = _a.required, searchEndpoint = _a.searchEndpoint, searchPlaceholder = _a.searchPlaceholder, value = _a.value;
+    var _c = (0, react_1.useState)(""), searchQuery = _c[0], setSearchQuery = _c[1];
+    var _d = (0, react_1.useState)([]), searchOptions = _d[0], setSearchOptions = _d[1];
+    var _e = (0, react_1.useState)(false), loading = _e[0], setLoading = _e[1];
     var debouncedSearchQuery = (0, use_debounce_1.useDebounce)(searchQuery, 800);
     (0, react_1.useEffect)(function () {
         if (!debouncedSearchQuery) {
@@ -120,19 +120,21 @@ var useEnhancedCombobox = function (_a) {
         var opts = searchOptions.length > 0 ? searchOptions : options;
         return ((opts === null || opts === void 0 ? void 0 : opts.map(function (category) { return ({
             label: category.name,
-            value: category.id,
+            value: String(category[lookupKey]),
         }); })) || []);
-    }, [searchOptions, options]);
+    }, [searchOptions, options, lookupKey]);
     var handleSearchChange = (0, react_1.useCallback)(function (query) {
         setSearchQuery(query);
     }, []);
-    var enhancedComboboxElement = (0, react_1.useMemo)(function () { return (react_1.default.createElement(enhanced_combobox_1.EnhancedCombobox, { emptyText: emptyText, id: id, info: info, label: label, loading: loading, onSearchChange: handleSearchChange, onValueChange: onValueChange, options: mappedOptions, placeholder: placeholder, required: required, searchPlaceholder: searchPlaceholder, value: value })); }, [
+    var enhancedComboboxElement = (0, react_1.useMemo)(function () { return (react_1.default.createElement(enhanced_combobox_1.EnhancedCombobox, { emptyText: emptyText, error: error, id: id, info: info, label: label, loading: loading, lookupKey: lookupKey, onSearchChange: handleSearchChange, onValueChange: onValueChange, options: mappedOptions, placeholder: placeholder, required: required, searchPlaceholder: searchPlaceholder, value: value })); }, [
         emptyText,
+        error,
         handleSearchChange,
         id,
         info,
         label,
         loading,
+        lookupKey,
         mappedOptions,
         onValueChange,
         placeholder,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/shadcn",
-  "version": "1.1.92",
+  "version": "1.1.93",
   "scripts": {
     "build:next": "next build",
     "build:storybook": "mv ../.pnp.cjs ../.pnp.cjs.bak 2>/dev/null || true && storybook build -c .storybook -o .out && mv ../.pnp.cjs.bak ../.pnp.cjs 2>/dev/null || true",