@deepnoid/ui 0.1.202 → 0.1.204

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.
@@ -6716,6 +6716,8 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
6716
6716
  confirmTitle,
6717
6717
  range = false,
6718
6718
  dualCalendar = false,
6719
+ disabledDates,
6720
+ enabledDates,
6719
6721
  ...inputProps
6720
6722
  } = { ...props, ...variantProps };
6721
6723
  const [selectedDate, setSelectedDate] = (0, import_react7.useState)(range ? "" : typeof value === "string" ? value || "" : "");
@@ -6837,29 +6839,18 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
6837
6839
  for (let i = 0; i < dates.length; i += 7) weeks.push(dates.slice(i, i + 7));
6838
6840
  return weeks;
6839
6841
  }, []);
6840
- const handleLeftPrevMonth = () => {
6841
- const newLeftDate = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() - 1);
6842
- setLeftCurrentDate(newLeftDate);
6843
- if (dualCalendar) {
6844
- setRightCurrentDate(new Date(newLeftDate.getFullYear(), newLeftDate.getMonth() + 1));
6845
- }
6846
- };
6847
- const handleLeftNextMonth = () => {
6848
- const newLeftDate = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() + 1);
6849
- setLeftCurrentDate(newLeftDate);
6850
- if (dualCalendar) {
6851
- setRightCurrentDate(new Date(newLeftDate.getFullYear(), newLeftDate.getMonth() + 1));
6852
- }
6853
- };
6854
- const handleRightNextMonth = () => {
6855
- if (!dualCalendar) return;
6856
- const newRightDate = new Date(rightCurrentDate.getFullYear(), rightCurrentDate.getMonth() + 1);
6857
- setRightCurrentDate(newRightDate);
6858
- setLeftCurrentDate(new Date(newRightDate.getFullYear(), newRightDate.getMonth() - 1));
6859
- };
6842
+ const isDateDisabled = (0, import_react7.useCallback)(
6843
+ (date) => {
6844
+ if (enabledDates) return !enabledDates(date);
6845
+ if (disabledDates) return disabledDates(date);
6846
+ return false;
6847
+ },
6848
+ [disabledDates, enabledDates]
6849
+ );
6860
6850
  const handleDateSelect = (date, isCurrentMonth, currentDate) => {
6861
6851
  if (!isCurrentMonth) return;
6862
6852
  const selected = new Date(currentDate.getFullYear(), currentDate.getMonth(), date);
6853
+ if (isDateDisabled(selected)) return;
6863
6854
  const formatted = formatDateToString(selected);
6864
6855
  if (range) {
6865
6856
  if (rangeSelection === "start") {
@@ -6870,7 +6861,10 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
6870
6861
  if (selected >= startDate) {
6871
6862
  setTempSelectedRange({ ...tempSelectedRange, endDate: formatted });
6872
6863
  } else {
6873
- setTempSelectedRange({ startDate: formatted, endDate: tempSelectedRange.startDate });
6864
+ setTempSelectedRange({
6865
+ startDate: formatted,
6866
+ endDate: tempSelectedRange.startDate
6867
+ });
6874
6868
  }
6875
6869
  }
6876
6870
  } else {
@@ -6879,6 +6873,7 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
6879
6873
  };
6880
6874
  const handleSetToday = () => {
6881
6875
  const today = /* @__PURE__ */ new Date();
6876
+ if (isDateDisabled(today)) return;
6882
6877
  const formatted = formatDateToString(today);
6883
6878
  if (range) {
6884
6879
  if (rangeSelection === "start") {
@@ -6889,7 +6884,10 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
6889
6884
  if (today >= startDate) {
6890
6885
  setTempSelectedRange({ ...tempSelectedRange, endDate: formatted });
6891
6886
  } else {
6892
- setTempSelectedRange({ startDate: formatted, endDate: tempSelectedRange.startDate });
6887
+ setTempSelectedRange({
6888
+ startDate: formatted,
6889
+ endDate: tempSelectedRange.startDate
6890
+ });
6893
6891
  }
6894
6892
  }
6895
6893
  } else {
@@ -6901,11 +6899,11 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
6901
6899
  const handleConfirmDate = () => {
6902
6900
  if (isConfirmDisabled) return;
6903
6901
  if (range) {
6904
- setSelectedRange(tempSelectedRange);
6905
6902
  onChange == null ? void 0 : onChange(tempSelectedRange);
6903
+ setSelectedRange(tempSelectedRange);
6906
6904
  } else {
6907
- setSelectedDate(tempSelectedDate);
6908
6905
  onChange == null ? void 0 : onChange(tempSelectedDate);
6906
+ setSelectedDate(tempSelectedDate);
6909
6907
  }
6910
6908
  setIsPanelOpen(false);
6911
6909
  };
@@ -6920,31 +6918,29 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
6920
6918
  };
6921
6919
  const getDayProps = (0, import_react7.useCallback)(
6922
6920
  (dateObj, currentDate) => {
6921
+ const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), dateObj.date);
6922
+ if (isDateDisabled(date)) return "disabled";
6923
6923
  const today = /* @__PURE__ */ new Date();
6924
6924
  const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
6925
6925
  if (range) {
6926
- const startFormatted = tempSelectedRange.startDate ? formatStringToDate(tempSelectedRange.startDate) : null;
6927
- const endFormatted = tempSelectedRange.endDate ? formatStringToDate(tempSelectedRange.endDate) : null;
6928
- const currentFormatted = new Date(currentDate.getFullYear(), currentDate.getMonth(), dateObj.date);
6929
- const isStartSelected = startFormatted && startFormatted.getDate() === dateObj.date && startFormatted.getMonth() === currentDate.getMonth() && startFormatted.getFullYear() === currentDate.getFullYear();
6930
- const isEndSelected = endFormatted && endFormatted.getDate() === dateObj.date && endFormatted.getMonth() === currentDate.getMonth() && endFormatted.getFullYear() === currentDate.getFullYear();
6931
- const isInRange = startFormatted && endFormatted && currentFormatted > startFormatted && currentFormatted < endFormatted;
6932
- if (dateObj.currentMonth && (isStartSelected || isEndSelected)) return "selected";
6933
- if (dateObj.currentMonth && isInRange) return "period";
6934
- if (dateObj.currentMonth && isToday) return "today";
6935
- if (!dateObj.currentMonth) return "disabled";
6936
- return "default";
6937
- } else {
6938
- const formatted = tempSelectedDate ? formatStringToDate(tempSelectedDate) : null;
6939
- const isSelected = (formatted == null ? void 0 : formatted.getDate()) === dateObj.date && formatted.getMonth() === currentDate.getMonth() && formatted.getFullYear() === currentDate.getFullYear();
6940
- return dateObj.currentMonth && isSelected ? "selected" : dateObj.currentMonth && isToday ? "today" : !dateObj.currentMonth ? "disabled" : "default";
6941
- }
6926
+ const start = tempSelectedRange.startDate ? formatStringToDate(tempSelectedRange.startDate) : null;
6927
+ const end = tempSelectedRange.endDate ? formatStringToDate(tempSelectedRange.endDate) : null;
6928
+ const current = date;
6929
+ const isStart = start && start.getFullYear() === current.getFullYear() && start.getMonth() === current.getMonth() && start.getDate() === current.getDate();
6930
+ const isEnd = end && end.getFullYear() === current.getFullYear() && end.getMonth() === current.getMonth() && end.getDate() === current.getDate();
6931
+ const isInRange = start && end && current > start && current < end;
6932
+ if (isStart || isEnd) return "selected";
6933
+ if (isInRange) return "period";
6934
+ if (isToday) return "today";
6935
+ return dateObj.currentMonth ? "default" : "disabled";
6936
+ }
6937
+ const selected = tempSelectedDate ? formatStringToDate(tempSelectedDate) : null;
6938
+ const isSelected = selected && selected.getFullYear() === date.getFullYear() && selected.getMonth() === date.getMonth() && selected.getDate() === date.getDate();
6939
+ return isSelected ? "selected" : isToday ? "today" : dateObj.currentMonth ? "default" : "disabled";
6942
6940
  },
