cx 26.1.0 → 26.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (113) hide show
  1. package/build/ui/Widget.js +0 -5
  2. package/build/util/Component.js +5 -0
  3. package/build/util/test/createTestRenderer.d.ts +3 -1
  4. package/build/util/test/createTestRenderer.js +8 -2
  5. package/build/widgets/icons/calendar.js +4 -3
  6. package/build/widgets/icons/check.js +2 -2
  7. package/build/widgets/icons/clear.js +2 -2
  8. package/build/widgets/icons/close.js +2 -2
  9. package/build/widgets/icons/cx.js +2 -2
  10. package/build/widgets/icons/drop-down.js +2 -2
  11. package/build/widgets/icons/file.js +2 -2
  12. package/build/widgets/icons/folder-open.js +2 -2
  13. package/build/widgets/icons/folder.js +2 -2
  14. package/build/widgets/icons/forward.js +2 -2
  15. package/build/widgets/icons/loading.js +2 -2
  16. package/build/widgets/icons/menu.js +2 -2
  17. package/build/widgets/icons/pixel-picker.js +2 -2
  18. package/build/widgets/icons/search.js +2 -2
  19. package/build/widgets/icons/sort-asc.js +2 -2
  20. package/build/widgets/icons/square.js +2 -2
  21. package/dist/manifest.js +896 -896
  22. package/dist/ui.js +1 -8
  23. package/dist/util.js +4 -0
  24. package/dist/widgets.js +377 -313
  25. package/package.json +3 -1
  26. package/src/core.d.ts +182 -182
  27. package/src/data/ArrayElementView.ts +90 -90
  28. package/src/data/AugmentedViewBase.ts +88 -88
  29. package/src/data/Binding.ts +104 -104
  30. package/src/data/ExposedRecordView.ts +95 -95
  31. package/src/data/ExposedValueView.ts +89 -89
  32. package/src/data/Grouper.spec.ts +57 -57
  33. package/src/data/NestedDataView.ts +43 -43
  34. package/src/data/ReadOnlyDataView.ts +39 -39
  35. package/src/data/Ref.ts +104 -104
  36. package/src/data/Store.ts +52 -52
  37. package/src/data/StoreProxy.ts +19 -19
  38. package/src/data/StoreRef.ts +66 -66
  39. package/src/data/StringTemplate.ts +93 -93
  40. package/src/data/StructuredSelector.spec.ts +113 -113
  41. package/src/data/SubscribableView.ts +63 -63
  42. package/src/data/ZoomIntoPropertyView.ts +45 -45
  43. package/src/data/comparer.ts +78 -78
  44. package/src/data/ops/updateArray.ts +31 -31
  45. package/src/hooks/invokeCallback.spec.tsx +4 -4
  46. package/src/hooks/resolveCallback.spec.tsx +4 -4
  47. package/src/hooks/store.spec.tsx +15 -15
  48. package/src/hooks/useTrigger.spec.tsx +16 -10
  49. package/src/jsx-dev-runtime.ts +4 -4
  50. package/src/jsx-runtime.ts +79 -79
  51. package/src/ui/CSS.ts +87 -87
  52. package/src/ui/ContentResolver.spec.tsx +31 -29
  53. package/src/ui/Controller.spec.tsx +47 -39
  54. package/src/ui/Cx.spec.tsx +10 -8
  55. package/src/ui/DataProxy.spec.tsx +18 -18
  56. package/src/ui/DataProxy.ts +55 -55
  57. package/src/ui/FocusManager.ts +171 -171
  58. package/src/ui/IsolatedScope.spec.tsx +16 -9
  59. package/src/ui/PureContainer.spec.tsx +20 -18
  60. package/src/ui/Repeater.spec.tsx +8 -6
  61. package/src/ui/Rescope.spec.tsx +13 -13
  62. package/src/ui/Rescope.ts +49 -49
  63. package/src/ui/Restate.spec.tsx +31 -27
  64. package/src/ui/VDOM.ts +1 -1
  65. package/src/ui/Widget.tsx +0 -7
  66. package/src/ui/adapter/ArrayAdapter.spec.ts +55 -55
  67. package/src/ui/createFunctionalComponent.spec.tsx +20 -18
  68. package/src/ui/layout/Content.ts +30 -30
  69. package/src/ui/layout/ContentPlaceholder.spec.tsx +46 -34
  70. package/src/ui/layout/FirstVisibleChildLayout.spec.tsx +31 -19
  71. package/src/ui/selection/PropertySelection.ts +87 -87
  72. package/src/util/Component.spec.ts +30 -0
  73. package/src/util/Component.ts +301 -296
  74. package/src/util/DOM.ts +88 -88
  75. package/src/util/Format.spec.ts +69 -69
  76. package/src/util/Format.ts +267 -267
  77. package/src/util/addEventListenerWithOptions.ts +41 -41
  78. package/src/util/browserSupportsPassiveEventHandlers.ts +20 -20
  79. package/src/util/color/rgbToHsl.ts +35 -35
  80. package/src/util/getActiveElement.ts +4 -4
  81. package/src/util/innerTextTrim.ts +10 -10
  82. package/src/util/isDataRecord.ts +5 -5
  83. package/src/util/test/createTestRenderer.tsx +9 -2
  84. package/src/widgets/AccessorBindings.spec.tsx +4 -4
  85. package/src/widgets/HtmlElement.spec.tsx +6 -6
  86. package/src/widgets/ReactElementWrapper.spec.tsx +37 -37
  87. package/src/widgets/Sandbox.ts +103 -103
  88. package/src/widgets/form/ValidationGroup.spec.tsx +12 -12
  89. package/src/widgets/grid/GridCell.ts +143 -143
  90. package/src/widgets/icons/calendar.tsx +22 -17
  91. package/src/widgets/icons/check.tsx +14 -13
  92. package/src/widgets/icons/clear.tsx +16 -15
  93. package/src/widgets/icons/close.tsx +20 -20
  94. package/src/widgets/icons/cx.tsx +39 -38
  95. package/src/widgets/icons/drop-down.tsx +16 -15
  96. package/src/widgets/icons/file.tsx +14 -13
  97. package/src/widgets/icons/folder-open.tsx +16 -15
  98. package/src/widgets/icons/folder.tsx +14 -13
  99. package/src/widgets/icons/forward.tsx +23 -22
  100. package/src/widgets/icons/loading.tsx +25 -24
  101. package/src/widgets/icons/menu.tsx +18 -17
  102. package/src/widgets/icons/pixel-picker.tsx +18 -18
  103. package/src/widgets/icons/search.tsx +14 -13
  104. package/src/widgets/icons/sort-asc.tsx +15 -14
  105. package/src/widgets/icons/square.tsx +19 -18
  106. package/src/widgets/nav/Route.spec.tsx +2 -2
  107. package/src/widgets/nav/Route.ts +142 -142
  108. package/src/widgets/overlay/Dropdown.tsx +762 -762
  109. package/src/widgets/overlay/MsgBox.tsx +141 -141
  110. package/src/widgets/overlay/Toast.ts +111 -111
  111. package/src/widgets/overlay/Window.tsx +299 -299
  112. package/src/widgets/overlay/alerts.ts +46 -46
  113. package/src/widgets/overlay/index.ts +11 -11
