@farmzone/fz-react-ui 1.0.20 → 1.0.22

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 (8) hide show
  1. package/dist/index.cjs +29 -16
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +2 -0
  4. package/dist/index.d.ts +2 -0
  5. package/dist/index.js +30 -17
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles.css +1 -1
  8. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -655,6 +655,8 @@ interface Column<T> {
655
655
  sort?: "asc" | "desc" | null;
656
656
  fixed?: TableFixed;
657
657
  tooltipText?: (value: unknown, record: T, index: number) => ReactNode;
658
+ isWrap?: boolean;
659
+ wrapParts?: Array<string>;
658
660
  }
659
661
 
660
662
  interface CheckboxInfo {
package/dist/index.d.ts CHANGED
@@ -655,6 +655,8 @@ interface Column<T> {
655
655
  sort?: "asc" | "desc" | null;
656
656
  fixed?: TableFixed;
657
657
  tooltipText?: (value: unknown, record: T, index: number) => ReactNode;
658
+ isWrap?: boolean;
659
+ wrapParts?: Array<string>;
658
660
  }
659
661
 
660
662
  interface CheckboxInfo {
package/dist/index.js CHANGED
@@ -3,7 +3,7 @@ import clsx from 'clsx';
3
3
  import { twMerge } from 'tailwind-merge';
4
4
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
5
5
  import * as React6 from 'react';
6
- import React6__default, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback, memo, createContext, useMemo, useContext, useId, useLayoutEffect, useDeferredValue } from 'react';
6
+ import React6__default, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback, memo, createContext, useMemo, useContext, useId, useLayoutEffect, useDeferredValue, Fragment as Fragment$1 } from 'react';
7
7
  import { Slot } from '@radix-ui/react-slot';
8
8
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
9
9
  import { ChevronLeft, ChevronRight, FileText, ZoomIn, ZoomOut, RotateCcw, RotateCw, Download, X, Trash2, Plus, EyeOff, Eye, Minus, Check, CircleX, ChevronDown, Calendar, CircleIcon, ChevronUp, Search, TriangleAlert, Info, Pencil, BadgePlus, FileSearch2, Upload, FileUp, PanelRightClose, PanelLeftClose, ChevronFirst, ChevronLast } from 'lucide-react';
@@ -4140,13 +4140,26 @@ function TableHeader(props) {
4140
4140
  };
4141
4141
  };
4142
4142
  const renderColumnTitle = (column, isClickableHead) => {
4143
- const baseClasses = "pt-0.5 select-none truncate";
4143
+ const hasWrapParts = column.isWrap && column.wrapParts && column.wrapParts.length > 0;
4144
+ const baseClasses = hasWrapParts ? "pt-0.5 select-none whitespace-normal" : column.isWrap ? "pt-0.5 select-none whitespace-normal break-words" : "pt-0.5 select-none truncate";
4144
4145
  const subTitleClasses = column.key === "subTitle" ? "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800" : "";
4145
4146
  const hasSortIcon = column.sortable;
4146
4147
  const textAlignClass = column.align === "center" ? "text-center" : column.align === "right" ? "text-right" : "text-left";
4148
+ const titleContent = hasWrapParts ? column.wrapParts.map((part, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
4149
+ idx > 0 && /* @__PURE__ */ jsx("wbr", {}),
4150
+ /* @__PURE__ */ jsx("span", { style: { whiteSpace: "nowrap" }, children: part })
4151
+ ] }, idx)) : column.title;
4152
+ const paddingClass = hasSortIcon ? column.align === "center" ? "pl-1" : "pl-3" : "px-3";
4147
4153
  return /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
