warqadui 0.0.28 → 0.0.30

package/dist/index.d.mts

@@ -229,6 +229,8 @@ interface SearchApiProps extends Omit<React__default.InputHTMLAttributes<HTMLInp
     placeholder?: string;
     value?: any;
     onChange?: (value: any) => void;
+    onSelect?: (option: any) => void;
+    onClear?: () => void;
     queryKey?: string;
     labelKey?: string;
     valueKey?: string;
@@ -249,6 +251,8 @@ interface SearchApiContextValue {
     setSearchTerm: (v: string) => void;
     selectedValue: any;
     setSelectedValue: (v: any) => void;
+    onSelect?: (option: any) => void;
+    onClear?: () => void;
     activeIndex: number;
     setActiveIndex: (v: number) => void;
     isFocused: boolean;

package/dist/index.d.ts

@@ -229,6 +229,8 @@ interface SearchApiProps extends Omit<React__default.InputHTMLAttributes<HTMLInp
     placeholder?: string;
     value?: any;
     onChange?: (value: any) => void;
+    onSelect?: (option: any) => void;
+    onClear?: () => void;
     queryKey?: string;
     labelKey?: string;
     valueKey?: string;
@@ -249,6 +251,8 @@ interface SearchApiContextValue {
     setSearchTerm: (v: string) => void;
     selectedValue: any;
     setSelectedValue: (v: any) => void;
+    onSelect?: (option: any) => void;
+    onClear?: () => void;
     activeIndex: number;
     setActiveIndex: (v: number) => void;
     isFocused: boolean;

package/dist/index.js

@@ -2079,7 +2079,7 @@ var useSearchApiContext = () => {
 };
 var SearchApi = (0, import_react13.forwardRef)(
   (props, _) => {
-    const { form, name, onChange, value, children, ...restProps } = props;
+    const { form, name, onChange, onSelect, onClear, value, children, ...restProps } = props;
     if (form && name) {
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         import_react_hook_form5.Controller,
@@ -2092,6 +2092,8 @@ var SearchApi = (0, import_react13.forwardRef)(
               ...restProps,
               form,
               name,
+              onSelect,
+              onClear,
               currentValue: field.value !== void 0 && field.value !== "" ? field.value : value,
               onChangeHandler: (val) => {
                 field.onChange(val);
@@ -2110,6 +2112,8 @@ var SearchApi = (0, import_react13.forwardRef)(
         ...restProps,
         form,
         name,
+        onSelect,
+        onClear,
         currentValue: value,
         onChangeHandler: onChange || (() => {
         }),
@@ -2123,6 +2127,8 @@ var SearchApiRoot = ({
   children,
   currentValue,
   onChangeHandler,
+  onSelect,
+  onClear,
   form,
   name,
   obj,
@@ -2287,6 +2293,7 @@ var SearchApiRoot = ({
     setSelectedObject(option);
     setTimeout(() => {
       onChangeHandler(val);
+      if (onSelect) onSelect(option);
     }, 0);
     if (form) {
       if (obj) form.setValue(obj, option);
@@ -2313,6 +2320,7 @@ var SearchApiRoot = ({
       onChangeHandler(void 0);
     }
     setSearchTerm("");
+    if (onClear) onClear();
   };
   const filteredOptions = options.filter(
     (option) => !filter.includes(getOptionValue(option))
@@ -2361,7 +2369,9 @@ var SearchApiRoot = ({
     form,
     name,
     obj,
-    error: message
+    error: message,
+    onSelect,
+    onClear
   };
   const hasChildren = !!children;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SearchApiContext.Provider, { value: valueCtx, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
@@ -3339,6 +3349,9 @@ function PostTable({
       finalColumns.unshift({
         id: "_index",
         header: "#",
+        size: 40,
+        minSize: 40,
+        maxSize: 40,
         cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-gray-500 font-medium ml-1", children: row.index + 1 }),
           renderSubComponent && hasSubComponent(row.original) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -3388,7 +3401,7 @@ function PostTable({
               rowPadding,
               "text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left",
               verticalLines && "border-x border-gray-200 dark:border-zinc-800",
-              header.id === "_index" && "w-px whitespace-nowrap",
+              header.id === "_index" && "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap",
               header.column.columnDef.meta?.className
             ),
             style: {
@@ -3450,7 +3463,7 @@ function PostTable({
                       rowPadding,
                       "text-sm text-gray-700 dark:text-gray-200",
                       verticalLines && "border-x border-gray-200 dark:border-zinc-800",
-                      cell.column.id === "_index" && "w-px whitespace-nowrap",
+                      cell.column.id === "_index" && "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap",
                       cell.column.columnDef.meta?.className
                     ),
                     style: {
@@ -3585,7 +3598,7 @@ function PostTable({
                         "py-1! text-sm align-middle transition-colors duration-200",
                         column.id !== "_index" ? "cursor-text" : "",
                         verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : "",
-                        column.id === "_index" ? "w-px whitespace-nowrap" : "",
+                        column.id === "_index" ? "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap" : "",
                         hasError && "ring-1 ring-inset ring-red-500",
                         column.columnDef.meta?.className
                       ),
@@ -3602,7 +3615,7 @@ function PostTable({
                             column.id === "_index" ? "" : "h-9",
                             !column.columnDef.meta?.className?.match(
                               /\b(w-|min-w-|max-w-)/
-                            ) && !column.columnDef.meta?.width && "min-w-32"
+                            ) && !column.columnDef.meta?.width && (!column.columnDef.maxSize || column.columnDef.maxSize >= 128) && (!column.columnDef.size || column.columnDef.size >= 128) && "min-w-32"
                           ),
                           onKeyDown: (e) => {
                             if (e.key === "Enter") {
@@ -3660,7 +3673,7 @@ function PostTable({
               rowPadding,
               "text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left",
               verticalLines && "border-x border-gray-200 dark:border-zinc-800",
-              header.id === "_index" && "w-px whitespace-nowrap",
+              header.id === "_index" && "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap",
               header.column.columnDef.meta?.className
             ),
             style: {

package/dist/index.mjs

@@ -2020,7 +2020,7 @@ var useSearchApiContext = () => {
 };
 var SearchApi = forwardRef5(
   (props, _) => {
-    const { form, name, onChange, value, children, ...restProps } = props;
+    const { form, name, onChange, onSelect, onClear, value, children, ...restProps } = props;
     if (form && name) {
       return /* @__PURE__ */ jsx21(
         Controller5,
@@ -2033,6 +2033,8 @@ var SearchApi = forwardRef5(
               ...restProps,
               form,
               name,
+              onSelect,
+              onClear,
               currentValue: field.value !== void 0 && field.value !== "" ? field.value : value,
               onChangeHandler: (val) => {
                 field.onChange(val);
@@ -2051,6 +2053,8 @@ var SearchApi = forwardRef5(
         ...restProps,
         form,
         name,
+        onSelect,
+        onClear,
         currentValue: value,
         onChangeHandler: onChange || (() => {
         }),
@@ -2064,6 +2068,8 @@ var SearchApiRoot = ({
   children,
   currentValue,
   onChangeHandler,
+  onSelect,
+  onClear,
   form,
   name,
   obj,
@@ -2228,6 +2234,7 @@ var SearchApiRoot = ({
     setSelectedObject(option);
     setTimeout(() => {
       onChangeHandler(val);
+      if (onSelect) onSelect(option);
     }, 0);
     if (form) {
       if (obj) form.setValue(obj, option);
@@ -2254,6 +2261,7 @@ var SearchApiRoot = ({
       onChangeHandler(void 0);
     }
     setSearchTerm("");
+    if (onClear) onClear();
   };
   const filteredOptions = options.filter(
     (option) => !filter.includes(getOptionValue(option))
@@ -2302,7 +2310,9 @@ var SearchApiRoot = ({
     form,
     name,
     obj,
-    error: message
+    error: message,
+    onSelect,
+    onClear
   };
   const hasChildren = !!children;
   return /* @__PURE__ */ jsx21(SearchApiContext.Provider, { value: valueCtx, children: /* @__PURE__ */ jsxs15(
@@ -3297,6 +3307,9 @@ function PostTable({
       finalColumns.unshift({
         id: "_index",
         header: "#",
+        size: 40,
+        minSize: 40,
+        maxSize: 40,
         cell: ({ row }) => /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx24("span", { className: "text-gray-500 font-medium ml-1", children: row.index + 1 }),
           renderSubComponent && hasSubComponent(row.original) && /* @__PURE__ */ jsx24(
@@ -3346,7 +3359,7 @@ function PostTable({
               rowPadding,
               "text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left",
               verticalLines && "border-x border-gray-200 dark:border-zinc-800",
-              header.id === "_index" && "w-px whitespace-nowrap",
+              header.id === "_index" && "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap",
               header.column.columnDef.meta?.className
             ),
             style: {
@@ -3408,7 +3421,7 @@ function PostTable({
                       rowPadding,
                       "text-sm text-gray-700 dark:text-gray-200",
                       verticalLines && "border-x border-gray-200 dark:border-zinc-800",
-                      cell.column.id === "_index" && "w-px whitespace-nowrap",
+                      cell.column.id === "_index" && "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap",
                       cell.column.columnDef.meta?.className
                     ),
                     style: {
@@ -3543,7 +3556,7 @@ function PostTable({
                         "py-1! text-sm align-middle transition-colors duration-200",
                         column.id !== "_index" ? "cursor-text" : "",
                         verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : "",
-                        column.id === "_index" ? "w-px whitespace-nowrap" : "",
+                        column.id === "_index" ? "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap" : "",
                         hasError && "ring-1 ring-inset ring-red-500",
                         column.columnDef.meta?.className
                       ),
@@ -3560,7 +3573,7 @@ function PostTable({
                             column.id === "_index" ? "" : "h-9",
                             !column.columnDef.meta?.className?.match(
                               /\b(w-|min-w-|max-w-)/
-                            ) && !column.columnDef.meta?.width && "min-w-32"
+                            ) && !column.columnDef.meta?.width && (!column.columnDef.maxSize || column.columnDef.maxSize >= 128) && (!column.columnDef.size || column.columnDef.size >= 128) && "min-w-32"
                           ),
                           onKeyDown: (e) => {
                             if (e.key === "Enter") {
@@ -3618,7 +3631,7 @@ function PostTable({
               rowPadding,
               "text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left",
               verticalLines && "border-x border-gray-200 dark:border-zinc-800",
-              header.id === "_index" && "w-px whitespace-nowrap",
+              header.id === "_index" && "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap",
               header.column.columnDef.meta?.className
             ),
             style: {

package/dist/styles.js

@@ -699,6 +699,9 @@ select:-webkit-autofill:focus {
 .w-8 {
   width: 2rem;
 }
+.w-\\[1\\%\\] {
+  width: 1%;
+}
 .w-full {
   width: 100%;
 }
@@ -714,9 +717,15 @@ select:-webkit-autofill:focus {
 .min-w-32 {
   min-width: 8rem;
 }
+.min-w-\\[40px\\] {
+  min-width: 40px;
+}
 .max-w-2xl {
   max-width: 42rem;
 }
+.max-w-\\[40px\\] {
+  max-width: 40px;
+}
 .max-w-full {
   max-width: 100%;
 }

package/dist/styles.mjs

@@ -697,6 +697,9 @@ select:-webkit-autofill:focus {
 .w-8 {
   width: 2rem;
 }
+.w-\\[1\\%\\] {
+  width: 1%;
+}
 .w-full {
   width: 100%;
 }
@@ -712,9 +715,15 @@ select:-webkit-autofill:focus {
 .min-w-32 {
   min-width: 8rem;
 }
+.min-w-\\[40px\\] {
+  min-width: 40px;
+}
 .max-w-2xl {
   max-width: 42rem;
 }
+.max-w-\\[40px\\] {
+  max-width: 40px;
+}
 .max-w-full {
   max-width: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "warqadui",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",