tinybase 8.1.0-beta.2 → 8.1.0-beta.4

package/ui-react-inspector/index.js

@@ -194,7 +194,7 @@ const objIsEqual = (
       isObject(value1)
         ? /* istanbul ignore next */
           isObject(obj2[index])
-          ? objIsEqual(obj2[index], value1)
+          ? objIsEqual(obj2[index], value1, isEqual)
           : false
         : isEqual(value1, obj2[index]),
     )
@@ -2589,8 +2589,12 @@ const DEFAULTS = [
   false,
   0,
 ];
+const cellOrValueEqual = (thing1, thing2) =>
+  thing1 === thing2 ||
+  ((isObject(thing1) || isArray(thing1)) &&
+    jsonString(thing1) === jsonString(thing2));
 const IS_EQUALS = [
-  objIsEqual,
+  (obj1, obj2) => objIsEqual(obj1, obj2, cellOrValueEqual),
   arrayIsEqual,
   (
     [backwardIds1, currentId1, forwardIds1],
@@ -2602,10 +2606,7 @@ const IS_EQUALS = [
   (paramValues1, paramValues2) =>
     objIsEqual(paramValues1, paramValues2, arrayOrValueEqual),
   arrayOrValueEqual,
-  (thing1, thing2) =>
-    thing1 === thing2 ||
-    ((isObject(thing1) || isArray(thing1)) &&
-      jsonString(thing1) === jsonString(thing2)),
+  cellOrValueEqual,
 ];
 const isEqual = (thing1, thing2) => thing1 === thing2;
 const addAndDelListener = (thing, listenable, ...args) => {
@@ -4414,7 +4415,7 @@ const TablesView = ({store, storeId, s}) => {
     s,
     children: [
       arrayIsEmpty(tableIds)
-        ? /* @__PURE__ */ jsx('caption', {children: 'No tables.'})
+        ? /* @__PURE__ */ jsx('p', {children: 'No tables.'})
         : sortedIdsMap(tableIds, (tableId) =>
             /* @__PURE__ */ jsx(
               TableView,
@@ -4511,7 +4512,7 @@ const ValuesView = ({store, storeId, s}) => {
     s,
     children: [
       arrayIsEmpty(useValueIds$1(store))
-        ? /* @__PURE__ */ jsx('caption', {children: 'No values.'})
+        ? /* @__PURE__ */ jsx('p', {children: 'No values.'})
         : /* @__PURE__ */ jsx(ValuesInHtmlTable, {
             store,
             editable,
@@ -4788,10 +4789,10 @@ const MAX_WIDTH = 'max-' + WIDTH;
 const MIN_WIDTH = 'min-' + WIDTH;
 const HEIGHT = 'height';
 const BORDER = 'border';
-const BORDER_RADIUS = BORDER + '-radius';
+const RADIUS = 'radius';
+const BORDER_RADIUS = BORDER + '-' + RADIUS;
 const PADDING = 'padding';
 const MARGIN = 'margin';
-const MARGIN_RIGHT = MARGIN + '-right';
 const TOP = 'top';
 const BOTTOM = 'bottom';
 const LEFT = 'left';
@@ -4806,6 +4807,11 @@ const CURSOR = 'cursor';
 const VERTICAL_ALIGN = 'vertical-align';
 const TEXT_ALIGN = 'text-align';
 const JUSTIFY_CONTENT = 'justify-content';
+const WHITE_SPACE = 'white-space';
+const TEXT_OVERFLOW = 'text-overflow';
+const ALIGN_ITEMS = 'align-items';
+const BACKDROP_FILTER = 'backdrop-filter';
+const MARGIN_RIGHT = MARGIN + '-' + RIGHT;
 const FIXED = 'fixed';
 const REVERT = 'revert';
 const UNSET = 'unset';
@@ -4935,8 +4941,8 @@ const APP_STYLESHEET = arrayJoin(
         [WIDTH]: 'calc(100% - .5rem)',
         [POSITION]: 'absolute',
         [BORDER + '-' + BOTTOM]: cssVar(BORDER),
-        'align-items': 'center',
-        'backdrop-filter': 'blur(4px)',
+        [ALIGN_ITEMS]: 'center',
+        [BACKDROP_FILTER]: 'blur(4px)',
       },
       'header>img:nth-of-type(1)': {
         [HEIGHT]: rem(1),
@@ -4954,8 +4960,8 @@ const APP_STYLESHEET = arrayJoin(
         [OVERFLOW]: HIDDEN,
         [FLEX]: 1,
         'font-weight': 800,
-        'white-space': NOWRAP,
-        'text-overflow': 'ellipsis',
+        [WHITE_SPACE]: NOWRAP,
+        [TEXT_OVERFLOW]: 'ellipsis',
       },
       // Body
       article: {[OVERFLOW]: AUTO, [FLEX]: 1, [PADDING + '-' + TOP]: rem(2)},
@@ -4973,7 +4979,8 @@ const APP_STYLESHEET = arrayJoin(
         [BORDER_RADIUS]: rem(0.25),
         'user-select': NONE,
         [JUSTIFY_CONTENT]: 'space-between',
-        'align-items': 'center',
+        [ALIGN_ITEMS]: 'center',
+        [BACKDROP_FILTER]: 'blur(4px)',
       },
       'summary>span::before': {
         [DISPLAY]: 'inline-block',
@@ -4984,8 +4991,8 @@ const APP_STYLESHEET = arrayJoin(
         ...RIGHT_SVG,
       },
       'details[open]>summary': {
-        'border-bottom-left-radius': 0,
-        'border-bottom-right-radius': 0,
+        [BORDER + '-' + BOTTOM + '-' + LEFT + '-' + RADIUS]: 0,
+        [BORDER + '-' + BOTTOM + '-' + RIGHT + '-' + RADIUS]: 0,
         [MARGIN + '-' + BOTTOM]: 0,
       },
       'details[open]>summary>span::before': DOWN_SVG,
@@ -4995,11 +5002,12 @@ const APP_STYLESHEET = arrayJoin(
         [MARGIN + '-' + LEFT]: rem(0.25),
       },
       'details>div': {[OVERFLOW]: AUTO},
-      caption: {
+      [`caption,#${UNIQUE_ID} p`]: {
         [COLOR]: cssVar('fg2'),
         [PADDING]: rem(0.25, 0.5),
         [TEXT_ALIGN]: LEFT,
-        'white-space': NOWRAP,
+        [MARGIN]: 0,
+        [WHITE_SPACE]: NOWRAP,
       },
       'caption button': {
         [WIDTH]: rem(1.5),
@@ -5029,8 +5037,8 @@ const APP_STYLESHEET = arrayJoin(
         [PADDING]: rem(0.25, 0.5),
         [MAX_WIDTH]: rem(20),
         [BORDER]: cssVar(BORDER),
-        'text-overflow': 'ellipsis',
-        'white-space': NOWRAP,
+        [TEXT_OVERFLOW]: 'ellipsis',
+        [WHITE_SPACE]: NOWRAP,
         'border-width': px(1, 0, 0),
         [TEXT_ALIGN]: LEFT,
       },

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

@@ -194,7 +194,7 @@ const objIsEqual = (
       isObject(value1)
         ? /* istanbul ignore next */
           isObject(obj2[index])
-          ? objIsEqual(obj2[index], value1)
+          ? objIsEqual(obj2[index], value1, isEqual)
           : false
         : isEqual(value1, obj2[index]),
     )
@@ -2589,8 +2589,12 @@ const DEFAULTS = [
   false,
   0,
 ];
+const cellOrValueEqual = (thing1, thing2) =>
+  thing1 === thing2 ||
+  ((isObject(thing1) || isArray(thing1)) &&
+    jsonString(thing1) === jsonString(thing2));
 const IS_EQUALS = [
-  objIsEqual,
+  (obj1, obj2) => objIsEqual(obj1, obj2, cellOrValueEqual),
   arrayIsEqual,
   (
     [backwardIds1, currentId1, forwardIds1],
@@ -2602,10 +2606,7 @@ const IS_EQUALS = [
   (paramValues1, paramValues2) =>
     objIsEqual(paramValues1, paramValues2, arrayOrValueEqual),
   arrayOrValueEqual,
-  (thing1, thing2) =>
-    thing1 === thing2 ||
-    ((isObject(thing1) || isArray(thing1)) &&
-      jsonString(thing1) === jsonString(thing2)),
+  cellOrValueEqual,
 ];
 const isEqual = (thing1, thing2) => thing1 === thing2;
 const addAndDelListener = (thing, listenable, ...args) => {
@@ -4414,7 +4415,7 @@ const TablesView = ({store, storeId, s}) => {
     s,
     children: [
       arrayIsEmpty(tableIds)
-        ? /* @__PURE__ */ jsx('caption', {children: 'No tables.'})
+        ? /* @__PURE__ */ jsx('p', {children: 'No tables.'})
         : sortedIdsMap(tableIds, (tableId) =>
             /* @__PURE__ */ jsx(
               TableView,
@@ -4511,7 +4512,7 @@ const ValuesView = ({store, storeId, s}) => {
     s,
     children: [
       arrayIsEmpty(useValueIds$1(store))
-        ? /* @__PURE__ */ jsx('caption', {children: 'No values.'})
+        ? /* @__PURE__ */ jsx('p', {children: 'No values.'})
         : /* @__PURE__ */ jsx(ValuesInHtmlTable, {
             store,
             editable,
@@ -4788,10 +4789,10 @@ const MAX_WIDTH = 'max-' + WIDTH;
 const MIN_WIDTH = 'min-' + WIDTH;
 const HEIGHT = 'height';
 const BORDER = 'border';
-const BORDER_RADIUS = BORDER + '-radius';
+const RADIUS = 'radius';
+const BORDER_RADIUS = BORDER + '-' + RADIUS;
 const PADDING = 'padding';
 const MARGIN = 'margin';
-const MARGIN_RIGHT = MARGIN + '-right';
 const TOP = 'top';
 const BOTTOM = 'bottom';
 const LEFT = 'left';
@@ -4806,6 +4807,11 @@ const CURSOR = 'cursor';
 const VERTICAL_ALIGN = 'vertical-align';
 const TEXT_ALIGN = 'text-align';
 const JUSTIFY_CONTENT = 'justify-content';
+const WHITE_SPACE = 'white-space';
+const TEXT_OVERFLOW = 'text-overflow';
+const ALIGN_ITEMS = 'align-items';
+const BACKDROP_FILTER = 'backdrop-filter';
+const MARGIN_RIGHT = MARGIN + '-' + RIGHT;
 const FIXED = 'fixed';
 const REVERT = 'revert';
 const UNSET = 'unset';
@@ -4935,8 +4941,8 @@ const APP_STYLESHEET = arrayJoin(
         [WIDTH]: 'calc(100% - .5rem)',
         [POSITION]: 'absolute',
         [BORDER + '-' + BOTTOM]: cssVar(BORDER),
-        'align-items': 'center',
-        'backdrop-filter': 'blur(4px)',
+        [ALIGN_ITEMS]: 'center',
+        [BACKDROP_FILTER]: 'blur(4px)',
       },
       'header>img:nth-of-type(1)': {
         [HEIGHT]: rem(1),
@@ -4954,8 +4960,8 @@ const APP_STYLESHEET = arrayJoin(
         [OVERFLOW]: HIDDEN,
         [FLEX]: 1,
         'font-weight': 800,
-        'white-space': NOWRAP,
-        'text-overflow': 'ellipsis',
+        [WHITE_SPACE]: NOWRAP,
+        [TEXT_OVERFLOW]: 'ellipsis',
       },
       // Body
       article: {[OVERFLOW]: AUTO, [FLEX]: 1, [PADDING + '-' + TOP]: rem(2)},
@@ -4973,7 +4979,8 @@ const APP_STYLESHEET = arrayJoin(
         [BORDER_RADIUS]: rem(0.25),
         'user-select': NONE,
         [JUSTIFY_CONTENT]: 'space-between',
-        'align-items': 'center',
+        [ALIGN_ITEMS]: 'center',
+        [BACKDROP_FILTER]: 'blur(4px)',
       },
       'summary>span::before': {
         [DISPLAY]: 'inline-block',
@@ -4984,8 +4991,8 @@ const APP_STYLESHEET = arrayJoin(
         ...RIGHT_SVG,
       },
       'details[open]>summary': {
-        'border-bottom-left-radius': 0,
-        'border-bottom-right-radius': 0,
+        [BORDER + '-' + BOTTOM + '-' + LEFT + '-' + RADIUS]: 0,
+        [BORDER + '-' + BOTTOM + '-' + RIGHT + '-' + RADIUS]: 0,
         [MARGIN + '-' + BOTTOM]: 0,
       },
       'details[open]>summary>span::before': DOWN_SVG,
@@ -4995,11 +5002,12 @@ const APP_STYLESHEET = arrayJoin(
         [MARGIN + '-' + LEFT]: rem(0.25),
       },
       'details>div': {[OVERFLOW]: AUTO},
-      caption: {
+      [`caption,#${UNIQUE_ID} p`]: {
         [COLOR]: cssVar('fg2'),
         [PADDING]: rem(0.25, 0.5),
         [TEXT_ALIGN]: LEFT,
-        'white-space': NOWRAP,
+        [MARGIN]: 0,
+        [WHITE_SPACE]: NOWRAP,
       },
       'caption button': {
         [WIDTH]: rem(1.5),
@@ -5029,8 +5037,8 @@ const APP_STYLESHEET = arrayJoin(
         [PADDING]: rem(0.25, 0.5),
         [MAX_WIDTH]: rem(20),
         [BORDER]: cssVar(BORDER),
-        'text-overflow': 'ellipsis',
-        'white-space': NOWRAP,
+        [TEXT_OVERFLOW]: 'ellipsis',
+        [WHITE_SPACE]: NOWRAP,
         'border-width': px(1, 0, 0),
         [TEXT_ALIGN]: LEFT,
       },