@farmzone/fz-react-ui 1.0.20 → 1.0.21

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 +27 -15
  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 +28 -16
  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,25 @@ 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
+ part
4151
+ ] }, idx)) : column.title;
4147
4152
  return /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
4148
4153
  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
+ /* @__PURE__ */ jsx(
4155
+ "span",
4156
+ {
4157
+ className: `flex-1 px-3 ${textAlignClass} ${baseClasses} ${isClickableHead} ${subTitleClasses}`,
4158
+ style: hasWrapParts ? { wordBreak: "keep-all" } : void 0,
4159
+ children: titleContent
4160
+ }
4161
+ ),
4150
4162
  hasSortIcon && /* @__PURE__ */ jsx("div", { className: `w-6 shrink-0 flex items-center justify-center cursor-pointer ${isClickableHead}`, children: renderSortIcon(column.key) })
4151
4163
  ] });
4152
4164
  };
@@ -4185,7 +4197,7 @@ function TableHeader(props) {
4185
4197
  const hasMainGroups = Object.keys(mainGroups).length > 0;
4186
4198
  const hasSubGroups = Object.keys(subGroups).length > 0;
4187
4199
  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) => {
4200
+ 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
4201
  const width = column.width;
4190
4202
  const minWidth = column.minWidth;
4191
4203
  const maxWidth = column.maxWidth;
@@ -4196,7 +4208,7 @@ function TableHeader(props) {
4196
4208
  {
4197
4209
  id: `${column.key}-header`,
4198
4210
  ...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}`,
4211
+ 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 ${column.isWrap ? "" : "overflow-hidden"} ${isClickableHead}`,
4200
4212
  onClick: () => {
4201
4213
  if (column.sortable) {
4202
4214
  handleSort(column.key);
@@ -4229,7 +4241,7 @@ function TableHeader(props) {
4229
4241
  }
4230
4242
  if (hasMainGroups) {
4231
4243
  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) => {
4244
+ /* @__PURE__ */ jsx("tr", { className: "w-full min-h-8", children: columns.map((column, idx) => {
4233
4245
  const width = column.width;
4234
4246
  const minWidth = column.minWidth;
4235
4247
  const maxWidth = column.maxWidth;
@@ -4310,7 +4322,7 @@ function TableHeader(props) {
4310
4322
  width,
4311
4323
  minWidth: minWidth || width,
4312
4324
  maxWidth: maxWidth || width,
4313
- whiteSpace: "nowrap",
4325
+ whiteSpace: column.isWrap ? "normal" : "nowrap",
4314
4326
  ...fixedStyle
4315
4327
  },
4316
4328
  children: renderColumnTitle(column, column.sortable ? "cursor-pointer" : "")
@@ -4318,7 +4330,7 @@ function TableHeader(props) {
4318
4330
  `${column.key}-${idx}`
4319
4331
  );
4320
4332
  }) }),
4321
- /* @__PURE__ */ jsx("tr", { className: "w-full h-8", children: columns.map((column, idx) => {
4333
+ /* @__PURE__ */ jsx("tr", { className: "w-full min-h-8", children: columns.map((column, idx) => {
4322
4334
  const width = column.width;
4323
4335
  const minWidth = column.minWidth;
4324
4336
  const maxWidth = column.maxWidth;
@@ -4362,7 +4374,7 @@ function TableHeader(props) {
4362
4374
  }
4363
4375
  return null;
4364
4376
  }) }),
4365
- /* @__PURE__ */ jsx("tr", { className: "w-full h-8", children: columns.map((column, idx) => {
4377
+ /* @__PURE__ */ jsx("tr", { className: "w-full min-h-8", children: columns.map((column, idx) => {
4366
4378
  const width = column.width;
4367
4379
  const minWidth = column.minWidth;
4368
4380
  const maxWidth = column.maxWidth;
@@ -4376,7 +4388,7 @@ function TableHeader(props) {
4376
4388
  {
4377
4389
  id: `${column.key}-header`,
4378
4390
  ...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}`,
4391
+ 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 ${column.isWrap ? "" : "overflow-hidden"} ${isClickableHead}`,
4380
4392
  onClick: () => {
4381
4393
  if (column.sortable) {
4382
4394
  handleSort(column.key);
@@ -4386,7 +4398,7 @@ function TableHeader(props) {
4386
4398
  width,
4387
4399
  minWidth: minWidth || width,
4388
4400
  maxWidth: maxWidth || width,
4389
- whiteSpace: "nowrap",
4401
+ whiteSpace: column.isWrap ? "normal" : "nowrap",
4390
4402
  ...fixedStyle
4391
4403
  },
4392
4404
  children: /* @__PURE__ */ jsx(
@@ -4408,7 +4420,7 @@ function TableHeader(props) {
4408
4420
  ] });
4409
4421
  }
4410
4422
  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) => {
4423
+ /* @__PURE__ */ jsx("tr", { className: "w-full min-h-8 ", children: columns.map((column) => {
4412
4424
  const width = column.width;
4413
4425
  const minWidth = column.minWidth;
4414
4426
  const maxWidth = column.maxWidth;
@@ -4458,7 +4470,7 @@ function TableHeader(props) {
4458
4470
  width,
4459
4471
  minWidth: minWidth || width,
4460
4472
  maxWidth: maxWidth || width,
4461
- whiteSpace: "nowrap",
4473
+ whiteSpace: column.isWrap ? "normal" : "nowrap",
4462
4474
  ...fixedStyle
4463
4475
  },
4464
4476
  children: renderColumnTitle(column, isClickableHead)
@@ -4466,7 +4478,7 @@ function TableHeader(props) {
4466
4478
  column.key
4467
4479
  );
4468
4480
  }) }),
4469
- /* @__PURE__ */ jsx("tr", { className: "w-full h-8", children: columns.map((column) => {
4481
+ /* @__PURE__ */ jsx("tr", { className: "w-full min-h-8", children: columns.map((column) => {
4470
4482
  const width = column.width;
4471
4483
  const minWidth = column.minWidth;
4472
4484
  const maxWidth = column.maxWidth;
@@ -4480,7 +4492,7 @@ function TableHeader(props) {
4480
4492
  {
4481
4493
  id: `${column.key}-header`,
4482
4494
  ...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}`,
4495
+ 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 ${column.isWrap ? "" : "overflow-hidden"} ${isClickableHead}`,
4484
4496
  onClick: () => {
4485
4497
  if (column.sortable) {
4486
4498
  handleSort(column.key);
@@ -4490,7 +4502,7 @@ function TableHeader(props) {
4490
4502
  width,
4491
4503
  minWidth: minWidth || width,
4492
4504
  maxWidth: maxWidth || width,
4493
- whiteSpace: "nowrap",
4505
+ whiteSpace: column.isWrap ? "normal" : "nowrap",
4494
4506
  ...fixedStyle
4495
4507
  },
4496
4508
  children: /* @__PURE__ */ jsx(