@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.cjs CHANGED
@@ -4174,13 +4174,25 @@ function TableHeader(props) {
4174
4174
  };
4175
4175
  };
4176
4176
  const renderColumnTitle = (column, isClickableHead) => {
4177
- const baseClasses = "pt-0.5 select-none truncate";
4177
+ const hasWrapParts = column.isWrap && column.wrapParts && column.wrapParts.length > 0;
4178
+ 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";
4178
4179
  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" : "";
4179
4180
  const hasSortIcon = column.sortable;
4180
4181
  const textAlignClass = column.align === "center" ? "text-center" : column.align === "right" ? "text-right" : "text-left";
4182
+ const titleContent = hasWrapParts ? column.wrapParts.map((part, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React6.Fragment, { children: [
4183
+ idx > 0 && /* @__PURE__ */ jsxRuntime.jsx("wbr", {}),
4184
+ part
4185
+ ] }, idx)) : column.title;
4181
4186
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center w-full", children: [
4182
4187
  hasSortIcon && column.align === "center" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 shrink-0" }),
4183
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: `flex-1 px-3 ${textAlignClass} ${baseClasses} ${isClickableHead} ${subTitleClasses}`, children: column.title }),
4188
+ /* @__PURE__ */ jsxRuntime.jsx(
4189
+ "span",
4190
+ {
4191
+ className: `flex-1 px-3 ${textAlignClass} ${baseClasses} ${isClickableHead} ${subTitleClasses}`,
4192
+ style: hasWrapParts ? { wordBreak: "keep-all" } : void 0,
4193
+ children: titleContent
4194
+ }
4195
+ ),
4184
4196
  hasSortIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-6 shrink-0 flex items-center justify-center cursor-pointer ${isClickableHead}`, children: renderSortIcon(column.key) })
4185
4197
  ] });
4186
4198
  };
@@ -4219,7 +4231,7 @@ function TableHeader(props) {
4219
4231
  const hasMainGroups = Object.keys(mainGroups).length > 0;
4220
4232
  const hasSubGroups = Object.keys(subGroups).length > 0;
4221
4233
  if (!hasMainGroups && !hasSubGroups) {
4222
- return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "w-full sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "w-full h-10", children: columns.map((column, idx) => {
4234
+ return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "w-full sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "w-full min-h-10", children: columns.map((column, idx) => {
4223
4235
  const width = column.width;
4224
4236
  const minWidth = column.minWidth;
4225
4237
  const maxWidth = column.maxWidth;
@@ -4230,7 +4242,7 @@ function TableHeader(props) {
4230
4242
  {
4231
4243
  id: `${column.key}-header`,
4232
4244
  ...getDragProps(column),
4233
- 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}`,
4245
+ 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}`,
4234
4246
  onClick: () => {
4235
4247
  if (column.sortable) {
4236
4248
  handleSort(column.key);
@@ -4263,7 +4275,7 @@ function TableHeader(props) {
4263
4275
  }
4264
4276
  if (hasMainGroups) {
4265
4277
  return /* @__PURE__ */ jsxRuntime.jsxs("thead", { className: "w-full sticky top-0 z-10", children: [
4266
- /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "w-full h-8", children: columns.map((column, idx) => {
4278
+ /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "w-full min-h-8", children: columns.map((column, idx) => {
4267
4279
  const width = column.width;
4268
4280
  const minWidth = column.minWidth;
4269
4281
  const maxWidth = column.maxWidth;
@@ -4344,7 +4356,7 @@ function TableHeader(props) {
4344
4356
  width,
4345
4357
  minWidth: minWidth || width,
4346
4358
  maxWidth: maxWidth || width,
4347
- whiteSpace: "nowrap",
4359
+ whiteSpace: column.isWrap ? "normal" : "nowrap",
4348
4360
  ...fixedStyle
4349
4361
  },
4350
4362
  children: renderColumnTitle(column, column.sortable ? "cursor-pointer" : "")
@@ -4352,7 +4364,7 @@ function TableHeader(props) {
4352
4364
  `${column.key}-${idx}`
4353
4365
  );
4354
4366
  }) }),
4355
- /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "w-full h-8", children: columns.map((column, idx) => {
4367
+ /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "w-full min-h-8", children: columns.map((column, idx) => {
4356
4368
  const width = column.width;
4357
4369
  const minWidth = column.minWidth;
4358
4370
  const maxWidth = column.maxWidth;
@@ -4396,7 +4408,7 @@ function TableHeader(props) {
4396
4408
  }
4397
4409
  return null;
4398
4410
  }) }),
4399
- /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "w-full h-8", children: columns.map((column, idx) => {
4411
+ /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "w-full min-h-8", children: columns.map((column, idx) => {
4400
4412
  const width = column.width;
4401
4413
  const minWidth = column.minWidth;
4402
4414
  const maxWidth = column.maxWidth;
@@ -4410,7 +4422,7 @@ function TableHeader(props) {
4410
4422
  {
4411
4423
  id: `${column.key}-header`,
4412
4424
  ...getDragProps(column),
4413
- 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}`,
4425
+ 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}`,
4414
4426
  onClick: () => {
4415
4427
  if (column.sortable) {
4416
4428
  handleSort(column.key);
@@ -4420,7 +4432,7 @@ function TableHeader(props) {
4420
4432
  width,
4421
4433
  minWidth: minWidth || width,
4422
4434
  maxWidth: maxWidth || width,
4423
- whiteSpace: "nowrap",
4435
+ whiteSpace: column.isWrap ? "normal" : "nowrap",
4424
4436
  ...fixedStyle
4425
4437
  },
4426
4438
  children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4442,7 +4454,7 @@ function TableHeader(props) {
4442
4454
  ] });
4443
4455
  }
4444
4456
  return /* @__PURE__ */ jsxRuntime.jsxs("thead", { className: "w-full sticky top-0 z-10", children: [
4445
- /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "w-full h-8 ", children: columns.map((column) => {
4457
+ /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "w-full min-h-8 ", children: columns.map((column) => {
4446
4458
  const width = column.width;
4447
4459
  const minWidth = column.minWidth;
4448
4460
  const maxWidth = column.maxWidth;
@@ -4492,7 +4504,7 @@ function TableHeader(props) {
4492
4504
  width,
4493
4505
  minWidth: minWidth || width,
4494
4506
  maxWidth: maxWidth || width,
4495
- whiteSpace: "nowrap",
4507
+ whiteSpace: column.isWrap ? "normal" : "nowrap",
4496
4508
  ...fixedStyle
4497
4509
  },
4498
4510
  children: renderColumnTitle(column, isClickableHead)
@@ -4500,7 +4512,7 @@ function TableHeader(props) {
4500
4512
  column.key
4501
4513
  );
4502
4514
  }) }),
4503
- /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "w-full h-8", children: columns.map((column) => {
4515
+ /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "w-full min-h-8", children: columns.map((column) => {
4504
4516
  const width = column.width;
4505
4517
  const minWidth = column.minWidth;
4506
4518
  const maxWidth = column.maxWidth;
@@ -4514,7 +4526,7 @@ function TableHeader(props) {
4514
4526
  {
4515
4527
  id: `${column.key}-header`,
4516
4528
  ...getDragProps(column),
4517
- 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}`,
4529
+ 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}`,
4518
4530
  onClick: () => {
4519
4531
  if (column.sortable) {
4520
4532
  handleSort(column.key);
@@ -4524,7 +4536,7 @@ function TableHeader(props) {
4524
4536
  width,
4525
4537
  minWidth: minWidth || width,
4526
4538
  maxWidth: maxWidth || width,
4527
- whiteSpace: "nowrap",
4539
+ whiteSpace: column.isWrap ? "normal" : "nowrap",
4528
4540
  ...fixedStyle
4529
4541
  },
4530
4542
  children: /* @__PURE__ */ jsxRuntime.jsx(