@deepnoid/ui 0.0.80 → 0.0.83

package/dist/components/table/table.d.mts

@@ -1,71 +1,23 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
 import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
-import * as react from 'react';
-import { ReactElement, ReactNode } from 'react';
+import react__default, { ReactElement } from 'react';
 import { SlotsToClasses } from '../../utils/types.mjs';
 
-interface Props extends Omit<React.ComponentPropsWithRef<"table">, "ref" | "color" | "slot" | "size" | "defaultChecked" | "defaultValue"> {
+interface Props extends Omit<react__default.ComponentPropsWithRef<"table">, "ref" | "color" | "slot" | "size" | "defaultChecked" | "defaultValue"> {
     rows: TableRow[];
     columns: TableColumn[];
     isLoading?: boolean;
-    emptyContent?: ReactNode;
-    onRowAction?: (e: React.MouseEvent, params: TableRow) => void;
-    /**
-     * @example
-     * ```ts
-     * <Table classNames={{
-     *    base:"base-classes", // table wrapper
-     *    table: "table-classes",
-     *    thead: "thead-classes",
-     *    tbody: "tbody-classes",
-     *    tr: "tr-classes",
-     *    th: "th-classes",
-     *    td: "td-classes",
-     *    tfoot: "tfoot-classes",
-     *    sortIcon: "sort-icon-classes",
-     *    emptyWrapper: "empty-wrapper-classes",
-     * }} />
-     * ```
-     */
+    emptyContent?: ReactElement;
     classNames?: SlotsToClasses<TableSlots>;
+    onRowAction?: (e: react__default.MouseEvent, params: TableRow) => void;
 }
-declare const Table: react.ForwardRefExoticComponent<Props & TableVariantProps & react.RefAttributes<any>>;
+interface TableRef {
+    selectedRows: Set<number>;
+    setSelectedRows: (rows: Set<number>) => void;
+}
+declare const Table: react__default.ForwardRefExoticComponent<Props & TableVariantProps & react__default.RefAttributes<TableRef>>;
 
-/**
- * Table 테일 윈드
- *
- * @example
- * ```js
- * const {base, table, thead, tbody, th, th, th, tfoot} = table({...})
- *
- * <div className={base()}>
- *   <table className={table()}>
- *    <thead className={thead()}>
- *      <tr className={tr()}>
- *        <th className={th()}>...</th>
- *        <th className={th()}>...</th>
- *      </tr>
- *    </thead>
- *    <tbody className={tbody()}>
- *      <tr className={tr()}>
- *        <td className={td()}>...</td>
- *        <td className={td()}>...</td>
- *      </tr>
- *      <tr className={tr()}>
- *        <td className={td()}>...</td>
- *        <td className={td()}>...</td>
- *     </tr>
- *   </tbody>
- *    <tfoot className={tfoot()}>
- *      <tr className={tr()}>
- *        <td className={td()}>...</td>
- *        <td className={td()}>...</td>
- *      </tr>
- *    </tfoot>
- *  </table>
- * </div>
- */
 declare const table: tailwind_variants.TVReturnType<{
     variant: {
         solid: {
@@ -113,6 +65,9 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
+    isSelectedRow: {
+        true: {};
+    };
     hideHeader: {
         true: {
             thead: string;
@@ -194,6 +149,9 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
+    isSelectedRow: {
+        true: {};
+    };
     hideHeader: {
         true: {
             thead: string;
@@ -262,6 +220,9 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
+    isSelectedRow: {
+        true: {};
+    };
     hideHeader: {
         true: {
             thead: string;
@@ -330,6 +291,9 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
+    isSelectedRow: {
+        true: {};
+    };
     hideHeader: {
         true: {
             thead: string;
@@ -411,6 +375,9 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
+    isSelectedRow: {
+        true: {};
+    };
     hideHeader: {
         true: {
             thead: string;
@@ -492,6 +459,9 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
+    isSelectedRow: {
+        true: {};
+    };
     hideHeader: {
         true: {
             thead: string;
@@ -560,6 +530,9 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
+    isSelectedRow: {
+        true: {};
+    };
     hideHeader: {
         true: {
             thead: string;
@@ -604,7 +577,7 @@ type TableColumn<R extends RowValue = RowValue, V = any, F = V> = {
     headerName?: string | ReactElement;
     className?: string;
     valueFormatter?: (params: ValueFormatterParams<V>) => F;
-    renderCell?: (params: CellParams<R, V, F>) => React.ReactNode;
+    renderCell?: (params: CellParams<R, V, F>) => react__default.ReactNode;
 };
 
-export { type TableColumn, type TableReturnType, type TableRow, type TableSlots, type TableVariantProps, Table as default };
+export { type TableColumn, type TableRef, type TableReturnType, type TableRow, type TableSlots, type TableVariantProps, Table as default };

package/dist/components/table/table.d.ts

@@ -1,71 +1,23 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
 import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
-import * as react from 'react';
-import { ReactElement, ReactNode } from 'react';
+import react__default, { ReactElement } from 'react';
 import { SlotsToClasses } from '../../utils/types.js';
 
-interface Props extends Omit<React.ComponentPropsWithRef<"table">, "ref" | "color" | "slot" | "size" | "defaultChecked" | "defaultValue"> {
+interface Props extends Omit<react__default.ComponentPropsWithRef<"table">, "ref" | "color" | "slot" | "size" | "defaultChecked" | "defaultValue"> {
     rows: TableRow[];
     columns: TableColumn[];
     isLoading?: boolean;
-    emptyContent?: ReactNode;
-    onRowAction?: (e: React.MouseEvent, params: TableRow) => void;
-    /**
-     * @example
-     * ```ts
-     * <Table classNames={{
-     *    base:"base-classes", // table wrapper
-     *    table: "table-classes",
-     *    thead: "thead-classes",
-     *    tbody: "tbody-classes",
-     *    tr: "tr-classes",
-     *    th: "th-classes",
-     *    td: "td-classes",
-     *    tfoot: "tfoot-classes",
-     *    sortIcon: "sort-icon-classes",
-     *    emptyWrapper: "empty-wrapper-classes",
-     * }} />
-     * ```
-     */
+    emptyContent?: ReactElement;
     classNames?: SlotsToClasses<TableSlots>;
+    onRowAction?: (e: react__default.MouseEvent, params: TableRow) => void;
 }
-declare const Table: react.ForwardRefExoticComponent<Props & TableVariantProps & react.RefAttributes<any>>;
+interface TableRef {
+    selectedRows: Set<number>;
+    setSelectedRows: (rows: Set<number>) => void;
+}
+declare const Table: react__default.ForwardRefExoticComponent<Props & TableVariantProps & react__default.RefAttributes<TableRef>>;
 
-/**
- * Table 테일 윈드
- *
- * @example
- * ```js
- * const {base, table, thead, tbody, th, th, th, tfoot} = table({...})
- *
- * <div className={base()}>
- *   <table className={table()}>
- *    <thead className={thead()}>
- *      <tr className={tr()}>
- *        <th className={th()}>...</th>
- *        <th className={th()}>...</th>
- *      </tr>
- *    </thead>
- *    <tbody className={tbody()}>
- *      <tr className={tr()}>
- *        <td className={td()}>...</td>
- *        <td className={td()}>...</td>
- *      </tr>
- *      <tr className={tr()}>
- *        <td className={td()}>...</td>
- *        <td className={td()}>...</td>
- *     </tr>
- *   </tbody>
- *    <tfoot className={tfoot()}>
- *      <tr className={tr()}>
- *        <td className={td()}>...</td>
- *        <td className={td()}>...</td>
- *      </tr>
- *    </tfoot>
- *  </table>
- * </div>
- */
 declare const table: tailwind_variants.TVReturnType<{
     variant: {
         solid: {
@@ -113,6 +65,9 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
+    isSelectedRow: {
+        true: {};
+    };
     hideHeader: {
         true: {
             thead: string;
@@ -194,6 +149,9 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
+    isSelectedRow: {
+        true: {};
+    };
     hideHeader: {
         true: {
             thead: string;
@@ -262,6 +220,9 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
+    isSelectedRow: {
+        true: {};
+    };
     hideHeader: {
         true: {
             thead: string;
@@ -330,6 +291,9 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
+    isSelectedRow: {
+        true: {};
+    };
     hideHeader: {
         true: {
             thead: string;
@@ -411,6 +375,9 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
+    isSelectedRow: {
+        true: {};
+    };
     hideHeader: {
         true: {
             thead: string;
@@ -492,6 +459,9 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
+    isSelectedRow: {
+        true: {};
+    };
     hideHeader: {
         true: {
             thead: string;
@@ -560,6 +530,9 @@ declare const table: tailwind_variants.TVReturnType<{
     isSelected: {
         true: {};
     };
+    isSelectedRow: {
+        true: {};
+    };
     hideHeader: {
         true: {
             thead: string;
@@ -604,7 +577,7 @@ type TableColumn<R extends RowValue = RowValue, V = any, F = V> = {
     headerName?: string | ReactElement;
     className?: string;
     valueFormatter?: (params: ValueFormatterParams<V>) => F;
-    renderCell?: (params: CellParams<R, V, F>) => React.ReactNode;
+    renderCell?: (params: CellParams<R, V, F>) => react__default.ReactNode;
 };
 
-export { type TableColumn, type TableReturnType, type TableRow, type TableSlots, type TableVariantProps, Table as default };
+export { type TableColumn, type TableRef, type TableReturnType, type TableRow, type TableSlots, type TableVariantProps, Table as default };

package/dist/components/table/table.js

@@ -305,7 +305,17 @@ var checkbox = tv({
 // src/components/table/table-head.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var import_react3 = require("react");
-var TableHead = ({ columns, slots, size, color, isSelected, isExpanded, classNames }) => {
+var TableHead = ({
+  columns,
+  slots,
+  size,
+  color,
+  isExpanded,
+  isSelected,
+  isAllSelected,
+  classNames,
+  onSelectAll
+}) => {
   const getTheadProps = (0, import_react2.useCallback)(
     () => ({
       className: slots.thead({ class: clsx(classNames == null ? void 0 : classNames.thead) })
@@ -322,14 +332,16 @@ var TableHead = ({ columns, slots, size, color, isSelected, isExpanded, classNam
     ({ className }) => ({
       className: slots.th({ class: clsx(classNames == null ? void 0 : classNames.th, className) })
     }),
-    [classNames == null ? void 0 : classNames.th, columns, slots]
+    [classNames == null ? void 0 : classNames.th, slots]
   );
+  const handleClickSelectAll = (e) => {
+    e.preventDefault();
+    onSelectAll(!isAllSelected);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { ...getTheadProps(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { ...getTrProps(), children: [
-    isSelected && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(checkbox_default, { size, color, classNames: { wrapper: "bg-background" } }) }),
+    isSelected && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]", onClick: handleClickSelectAll, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(checkbox_default, { size, color, checked: isAllSelected, classNames: { wrapper: "bg-background" } }) }),
     isExpanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]" }),
-    columns.map((column, index) => {
-      return /* @__PURE__ */ (0, import_react3.createElement)("th", { ...getThProps(column), key: column.field + index + "th" }, column.headerName);
-    })
+    columns.map((column, index) => /* @__PURE__ */ (0, import_react3.createElement)("th", { ...getThProps(column), key: column.field + index + "th" }, column.headerName))
   ] }) });
 };
 var table_head_default = TableHead;
@@ -2738,12 +2750,15 @@ var TableBody = ({
   slots,
   rows,
   columns,
-  isSelected,
   isExpanded,
+  isSelected,
+  isSelectedRow,
+  selectedRows,
   emptyContent,
+  onSelectRow,
   onRowAction
 }) => {
-  const colSpanCount = columns.length + (isExpanded ? 1 : 0) + (isSelected ? 1 : 0);
+  const COL_SPAN_COUNT = columns.length + (isExpanded ? 1 : 0) + (isSelected ? 1 : 0);
   const [expandedRows, setExpandedRows] = (0, import_react4.useState)(/* @__PURE__ */ new Set());
   (0, import_react4.useEffect)(() => {
     setExpandedRows(/* @__PURE__ */ new Set());
@@ -2795,20 +2810,22 @@ var TableBody = ({
     },
     [classNames == null ? void 0 : classNames.td, columns, slots]
   );
+  const onChangeExpandedRow = (index) => {
+    setExpandedRows((prevIndices) => {
+      const newIndices = new Set(prevIndices);
+      if (newIndices.has(index)) {
+        newIndices.delete(index);
+      } else {
+        newIndices.add(index);
+      }
+      return newIndices;
+    });
+  };
   const handleRowClick = (index) => (e) => {
-    if (isSelected) {
-    }
-    if (isExpanded) {
-      setExpandedRows((prevIndices) => {
-        const newIndices = new Set(prevIndices);
-        if (newIndices.has(index)) {
-          newIndices.delete(index);
-        } else {
-          newIndices.add(index);
-        }
-        return newIndices;
-      });
-    }
+    e.stopPropagation();
+    e.preventDefault();
+    if (isExpanded) onChangeExpandedRow(index);
+    if (isSelected && isSelectedRow) onSelectRow(index);
     const row = rows[index];
     if (row !== void 0) {
       onRowAction == null ? void 0 : onRowAction(e, row);
@@ -2818,7 +2835,7 @@ var TableBody = ({
     const keys = Object.keys(row);
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react4.default.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { ...getTrProps(rowIndex), onClick: handleRowClick(rowIndex), children: [
-        isSelected && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { ...getTdProps({ field: "checkbox" }, row, keys), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(checkbox_default, { color, size }) }),
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { ...getTdProps({ field: "checkbox" }, row, keys), onClick: () => onSelectRow(rowIndex), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(checkbox_default, { color, size, checked: selectedRows.has(rowIndex) }) }),
         isExpanded && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { ...getTdProps({ field: "expandIcon" }, row, keys), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Icon_default,
           {
@@ -2829,9 +2846,9 @@ var TableBody = ({
         ) }),
         columns.map((column, colIndex) => /* @__PURE__ */ (0, import_react5.createElement)("td", { ...getTdProps(column, row, keys), key: colIndex }))
       ] }),
-      isExpanded && expandedRows.has(rowIndex) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { ...getExpandedContentProps(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: colSpanCount, ...getTdProps({ field: "expandedRow" }, row, keys), children: row.renderExpandedRow && row.renderExpandedRow() }) })
+      isExpanded && expandedRows.has(rowIndex) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { ...getExpandedContentProps(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: COL_SPAN_COUNT, ...getTdProps({ field: "expandedRow" }, row, keys), children: row.renderExpandedRow && row.renderExpandedRow() }) })
     ] }, rowIndex);
-  }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { ...getTrProps(-1), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: columns.length, children: emptyContent }) }) });
+  }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { ...getTrProps(-1), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: COL_SPAN_COUNT, children: emptyContent }) }) });
 };
 var table_body_default = TableBody;
 
@@ -2841,6 +2858,7 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, table.variantKeys);
   const { classNames, rows, columns, isLoading, className, emptyContent, onRowAction, ...tableComponentsProps } = props;
+  const [selectedRows, setSelectedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
   const slots = (0, import_react6.useMemo)(() => table({ ...variantProps }), [...Object.values(variantProps)]);
   const getBaseProps = (0, import_react6.useCallback)(
     (props2) => ({
@@ -2856,6 +2874,23 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
     }),
     [classNames == null ? void 0 : classNames.table, slots]
   );
+  const handleSelectAll = (isSelected) => {
+    const newSelectedRows = isSelected ? new Set(rows.map((_, index) => index)) : /* @__PURE__ */ new Set();
+    setSelectedRows(newSelectedRows);
+  };
+  const handleSelectRow = (index) => {
+    const newSelectedRows = new Set(selectedRows);
+    if (newSelectedRows.has(index)) {
+      newSelectedRows.delete(index);
+    } else {
+      newSelectedRows.add(index);
+    }
+    setSelectedRows(newSelectedRows);
+  };
+  (0, import_react6.useImperativeHandle)(ref, () => ({
+    selectedRows,
+    setSelectedRows
+  }));
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, "data-table": "base", ...getBaseProps(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { ...getTableProps(tableComponentsProps), children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       table_head_default,
@@ -2866,7 +2901,9 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
         size: originalProps.size,
         color: originalProps.color === "neutral" ? "primary" : originalProps.color,
         isSelected: originalProps.isSelected,
-        isExpanded: originalProps.isExpanded
+        isExpanded: originalProps.isExpanded,
+        onSelectAll: handleSelectAll,
+        isAllSelected: selectedRows.size === rows.length
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -2878,10 +2915,13 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
         size: originalProps.size,
         color: originalProps.color === "neutral" ? "primary" : originalProps.color,
         isSelected: originalProps.isSelected,
+        isSelectedRow: originalProps.isSelectedRow,
         isExpanded: originalProps.isExpanded,
         isLoading,
         classNames,
         emptyContent,
+        selectedRows,
+        onSelectRow: handleSelectRow,
         onRowAction
       }
     )
@@ -2983,6 +3023,9 @@ var table = (0, import_tailwind_variants3.tv)({
     isSelected: {
       true: {}
     },
+    isSelectedRow: {
+      true: {}
+    },
     hideHeader: {
       true: {
         thead: "hidden"

package/dist/components/table/table.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   table_default
-} from "../../chunk-TDMXAHWR.mjs";
-import "../../chunk-G3CX6IWH.mjs";
-import "../../chunk-DLVQWKQG.mjs";
+} from "../../chunk-6U736HAX.mjs";
+import "../../chunk-PUFNT5LS.mjs";
+import "../../chunk-BHSCW5D6.mjs";
 import "../../chunk-QZ3LVYJW.mjs";
 import "../../chunk-BE2OG6M4.mjs";
 import "../../chunk-27Y6K5NK.mjs";