tinybase 5.5.0-beta.0 → 6.0.0-beta.1

package/ui-react-dom/with-schemas/index.js

@@ -1,3 +1,4 @@
+import {jsx, jsxs, Fragment} from 'react/jsx-runtime';
 import {
   useRowIds,
   useTableCellIds,
@@ -12,11 +13,11 @@ import {
   useResultTableCellIds,
   useResultRowCount,
   useResultSortedRowIds,
-  useCell,
-  useSetCellCallback,
   useStoreOrStoreById,
-  useValue,
+  useSetCellCallback,
+  useCell,
   useSetValueCallback,
+  useValue,
   CellView,
   ResultCellView,
   useRemoteRowId,
@@ -55,9 +56,7 @@ const getTypeCase = (type, stringCase, numberCase, booleanCase) =>
 
 const {
   PureComponent,
-  Fragment,
   createContext,
-  createElement,
   useCallback,
   useContext,
   useEffect,
@@ -155,7 +154,7 @@ const useSortingAndPagination = (
       () =>
         paginator === false
           ? null
-          : /* @__PURE__ */ createElement(PaginatorComponent, {
+          : /* @__PURE__ */ jsx(PaginatorComponent, {
               offset: currentOffset,
               limit,
               total,
@@ -200,90 +199,95 @@ const HtmlTable = ({
     paginatorComponent,
   ],
 }) =>
-  /* @__PURE__ */ createElement(
-    'table',
-    {className},
-    paginatorComponent
-      ? /* @__PURE__ */ createElement('caption', null, paginatorComponent)
-      : null,
-    headerRow === false
-      ? null
-      : /* @__PURE__ */ createElement(
-          'thead',
-          null,
-          /* @__PURE__ */ createElement(
+  /* @__PURE__ */ jsxs('table', {
+    className,
+    children: [
+      paginatorComponent
+        ? /* @__PURE__ */ jsx('caption', {children: paginatorComponent})
+        : null,
+      headerRow === false
+        ? null
+        : /* @__PURE__ */ jsx('thead', {
+            children: /* @__PURE__ */ jsxs('tr', {
+              children: [
+                idColumn === false
+                  ? null
+                  : /* @__PURE__ */ jsx(HtmlHeaderCell, {
+                      sort: sortAndOffset ?? [],
+                      label: 'Id',
+                      onClick: handleSort,
+                    }),
+                objToArray(cells, ({label}, cellId) =>
+                  /* @__PURE__ */ jsx(
+                    HtmlHeaderCell,
+                    {
+                      cellId,
+                      label,
+                      sort: sortAndOffset ?? [],
+                      onClick: handleSort,
+                    },
+                    cellId,
+                  ),
+                ),
+              ],
+            }),
+          }),
+      /* @__PURE__ */ jsx('tbody', {
+        children: arrayMap(rowIds, (rowId) =>
+          /* @__PURE__ */ jsxs(
             'tr',
-            null,
-            idColumn === false
-              ? null
-              : /* @__PURE__ */ createElement(HtmlHeaderCell, {
-                  sort: sortAndOffset ?? [],
-                  label: 'Id',
-                  onClick: handleSort,
-                }),
-            objToArray(cells, ({label}, cellId) =>
-              /* @__PURE__ */ createElement(HtmlHeaderCell, {
-                key: cellId,
-                cellId,
-                label,
-                sort: sortAndOffset ?? [],
-                onClick: handleSort,
-              }),
-            ),
-          ),
-        ),
-    /* @__PURE__ */ createElement(
-      'tbody',
-      null,
-      arrayMap(rowIds, (rowId) =>
-        /* @__PURE__ */ createElement(
-          'tr',
-          {key: rowId},
-          idColumn === false
-            ? null
-            : /* @__PURE__ */ createElement('th', null, rowId),
-          objToArray(
-            cells,
-            ({component: CellView2, getComponentProps}, cellId) =>
-              /* @__PURE__ */ createElement(
-                'td',
-                {key: cellId},
-                /* @__PURE__ */ createElement(CellView2, {
-                  ...getProps(getComponentProps, rowId, cellId),
-                  ...cellComponentProps,
-                  rowId,
-                  cellId,
-                }),
-              ),
+            {
+              children: [
+                idColumn === false
+                  ? null
+                  : /* @__PURE__ */ jsx('th', {children: rowId}),
+                objToArray(
+                  cells,
+                  ({component: CellView2, getComponentProps}, cellId) =>
+                    /* @__PURE__ */ jsx(
+                      'td',
+                      {
+                        children: /* @__PURE__ */ jsx(CellView2, {
+                          ...getProps(getComponentProps, rowId, cellId),
+                          ...cellComponentProps,
+                          rowId,
+                          cellId,
+                        }),
+                      },
+                      cellId,
+                    ),
+                ),
+              ],
+            },
+            rowId,
           ),
         ),
-      ),
-    ),
-  );
+      }),
+    ],
+  });
 const HtmlHeaderCell = ({
   cellId,
   sort: [sortCellId, sortDescending],
   label = cellId ?? EMPTY_STRING,
   onClick,
 }) =>
-  /* @__PURE__ */ createElement(
-    'th',
-    {
-      onClick: useCallbackOrUndefined(
-        () => onClick?.(cellId),
-        [onClick, cellId],
-        onClick,
-      ),
-      className:
-        isUndefined(sortDescending) || sortCellId != cellId
-          ? void 0
-          : `sorted ${sortDescending ? 'de' : 'a'}scending`,
-    },
-    isUndefined(sortDescending) || sortCellId != cellId
-      ? null
-      : (sortDescending ? DOWN_ARROW : UP_ARROW) + ' ',
-    label,
-  );
+  /* @__PURE__ */ jsxs('th', {
+    onClick: useCallbackOrUndefined(
+      () => onClick?.(cellId),
+      [onClick, cellId],
+      onClick,
+    ),
+    className:
+      isUndefined(sortDescending) || sortCellId != cellId
+        ? void 0
+        : `sorted ${sortDescending ? 'de' : 'a'}scending`,
+    children: [
+      isUndefined(sortDescending) || sortCellId != cellId
+        ? null
+        : (sortDescending ? DOWN_ARROW : UP_ARROW) + ' ',
+      label,
+    ],
+  });
 const RelationshipInHtmlRow = ({
   localRowId,
   params: [
@@ -297,43 +301,45 @@ const RelationshipInHtmlRow = ({
   ],
 }) => {
   const remoteRowId = useRemoteRowId(relationshipId, localRowId, relationships);
-  return /* @__PURE__ */ createElement(
-    'tr',
-    null,
-    idColumn === false
-      ? null
-      : /* @__PURE__ */ createElement(
-          Fragment,
-          null,
-          /* @__PURE__ */ createElement('th', null, localRowId),
-          /* @__PURE__ */ createElement('th', null, remoteRowId),
-        ),
-    objToArray(
-      cells,
-      ({component: CellView2, getComponentProps}, compoundCellId) => {
-        const [tableId, cellId] = strSplit(compoundCellId, DOT, 2);
-        const rowId =
-          tableId === localTableId
-            ? localRowId
-            : tableId === remoteTableId
-              ? remoteRowId
-              : null;
-        return isUndefined(rowId)
-          ? null
-          : /* @__PURE__ */ createElement(
-              'td',
-              {key: compoundCellId},
-              /* @__PURE__ */ createElement(CellView2, {
-                ...getProps(getComponentProps, rowId, cellId),
-                store,
-                tableId,
-                rowId,
-                cellId,
-              }),
-            );
-      },
-    ),
-  );
+  return /* @__PURE__ */ jsxs('tr', {
+    children: [
+      idColumn === false
+        ? null
+        : /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx('th', {children: localRowId}),
+              /* @__PURE__ */ jsx('th', {children: remoteRowId}),
+            ],
+          }),
+      objToArray(
+        cells,
+        ({component: CellView2, getComponentProps}, compoundCellId) => {
+          const [tableId, cellId] = strSplit(compoundCellId, DOT, 2);
+          const rowId =
+            tableId === localTableId
+              ? localRowId
+              : tableId === remoteTableId
+                ? remoteRowId
+                : null;
+          return isUndefined(rowId)
+            ? null
+            : /* @__PURE__ */ jsx(
+                'td',
+                {
+                  children: /* @__PURE__ */ jsx(CellView2, {
+                    ...getProps(getComponentProps, rowId, cellId),
+                    store,
+                    tableId,
+                    rowId,
+                    cellId,
+                  }),
+                },
+                compoundCellId,
+              );
+        },
+      ),
+    ],
+  });
 };
 const EditableThing = ({
   thing,
@@ -383,61 +389,71 @@ const EditableThing = ({
     booleanThing,
     thingType,
   ]);
-  return /* @__PURE__ */ createElement(
-    'div',
-    {className},
-    showType
-      ? /* @__PURE__ */ createElement(
-          'button',
-          {className: thingType, onClick: handleTypeChange},
-          thingType,
-        )
-      : null,
-    getTypeCase(
-      thingType,
-      /* @__PURE__ */ createElement('input', {
-        key: thingType,
-        value: stringThing,
-        onChange: useCallback(
-          (event) =>
-            handleThingChange(
-              String(event[CURRENT_TARGET][_VALUE]),
-              setStringThing,
+  return /* @__PURE__ */ jsxs('div', {
+    className,
+    children: [
+      showType
+        ? /* @__PURE__ */ jsx('button', {
+            className: thingType,
+            onClick: handleTypeChange,
+            children: thingType,
+          })
+        : null,
+      getTypeCase(
+        thingType,
+        /* @__PURE__ */ jsx(
+          'input',
+          {
+            value: stringThing,
+            onChange: useCallback(
+              (event) =>
+                handleThingChange(
+                  String(event[CURRENT_TARGET][_VALUE]),
+                  setStringThing,
+                ),
+              [handleThingChange],
             ),
-          [handleThingChange],
+          },
+          thingType,
         ),
-      }),
-      /* @__PURE__ */ createElement('input', {
-        key: thingType,
-        type: 'number',
-        value: numberThing,
-        onChange: useCallback(
-          (event) =>
-            handleThingChange(
-              Number(event[CURRENT_TARGET][_VALUE] || 0),
-              setNumberThing,
+        /* @__PURE__ */ jsx(
+          'input',
+          {
+            type: 'number',
+            value: numberThing,
+            onChange: useCallback(
+              (event) =>
+                handleThingChange(
+                  Number(event[CURRENT_TARGET][_VALUE] || 0),
+                  setNumberThing,
+                ),
+              [handleThingChange],
             ),
-          [handleThingChange],
+          },
+          thingType,
         ),
-      }),
-      /* @__PURE__ */ createElement('input', {
-        key: thingType,
-        type: 'checkbox',
-        checked: booleanThing,
-        onChange: useCallback(
-          (event) =>
-            handleThingChange(
-              Boolean(event[CURRENT_TARGET].checked),
-              setBooleanThing,
+        /* @__PURE__ */ jsx(
+          'input',
+          {
+            type: 'checkbox',
+            checked: booleanThing,
+            onChange: useCallback(
+              (event) =>
+                handleThingChange(
+                  Boolean(event[CURRENT_TARGET].checked),
+                  setBooleanThing,
+                ),
+              [handleThingChange],
             ),
-          [handleThingChange],
+          },
+          thingType,
         ),
-      }),
-    ),
-  );
+      ),
+    ],
+  });
 };
 const TableInHtmlTable = ({tableId, store, editable, customCells, ...props}) =>
-  /* @__PURE__ */ createElement(HtmlTable, {
+  /* @__PURE__ */ jsx(HtmlTable, {
     ...props,
     params: useParams(
       useCells(
@@ -474,7 +490,7 @@ const SortedTableInHtmlTable = ({
       paginator,
       onChange,
     );
-  return /* @__PURE__ */ createElement(HtmlTable, {
+  return /* @__PURE__ */ jsx(HtmlTable, {
     ...props,
     params: useParams(
       useCells(
@@ -499,46 +515,45 @@ const ValuesInHtmlTable = ({
   headerRow,
   idColumn,
 }) =>
-  /* @__PURE__ */ createElement(
-    'table',
-    {className},
-    headerRow === false
-      ? null
-      : /* @__PURE__ */ createElement(
-          'thead',
-          null,
-          /* @__PURE__ */ createElement(
-            'tr',
-            null,
-            idColumn === false
-              ? null
-              : /* @__PURE__ */ createElement('th', null, 'Id'),
-            /* @__PURE__ */ createElement('th', null, VALUE),
-          ),
-        ),
-    /* @__PURE__ */ createElement(
-      'tbody',
-      null,
-      arrayMap(useValueIds(store), (valueId) =>
-        /* @__PURE__ */ createElement(
-          'tr',
-          {key: valueId},
-          idColumn === false
-            ? null
-            : /* @__PURE__ */ createElement('th', null, valueId),
-          /* @__PURE__ */ createElement(
-            'td',
-            null,
-            /* @__PURE__ */ createElement(Value, {
-              ...getProps(getValueComponentProps, valueId),
-              valueId,
-              store,
+  /* @__PURE__ */ jsxs('table', {
+    className,
+    children: [
+      headerRow === false
+        ? null
+        : /* @__PURE__ */ jsx('thead', {
+            children: /* @__PURE__ */ jsxs('tr', {
+              children: [
+                idColumn === false
+                  ? null
+                  : /* @__PURE__ */ jsx('th', {children: 'Id'}),
+                /* @__PURE__ */ jsx('th', {children: VALUE}),
+              ],
             }),
+          }),
+      /* @__PURE__ */ jsx('tbody', {
+        children: arrayMap(useValueIds(store), (valueId) =>
+          /* @__PURE__ */ jsxs(
+            'tr',
+            {
+              children: [
+                idColumn === false
+                  ? null
+                  : /* @__PURE__ */ jsx('th', {children: valueId}),
+                /* @__PURE__ */ jsx('td', {
+                  children: /* @__PURE__ */ jsx(Value, {
+                    ...getProps(getValueComponentProps, valueId),
+                    valueId,
+                    store,
+                  }),
+                }),
+              ],
+            },
+            valueId,
           ),
         ),
-      ),
-    ),
-  );
+      }),
+    ],
+  });
 const SliceInHtmlTable = ({
   indexId,
   sliceId,
@@ -551,7 +566,7 @@ const SliceInHtmlTable = ({
     useIndexesOrIndexesById(indexes),
     indexId,
   );
-  return /* @__PURE__ */ createElement(HtmlTable, {
+  return /* @__PURE__ */ jsx(HtmlTable, {
     ...props,
     params: useParams(
       useCells(
@@ -595,55 +610,49 @@ const RelationshipInHtmlTable = ({
     resolvedRelationships,
     store,
   );
-  return /* @__PURE__ */ createElement(
-    'table',
-    {className},
-    headerRow === false
-      ? null
-      : /* @__PURE__ */ createElement(
-          'thead',
-          null,
-          /* @__PURE__ */ createElement(
-            'tr',
-            null,
-            idColumn === false
-              ? null
-              : /* @__PURE__ */ createElement(
-                  Fragment,
-                  null,
-                  /* @__PURE__ */ createElement(
-                    'th',
-                    null,
-                    localTableId,
-                    '.Id',
-                  ),
-                  /* @__PURE__ */ createElement(
-                    'th',
-                    null,
-                    remoteTableId,
-                    '.Id',
-                  ),
+  return /* @__PURE__ */ jsxs('table', {
+    className,
+    children: [
+      headerRow === false
+        ? null
+        : /* @__PURE__ */ jsx('thead', {
+            children: /* @__PURE__ */ jsxs('tr', {
+              children: [
+                idColumn === false
+                  ? null
+                  : /* @__PURE__ */ jsxs(Fragment, {
+                      children: [
+                        /* @__PURE__ */ jsxs('th', {
+                          children: [localTableId, '.Id'],
+                        }),
+                        /* @__PURE__ */ jsxs('th', {
+                          children: [remoteTableId, '.Id'],
+                        }),
+                      ],
+                    }),
+                objToArray(cells, ({label}, cellId) =>
+                  /* @__PURE__ */ jsx('th', {children: label}, cellId),
                 ),
-            objToArray(cells, ({label}, cellId) =>
-              /* @__PURE__ */ createElement('th', {key: cellId}, label),
-            ),
+              ],
+            }),
+          }),
+      /* @__PURE__ */ jsx('tbody', {
+        children: arrayMap(useRowIds(localTableId, store), (localRowId) =>
+          /* @__PURE__ */ jsx(
+            RelationshipInHtmlRow,
+            {
+              localRowId,
+              params,
+            },
+            localRowId,
           ),
         ),
-    /* @__PURE__ */ createElement(
-      'tbody',
-      null,
-      arrayMap(useRowIds(localTableId, store), (localRowId) =>
-        /* @__PURE__ */ createElement(RelationshipInHtmlRow, {
-          key: localRowId,
-          localRowId,
-          params,
-        }),
-      ),
-    ),
-  );
+      }),
+    ],
+  });
 };
 const ResultTableInHtmlTable = ({queryId, queries, customCells, ...props}) =>
-  /* @__PURE__ */ createElement(HtmlTable, {
+  /* @__PURE__ */ jsx(HtmlTable, {
     ...props,
     params: useParams(
       useCells(
@@ -679,7 +688,7 @@ const ResultSortedTableInHtmlTable = ({
       paginator,
       onChange,
     );
-  return /* @__PURE__ */ createElement(HtmlTable, {
+  return /* @__PURE__ */ jsx(HtmlTable, {
     ...props,
     params: useParams(
       useCells(
@@ -703,7 +712,7 @@ const EditableCellView = ({
   className,
   showType,
 }) =>
-  /* @__PURE__ */ createElement(EditableThing, {
+  /* @__PURE__ */ jsx(EditableThing, {
     thing: useCell(tableId, rowId, cellId, store),
     onThingChange: useSetCellCallback(
       tableId,
@@ -718,7 +727,7 @@ const EditableCellView = ({
     hasSchema: useStoreOrStoreById(store)?.hasTablesSchema,
   });
 const EditableValueView = ({valueId, store, className, showType}) =>
-  /* @__PURE__ */ createElement(EditableThing, {
+  /* @__PURE__ */ jsx(EditableThing, {
     thing: useValue(valueId, store),
     onThingChange: useSetValueCallback(valueId, (value) => value, [], store),
     className: className ?? EDITABLE + VALUE,
@@ -747,40 +756,34 @@ const SortedTablePaginator = ({
     [onChange, offset, limit],
     offset + limit < total,
   );
-  return /* @__PURE__ */ createElement(
-    Fragment,
-    null,
-    total > limit &&
-      /* @__PURE__ */ createElement(
-        Fragment,
-        null,
-        /* @__PURE__ */ createElement(
-          'button',
-          {
-            className: 'previous',
-            disabled: offset == 0,
-            onClick: handlePrevClick,
-          },
-          LEFT_ARROW,
-        ),
-        /* @__PURE__ */ createElement(
-          'button',
-          {
-            className: 'next',
-            disabled: offset + limit >= total,
-            onClick: handleNextClick,
-          },
-          RIGHT_ARROW,
-        ),
-        offset + 1,
-        ' to ',
-        mathMin(total, offset + limit),
-        ' of ',
-      ),
-    total,
-    ' ',
-    total != 1 ? plural : singular,
-  );
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      total > limit &&
+        /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx('button', {
+              className: 'previous',
+              disabled: offset == 0,
+              onClick: handlePrevClick,
+              children: LEFT_ARROW,
+            }),
+            /* @__PURE__ */ jsx('button', {
+              className: 'next',
+              disabled: offset + limit >= total,
+              onClick: handleNextClick,
+              children: RIGHT_ARROW,
+            }),
+            offset + 1,
+            ' to ',
+            mathMin(total, offset + limit),
+            ' of ',
+          ],
+        }),
+      total,
+      ' ',
+      total != 1 ? plural : singular,
+    ],
+  });
 };
 
 export {