@dxos/react-ui-table 0.7.0 → 0.7.1-staging.7f6f91c

package/src/components/Toolbar/common.tsx

@@ -2,20 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Icon } from '@phosphor-icons/react';
 import React from 'react';
 
 import {
+  Icon,
+  type IconProps,
   Toolbar as NaturalToolbar,
   Tooltip,
   type ToolbarButtonProps as NaturalToolbarButtonProps,
   type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
 } from '@dxos/react-ui';
-import { getSize } from '@dxos/react-ui-theme';
 
-// TODO(burdon): Factor out in common with react-ui-editor.
+// TODO(burdon): Factor out into new package (react-ui-toolbar) in common with react-ui-editor, etc.
 
-export const iconStyles = getSize(5);
 export const buttonStyles = 'min-bs-0 p-2';
 export const tooltipProps = { side: 'top' as const, classNames: 'z-10' };
 
@@ -25,14 +24,14 @@ export const ToolbarSeparator = () => <div role='separator' className='grow' />;
 // ToolbarButton
 //
 
-type ToolbarButtonProps = NaturalToolbarButtonProps & { Icon: Icon };
+type ToolbarButtonProps = NaturalToolbarButtonProps & Pick<IconProps, 'icon'>;
 
-export const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
+export const ToolbarButton = ({ icon, children, ...props }: ToolbarButtonProps) => {
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
         <NaturalToolbar.Button variant='ghost' {...props} classNames={buttonStyles}>
-          <Icon className={iconStyles} />
+          <Icon icon={icon} size={5} />
           <span className='sr-only'>{children}</span>
         </NaturalToolbar.Button>
       </Tooltip.Trigger>
@@ -50,14 +49,14 @@ export const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps)
 // ToolbarToggleButton
 //
 
-export type ToolbarToggleButtonProps = NaturalToolbarToggleGroupItemProps & { Icon: Icon };
+export type ToolbarToggleButtonProps = NaturalToolbarToggleGroupItemProps & Pick<IconProps, 'icon'>;
 
-export const ToolbarToggleButton = ({ Icon, children, ...props }: ToolbarToggleButtonProps) => {
+export const ToolbarToggleButton = ({ icon, children, ...props }: ToolbarToggleButtonProps) => {
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
         <NaturalToolbar.ToggleGroupItem variant='ghost' {...props} classNames={buttonStyles}>
-          <Icon className={iconStyles} />
+          <Icon icon={icon} size={5} />
           <span className='sr-only'>{children}</span>
         </NaturalToolbar.ToggleGroupItem>
       </Tooltip.Trigger>

package/src/model/selection-model.ts

@@ -28,7 +28,7 @@ export class SelectionModel<T extends BaseTableRow> 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));
   });
 
   constructor(

package/src/model/table-model.ts

@@ -15,7 +15,7 @@ import {
   formatForDisplay,
   formatForEditing,
   parseValue,
-} from '@dxos/react-ui-data';
+} from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
   type DxGridCellValue,

package/src/util/table-controls.ts

@@ -14,7 +14,7 @@ export const renderCheckbox = ({
   checked = false,
   disabled = false,
 }: RenderCheckboxProps): string => {
-  const baseClasses = 'absolute inset-block-[6px] inline-end-[6px]' as const;
+  const baseClasses = 'absolute inset-block-[6px] inline-end-[6px] ch-checkbox' as const;
   const { attributes } = tableControls.checkbox;
   return `<input type="checkbox" class="${baseClasses}" ${attributes.checkbox}="${rowIndex}" ${header ? attributes.header : ''} ${checked ? 'checked' : ''} ${disabled ? 'disabled' : ''}/>`;
 };