4148
- hasSortIcon && column.align === "center" && /* @__PURE__ */ jsx("div", { className: "w-5 shrink-0" }),
4149
- /* @__PURE__ */ jsx("span", { className: `flex-1 px-3 ${textAlignClass} ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title }),
4154
+ hasSortIcon && column.align === "center" && !column.isWrap && /* @__PURE__ */ jsx("div", { className: "w-5 shrink-0" }),
4155
+ /* @__PURE__ */ jsx(
4156
+ "span",
4157
+ {
4158
+ className: `flex-1 min-w-0 ${paddingClass} ${textAlignClass} ${baseClasses} ${isClickableHead} ${subTitleClasses}`,
4159
+ style: hasWrapParts ? { wordBreak: "keep-all" } : void 0,
4160
+ children: titleContent
4161
+ }
4162
+ ),
4150
4163
  hasSortIcon && /* @__PURE__ */ jsx("div", { className: `w-6 shrink-0 flex items-center justify-center cursor-pointer ${isClickableHead}`, children: renderSortIcon(column.key) })
4151
4164
  ] });
4152
4165
  };
@@ -4185,7 +4198,7 @@ function TableHeader(props) {
4185
4198
  const hasMainGroups = Object.keys(mainGroups).length > 0;
4186
4199
  const hasSubGroups = Object.keys(subGroups).length > 0;
4187
4200
  if (!hasMainGroups && !hasSubGroups) {
4188
- return /* @__PURE__ */ jsx("thead", { className: "w-full sticky top-0 z-10", children: /* @__PURE__ */ jsx("tr", { className: "w-full h-10", children: columns.map((column, idx) => {
4201
+ return /* @__PURE__ */ jsx("thead", { className: "w-full sticky top-0 z-10", children: /* @__PURE__ */ jsx("tr", { className: "w-full min-h-10", children: columns.map((column, idx) => {
4189
4202
  const width = column.width;
4190
4203
  const minWidth = column.minWidth;
4191
4204
  const maxWidth = column.maxWidth;
@@ -4196,7 +4209,7 @@ function TableHeader(props) {
4196
4209
  {
4197
4210
  id: `${column.key}-header`,
4198
4211
  ...getDragProps(column),
4199
- className: `bg-gray-200 border-b border-r border-gray-300 py-2 text-left font-semibold text-gray-700 text-sm tracking-wider overflow-hidden last:border-r-0 transition-all ${isClickableHead}`,
4212
+ className: `bg-gray-200 border-b border-r border-gray-300 py-2 text-left font-semibold text-gray-700 text-sm tracking-wider last:border-r-0 transition-all overflow-hidden ${isClickableHead}`,
4200
4213
  onClick: () => {
4201
4214
  if (column.sortable) {
4202
4215
  handleSort(column.key);
@@ -4229,7 +4242,7 @@ function TableHeader(props) {
4229
4242
  }
4230
4243
  if (hasMainGroups) {
4231
4244
  return /* @__PURE__ */ jsxs("thead", { className: "w-full sticky top-0 z-10", children: [
4232
- /* @__PURE__ */ jsx("tr", { className: "w-full h-8", children: columns.map((column, idx) => {
4245
+ /* @__PURE__ */ jsx("tr", { className: "w-full min-h-8", children: columns.map((column, idx) => {
4233
4246
  const width = column.width;
4234
4247
  const minWidth = column.minWidth;
4235
4248
  const maxWidth = column.maxWidth;
@@ -4310,7 +4323,7 @@ function TableHeader(props) {
4310
4323
  width,
4311
4324
  minWidth: minWidth || width,
4312
4325
  maxWidth: maxWidth || width,
4313
- whiteSpace: "nowrap",
4326
+ whiteSpace: column.isWrap ? "normal" : "nowrap",
4314
4327
  ...fixedStyle
4315
4328
  },
4316
4329
  children: renderColumnTitle(column, column.sortable ? "cursor-pointer" : "")
@@ -4318,7 +4331,7 @@ function TableHeader(props) {
4318
4331
  `${column.key}-${idx}`
4319
4332
  );
4320
4333
  }) }),
4321
- /* @__PURE__ */ jsx("tr", { className: "w-full h-8", children: columns.map((column, idx) => {
4334
+ /* @__PURE__ */ jsx("tr", { className: "w-full min-h-8", children: columns.map((column, idx) => {
4322
4335
  const width = column.width;
4323
4336
  const minWidth = column.minWidth;
4324
4337
  const maxWidth = column.maxWidth;
@@ -4362,7 +4375,7 @@ function TableHeader(props) {
4362
4375
  }
4363
4376
  return null;
4364
4377
  }) }),
4365
- /* @__PURE__ */ jsx("tr", { className: "w-full h-8", children: columns.map((column, idx) => {
4378
+ /* @__PURE__ */ jsx("tr", { className: "w-full min-h-8", children: columns.map((column, idx) => {
4366
4379
  const width = column.width;
4367
4380
  const minWidth = column.minWidth;
4368
4381
  const maxWidth = column.maxWidth;
@@ -4376,7 +4389,7 @@ function TableHeader(props) {
4376
4389
  {
4377
4390
  id: `${column.key}-header`,
4378
4391
  ...getDragProps(column),
4379
- className: `bg-gray-200 border-b border-r border-gray-300 py-1 text-left font-semibold text-gray-700 text-sm tracking-wider overflow-hidden transition-all ${isClickableHead}`,
4392
+ className: `bg-gray-200 border-b border-r border-gray-300 py-1 text-left font-semibold text-gray-700 text-sm tracking-wider transition-all overflow-hidden ${isClickableHead}`,
4380
4393
  onClick: () => {
4381
4394
  if (column.sortable) {
4382
4395
  handleSort(column.key);
@@ -4386,7 +4399,7 @@ function TableHeader(props) {
4386
4399
  width,
4387
4400
  minWidth: minWidth || width,
4388
4401
  maxWidth: maxWidth || width,
4389
- whiteSpace: "nowrap",
4402
+ whiteSpace: column.isWrap ? "normal" : "nowrap",
4390
4403
  ...fixedStyle
4391
4404
  },
4392
4405
  children: /* @__PURE__ */ jsx(
@@ -4408,7 +4421,7 @@ function TableHeader(props) {
4408
4421
  ] });
4409
4422
  }
4410
4423
  return /* @__PURE__ */ jsxs("thead", { className: "w-full sticky top-0 z-10", children: [
4411
- /* @__PURE__ */ jsx("tr", { className: "w-full h-8 ", children: columns.map((column) => {
4424
+ /* @__PURE__ */ jsx("tr", { className: "w-full min-h-8 ", children: columns.map((column) => {
4412
4425
  const width = column.width;
4413
4426
  const minWidth = column.minWidth;
4414
4427
  const maxWidth = column.maxWidth;
@@ -4458,7 +4471,7 @@ function TableHeader(props) {
4458
4471
  width,
4459
4472
  minWidth: minWidth || width,
4460
4473
  maxWidth: maxWidth || width,
4461
- whiteSpace: "nowrap",
4474
+ whiteSpace: column.isWrap ? "normal" : "nowrap",
4462
4475
  ...fixedStyle
4463
4476
  },
4464
4477
  children: renderColumnTitle(column, isClickableHead)
@@ -4466,7 +4479,7 @@ function TableHeader(props) {
4466
4479
  column.key
4467
4480
  );
4468
4481
  }) }),
4469
- /* @__PURE__ */ jsx("tr", { className: "w-full h-8", children: columns.map((column) => {
4482
+ /* @__PURE__ */ jsx("tr", { className: "w-full min-h-8", children: columns.map((column) => {
4470
4483
  const width = column.width;
4471
4484
  const minWidth = column.minWidth;
4472
4485
  const maxWidth = column.maxWidth;
@@ -4480,7 +4493,7 @@ function TableHeader(props) {
4480
4493
  {
4481
4494
  id: `${column.key}-header`,
4482
4495
  ...getDragProps(column),
4483
- className: `bg-gray-200 border-b border-r border-gray-300 py-1 text-left font-semibold text-gray-700 text-sm tracking-wider overflow-hidden transition-all ${isClickableHead}`,
4496
+ className: `bg-gray-200 border-b border-r border-gray-300 py-1 text-left font-semibold text-gray-700 text-sm tracking-wider transition-all overflow-hidden ${isClickableHead}`,
4484
4497
  onClick: () => {
4485
4498
  if (column.sortable) {
4486
4499
  handleSort(column.key);
@@ -4490,7 +4503,7 @@ function TableHeader(props) {
4490
4503
  width,
4491
4504
  minWidth: minWidth || width,
4492
4505
  maxWidth: maxWidth || width,
4493
- whiteSpace: "nowrap",
4506
+ whiteSpace: column.isWrap ? "normal" : "nowrap",
4494
4507
  ...fixedStyle
4495
4508
  },
4496
4509
  children: /* @__PURE__ */ jsx(