tinybase 6.5.2 → 6.6.0

package/@types/ui-react-dom/index.d.ts

@@ -20,6 +20,7 @@ import type {
   QueriesOrQueriesId,
   RelationshipsOrRelationshipsId,
   ResultCellProps,
+  RowProps,
   StoreOrStoreId,
   ValueProps,
 } from '../ui-react/index.d.ts';
@@ -84,6 +85,54 @@ export type CustomResultCell = {
   getComponentProps?: (rowId: Id, cellId: Id) => ExtraProps;
 };
 
+/**
+ * The ExtraRowCell object is used to configure the rendering of extra cells in
+ * an HTML table that's displaying a ResultTable or Table - before or after the
+ * regular data cells.
+ * @category Configuration
+ * @since v6.6.0
+ */
+export type ExtraRowCell = {
+  /**
+   * A string that will be used as the label at the top of the column for this
+   * Cell.
+   * @category Prop
+   * @since v6.6.0
+   */
+  label: string;
+  /**
+   * A custom component for rendering each extra Cell in the table, and which
+   * will be passed props for the Row with which it is placed.
+   * @category Prop
+   * @since v6.6.0
+   */
+  component: ComponentType<RowProps>;
+};
+
+/**
+ * The ExtraValueCell object is used to configure the rendering of extra cells
+ * in an HTML table that's displaying Values - before or after the regular data
+ * cells.
+ * @category Configuration
+ * @since v6.6.0
+ */
+export type ExtraValueCell = {
+  /**
+   * A string that will be used as the label at the top of the column for this
+   * Cell.
+   * @category Prop
+   * @since v6.6.0
+   */
+  label: string;
+  /**
+   * A custom component for rendering each extra Cell in the table, and which
+   * will be passed props for the Value with which it is placed.
+   * @category Prop
+   * @since v6.6.0
+   */
+  component: ComponentType<ValueProps>;
+};
+
 /**
  * HtmlTableProps props are used for components that will render in an HTML
  * table, such as the TableInHtmlTable component or SortedTableInHtmlTable
@@ -152,6 +201,18 @@ export type TableInHtmlTableProps = {
    * @since v4.1.0
    */
   readonly customCells?: Ids | {[cellId: Id]: string | CustomCell};
+  /**
+   * An optional list of extra Cells to render before the main table Cells.
+   * @category Prop
+   * @since v6.6.0
+   */
+  readonly extraCellsBefore?: ExtraRowCell[];
+  /**
+   * An optional list of extra Cells to render after the main table Cells.
+   * @category Prop
+   * @since v6.6.0
+   */
+  readonly extraCellsAfter?: ExtraRowCell[];
 };
 
 /**
@@ -217,6 +278,18 @@ export type SortedTableInHtmlTableProps = {
    * @since v4.1.0
    */
   readonly customCells?: Ids | {[cellId: Id]: string | CustomCell};
+  /**
+   * An optional list of extra Cells to render before the main table Cells.
+   * @category Prop
+   * @since v6.6.0
+   */
+  readonly extraCellsBefore?: ExtraRowCell[];
+  /**
+   * An optional list of extra Cells to render after the main table Cells.
+   * @category Prop
+   * @since v6.6.0
+   */
+  readonly extraCellsAfter?: ExtraRowCell[];
   /**
    * Whether the table should be interactive such that clicking a header changes
    * the sorting and/or direction.
@@ -283,6 +356,18 @@ export type ValuesInHtmlTableProps = {
    * @since v4.1.0
    */
   readonly getValueComponentProps?: (valueId: Id) => ExtraProps;
+  /**
+   * An optional list of extra Cells to render before the main table Cells.
+   * @category Prop
+   * @since v6.6.0
+   */
+  readonly extraCellsBefore?: ExtraValueCell[];
+  /**
+   * An optional list of extra Cells to render after the main table Cells.
+   * @category Prop
+   * @since v6.6.0
+   */
+  readonly extraCellsAfter?: ExtraValueCell[];
 };
 
 /**
@@ -330,6 +415,18 @@ export type SliceInHtmlTableProps = {
    * @since v4.1.0
    */
   readonly customCells?: Ids | {[cellId: Id]: string | CustomCell};