6943
- [tempSelectedDate, tempSelectedRange, range]
6941
+ [tempSelectedDate, tempSelectedRange, range, isDateDisabled]
6944
6942
  );
6945
- const getPlaceholderText = () => {
6946
- return placeholder;
6947
- };
6943
+ const getPlaceholderText = () => placeholder;
6948
6944
  (0, import_react7.useEffect)(() => {
6949
6945
  if (range && typeof value === "object") {
6950
6946
  setSelectedRange(value || { startDate: "", endDate: "" });
@@ -6965,17 +6961,63 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
6965
6961
  const endContent = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon_default, { name: "calendar", size, className: "cursor-pointer", fill: true, onClick: handleCalendarIconClick });
6966
6962
  const renderCalendar = (currentDate, isLeft) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-[5px]", children: [
6967
6963
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: slots.calendarHead({ class: classNames == null ? void 0 : classNames.calendarHead }), children: dualCalendar ? isLeft ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
6968
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(icon_button_default, { name: "left", variant: "soft", color: "neutral", onClick: handleLeftPrevMonth }),
6964
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
6965
+ icon_button_default,
6966
+ {
6967
+ name: "left",
6968
+ variant: "soft",
6969
+ color: "neutral",
6970
+ onClick: () => {
6971
+ const newLeft = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() - 1);
6972
+ setLeftCurrentDate(newLeft);
6973
+ setRightCurrentDate(new Date(newLeft.getFullYear(), newLeft.getMonth() + 1));
6974
+ }
6975
+ }
6976
+ ),
6969
6977
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xl font-extrabold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
6970
6978
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "w-8" })
6971
6979
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
6972
6980
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "w-8" }),
6973
6981
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xl font-extrabold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
6974
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(icon_button_default, { name: "right", variant: "soft", color: "neutral", onClick: handleRightNextMonth })
6982
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
6983
+ icon_button_default,
6984
+ {
6985
+ name: "right",
6986
+ variant: "soft",
6987
+ color: "neutral",
6988
+ onClick: () => {
6989
+ const newRight = new Date(rightCurrentDate.getFullYear(), rightCurrentDate.getMonth() + 1);
6990
+ setRightCurrentDate(newRight);
6991
+ setLeftCurrentDate(new Date(newRight.getFullYear(), newRight.getMonth() - 1));
6992
+ }
6993
+ }
6994
+ )
6975
6995
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
6976
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(icon_button_default, { name: "left", variant: "soft", color: "neutral", onClick: handleLeftPrevMonth }),
6996
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
6997
+ icon_button_default,
6998
+ {
6999
+ name: "left",
7000
+ variant: "soft",
7001
+ color: "neutral",
7002
+ onClick: () => {
7003
+ const newLeft = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() - 1);
7004
+ setLeftCurrentDate(newLeft);
7005
+ }
7006
+ }
7007
+ ),
6977
7008
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xl font-extrabold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
6978
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(icon_button_default, { name: "right", variant: "soft", color: "neutral", onClick: handleLeftNextMonth })
7009
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
7010
+ icon_button_default,
7011
+ {
7012
+ name: "right",
7013
+ variant: "soft",
7014
+ color: "neutral",
7015
+ onClick: () => {
7016
+ const newLeft = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() + 1);
7017
+ setLeftCurrentDate(newLeft);
7018
+ }
7019
+ }
7020
+ )
6979
7021
  ] }) }),
