@deepnoid/ui 0.1.201 → 0.1.203

package/dist/{chunk-KYWCJIXI.mjs → chunk-W3V4SZV5.mjs}

@@ -16,12 +16,12 @@ import {
 } from "./chunk-27Y6K5NK.mjs";
 
 // src/components/table/table-head.tsx
-import { isValidElement, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState3 } from "react";
 
 // src/components/table/table.tsx
 import {
   forwardRef,
-  useEffect as useEffect2,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useState as useState2
@@ -29,7 +29,7 @@ import {
 import { tv } from "tailwind-variants";
 
 // src/components/table/table-body.tsx
-import { useEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function TableCell({
   row,
@@ -41,53 +41,31 @@ function TableCell({
 }) {
   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 formattedValue = (_b = (_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) != null ? _b : value;
   const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
+  const isTextContent = ["string", "number"].includes(typeof content) || content === null || content === void 0;
   const tdRef = useRef(null);
   const [showTitle, setShowTitle] = useState(false);
-  const isTextContent = ["string", "number"].includes(typeof content) || content === null || content === void 0;
-  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;
-  };
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (tdRef.current && isTextContent) {
-      setTimeout(() => {
-        if (tdRef.current) {
-          setShowTitle(checkOverflow(tdRef.current));
-        }
-      }, 0);
+      const el = tdRef.current;
+      setShowTitle(el.scrollWidth > el.clientWidth);
     }
   }, [content, isTextContent]);
   return /* @__PURE__ */ jsx(
     "td",
     {
       ref: tdRef,
-      className: clsx(
-        slots.td(),
-        classNames == null ? void 0 : classNames.td,
-        column.className,
-        isTextContent && "truncate",
-        isTextContent && "[&>*]:inline-block [&>*]:max-w-full [&>*]:truncate [&>*]:align-middle"
-      ),
+      className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className, isTextContent && "truncate"),
       style: {
         ...getCellStyle(column),
         maxWidth: column.width || "150px",
         textAlign: column.align || "center",
-        ...!isTextContent && {
-          overflow: "visible",
-          whiteSpace: "normal"
-        }
+        whiteSpace: isTextContent ? "nowrap" : "normal",
+        overflow: isTextContent ? "hidden" : "visible",
+        textOverflow: isTextContent ? "ellipsis" : void 0
       },
-      title: showTitle ? String(((_b = value == null ? void 0 : value.props) == null ? void 0 : _b.children) || content || "") : void 0,
+      title: showTitle && isTextContent ? String(content != null ? content : "") : void 0,
       children: content
     },
     `${row.id}-${column.field}-${colIdx}-${rowIndex}`
@@ -194,10 +172,10 @@ var Table = forwardRef((originalProps, ref) => {
     const checkboxWidth = rowCheckbox ? 40 : 0;
     return columnsWidth + checkboxWidth;
   }, [columns, rowCheckbox]);
-  useEffect2(() => {
+  useEffect(() => {
     onCheckedRowsChange == null ? void 0 : onCheckedRowsChange(getCheckedRowData(checkedRowIds));
   }, [checkedRowIds]);
-  useEffect2(() => {
+  useEffect(() => {
     const currentRowIds = new Set(rows.map((row) => row.id));
     const ids = Array.from(checkedRowIds);
     const hasValidCheckedRows = ids.every((id) => currentRowIds.has(id));
@@ -561,37 +539,13 @@ function TableHeaderCell({
 }) {
   const thRef = useRef2(null);
   const [showTitle, setShowTitle] = useState3(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 (isValidElement(node)) {
-      return String(node.props.children || "");
-    }
-    return "";
-  };
-  useEffect3(() => {
-    if (thRef.current && !isCheckbox) {
-      setTimeout(() => {
-        if (thRef.current) {
-          setShowTitle(checkOverflow(thRef.current));
-        }
-      }, 0);
+  useLayoutEffect2(() => {
+    if (!isCheckbox && thRef.current) {
+      const el = thRef.current;
+      setShowTitle(el.scrollWidth > el.clientWidth);
     }
   }, [content, isCheckbox]);
-  const titleText = !isCheckbox && showTitle ? extractTextFromContent(content) : void 0;
+  const titleText = !isCheckbox && showTitle ? typeof content === "string" || typeof content === "number" ? String(content) : "" : void 0;
   return /* @__PURE__ */ jsx3(
     "th",
     {
@@ -604,7 +558,10 @@ function TableHeaderCell({
         flexShrink: 0,
         flexGrow: 0,
         boxSizing: "border-box"
-      } : column ? { ...getCellStyle(column), textAlign: "center" } : void 0,
+      } : column ? {
+        ...getCellStyle(column),
+        textAlign: "center"
+      } : void 0,
       title: titleText,
       children: content
     }
@@ -613,7 +570,6 @@ function TableHeaderCell({
 var TableHead = ({
   slots,
   columns,
-  color,
   size,
   rowCheckbox = false,
   hasCheckedRows,

package/dist/components/picker/index.js

@@ -7156,6 +7156,7 @@ var Select = (0, import_react8.forwardRef)((originalProps, ref) => {
     dropdownIconName = "brace-up",
     optionIconName,
     optionIconPlacement,
+    clearable,
     ...inputProps
   } = props;
   const slots = (0, import_react8.useMemo)(() => select({ ...variantProps }), [variantProps]);
@@ -7209,6 +7210,11 @@ var Select = (0, import_react8.forwardRef)((originalProps, ref) => {
     setSelectedOptions(nextOptions);
     onChange == null ? void 0 : onChange(nextOptions);
   };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    setSelectedOptions([]);
+    onChange == null ? void 0 : onChange([]);
+  };
   (0, import_react8.useEffect)(() => {
     const handleClickOutside = (e) => {
       var _a2;
@@ -7335,6 +7341,17 @@ var Select = (0, import_react8.forwardRef)((originalProps, ref) => {
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { type: "hidden", name: inputProps.name, value: selectedValue }),
+                  clearable && selectedOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    icon_button_default,
+                    {
+                      name: "close",
+                      variant: "ghost",
+                      size: "sm",
+                      color: "neutral",
+                      onClick: handleClear,
+                      classNames: { base: "pr-[2px]" }
+                    }
+                  ),
                   /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     Icon_default,
                     {

package/dist/components/picker/index.mjs

@@ -9,9 +9,9 @@ import {
 } from "../../chunk-XZYQFBCT.mjs";
 import {
   timePicker_default
-} from "../../chunk-YBXBTE5T.mjs";
+} from "../../chunk-COGGK5Q6.mjs";
 import "../../chunk-QCEKPS7U.mjs";
-import "../../chunk-75ZDPLJ4.mjs";
+import "../../chunk-K2RW5KLO.mjs";
 import "../../chunk-2GCSFWHD.mjs";
 import "../../chunk-3RTVVQA3.mjs";
 import "../../chunk-MY5U63QO.mjs";