+  /**
+   * An optional list of extra Cells to render before the main table Cells.
+   * @category Prop
+   * @since v6.6.0
+   */
+  readonly extraCellsBefore?: ExtraRowCell[];
+  /**
+   * An optional list of extra Cells to render after the main table Cells.
+   * @category Prop
+   * @since v6.6.0
+   */
+  readonly extraCellsAfter?: ExtraRowCell[];
 };
 
 /**
@@ -379,6 +476,18 @@ export type RelationshipInHtmlTableProps = {
    * @since v4.1.0
    */
   readonly customCells?: Ids | {[cellId: Id]: string | CustomCell};
+  /**
+   * An optional list of extra Cells to render before the main table Cells.
+   * @category Prop
+   * @since v6.6.0
+   */
+  readonly extraCellsBefore?: ExtraRowCell[];
+  /**
+   * An optional list of extra Cells to render after the main table Cells.
+   * @category Prop
+   * @since v6.6.0
+   */
+  readonly extraCellsAfter?: ExtraRowCell[];
 };
 
 /**
@@ -413,6 +522,18 @@ export type ResultTableInHtmlTableProps = {
    * @since v4.1.0
    */
   readonly customCells?: Ids | {[cellId: Id]: string | CustomResultCell};
+  /**
+   * An optional list of extra Cells to render before the main table Cells.
+   * @category Prop
+   * @since v6.6.0
+   */
+  readonly extraCellsBefore?: ExtraRowCell[];
+  /**
+   * An optional list of extra Cells to render after the main table Cells.
+   * @category Prop
+   * @since v6.6.0
+   */
+  readonly extraCellsAfter?: ExtraRowCell[];
 };
 
 /**
@@ -473,6 +594,18 @@ export type ResultSortedTableInHtmlTableProps = {
    * @since v4.1.0
    */
   readonly customCells?: Ids | {[cellId: Id]: string | CustomResultCell};