6980
7022
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid grid-cols-7", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(day_default, { variant: "text", children: day }, `${day}-${index}`)) }),
6981
7023
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid grid-cols-7 gap-y-[5px] text-center", children: getCalendarDates(currentDate).map((week, weekIndex) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react7.Fragment, { children: week.map((dateObj, index) => {
@@ -1,17 +1,17 @@
1
1
  "use client";
2
2
  import "../../chunk-4VWG4726.mjs";
3
- import {
4
- timePicker_default
5
- } from "../../chunk-COGGK5Q6.mjs";
6
- import "../../chunk-QCEKPS7U.mjs";
7
- import "../../chunk-K2RW5KLO.mjs";
8
3
  import {
9
4
  datePicker_default
10
- } from "../../chunk-2EUKWA4W.mjs";
5
+ } from "../../chunk-AUGYJPCS.mjs";
11
6
  import "../../chunk-FWFEKWWD.mjs";
12
7
  import {
13
8
  day_default
14
9
  } from "../../chunk-XZYQFBCT.mjs";
10
+ import {
11
+ timePicker_default
12
+ } from "../../chunk-COGGK5Q6.mjs";
13
+ import "../../chunk-QCEKPS7U.mjs";
14
+ import "../../chunk-K2RW5KLO.mjs";
15
15
  import "../../chunk-2GCSFWHD.mjs";
16
16
  import "../../chunk-3RTVVQA3.mjs";
17
17
  import "../../chunk-MY5U63QO.mjs";
