@deepnoid/ui 0.1.181 → 0.1.183

package/dist/components/table/table-body.js

@@ -105,7 +105,7 @@ __export(table_body_exports, {
   default: () => table_body_default
 });
 module.exports = __toCommonJS(table_body_exports);
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/utils/clsx.ts
 function clsx(...args) {
@@ -148,7 +148,7 @@ function toVal(mix) {
 }
 
 // src/components/table/table.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_tailwind_variants6 = require("tailwind-variants");
 
 // src/utils/props.ts
@@ -171,6 +171,9 @@ var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
   }
 };
 
+// src/components/table/table-head.tsx
+var import_react2 = require("react");
+
 // src/components/checkbox/checkbox.tsx
 var import_react = require("react");
 
@@ -629,20 +632,51 @@ var checkboxStyle = tv({
 
 // src/components/table/table-head.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var TableHead = ({
+function TableHeaderCell({
+  content,
+  column,
+  isCheckbox = false,
   slots,
-  columns,
-  color,
-  size,
-  rowCheckbox = false,
-  hasCheckedRows,
-  classNames,
-  onCheckAll
-}) => {
-  const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  classNames
+}) {
+  const thRef = (0, import_react2.useRef)(null);
+  const [showTitle, setShowTitle] = (0, import_react2.useState)(false);
+  const checkOverflow = (el) => {
+    if (el.scrollWidth > el.clientWidth) {
+      return true;
+    }
+    const children = Array.from(el.children);
+    for (const child of children) {
+      if (child.scrollWidth > child.clientWidth) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const extractTextFromContent = (node) => {
+    if (typeof node === "string" || typeof node === "number") {
+      return String(node);
+    }
+    if ((0, import_react2.isValidElement)(node)) {
+      return String(node.props.children || "");
+    }
+    return "";
+  };
+  (0, import_react2.useEffect)(() => {
+    if (thRef.current && !isCheckbox) {
+      setTimeout(() => {
+        if (thRef.current) {
+          setShowTitle(checkOverflow(thRef.current));
+        }
+      }, 0);
+    }
+  }, [content, isCheckbox]);
+  const titleText = !isCheckbox && showTitle ? extractTextFromContent(content) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "th",
     {
-      className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className),
+      ref: thRef,
+      className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className, !isCheckbox && "truncate"),
       style: isCheckbox ? {
         width: "40px",
         minWidth: "40px",
@@ -651,42 +685,66 @@ var TableHead = ({
         flexGrow: 0,
         boxSizing: "border-box"
       } : column ? { ...getCellStyle(column), textAlign: "center" } : void 0,
+      title: titleText,
       children: content
-    },
-    key
+    }
   );
+}
+var TableHead = ({
+  slots,
+  columns,
+  color,
+  size,
+  rowCheckbox = false,
+  hasCheckedRows,
+  classNames,
+  onCheckAll
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
-    columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
-    rowCheckbox && renderTh(
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        checkbox_default,
-        {
-          size,
-          checked: hasCheckedRows,
-          onChange: (e) => onCheckAll(e.target.checked)
-        }
-      ) }),
-      "checkbox",
-      void 0,
-      true
+    columns.map((column, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      TableHeaderCell,
+      {
+        content: column.headerName,
+        column,
+        slots,
+        classNames
+      },
+      `${column.field}-${idx}`
+    )),
+    rowCheckbox && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      TableHeaderCell,
+      {
+        content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          checkbox_default,
+          {
+            size,
+            checked: hasCheckedRows,
+            onChange: (e) => onCheckAll(e.target.checked)
+          }
+        ) }),
+        isCheckbox: true,
+        slots,
+        classNames
+      },
+      "checkbox"
     )
   ] }) });
 };
 var table_head_default = TableHead;
 
 // src/components/pagination/pagination.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/components/pagination/usePagination.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 var usePagination = ({ currentPage, totalPage, groupSize, handleChangePage }) => {
-  const startPage = (0, import_react2.useMemo)(() => Math.floor((currentPage - 1) / groupSize) * groupSize + 1, [currentPage, groupSize]);
-  const endPage = (0, import_react2.useMemo)(() => Math.min(startPage + groupSize - 1, totalPage), [startPage, groupSize, totalPage]);
-  const pageList = (0, import_react2.useMemo)(
+  const startPage = (0, import_react3.useMemo)(() => Math.floor((currentPage - 1) / groupSize) * groupSize + 1, [currentPage, groupSize]);
+  const endPage = (0, import_react3.useMemo)(() => Math.min(startPage + groupSize - 1, totalPage), [startPage, groupSize, totalPage]);
+  const pageList = (0, import_react3.useMemo)(
     () => Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i),
     [startPage, endPage]
   );