@@ -1,13 +1,14 @@
1
- /** @jsxImportSource react */
2
- import {VDOM} from '../../ui/Widget';
3
- import {registerIcon} from './registry';
4
-
5
- export default registerIcon('file', (props: any) => {
6
- return <svg
7
- {...props}
8
- viewBox="0 0 16 16">
9
- <path d="M2 2h5v5h5v7H2z" fill="currentColor" stroke="none"/>
10
- <path d="M8 2v4h4z" fill="currentColor" stroke="none"/>
11
- </svg>
12
- }, true);
13
-
1
+ /** @jsxImportSource react */
2
+ import {VDOM} from '../../ui/Widget';
3
+ import {registerIcon} from './registry';
4
+
5
+ export default registerIcon('file', ({ key, ...props }: any) => {
6
+ return <svg
7
+ key={key}
8
+ {...props}
9
+ viewBox="0 0 16 16">
10
+ <path d="M2 2h5v5h5v7H2z" fill="currentColor" stroke="none"/>
11
+ <path d="M8 2v4h4z" fill="currentColor" stroke="none"/>
12
+ </svg>
13
+ }, true);
14
+
@@ -1,15 +1,16 @@
1
- /** @jsxImportSource react */
2
- import {VDOM} from '../../ui/Widget';
3
- import {registerIcon} from './registry';
4
-
5
- export default registerIcon('folder-open', (props: any) => {
6
- return <svg
7
- {...props}
8
- viewBox="0 0 16 16">
9
-
10
- <path d="M0 5v7l2.5-6H13V5zm1 0h6L6 3H2z" fill="currentColor" stroke="none"/>
11
- <path d="M3 7h13l-3 7H0z" fill="currentColor" stroke="none"/>
12
-
13
- </svg>
14
- }, true);
15
-
1
+ /** @jsxImportSource react */
2
+ import {VDOM} from '../../ui/Widget';
3
+ import {registerIcon} from './registry';
4
+
5
+ export default registerIcon('folder-open', ({ key, ...props }: any) => {
6
+ return <svg
7
+ key={key}
8
+ {...props}
9
+ viewBox="0 0 16 16">
10
+
11
+ <path d="M0 5v7l2.5-6H13V5zm1 0h6L6 3H2z" fill="currentColor" stroke="none"/>
12
+ <path d="M3 7h13l-3 7H0z" fill="currentColor" stroke="none"/>
13
+
14
+ </svg>
15
+ }, true);
16
+
@@ -1,13 +1,14 @@
1
- /** @jsxImportSource react */
2
- import {VDOM} from '../../ui/Widget';
3
- import {registerIcon} from './registry';
4
-
5
- export default registerIcon('folder', (props: any) => {
6
- return <svg
7
- {...props}
8
- viewBox="0 0 16 16">
9
-
10
- <path d="M1 5h13v9H1zm1 0h6L7 3H3z" fill="currentColor" stroke="none"/>
11
- </svg>
12
- }, true);
13
-
1
+ /** @jsxImportSource react */
2
+ import {VDOM} from '../../ui/Widget';
3
+ import {registerIcon} from './registry';
4
+
5
+ export default registerIcon('folder', ({ key, ...props }: any) => {
6
+ return <svg
7
+ key={key}
8
+ {...props}
9
+ viewBox="0 0 16 16">
10
+
11
+ <path d="M1 5h13v9H1zm1 0h6L7 3H3z" fill="currentColor" stroke="none"/>
12
+ </svg>
13
+ }, true);
14
+
@@ -1,22 +1,23 @@
1
- /** @jsxImportSource react */
2
- import {VDOM} from '../../ui/Widget';
3
- import {registerIcon} from './registry';
4
-
5
- export default registerIcon('forward', (props: any) => {
6
- return <svg
7
- {...props}
8
- viewBox="0 0 20 20">
9
-
10
- <path fill="currentColor"
11
- strokeWidth="0"
12
- stroke="currentColor"
13
- d="M10.15 15.5L14.5 10l-4.33-5.47-.65.47 3.98 5-4 5z" />
14
-
15
- <path fill="currentColor"
16
- strokeWidth="0"
17
- stroke="currentColor"
18
- d="M6.15 15.5L10.5 10 6.17 4.53 5.52 5l3.98 5-4 5z" />
19
-
20
- </svg>
21
- }, true);
22
-
1
+ /** @jsxImportSource react */
2
+ import {VDOM} from '../../ui/Widget';
3
+ import {registerIcon} from './registry';
4
+
5
+ export default registerIcon('forward', ({ key, ...props }: any) => {
6
+ return <svg
7
+ key={key}
8
+ {...props}
9
+ viewBox="0 0 20 20">
10
+
11
+ <path fill="currentColor"
12
+ strokeWidth="0"
13
+ stroke="currentColor"
14
+ d="M10.15 15.5L14.5 10l-4.33-5.47-.65.47 3.98 5-4 5z" />
15
+
16
+ <path fill="currentColor"
17
+ strokeWidth="0"
18
+ stroke="currentColor"
19
+ d="M6.15 15.5L10.5 10 6.17 4.53 5.52 5l3.98 5-4 5z" />
20
+
21
+ </svg>
22
+ }, true);
23
+
@@ -1,24 +1,25 @@
1
- /** @jsxImportSource react */
2
- import {VDOM} from '../../ui/Widget';
3
- import {registerIcon} from './registry';
4
-
5
- export default registerIcon('loading', (props: any) => {
6
- let style = {
7
- animation: 'linear infinite 0.5s cx-rotate'
8
- };
9
-
10
- if (props && props.style)
11
- Object.assign(style, props.style);
12
-
13
- props = {
14
- ...props,
15
- style
16
- };
17
-
18
- return <svg
19
- {...props}
20
- viewBox="0 0 50 50">
21
- <path fill="currentColor" d="M43.94 25.14c0-10.3-8.37-18.68-18.7-18.68-10.3 0-18.67 8.37-18.67 18.68h4.07c0-8.07 6.54-14.6 14.6-14.6 8.08 0 14.63 6.53 14.63 14.6h4.07z" />
22
- </svg>
23
- }, true);
24
-
1
+ /** @jsxImportSource react */
2
+ import {VDOM} from '../../ui/Widget';
3
+ import {registerIcon} from './registry';
4
+
5
+ export default registerIcon('loading', ({ key, ...props }: any) => {
6
+ let style = {
7
+ animation: 'linear infinite 0.5s cx-rotate'
8
+ };
9
+
10
+ if (props && props.style)
11
+ Object.assign(style, props.style);
12
+
13
+ props = {
14
+ ...props,
15
+ style
16
+ };
17
+
18
+ return <svg
19
+ key={key}
20
+ {...props}
21
+ viewBox="0 0 50 50">
22
+ <path fill="currentColor" d="M43.94 25.14c0-10.3-8.37-18.68-18.7-18.68-10.3 0-18.67 8.37-18.67 18.68h4.07c0-8.07 6.54-14.6 14.6-14.6 8.08 0 14.63 6.53 14.63 14.6h4.07z" />
23
+ </svg>
24
+ }, true);
25
+
@@ -1,17 +1,18 @@
1
- /** @jsxImportSource react */
2
- import {VDOM} from '../../ui/Widget';
3
- import {registerIcon} from './registry';
4
-
5
- export default registerIcon('menu', (props: any) => {
6
- return <svg
7
- {...props}
8
- viewBox="0 0 24 24">
9
-
10
- <path d="M0 0h24v24H0z"
11
- fill="none" />
12
- <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
13
- fill="currentColor" />
14
-
15
- </svg>
16
- }, true);
17
-
1
+ /** @jsxImportSource react */
2
+ import {VDOM} from '../../ui/Widget';
3
+ import {registerIcon} from './registry';
4
+
5
+ export default registerIcon('menu', ({ key, ...props }: any) => {
6
+ return <svg
7
+ key={key}
8
+ {...props}
9
+ viewBox="0 0 24 24">
10
+
11
+ <path d="M0 0h24v24H0z"
12
+ fill="none" />
13
+ <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
14
+ fill="currentColor" />
15
+
16
+ </svg>
17
+ }, true);
18
+
@@ -1,18 +1,18 @@
1
- /** @jsxImportSource react */
2
- import { VDOM } from "../../ui/Widget";
3
- import { registerIcon } from "./registry";
4
-
5
- export default registerIcon(
6
- "pixel-picker",
7
- (props: any) => {
8
- return (
9
- <svg {...props} viewBox="0 0 30 30">
10
- <path
11
- d="M27.7,3.3c-1.5-1.5-3.9-1.5-5.4,0L17,8.6l-1.3-1.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l1.3,1.3L5,20.6 c-0.6,0.6-1,1.4-1.1,2.3C3.3,23.4,3,24.2,3,25c0,1.7,1.3,3,3,3c0.8,0,1.6-0.3,2.2-0.9C9,27,9.8,26.6,10.4,26L21,15.4l1.3,1.3 c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L22.4,14l5.3-5.3C29.2,7.2,29.2,4.8,27.7,3.3z M9,24.6 c-0.4,0.4-0.8,0.6-1.3,0.5c-0.4,0-0.7,0.2-0.9,0.5C6.7,25.8,6.3,26,6,26c-0.6,0-1-0.4-1-1c0-0.3,0.2-0.7,0.5-0.8 c0.3-0.2,0.5-0.5,0.5-0.9c0-0.5,0.2-1,0.5-1.3L17,11.4l2.6,2.6L9,24.6z"
12
- fill="currentColor"
13
- />
14
- </svg>
15
- );
16
- },
17
- true
18
- );
1
+ /** @jsxImportSource react */
2
+ import { VDOM } from "../../ui/Widget";
3
+ import { registerIcon } from "./registry";
4
+
5
+ export default registerIcon(
6
+ "pixel-picker",
7
+ ({ key, ...props }: any) => {
8
+ return (
9
+ <svg key={key} {...props} viewBox="0 0 30 30">
10
+ <path
11
+ d="M27.7,3.3c-1.5-1.5-3.9-1.5-5.4,0L17,8.6l-1.3-1.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l1.3,1.3L5,20.6 c-0.6,0.6-1,1.4-1.1,2.3C3.3,23.4,3,24.2,3,25c0,1.7,1.3,3,3,3c0.8,0,1.6-0.3,2.2-0.9C9,27,9.8,26.6,10.4,26L21,15.4l1.3,1.3 c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L22.4,14l5.3-5.3C29.2,7.2,29.2,4.8,27.7,3.3z M9,24.6 c-0.4,0.4-0.8,0.6-1.3,0.5c-0.4,0-0.7,0.2-0.9,0.5C6.7,25.8,6.3,26,6,26c-0.6,0-1-0.4-1-1c0-0.3,0.2-0.7,0.5-0.8 c0.3-0.2,0.5-0.5,0.5-0.9c0-0.5,0.2-1,0.5-1.3L17,11.4l2.6,2.6L9,24.6z"
12
+ fill="currentColor"
13
+ />
14
+ </svg>
15
+ );
16
+ },
17
+ true
18
+ );
@@ -1,13 +1,14 @@
1
- /** @jsxImportSource react */
2
- import {VDOM} from '../../ui/Widget';
3
- import {registerIcon} from './registry';
4
-
5
- export default registerIcon('search', (props: any) => {
6
- return <svg
7
- {...props}
8
- viewBox="0 0 32 32">
9
- <path fill="currentColor"
10
- d="M25.595 22.036l-5.26-5.075c.75-1.18 1.206-2.56 1.206-4.05 0-4.32-3.63-7.82-8.103-7.82-4.477 0-8.107 3.503-8.107 7.82 0 4.32 3.63 7.825 8.106 7.825 1.544 0 2.972-.44 4.198-1.162l5.26 5.074c.37.356.98.354 1.35 0l1.352-1.304c.37-.357.37-.947 0-1.304zm-12.16-3.91c-2.985 0-5.405-2.336-5.405-5.216 0-2.88 2.42-5.214 5.405-5.214 2.984 0 5.404 2.335 5.404 5.214 0 2.88-2.42 5.215-5.407 5.215z" />
11
- </svg>
12
- }, true);
13
-
1
+ /** @jsxImportSource react */
2
+ import {VDOM} from '../../ui/Widget';
3
+ import {registerIcon} from './registry';
4
+
5
+ export default registerIcon('search', ({ key, ...props }: any) => {
6
+ return <svg
7
+ key={key}
8
+ {...props}
9
+ viewBox="0 0 32 32">
10
+ <path fill="currentColor"
11
+ d="M25.595 22.036l-5.26-5.075c.75-1.18 1.206-2.56 1.206-4.05 0-4.32-3.63-7.82-8.103-7.82-4.477 0-8.107 3.503-8.107 7.82 0 4.32 3.63 7.825 8.106 7.825 1.544 0 2.972-.44 4.198-1.162l5.26 5.074c.37.356.98.354 1.35 0l1.352-1.304c.37-.357.37-.947 0-1.304zm-12.16-3.91c-2.985 0-5.405-2.336-5.405-5.216 0-2.88 2.42-5.214 5.405-5.214 2.984 0 5.404 2.335 5.404 5.214 0 2.88-2.42 5.215-5.407 5.215z" />
12
+ </svg>
13
+ }, true);
14
+
@@ -1,14 +1,15 @@
1
- /** @jsxImportSource react */
2
- import {VDOM} from '../../ui/Widget';
3
- import {registerIcon} from './registry';
4
-
5
- export default registerIcon('sort-asc', (props: any) => {
6
- return <svg
7
- {...props}
8
- viewBox="0 0 16 16">
9
- <path fill="currentColor"
10
- d="M10.5 5.8l-3-3-3 3 .707.708L7 4.688v8.312h1V4.69l1.793 1.817z"
11
- />
12
- </svg>
13
- }, true);
14
-
1
+ /** @jsxImportSource react */
2
+ import {VDOM} from '../../ui/Widget';
3
+ import {registerIcon} from './registry';
4
+
5
+ export default registerIcon('sort-asc', ({ key, ...props }: any) => {
6
+ return <svg
7
+ key={key}
8
+ {...props}
9
+ viewBox="0 0 16 16">
10
+ <path fill="currentColor"
11
+ d="M10.5 5.8l-3-3-3 3 .707.708L7 4.688v8.312h1V4.69l1.793 1.817z"
12
+ />
13
+ </svg>
14
+ }, true);
15
+
@@ -1,18 +1,19 @@
1
- /** @jsxImportSource react */
2
- import {VDOM} from '../../ui/Widget';
3
- import {registerIcon} from './registry';
4
-
5
- export default registerIcon('square', (props: any) => {
6
- return <svg
7
- {...props}
8
- viewBox="0 0 64 64">
9
- <rect
10
- x="12"
11
- y="12"
12
- width="40"
13
- height="40"
14
- fill="currentColor"
15
- />
16
- </svg>
17
- }, true);
18
-
1
+ /** @jsxImportSource react */
2
+ import {VDOM} from '../../ui/Widget';
3
+ import {registerIcon} from './registry';
4
+
5
+ export default registerIcon('square', ({ key, ...props }: any) => {
6
+ return <svg
7
+ key={key}
8
+ {...props}
9
+ viewBox="0 0 64 64">
10
+ <rect
11
+ x="12"
12
+ y="12"
13
+ width="40"
14
+ height="40"
15
+ fill="currentColor"
16
+ />
17
+ </svg>
18
+ }, true);
19
+
@@ -4,7 +4,7 @@ import { createTestRenderer } from "../../util/test/createTestRenderer";
4
4
  import assert from "assert";
5
5
 
6
6
  describe("Route", () => {
7
- it("matching works for ~/widgets/color-pickers", () => {
7
+ it("matching works for ~/widgets/color-pickers", async () => {
8
8
  let widget = (
9
9
  <cx>
10
10
  <Route url="~/widgets/color-pickers" route="~/widgets/color-pickers">
@@ -15,7 +15,7 @@ describe("Route", () => {
15
15
 
16
16
  let store = new Store();
17
17
 
18
- const component = createTestRenderer(store, widget);
18
+ const component = await createTestRenderer(store, widget);
19
19
 
20
20
  let tree = component.toJSON();
21
21
  assert(tree && !Array.isArray(tree));