warqadui 0.0.26 → 0.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +3 -1
  2. package/dist/index.d.ts +3 -1
  3. package/dist/index.js +69 -10
  4. package/dist/index.mjs +69 -10
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -264,7 +264,7 @@ interface SearchApiContextValue {
264
264
  options: any[];
265
265
  setOptions: (opts: any[]) => void;
266
266
  isLoading: boolean;
267
- clearSelection: (e: React__default.MouseEvent) => void;
267
+ clearSelection: (e: React__default.MouseEvent | any) => void;
268
268
  handleSelect: (opt: any) => void;
269
269
  getDisplayValue: () => string;
270
270
  placeholder?: string;
@@ -423,6 +423,8 @@ defaultExpanded, onChange, selectable, filterables, }: DataTableProps<TData, TVa
423
423
 
424
424
  declare module "@tanstack/react-table" {
425
425
  interface ColumnMeta<TData extends RowData, TValue> {
426
+ className?: string;
427
+ width?: string | number;
426
428
  field?: (props: {
427
429
  value: any;
428
430
  onChange: (value: any) => void;
package/dist/index.d.ts CHANGED
@@ -264,7 +264,7 @@ interface SearchApiContextValue {
264
264
  options: any[];
265
265
  setOptions: (opts: any[]) => void;
266
266
  isLoading: boolean;
267
- clearSelection: (e: React__default.MouseEvent) => void;
267
+ clearSelection: (e: React__default.MouseEvent | any) => void;
268
268
  handleSelect: (opt: any) => void;
269
269
  getDisplayValue: () => string;
270
270
  placeholder?: string;
@@ -423,6 +423,8 @@ defaultExpanded, onChange, selectable, filterables, }: DataTableProps<TData, TVa
423
423
 
424
424
  declare module "@tanstack/react-table" {
425
425
  interface ColumnMeta<TData extends RowData, TValue> {
426
+ className?: string;
427
+ width?: string | number;
426
428
  field?: (props: {
427
429
  value: any;
428
430
  onChange: (value: any) => void;
package/dist/index.js CHANGED
@@ -2297,7 +2297,7 @@ var SearchApiRoot = ({
2297
2297
  fieldInternalProps?.onBlur?.();
2298
2298
  };
2299
2299
  const clearSelection = (e) => {
2300
- e.stopPropagation();
2300
+ if (e?.stopPropagation) e.stopPropagation();
2301
2301
  if (form) {
2302
2302
  if (name)
2303
2303
  form.setValue(name, void 0, {
@@ -2479,6 +2479,7 @@ var SearchApiInput = (0, import_react13.forwardRef)(
2479
2479
  setActiveIndex,
2480
2480
  options,
2481
2481
  handleSelect,
2482
+ clearSelection,
2482
2483
  inputRef,
2483
2484
  fieldInternalProps,
2484
2485
  form,
@@ -2544,6 +2545,9 @@ var SearchApiInput = (0, import_react13.forwardRef)(
2544
2545
  setIsOpen(true);
2545
2546
  } else {
2546
2547
  setIsOpen(false);
2548
+ if (selectedValue) {
2549
+ clearSelection(e);
2550
+ }
2547
2551
  }
2548
2552
  if (form) {
2549
2553
  if (name) form.clearErrors(name);
@@ -2552,7 +2556,11 @@ var SearchApiInput = (0, import_react13.forwardRef)(
2552
2556
  },
2553
2557
  onFocus: () => {
2554
2558
  setIsFocused(true);
2555
- if (searchTerm.trim()) {
2559
+ const display = getDisplayValue();
2560
+ if (!searchTerm && selectedValue && display && display !== "Loading...") {
2561
+ setSearchTerm(display);
2562
+ setIsOpen(true);
2563
+ } else if (searchTerm.trim() || selectedValue) {
2556
2564
  setIsOpen(true);
2557
2565
  }
2558
2566
  },
@@ -3376,7 +3384,18 @@ function PostTable({
3376
3384
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3377
3385
  "th",
3378
3386
  {
3379
- className: `${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" : ""}`,
3387
+ className: cn(
3388
+ rowPadding,
3389
+ "text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left",
3390
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3391
+ header.id === "_index" && "w-px whitespace-nowrap",
3392
+ header.column.columnDef.meta?.className
3393
+ ),
3394
+ style: {
3395
+ width: header.column.columnDef.meta?.width ?? header.column.getSize(),
3396
+ minWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.minSize,
3397
+ maxWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.maxSize
3398
+ },
3380
3399
  children: header.isPlaceholder ? null : (0, import_react_table2.flexRender)(
3381
3400
  header.column.columnDef.header,
3382
3401
  header.getContext()
@@ -3389,10 +3408,19 @@ function PostTable({
3389
3408
  "tr",
3390
3409
  {
3391
3410
  className: "border-b border-gray-100 dark:border-zinc-800/50",
3392
- children: columns.map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3411
+ children: columns.map((col, j) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3393
3412
  "td",
3394
3413
  {
3395
- className: `${rowPadding} ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800/50" : ""}`,
3414
+ className: cn(
3415
+ rowPadding,
3416
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800/50",
3417
+ col.meta?.className
3418
+ ),
3419
+ style: {
3420
+ width: col.meta?.width ?? col.getSize?.() ?? col.size,
3421
+ minWidth: col.meta?.width ?? col.minSize,
3422
+ maxWidth: col.meta?.width ?? col.maxSize
3423
+ },
3396
3424
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
3397
3425
  },
3398
3426
  `skeleton-cell-${j}`
@@ -3418,7 +3446,18 @@ function PostTable({
3418
3446
  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3419
3447
  "td",
3420
3448
  {
3421
- className: `${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" : ""}`,
3449
+ className: cn(
3450
+ rowPadding,
3451
+ "text-sm text-gray-700 dark:text-gray-200",
3452
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3453
+ cell.column.id === "_index" && "w-px whitespace-nowrap",
3454
+ cell.column.columnDef.meta?.className
3455
+ ),
3456
+ style: {
3457
+ width: cell.column.columnDef.meta?.width ?? cell.column.getSize(),
3458
+ minWidth: cell.column.columnDef.meta?.width ?? cell.column.columnDef.minSize,
3459
+ maxWidth: cell.column.columnDef.meta?.width ?? cell.column.columnDef.maxSize
3460
+ },
3422
3461
  children: (0, import_react_table2.flexRender)(
3423
3462
  cell.column.columnDef.cell,
3424
3463
  cell.getContext()
@@ -3547,14 +3586,23 @@ function PostTable({
3547
3586
  column.id !== "_index" ? "cursor-text" : "",
3548
3587
  verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : "",
3549
3588
  column.id === "_index" ? "w-px whitespace-nowrap" : "",
3550
- hasError && "ring-1 ring-inset ring-red-500"
3589
+ hasError && "ring-1 ring-inset ring-red-500",
3590
+ column.columnDef.meta?.className
3551
3591
  ),
3592
+ style: {
3593
+ width: column.columnDef.meta?.width ?? column.getSize(),
3594
+ minWidth: column.columnDef.meta?.width ?? column.columnDef.minSize,
3595
+ maxWidth: column.columnDef.meta?.width ?? column.columnDef.maxSize
3596
+ },
3552
3597
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
3553
3598
  "div",
3554
3599
  {
3555
3600
  className: cn(
3556
- "flex items-center relative group w-full",
3557
- column.id === "_index" ? "" : "min-w-32 h-9"
3601
+ "flex items-center relative group w-full min-w-0",
3602
+ column.id === "_index" ? "" : "h-9",
3603
+ !column.columnDef.meta?.className?.match(
3604
+ /\b(w-|min-w-|max-w-)/
3605
+ ) && !column.columnDef.meta?.width && "min-w-32"
3558
3606
  ),
3559
3607
  onKeyDown: (e) => {
3560
3608
  if (e.key === "Enter") {
@@ -3608,7 +3656,18 @@ function PostTable({
3608
3656
  ) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tfoot", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-t border-gray-200 dark:border-zinc-800", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3609
3657
  "td",
3610
3658
  {
3611
- className: `${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" : ""}`,
3659
+ className: cn(
3660
+ rowPadding,
3661
+ "text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left",
3662
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3663
+ header.id === "_index" && "w-px whitespace-nowrap",
3664
+ header.column.columnDef.meta?.className
3665
+ ),
3666
+ style: {
3667
+ width: header.column.columnDef.meta?.width ?? header.column.getSize(),
3668
+ minWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.minSize,
3669
+ maxWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.maxSize
3670
+ },
3612
3671
  children: header.isPlaceholder ? null : (0, import_react_table2.flexRender)(
3613
3672
  header.column.columnDef.footer,
3614
3673
  header.getContext()
package/dist/index.mjs CHANGED
@@ -2238,7 +2238,7 @@ var SearchApiRoot = ({
2238
2238
  fieldInternalProps?.onBlur?.();
2239
2239
  };
2240
2240
  const clearSelection = (e) => {
2241
- e.stopPropagation();
2241
+ if (e?.stopPropagation) e.stopPropagation();
2242
2242
  if (form) {
2243
2243
  if (name)
2244
2244
  form.setValue(name, void 0, {
@@ -2420,6 +2420,7 @@ var SearchApiInput = forwardRef5(
2420
2420
  setActiveIndex,
2421
2421
  options,
2422
2422
  handleSelect,
2423
+ clearSelection,
2423
2424
  inputRef,
2424
2425
  fieldInternalProps,
2425
2426
  form,
@@ -2485,6 +2486,9 @@ var SearchApiInput = forwardRef5(
2485
2486
  setIsOpen(true);
2486
2487
  } else {
2487
2488
  setIsOpen(false);
2489
+ if (selectedValue) {
2490
+ clearSelection(e);
2491
+ }
2488
2492
  }
2489
2493
  if (form) {
2490
2494
  if (name) form.clearErrors(name);
@@ -2493,7 +2497,11 @@ var SearchApiInput = forwardRef5(
2493
2497
  },
2494
2498
  onFocus: () => {
2495
2499
  setIsFocused(true);
2496
- if (searchTerm.trim()) {
2500
+ const display = getDisplayValue();
2501
+ if (!searchTerm && selectedValue && display && display !== "Loading...") {
2502
+ setSearchTerm(display);
2503
+ setIsOpen(true);
2504
+ } else if (searchTerm.trim() || selectedValue) {
2497
2505
  setIsOpen(true);
2498
2506
  }
2499
2507
  },
@@ -3334,7 +3342,18 @@ function PostTable({
3334
3342
  /* @__PURE__ */ jsx24("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx24(
3335
3343
  "th",
3336
3344
  {
3337
- className: `${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" : ""}`,
3345
+ className: cn(
3346
+ rowPadding,
3347
+ "text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left",
3348
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3349
+ header.id === "_index" && "w-px whitespace-nowrap",
3350
+ header.column.columnDef.meta?.className
3351
+ ),
3352
+ style: {
3353
+ width: header.column.columnDef.meta?.width ?? header.column.getSize(),
3354
+ minWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.minSize,
3355
+ maxWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.maxSize
3356
+ },
3338
3357
  children: header.isPlaceholder ? null : flexRender2(
3339
3358
  header.column.columnDef.header,
3340
3359
  header.getContext()
@@ -3347,10 +3366,19 @@ function PostTable({
3347
3366
  "tr",
3348
3367
  {
3349
3368
  className: "border-b border-gray-100 dark:border-zinc-800/50",
3350
- children: columns.map((_2, j) => /* @__PURE__ */ jsx24(
3369
+ children: columns.map((col, j) => /* @__PURE__ */ jsx24(
3351
3370
  "td",
3352
3371
  {
3353
- className: `${rowPadding} ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800/50" : ""}`,
3372
+ className: cn(
3373
+ rowPadding,
3374
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800/50",
3375
+ col.meta?.className
3376
+ ),
3377
+ style: {
3378
+ width: col.meta?.width ?? col.getSize?.() ?? col.size,
3379
+ minWidth: col.meta?.width ?? col.minSize,
3380
+ maxWidth: col.meta?.width ?? col.maxSize
3381
+ },
3354
3382
  children: /* @__PURE__ */ jsx24("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
3355
3383
  },
3356
3384
  `skeleton-cell-${j}`
@@ -3376,7 +3404,18 @@ function PostTable({
3376
3404
  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx24(
3377
3405
  "td",
3378
3406
  {
3379
- className: `${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" : ""}`,
3407
+ className: cn(
3408
+ rowPadding,
3409
+ "text-sm text-gray-700 dark:text-gray-200",
3410
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3411
+ cell.column.id === "_index" && "w-px whitespace-nowrap",
3412
+ cell.column.columnDef.meta?.className
3413
+ ),
3414
+ style: {
3415
+ width: cell.column.columnDef.meta?.width ?? cell.column.getSize(),
3416
+ minWidth: cell.column.columnDef.meta?.width ?? cell.column.columnDef.minSize,
3417
+ maxWidth: cell.column.columnDef.meta?.width ?? cell.column.columnDef.maxSize
3418
+ },
3380
3419
  children: flexRender2(
3381
3420
  cell.column.columnDef.cell,
3382
3421
  cell.getContext()
@@ -3505,14 +3544,23 @@ function PostTable({
3505
3544
  column.id !== "_index" ? "cursor-text" : "",
3506
3545
  verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : "",
3507
3546
  column.id === "_index" ? "w-px whitespace-nowrap" : "",
3508
- hasError && "ring-1 ring-inset ring-red-500"
3547
+ hasError && "ring-1 ring-inset ring-red-500",
3548
+ column.columnDef.meta?.className
3509
3549
  ),
3550
+ style: {
3551
+ width: column.columnDef.meta?.width ?? column.getSize(),
3552
+ minWidth: column.columnDef.meta?.width ?? column.columnDef.minSize,
3553
+ maxWidth: column.columnDef.meta?.width ?? column.columnDef.maxSize
3554
+ },
3510
3555
  children: /* @__PURE__ */ jsxs18(
3511
3556
  "div",
3512
3557
  {
3513
3558
  className: cn(
3514
- "flex items-center relative group w-full",
3515
- column.id === "_index" ? "" : "min-w-32 h-9"
3559
+ "flex items-center relative group w-full min-w-0",
3560
+ column.id === "_index" ? "" : "h-9",
3561
+ !column.columnDef.meta?.className?.match(
3562
+ /\b(w-|min-w-|max-w-)/
3563
+ ) && !column.columnDef.meta?.width && "min-w-32"
3516
3564
  ),
3517
3565
  onKeyDown: (e) => {
3518
3566
  if (e.key === "Enter") {
@@ -3566,7 +3614,18 @@ function PostTable({
3566
3614
  ) && /* @__PURE__ */ jsx24("tfoot", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-t border-gray-200 dark:border-zinc-800", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx24("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ jsx24(
3567
3615
  "td",
3568
3616
  {
3569
- className: `${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" : ""}`,
3617
+ className: cn(
3618
+ rowPadding,
3619
+ "text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left",
3620
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3621
+ header.id === "_index" && "w-px whitespace-nowrap",
3622
+ header.column.columnDef.meta?.className
3623
+ ),
3624
+ style: {
3625
+ width: header.column.columnDef.meta?.width ?? header.column.getSize(),
3626
+ minWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.minSize,
3627
+ maxWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.maxSize
3628
+ },
3570
3629
  children: header.isPlaceholder ? null : flexRender2(
3571
3630
  header.column.columnDef.footer,
3572
3631
  header.getContext()
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "warqadui",
3
- "version": "0.0.26",
3
+ "version": "0.0.28",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",