-  const handleClickMovePage = (0, import_react2.useCallback)(
+  const handleClickMovePage = (0, import_react3.useCallback)(
     (page) => (event) => {
       event.preventDefault();
       handleChangePage == null ? void 0 : handleChangePage(page);
@@ -703,7 +761,7 @@ var usePagination = ({ currentPage, totalPage, groupSize, handleChangePage }) =>
 var usePagination_default = usePagination;
 
 // src/components/input/input.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/components/icon/template.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -5438,12 +5496,12 @@ var Icon_default = Icon;
 
 // src/components/input/input.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Input = (0, import_react3.forwardRef)((originalProps, ref) => {
+var Input = (0, import_react4.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, inputStyle.variantKeys);
   const { classNames, label, helperMessage, errorMessage, startContent, endContent, ...inputProps } = props;
-  const inputRef = (0, import_react3.useRef)(null);
-  const slots = (0, import_react3.useMemo)(() => inputStyle({ ...variantProps }), [variantProps]);
-  const getContentProps = (0, import_react3.useCallback)(
+  const inputRef = (0, import_react4.useRef)(null);
+  const slots = (0, import_react4.useMemo)(() => inputStyle({ ...variantProps }), [variantProps]);
+  const getContentProps = (0, import_react4.useCallback)(
     () => ({
       className: clsx(
         slots.content({ class: classNames == null ? void 0 : classNames.content }),
@@ -5454,13 +5512,13 @@ var Input = (0, import_react3.forwardRef)((originalProps, ref) => {
     [slots, classNames, originalProps.size, inputProps.readOnly]
   );
   const renderStartContent = () => {
-    if ((0, import_react3.isValidElement)(startContent)) {
+    if ((0, import_react4.isValidElement)(startContent)) {
       const existingProps = startContent.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return (0, import_react3.cloneElement)(startContent, mergedProps);
+      return (0, import_react4.cloneElement)(startContent, mergedProps);
     } else {
       const contentProps = getContentProps();
       return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ...contentProps, children: startContent });
@@ -5479,13 +5537,13 @@ var Input = (0, import_react3.forwardRef)((originalProps, ref) => {
     }
   );
   const renderContentWithIcon = () => {
-    if ((0, import_react3.isValidElement)(endContent)) {
+    if ((0, import_react4.isValidElement)(endContent)) {
       const existingProps = endContent.props;
       const mergedProps = {
         ...getContentProps(),
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
-      return (0, import_react3.cloneElement)(endContent, mergedProps);
+      return (0, import_react4.cloneElement)(endContent, mergedProps);
     } else if (errorMessage && errorMessage.length > 0) {
       const iconProps = { ...getContentProps(), className: getContentProps().className };
       return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
@@ -5822,7 +5880,7 @@ var inputStyle = tv(
 
 // src/components/pagination/pagination.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Pagination = (0, import_react4.forwardRef)((originalProps, ref) => {
+var Pagination = (0, import_react5.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, paginationStyle.variantKeys);
   const {
     classNames,
@@ -5836,12 +5894,12 @@ var Pagination = (0, import_react4.forwardRef)((originalProps, ref) => {
     variant,
     size
   } = { ...props, ...variantProps };
-  const [inputPage, setInputPage] = (0, import_react4.useState)(currentPage);
+  const [inputPage, setInputPage] = (0, import_react5.useState)(currentPage);
   const isFirstPageDisabled = currentPage <= 1;
   const isPrevPageDisabled = currentPage <= 1;
   const isNextPageDisabled = currentPage >= totalPage;
   const isLastPageDisabled = currentPage >= totalPage;
-  const slots = (0, import_react4.useMemo)(() => paginationStyle(variantProps), [variantProps]);
+  const slots = (0, import_react5.useMemo)(() => paginationStyle(variantProps), [variantProps]);
   const { pageList, handleClickMovePage } = usePagination_default({
     currentPage,
     totalPage,
@@ -6209,7 +6267,7 @@ var scrollAreaStyle = (0, import_tailwind_variants5.tv)({
 
 // src/components/table/table.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
+var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, tableStyle.variantKeys);
   const {
     rows,
@@ -6234,8 +6292,8 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
   } = { ...props, ...variantProps };
   const { page = 1, perPage = 15 } = pagination || {};
   const showPagination = pagination && totalData > 0;
-  const [checkedRowIds, setCheckedRowIds] = (0, import_react5.useState)(new Set(checkedRows == null ? void 0 : checkedRows.map((row) => row.id)));
-  const tableMinWidth = (0, import_react5.useMemo)(() => {
+  const [checkedRowIds, setCheckedRowIds] = (0, import_react6.useState)(new Set(checkedRows == null ? void 0 : checkedRows.map((row) => row.id)));
+  const tableMinWidth = (0, import_react6.useMemo)(() => {
     const columnsWidth = columns.reduce((total, column) => {
       if (column.width) return total + column.width;
       if (column.minWidth) return total + column.minWidth;
@@ -6244,10 +6302,10 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
     const checkboxWidth = rowCheckbox ? 40 : 0;
     return columnsWidth + checkboxWidth;
   }, [columns, rowCheckbox]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     onCheckedRowsChange == null ? void 0 : onCheckedRowsChange(getCheckedRowData(checkedRowIds));
   }, [checkedRowIds]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const currentRowIds = new Set(rows.map((row) => row.id));
     const ids = Array.from(checkedRowIds);
     const hasValidCheckedRows = ids.every((id) => currentRowIds.has(id));
@@ -6255,7 +6313,7 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
       setCheckedRowIds(new Set(checkedRows == null ? void 0 : checkedRows.map((row) => row.id)));
     }
   }, [rows.map((row) => row.id).join(",")]);
-  (0, import_react5.useImperativeHandle)(
+  (0, import_react6.useImperativeHandle)(
     ref,
     () => ({
       checkedRowIds,
@@ -6282,7 +6340,7 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
     onRowClick == null ? void 0 : onRowClick(row, index, event);
   };
   const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
-  const slots = (0, import_react5.useMemo)(
+  const slots = (0, import_react6.useMemo)(
     () => tableStyle({ ...variantProps, rowClickable: typeof onRowClick === "function" }),
     [variantProps, onRowClick]
   );
@@ -6609,25 +6667,46 @@ function TableCell({
   slots,
   classNames
 }) {
-  var _a;
+  var _a, _b;
   const value = row[column.field];
   const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
   const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
-  const tdRef = (0, import_react6.useRef)(null);
-  const [showTitle, setShowTitle] = (0, import_react6.useState)(false);
-  const checkOverflow = (el) => el.scrollWidth > el.clientWidth;
-  (0, import_react6.useEffect)(() => {
+  const tdRef = (0, import_react7.useRef)(null);
+  const [showTitle, setShowTitle] = (0, import_react7.useState)(false);
+  const checkOverflow = (el) => {
+    if (el.scrollWidth > el.clientWidth) {
+      return true;
+    }
+    const children = Array.from(el.children);
+    for (const child of children) {
+      if (child.scrollWidth > child.clientWidth) {
+        return true;
+      }
+    }
+    return false;
+  };
+  (0, import_react7.useEffect)(() => {
     if (tdRef.current) {
-      setShowTitle(checkOverflow(tdRef.current));
+      setTimeout(() => {
+        if (tdRef.current) {
+          setShowTitle(checkOverflow(tdRef.current));
+        }
+      }, 0);
     }
   }, [content]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "td",
     {
       ref: tdRef,
-      className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className, "truncate"),
+      className: clsx(
+        slots.td(),
+        classNames == null ? void 0 : classNames.td,
+        column.className,
+        "truncate",
+        "[&>*]:block [&>*]:w-full [&>*]:truncate"
+      ),
       style: { ...getCellStyle(column), maxWidth: column.width || "150px" },
-      title: showTitle ? String(content) : void 0,
+      title: showTitle ? String(((_b = value == null ? void 0 : value.props) == null ? void 0 : _b.children) || content || "") : void 0,
       children: content
     },
     `${row.id}-${column.field}-${colIdx}-${rowIndex}`

package/dist/components/table/table-body.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   table_body_default
-} from "../../chunk-HOQAQVDA.mjs";
+} from "../../chunk-VRHMQMRO.mjs";
 import "../../chunk-7B7LRG5J.mjs";
 import "../../chunk-7C7RHDHV.mjs";
 import "../../chunk-F3HENRVM.mjs";

package/dist/components/table/table-head.js

@@ -105,6 +105,7 @@ __export(table_head_exports, {
   default: () => table_head_default
 });
 module.exports = __toCommonJS(table_head_exports);
+var import_react7 = require("react");
 
 // src/utils/clsx.ts
 function clsx(...args) {
@@ -639,25 +640,46 @@ function TableCell({
   slots,
   classNames
 }) {
-  var _a;
+  var _a, _b;
   const value = row[column.field];
   const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
   const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
   const tdRef = (0, import_react2.useRef)(null);
   const [showTitle, setShowTitle] = (0, import_react2.useState)(false);
-  const checkOverflow = (el) => el.scrollWidth > el.clientWidth;
+  const checkOverflow = (el) => {
+    if (el.scrollWidth > el.clientWidth) {
+      return true;
+    }
+    const children = Array.from(el.children);
+    for (const child of children) {
+      if (child.scrollWidth > child.clientWidth) {
+        return true;
+      }
+    }
+    return false;
+  };
   (0, import_react2.useEffect)(() => {
     if (tdRef.current) {
-      setShowTitle(checkOverflow(tdRef.current));
+      setTimeout(() => {
+        if (tdRef.current) {
+          setShowTitle(checkOverflow(tdRef.current));
+        }
+      }, 0);
     }
   }, [content]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "td",
     {
       ref: tdRef,
-      className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className, "truncate"),
+      className: clsx(
+        slots.td(),
+        classNames == null ? void 0 : classNames.td,
+        column.className,
+        "truncate",
+        "[&>*]:block [&>*]:w-full [&>*]:truncate"
+      ),
       style: { ...getCellStyle(column), maxWidth: column.width || "150px" },
-      title: showTitle ? String(content) : void 0,
+      title: showTitle ? String(((_b = value == null ? void 0 : value.props) == null ? void 0 : _b.children) || content || "") : void 0,
       children: content
     },
     `${row.id}-${column.field}-${colIdx}-${rowIndex}`
@@ -6653,20 +6675,51 @@ var getCellStyle = (column) => {
 
 // src/components/table/table-head.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var TableHead = ({
+function TableHeaderCell({
+  content,
+  column,
+  isCheckbox = false,
   slots,
-  columns,
-  color,
-  size,
-  rowCheckbox = false,
-  hasCheckedRows,
-  classNames,
-  onCheckAll
-}) => {
-  const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  classNames
+}) {
+  const thRef = (0, import_react7.useRef)(null);
+  const [showTitle, setShowTitle] = (0, import_react7.useState)(false);
+  const checkOverflow = (el) => {
+    if (el.scrollWidth > el.clientWidth) {
+      return true;
+    }
+    const children = Array.from(el.children);
+    for (const child of children) {
+      if (child.scrollWidth > child.clientWidth) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const extractTextFromContent = (node) => {
+    if (typeof node === "string" || typeof node === "number") {
+      return String(node);
+    }
+    if ((0, import_react7.isValidElement)(node)) {
+      return String(node.props.children || "");
+    }
+    return "";
+  };
+  (0, import_react7.useEffect)(() => {
+    if (thRef.current && !isCheckbox) {
+      setTimeout(() => {
+        if (thRef.current) {
+          setShowTitle(checkOverflow(thRef.current));
+        }
+      }, 0);
+    }
+  }, [content, isCheckbox]);
+  const titleText = !isCheckbox && showTitle ? extractTextFromContent(content) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "th",
     {
-      className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className),
+      ref: thRef,
+      className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className, !isCheckbox && "truncate"),
       style: isCheckbox ? {
         width: "40px",
         minWidth: "40px",
@@ -6675,24 +6728,48 @@ var TableHead = ({
         flexGrow: 0,
         boxSizing: "border-box"
       } : column ? { ...getCellStyle(column), textAlign: "center" } : void 0,
+      title: titleText,
       children: content
-    },
-    key
+    }
   );
+}
+var TableHead = ({
+  slots,
+  columns,
+  color,
+  size,
+  rowCheckbox = false,
+  hasCheckedRows,
+  classNames,
+  onCheckAll
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
-    columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
-    rowCheckbox && renderTh(
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        checkbox_default,
-        {
-          size,
-          checked: hasCheckedRows,
-          onChange: (e) => onCheckAll(e.target.checked)
-        }
-      ) }),
-      "checkbox",
-      void 0,
-      true
+    columns.map((column, idx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      TableHeaderCell,
+      {
+        content: column.headerName,
+        column,
+        slots,
+        classNames
+      },
+      `${column.field}-${idx}`
+    )),
+    rowCheckbox && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      TableHeaderCell,
+      {
+        content: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          checkbox_default,
+          {
+            size,
+            checked: hasCheckedRows,
+            onChange: (e) => onCheckAll(e.target.checked)
+          }
+        ) }),
+        isCheckbox: true,
+        slots,
+        classNames
+      },
+      "checkbox"
     )
   ] }) });
 };

package/dist/components/table/table-head.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   table_head_default
-} from "../../chunk-HOQAQVDA.mjs";
+} from "../../chunk-VRHMQMRO.mjs";
 import "../../chunk-7B7LRG5J.mjs";
 import "../../chunk-7C7RHDHV.mjs";
 import "../../chunk-F3HENRVM.mjs";