@@ -641,37 +641,13 @@ function TableHeaderCell({
641
641
  }) {
642
642
  const thRef = (0, import_react2.useRef)(null);
643
643
  const [showTitle, setShowTitle] = (0, import_react2.useState)(false);
644
- const checkOverflow = (el) => {
645
- if (el.scrollWidth > el.clientWidth) {
646
- return true;
647
- }
648
- const children = Array.from(el.children);
649
- for (const child of children) {
650
- if (child.scrollWidth > child.clientWidth) {
651
- return true;
652
- }
653
- }
654
- return false;
655
- };
656
- const extractTextFromContent = (node) => {
657
- if (typeof node === "string" || typeof node === "number") {
658
- return String(node);
659
- }
660
- if ((0, import_react2.isValidElement)(node)) {
661
- return String(node.props.children || "");
662
- }
663
- return "";
664
- };
665
- (0, import_react2.useEffect)(() => {
666
- if (thRef.current && !isCheckbox) {
667
- setTimeout(() => {
668
- if (thRef.current) {
669
- setShowTitle(checkOverflow(thRef.current));
670
- }
671
- }, 0);
644
+ (0, import_react2.useLayoutEffect)(() => {
645
+ if (!isCheckbox && thRef.current) {
646
+ const el = thRef.current;
647
+ setShowTitle(el.scrollWidth > el.clientWidth);
672
648
  }
673
649
  }, [content, isCheckbox]);
674
- const titleText = !isCheckbox && showTitle ? extractTextFromContent(content) : void 0;
650
+ const titleText = !isCheckbox && showTitle ? typeof content === "string" || typeof content === "number" ? String(content) : "" : void 0;
675
651
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
676
652
  "th",
677
653
  {
@@ -684,7 +660,10 @@ function TableHeaderCell({
684
660
  flexShrink: 0,
685
661
  flexGrow: 0,
686
662
  boxSizing: "border-box"
687
- } : column ? { ...getCellStyle(column), textAlign: "center" } : void 0,
663
+ } : column ? {
664
+ ...getCellStyle(column),
665
+ textAlign: "center"
666
+ } : void 0,
688
667
  title: titleText,
689
668
  children: content
690
669
  }
@@ -693,7 +672,6 @@ function TableHeaderCell({
693
672
  var TableHead = ({
694
673
  slots,
695
674
  columns,
696
- color,
697
675
  size,
698
676
  rowCheckbox = false,
699
677
  hasCheckedRows,
@@ -745,53 +723,31 @@ function TableCell({
745
723
  }) {
746
724
  var _a, _b;
747
725
  const value = row[column.field];
748
- const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
726
+ const formattedValue = (_b = (_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) != null ? _b : value;
749
727
  const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
728
+ const isTextContent = ["string", "number"].includes(typeof content) || content === null || content === void 0;
750
729
  const tdRef = (0, import_react3.useRef)(null);
751
730
  const [showTitle, setShowTitle] = (0, import_react3.useState)(false);
752
- const isTextContent = ["string", "number"].includes(typeof content) || content === null || content === void 0;
753
- const checkOverflow = (el) => {
754
- if (el.scrollWidth > el.clientWidth) {
755
- return true;
756
- }
757
- const children = Array.from(el.children);
758
- for (const child of children) {
759
- if (child.scrollWidth > child.clientWidth) {
760
- return true;
761
- }
762
- }
763
- return false;
764
- };
765
- (0, import_react3.useEffect)(() => {
731
+ (0, import_react3.useLayoutEffect)(() => {
766
732
  if (tdRef.current && isTextContent) {
767
- setTimeout(() => {
768
- if (tdRef.current) {
769
- setShowTitle(checkOverflow(tdRef.current));
770
- }
771
- }, 0);
733
+ const el = tdRef.current;
734
+ setShowTitle(el.scrollWidth > el.clientWidth);
772
735
  }
773
736
  }, [content, isTextContent]);
774
737
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
775
738
  "td",
776
739
  {
777
740
  ref: tdRef,
778
- className: clsx(
779
- slots.td(),
780
- classNames == null ? void 0 : classNames.td,
781
- column.className,
782
- isTextContent && "truncate",
783
- isTextContent && "[&>*]:inline-block [&>*]:max-w-full [&>*]:truncate [&>*]:align-middle"
784
- ),
741
+ className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className, isTextContent && "truncate"),
785
742
  style: {
786
743
  ...getCellStyle(column),
787
744
  maxWidth: column.width || "150px",
788
745
  textAlign: column.align || "center",
789
- ...!isTextContent && {
790
- overflow: "visible",
791
- whiteSpace: "normal"
792
- }
746
+ whiteSpace: isTextContent ? "nowrap" : "normal",
747
+ overflow: isTextContent ? "hidden" : "visible",
748
+ textOverflow: isTextContent ? "ellipsis" : void 0
793
749
  },
794
- title: showTitle ? String(((_b = value == null ? void 0 : value.props) == null ? void 0 : _b.children) || content || "") : void 0,
750
+ title: showTitle && isTextContent ? String(content != null ? content : "") : void 0,
795
751
  children: content
796
752
  },
797
753
  `${row.id}-${column.field}-${colIdx}-${rowIndex}`
@@ -1,17 +1,17 @@
1
1
  "use client";
2
2
  import "../../chunk-DX3KXNP6.mjs";
3
- import {
4
- table_default
5
- } from "../../chunk-KYWCJIXI.mjs";
6
3
  import {
7
4
  definition_table_default
8
5
  } from "../../chunk-DS5CGU2X.mjs";
6
+ import {
7
+ table_default
8
+ } from "../../chunk-W3V4SZV5.mjs";
9
9
  import "../../chunk-7B7LRG5J.mjs";
10
10
  import "../../chunk-VVCSY7DG.mjs";
11
11
  import "../../chunk-F3HENRVM.mjs";
12
+ import "../../chunk-QZ3LVYJW.mjs";
12
13
  import "../../chunk-2GCSFWHD.mjs";
13
14
  import "../../chunk-3RTVVQA3.mjs";
14
- import "../../chunk-QZ3LVYJW.mjs";
15
15
  import "../../chunk-DQRAFUDA.mjs";
16
16
  import "../../chunk-EWS3FESG.mjs";
17
17
  import "../../chunk-OEIEALIP.mjs";
@@ -641,37 +641,13 @@ function TableHeaderCell({
641
641
  }) {
642
642
  const thRef = (0, import_react2.useRef)(null);
643
643
  const [showTitle, setShowTitle] = (0, import_react2.useState)(false);
644
- const checkOverflow = (el) => {
645
- if (el.scrollWidth > el.clientWidth) {
646
- return true;
647
- }
648
- const children = Array.from(el.children);
649
- for (const child of children) {
650
- if (child.scrollWidth > child.clientWidth) {
651
- return true;
652
- }
653
- }
654
- return false;
655
- };
656
- const extractTextFromContent = (node) => {
657
- if (typeof node === "string" || typeof node === "number") {
658
- return String(node);
659
- }
660
- if ((0, import_react2.isValidElement)(node)) {
661
- return String(node.props.children || "");
662
- }
663
- return "";
664
- };
665
- (0, import_react2.useEffect)(() => {
666
- if (thRef.current && !isCheckbox) {
667
- setTimeout(() => {
668
- if (thRef.current) {
669
- setShowTitle(checkOverflow(thRef.current));
670
- }
671
- }, 0);
644
+ (0, import_react2.useLayoutEffect)(() => {
645
+ if (!isCheckbox && thRef.current) {
646
+ const el = thRef.current;
647
+ setShowTitle(el.scrollWidth > el.clientWidth);
672
648
  }
673
649
  }, [content, isCheckbox]);
674
- const titleText = !isCheckbox && showTitle ? extractTextFromContent(content) : void 0;
650
+ const titleText = !isCheckbox && showTitle ? typeof content === "string" || typeof content === "number" ? String(content) : "" : void 0;
675
651
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
676
652
  "th",
677
653
  {
@@ -684,7 +660,10 @@ function TableHeaderCell({
684
660
  flexShrink: 0,
685
661
  flexGrow: 0,
686
662
  boxSizing: "border-box"
687
- } : column ? { ...getCellStyle(column), textAlign: "center" } : void 0,
663
+ } : column ? {
664
+ ...getCellStyle(column),
665
+ textAlign: "center"
666
+ } : void 0,
688
667
  title: titleText,
689
668
  children: content
690
669
  }
@@ -693,7 +672,6 @@ function TableHeaderCell({
693
672
  var TableHead = ({
694
673
  slots,
695
674
  columns,
696
- color,
697
675
  size,
698
676
  rowCheckbox = false,
699
677
  hasCheckedRows,
@@ -6719,53 +6697,31 @@ function TableCell({
6719
6697
  }) {
6720
6698
  var _a, _b;
6721
6699
  const value = row[column.field];
6722
- const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
6700
+ const formattedValue = (_b = (_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) != null ? _b : value;
6723
6701
  const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
6702
+ const isTextContent = ["string", "number"].includes(typeof content) || content === null || content === void 0;
6724
6703
  const tdRef = (0, import_react7.useRef)(null);
6725
6704
  const [showTitle, setShowTitle] = (0, import_react7.useState)(false);
6726
- const isTextContent = ["string", "number"].includes(typeof content) || content === null || content === void 0;
6727
- const checkOverflow = (el) => {
6728
- if (el.scrollWidth > el.clientWidth) {
6729
- return true;
6730
- }
6731
- const children = Array.from(el.children);
6732
- for (const child of children) {
6733
- if (child.scrollWidth > child.clientWidth) {
6734
- return true;
6735
- }
6736
- }
6737
- return false;
6738
- };
6739
- (0, import_react7.useEffect)(() => {
6705
+ (0, import_react7.useLayoutEffect)(() => {
6740
6706
  if (tdRef.current && isTextContent) {
6741
- setTimeout(() => {
6742
- if (tdRef.current) {
6743
- setShowTitle(checkOverflow(tdRef.current));
6744
- }
6745
- }, 0);
6707
+ const el = tdRef.current;
6708
+ setShowTitle(el.scrollWidth > el.clientWidth);
6746
6709
  }
6747
6710
  }, [content, isTextContent]);
6748
6711
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
6749
6712
  "td",
6750
6713
  {
6751
6714
  ref: tdRef,
6752
- className: clsx(
6753
- slots.td(),
6754
- classNames == null ? void 0 : classNames.td,
6755
- column.className,
6756
- isTextContent && "truncate",
6757
- isTextContent && "[&>*]:inline-block [&>*]:max-w-full [&>*]:truncate [&>*]:align-middle"
6758
- ),
6715
+ className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className, isTextContent && "truncate"),
6759
6716
  style: {
6760
6717
  ...getCellStyle(column),
6761
6718
  maxWidth: column.width || "150px",
6762
6719
  textAlign: column.align || "center",
6763
- ...!isTextContent && {
6764
- overflow: "visible",
6765
- whiteSpace: "normal"
6766
- }
6720
+ whiteSpace: isTextContent ? "nowrap" : "normal",
6721
+ overflow: isTextContent ? "hidden" : "visible",
6722
+ textOverflow: isTextContent ? "ellipsis" : void 0
6767
6723
  },
6768
- title: showTitle ? String(((_b = value == null ? void 0 : value.props) == null ? void 0 : _b.children) || content || "") : void 0,
6724
+ title: showTitle && isTextContent ? String(content != null ? content : "") : void 0,
6769
6725
  children: content
6770
6726
  },
6771
6727
  `${row.id}-${column.field}-${colIdx}-${rowIndex}`
@@ -1,13 +1,13 @@
1
1
  "use client";
2
2
  import {
3
3
  table_body_default
4
- } from "../../chunk-KYWCJIXI.mjs";
4
+ } from "../../chunk-W3V4SZV5.mjs";
5
5
  import "../../chunk-7B7LRG5J.mjs";
6
6
  import "../../chunk-VVCSY7DG.mjs";
7
7
  import "../../chunk-F3HENRVM.mjs";
8
+ import "../../chunk-QZ3LVYJW.mjs";
8
9
  import "../../chunk-2GCSFWHD.mjs";
9
10
  import "../../chunk-3RTVVQA3.mjs";
10
- import "../../chunk-QZ3LVYJW.mjs";
11
11
  import "../../chunk-DQRAFUDA.mjs";
12
12
  import "../../chunk-EWS3FESG.mjs";
13
13
  import "../../chunk-OEIEALIP.mjs";
@@ -14,6 +14,6 @@ type TableHeadProps = {
14
14
  classNames?: SlotsToClasses<TableSlots>;
15
15
  onCheckAll: (isChecked: boolean) => void;
16
16
  };
17
- declare const TableHead: ({ slots, columns, color, size, rowCheckbox, hasCheckedRows, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
17
+ declare const TableHead: ({ slots, columns, size, rowCheckbox, hasCheckedRows, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
18
18
 
19
19
  export { TableHead as default };
@@ -14,6 +14,6 @@ type TableHeadProps = {
14
14
  classNames?: SlotsToClasses<TableSlots>;
15
15
  onCheckAll: (isChecked: boolean) => void;
16
16
  };
17
- declare const TableHead: ({ slots, columns, color, size, rowCheckbox, hasCheckedRows, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
17
+ declare const TableHead: ({ slots, columns, size, rowCheckbox, hasCheckedRows, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
18
18
 
19
19
  export { TableHead as default };