@dxos/react-ui-table 0.7.0 → 0.7.1-staging.8709ba7

package/dist/lib/browser/index.mjs

@@ -76,7 +76,7 @@ var ColumnActionsMenu = ({ model }) => {
 import React2, { useCallback, useEffect, useMemo, useState } from "react";
 import { getSpace } from "@dxos/react-client/echo";
 import { DropdownMenu as DropdownMenu2 } from "@dxos/react-ui";
-import { FieldEditor } from "@dxos/react-ui-data";
+import { FieldEditor } from "@dxos/react-ui-form";
 var ColumnSettings = ({ model }) => {
   const [newField, setNewField] = useState();
   const state = model?.modalController.state.value;
@@ -468,13 +468,13 @@ var frozen = {
   frozenColsStart: 1,
   frozenColsEnd: 1
 };
-var TableRoot = ({ children }) => {
+var TableRoot = ({ children, role }) => {
   return /* @__PURE__ */ React5.createElement("div", {
     role: "none",
-    className: "relative flex flex-col"
+    className: mx("relative border-bs !border-separator", role === "section" ? "attention-surface overflow-hidden [&_.dx-grid]:max-is-max" : "flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:max-is-max [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-max")
   }, children);
 };
-var TableMain = /* @__PURE__ */ forwardRef(({ model }, forwardedRef) => {
+var TableMain = /* @__PURE__ */ forwardRef(({ model, ignoreAttention }, forwardedRef) => {
   const [dxGrid, setDxGrid] = useState2(null);
   const { hasAttention } = useAttention(model?.table ? fullyQualifiedId(model.table) : "table");
   useImperativeHandle(forwardedRef, () => {
@@ -529,18 +529,19 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model }, forwardedRef) => {
     model
   ]);
   const handleWheel = useCallback3((event) => {
-    if (!hasAttention) {
+    if (!ignoreAttention && !hasAttention) {
       event.stopPropagation();
     }
   }, [
-    hasAttention
+    hasAttention,
+    ignoreAttention
   ]);
   const handleQuery = useCallback3(async ({ field, props }, _text) => {
     if (model && props.referenceSchema && field.referencePath) {
       const space = getSpace2(model.table);
       invariant2(space, void 0, {
         F: __dxlog_file3,
-        L: 149,
+        L: 158,
         S: void 0,
         A: [
           "space",
@@ -581,7 +582,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model }, forwardedRef) => {
     onQuery: handleQuery
   }), /* @__PURE__ */ React5.createElement(Grid.Content, {
     onWheelCapture: handleWheel,
-    className: mx("[--dx-grid-base:var(--surface-bg)] [&_.dx-grid]:grow [&_.dx-grid]:max-is-max [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-max", inlineEndLine, blockEndLine),
+    className: mx("[--dx-grid-base:var(--surface-bg)]", inlineEndLine, blockEndLine),
     frozen,
     columns: model.columnMeta.value,
     limitRows: model.getRowCount() ?? 0,
@@ -605,16 +606,13 @@ var Table = {
 };
 
 // packages/ui/react-ui-table/src/components/Toolbar/Toolbar.tsx
-import { ChatText, RowsPlusBottom } from "@phosphor-icons/react";
 import { createContext } from "@radix-ui/react-context";
 import React7 from "react";
 import { Toolbar as NaturalToolbar2, useTranslation as useTranslation3 } from "@dxos/react-ui";
 
 // packages/ui/react-ui-table/src/components/Toolbar/common.tsx
 import React6 from "react";
-import { Toolbar as NaturalToolbar, Tooltip } from "@dxos/react-ui";
-import { getSize } from "@dxos/react-ui-theme";
-var iconStyles = getSize(5);
+import { Icon, Toolbar as NaturalToolbar, Tooltip } from "@dxos/react-ui";
 var buttonStyles = "min-bs-0 p-2";
 var tooltipProps = {
   side: "top",
@@ -624,7 +622,7 @@ var ToolbarSeparator = () => /* @__PURE__ */ React6.createElement("div", {
   role: "separator",
   className: "grow"
 });
-var ToolbarButton = ({ Icon, children, ...props }) => {
+var ToolbarButton = ({ icon, children, ...props }) => {
   return /* @__PURE__ */ React6.createElement(Tooltip.Root, null, /* @__PURE__ */ React6.createElement(Tooltip.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React6.createElement(NaturalToolbar.Button, {
@@ -632,7 +630,8 @@ var ToolbarButton = ({ Icon, children, ...props }) => {
     ...props,
     classNames: buttonStyles
   }, /* @__PURE__ */ React6.createElement(Icon, {
-    className: iconStyles
+    icon,
+    size: 5
   }), /* @__PURE__ */ React6.createElement("span", {
     className: "sr-only"
   }, children))), /* @__PURE__ */ React6.createElement(Tooltip.Portal, null, /* @__PURE__ */ React6.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React6.createElement(Tooltip.Arrow, null))));
@@ -645,7 +644,7 @@ var ToolbarRoot = ({ classNames, children, onAction }) => {
     onAction
   }, /* @__PURE__ */ React7.createElement(NaturalToolbar2.Root, {
     classNames: [
-      "is-full shrink-0 overflow-x-auto overflow-y-hidden p-1",
+      "is-full shrink-0 overflow-x-auto overflow-y-hidden p-1 attention-surface",
       classNames
     ]
   }, children));
@@ -655,7 +654,7 @@ var Editing = () => {
   const { t } = useTranslation3(translationKey);
   return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ToolbarButton, {
     value: "add-row",
-    Icon: RowsPlusBottom,
+    icon: "ph--plus--regular",
     "data-testid": "table.toolbar.add-row",
     onClick: () => onAction?.({
       type: "add-row"
@@ -667,7 +666,7 @@ var Actions = () => {
   const { t } = useTranslation3(translationKey);
   return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ToolbarButton, {
     value: "comment",
-    Icon: ChatText,
+    icon: "ph--chat-text--regular",
     "data-testid": "table.toolbar.comment",
     onClick: () => onAction?.({
       type: "comment"
@@ -691,7 +690,7 @@ import { Resource as Resource2 } from "@dxos/context";
 import { getValue as getValue2, setValue, FormatEnum as FormatEnum3 } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { PublicKey as PublicKey2 } from "@dxos/react-client";
-import { cellClassesForFieldType, cellClassesForRowSelection, formatForDisplay, formatForEditing, parseValue } from "@dxos/react-ui-data";
+import { cellClassesForFieldType, cellClassesForRowSelection, formatForDisplay, formatForEditing, parseValue } from "@dxos/react-ui-form";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 import { VIEW_FIELD_LIMIT } from "@dxos/schema";
 
@@ -792,7 +791,7 @@ var SelectionModel = class extends Resource {
       if (rows.length === 0) {
         return false;
       }
-      return rows.length !== 0 || rows.every((row) => this._selection.value.has(row.id));
+      return rows.every((row) => this._selection.value.has(row.id));
     });
     this.getSelectedRows = () => {
       const selectedIds = this._validSelectedIds.value;
@@ -846,7 +845,7 @@ var checkboxAttributes = {
   header: "data-table-header"
 };
 var renderCheckbox = ({ rowIndex, header = false, checked = false, disabled = false }) => {
-  const baseClasses = "absolute inset-block-[6px] inline-end-[6px]";
+  const baseClasses = "absolute inset-block-[6px] inline-end-[6px] ch-checkbox";
   const { attributes } = tableControls.checkbox;
   return `<input type="checkbox" class="${baseClasses}" ${attributes.checkbox}="${rowIndex}" ${header ? attributes.header : ""} ${checked ? "checked" : ""} ${disabled ? "disabled" : ""}/>`;
 };