@rtdui/datatable/esm/DataTableSelect/DataTableSelect.mjs

React DataTable component based on Rtdui components

'use client';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { forwardRef, useRef, useState } from 'react';
import { useUncontrolled } from '@rtdui/hooks';
import { Popover, TextInput } from '@rtdui/core';
import clsx from 'clsx';
import { IconChevronDown } from '@tabler/icons-react';
import { DataTable } from '../DataTable/DataTable.mjs';
import { getSelectedRows } from '../utils/getSelectedRows.mjs';

const DataTableSelect = forwardRef((props, ref) => {
  const {
    name,
    rightSection,
    defaultValue,
    value,
    onChange,
    onFocus,
    className,
    slots,
    children,
    readOnly,
    displayField,
    tableProps,
    ...other
  } = props;
  const tableRef = useRef();
  const right = /* @__PURE__ */ jsxs(Fragment, { children: [
    rightSection,
    /* @__PURE__ */ jsx(IconChevronDown, { size: "1rem" })
  ] });
  const [open, setOpen] = useState(false);
  const [valueState, handleChange] = useUncontrolled({
    defaultValue,
    value,
    finalValue: "",
    onChange
  });
  const selectedIds = valueState.toString().split(",").map((d) => d.trim());
  const displayValue = getSelectedRows(
    tableProps.data,
    selectedIds,
    tableProps.getRowId,
    tableProps.getSubRows
  ).map((d) => d[displayField]).join(", ");
  const tableState = {
    rowSelection: selectedIds.reduce((acc, item) => {
      if (item) {
        acc[item] = true;
      }
      return acc;
    }, {})
  };
  const handleRowSelectionChange = (updater) => {
    const rowSelection = typeof updater === "function" ? updater(tableState.rowSelection) : updater;
    const newSelectedIds = Object.keys(rowSelection);
    handleChange(newSelectedIds.join(","));
    if (!tableProps.enableMultiRowSelection) {
      setOpen(false);
    }
  };
  const handleInputFocus = (e) => {
    onFocus?.(e);
    setOpen(true);
  };
  return /* @__PURE__ */ jsxs(Popover, { withArrow: true, opened: open, onChange: setOpen, position: "bottom-start", children: [
    /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selectedIds }),
    /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(
      TextInput,
      {
        ref,
        readOnly: true,
        size: "sm",
        slots: {
          ...slots,
          right: clsx(slots?.right, "pointer-events-none")
        },
        rightSection: right,
        value: displayValue,
        className,
        ...other,
        onFocus: handleInputFocus
      }
    ) }),
    /* @__PURE__ */ jsx(
      Popover.Dropdown,
      {
        className: clsx("max-h-60 overflow-auto", slots?.dropdown),
        children: /* @__PURE__ */ jsx(
          DataTable,
          {
            ref: tableRef,
            showHeader: false,
            showToolbar: false,
            showBorder: false,
            enableVirtualized: false,
            enablePagination: false,
            enableColumnReorder: true,
            enableColumnResizing: true,
            enableSorting: true,
            enableHiding: false,
            enableRowSelection: true,
            enableSubRowSelection: false,
            enableClickRowSelection: !tableProps.enableMultiRowSelection,
            selectAllForAllPages: true,
            enableStickyHeader: true,
            enableAutoRowNumber: false,
            enableExport: false,
            slots: {
              ...tableProps.slots,
              container: "overflow-visible"
            },
            ...tableProps,
            state: tableState,
            onRowSelectionChange: handleRowSelectionChange
          }
        )
      }
    )
  ] });
});
DataTableSelect.displayName = "@rtdui/DataTableSelect";

export { DataTableSelect };
//# sourceMappingURL=DataTableSelect.mjs.map