+  /**
+   * An optional list of extra Cells to render before the main table Cells.
+   * @category Prop
+   * @since v6.6.0
+   */
+  readonly extraCellsBefore?: ExtraRowCell[];
+  /**
+   * An optional list of extra Cells to render after the main table Cells.
+   * @category Prop
+   * @since v6.6.0
+   */
+  readonly extraCellsAfter?: ExtraRowCell[];
   /**
    * Whether the table should be interactive such that clicking a header changes
    * the sorting and/or direction.
@@ -614,11 +747,11 @@ export type SortedTablePaginatorProps = {
  *   </thead>
  *   <tbody>
  *     <tr>
- *       <th>fido</th>
+ *       <th title="fido">fido</th>
  *       <td>dog</td>
  *     </tr>
  *     <tr>
- *       <th>felix</th>
+ *       <th title="felix">felix</th>
  *       <td>cat</td>
  *     </tr>
  *   </tbody>
@@ -780,11 +913,11 @@ export function TableInHtmlTable(
  *   </thead>
  *   <tbody>
  *     <tr>
- *       <th>felix</th>
+ *       <th title="felix">felix</th>
  *       <td>cat</td>
  *     </tr>
  *     <tr>
- *       <th>fido</th>
+ *       <th title="fido">fido</th>
  *       <td>dog</td>
  *     </tr>
  *   </tbody>
@@ -925,11 +1058,11 @@ export function SortedTableInHtmlTable(
  *   </thead>
  *   <tbody>
  *     <tr>
- *       <th>open</th>
+ *       <th title="open">open</th>
  *       <td>true</td>
  *     </tr>
  *     <tr>
- *       <th>employees</th>
+ *       <th title="employees">employees</th>
  *       <td>3</td>
  *     </tr>
  *   </tbody>
@@ -1061,11 +1194,11 @@ export function ValuesInHtmlTable(
  *   </thead>
  *   <tbody>
  *     <tr>
- *       <th>fido</th>
+ *       <th title="fido">fido</th>
  *       <td>dog</td>
  *     </tr>
  *     <tr>
- *       <th>cujo</th>
+ *       <th title="cujo">cujo</th>
  *       <td>dog</td>
  *     </tr>
  *   </tbody>
@@ -1228,14 +1361,14 @@ export function SliceInHtmlTable(
  *   </thead>
  *   <tbody>
  *     <tr>
- *       <th>fido</th>
- *       <th>dog</th>
+ *       <th title="fido">fido</th>
+ *       <th title="dog">dog</th>
  *       <td>dog</td>
  *       <td>5</td>
  *     </tr>
  *     <tr>
- *       <th>cujo</th>
- *       <th>dog</th>
+ *       <th title="cujo">cujo</th>
+ *       <th title="dog">dog</th>
  *       <td>dog</td>
  *       <td>5</td>
  *     </tr>
@@ -1386,11 +1519,11 @@ export function RelationshipInHtmlTable(
  *   </thead>
  *   <tbody>
  *     <tr>
- *       <th>fido</th>
+ *       <th title="fido">fido</th>
  *       <td>brown</td>
  *     </tr>
  *     <tr>
- *       <th>felix</th>
+ *       <th title="felix">felix</th>
  *       <td>black</td>
  *     </tr>
  *   </tbody>
@@ -1556,11 +1689,11 @@ export function ResultTableInHtmlTable(
  *   </thead>
  *   <tbody>
  *     <tr>
- *       <th>felix</th>
+ *       <th title="felix">felix</th>
  *       <td>black</td>
  *     </tr>
  *     <tr>
- *       <th>fido</th>
+ *       <th title="fido">fido</th>
  *       <td>brown</td>
  *     </tr>
  *   </tbody>
@@ -1695,7 +1828,7 @@ export function ResultSortedTableInHtmlTable(
  * // ->
  * `
  * <div class="editableCell">
- *   <button class="string">string</button>
+ *   <button title="string" class="string">string</button>
  *   <input value="brown">
  * </div>
  * `;
@@ -1760,7 +1893,7 @@ export function EditableCellView(
  * // ->
  * `
  * <div class="editableValue">
- *   <button class="number">number</button>
+ *   <button title="number" class="number">number</button>
  *   <input type="number" value="3">
  * </div>
  * `;
@@ -1843,11 +1976,11 @@ export function EditableValueView(
  *   </thead>
  *   <tbody>
  *     <tr>
- *       <th>felix</th>
+ *       <th title="felix">felix</th>
  *       <td>cat</td>
  *     </tr>
  *     <tr>
- *       <th>fido</th>
+ *       <th title="fido">fido</th>
  *       <td>dog</td>
  *     </tr>
  *   </tbody>

package/@types/ui-react-dom/with-schemas/index.d.ts

@@ -24,6 +24,7 @@ import type {
   QueriesOrQueriesId,
   RelationshipsOrRelationshipsId,
   ResultCellProps,
+  RowProps,
   StoreOrStoreId,
   ValueProps,
 } from '../../_internal/ui-react/with-schemas/index.d.ts';
@@ -97,6 +98,57 @@ export type CustomResultCell<Schemas extends OptionalSchemas> = {
   getComponentProps?: (rowId: Id, cellId: Id) => ExtraProps;
 };
 
+/**
+ * The ExtraRowCell object is used to configure the rendering of extra cells in
+ * an HTML table that's displaying a ResultTable or Table - before or after the
+ * regular data cells.
+ * @category Configuration
+ * @since v6.6.0
+ */
+export type ExtraRowCell<
+  Schemas extends OptionalSchemas,
+  TableId extends TableIdFromSchema<Schemas[0]>,
+> = {
+  /**
+   * A string that will be used as the label at the top of the column for this
+   * Cell.
+   * @category Prop
+   * @since v6.6.0
+   */
+  label: string;
+  /**
+   * A custom component for rendering each extra Cell in the table, and which
+   * will be passed props for the Row with which it is placed.
+   * @category Prop
+   * @since v6.6.0
+   */
+  component: ComponentType<RowProps<Schemas, TableId>>;
+};
+
+/**
+ * The ExtraValueCell object is used to configure the rendering of extra cells
+ * in an HTML table that's displaying Values - before or after the regular data
+ * cells.
+ * @category Configuration
+ * @since v6.6.0
+ */
+export type ExtraValueCell<Schemas extends OptionalSchemas> = {
+  /**
+   * A string that will be used as the label at the top of the column for this
+   * Cell.
+   * @category Prop
+   * @since v6.6.0
+   */
+  label: string;
+  /**
+   * A custom component for rendering each extra Cell in the table, and which
+   * will be passed props for the Value with which it is placed.
+   * @category Prop
+   * @since v6.6.0
+   */
+  component: ComponentType<ValueProps<Schemas>>;
+};
+
 /**
  * HtmlTableProps props are used for components that will render in an HTML
  * table, such as the TableInHtmlTable component or SortedTableInHtmlTable
@@ -675,11 +727,11 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   </thead>
  *   <tbody>
  *     <tr>
- *       <th>fido</th>
+ *       <th title="fido">fido</th>
  *       <td>dog</td>
  *     </tr>
  *     <tr>
- *       <th>felix</th>
+ *       <th title="felix">felix</th>
  *       <td>cat</td>
  *     </tr>
  *   </tbody>
@@ -849,11 +901,11 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   </thead>
  *   <tbody>
  *     <tr>
- *       <th>felix</th>
+ *       <th title="felix">felix</th>
  *       <td>cat</td>
  *     </tr>
  *     <tr>
- *       <th>fido</th>
+ *       <th title="fido">fido</th>
  *       <td>dog</td>
  *     </tr>
  *   </tbody>
@@ -1002,11 +1054,11 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   </thead>
  *   <tbody>
  *     <tr>
- *       <th>open</th>
+ *       <th title="open">open</th>
  *       <td>true</td>
  *     </tr>
  *     <tr>
- *       <th>employees</th>
+ *       <th title="employees">employees</th>
  *       <td>3</td>
  *     </tr>
  *   </tbody>
@@ -1146,11 +1198,11 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   </thead>
  *   <tbody>
  *     <tr>
- *       <th>fido</th>
+ *       <th title="fido">fido</th>
  *       <td>dog</td>
  *     </tr>
  *     <tr>
- *       <th>cujo</th>
+ *       <th title="cujo">cujo</th>
  *       <td>dog</td>
  *     </tr>
  *   </tbody>
@@ -1321,14 +1373,14 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   </thead>
  *   <tbody>
  *     <tr>
- *       <th>fido</th>
- *       <th>dog</th>
+ *       <th title="fido">fido</th>
+ *       <th title="dog">dog</th>
  *       <td>dog</td>
  *       <td>5</td>
  *     </tr>
  *     <tr>
- *       <th>cujo</th>
- *       <th>dog</th>
+ *       <th title="cujo">cujo</th>
+ *       <th title="dog">dog</th>
  *       <td>dog</td>
  *       <td>5</td>
  *     </tr>
@@ -1487,11 +1539,11 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   </thead>
  *   <tbody>
  *     <tr>
- *       <th>fido</th>
+ *       <th title="fido">fido</th>
  *       <td>brown</td>
  *     </tr>
  *     <tr>
- *       <th>felix</th>
+ *       <th title="felix">felix</th>
  *       <td>black</td>
  *     </tr>
  *   </tbody>
@@ -1665,11 +1717,11 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   </thead>
  *   <tbody>
  *     <tr>
- *       <th>felix</th>
+ *       <th title="felix">felix</th>
  *       <td>black</td>
  *     </tr>
  *     <tr>
- *       <th>fido</th>
+ *       <th title="fido">fido</th>
  *       <td>brown</td>
  *     </tr>
  *   </tbody>
@@ -1812,7 +1864,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * // ->
  * `
  * <div class="editableCell">
- *   <button class="string">string</button>
+ *   <button title="string" class="string">string</button>
  *   <input value="brown">
  * </div>
  * `;
@@ -1891,7 +1943,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * // ->
  * `
  * <div class="editableValue">
- *   <button class="number">number</button>
+ *   <button title="number" class="number">number</button>
  *   <input type="number" value="3">
  * </div>
  * `;
@@ -1974,11 +2026,11 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *   </thead>
  *   <tbody>
  *     <tr>
- *       <th>felix</th>
+ *       <th title="felix">felix</th>
  *       <td>cat</td>
  *     </tr>
  *     <tr>
- *       <th>fido</th>
+ *       <th title="fido">fido</th>
  *       <td>dog</td>
  *     </tr>
  *   </tbody>

package/@types/ui-react-inspector/index.d.ts

@@ -31,6 +31,13 @@ export type InspectorProps = {
    * @since v5.0.0
    */
   readonly open?: boolean;
+  /**
+   * An optional number to indicate the hue of the inspector's UI, defaulting to
+   * 270.
+   * @category Prop
+   * @since v6.6.0
+   */
+  readonly hue?: number;
 };
 
 /**