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