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
package/src/util/DOM.ts CHANGED
@@ -1,88 +1,88 @@
1
- import { isNumber } from "../util/isNumber";
2
-
3
- type ElementFilter = (el: Element, condition: (el: Element) => boolean) => Element | null;
4
-
5
- /**
6
- * Returns first child element, or the parent element itself, that satisfies the `condition` function.
7
- * @param el
8
- * @param condition
9
- * @returns {Element}
10
- */
11
- export function findFirst<T extends Element>(el: Element, condition: (el: Element) => el is T): T | null;
12
- export function findFirst(el: Element, condition: (el: Element) => boolean): Element | null;
13
- export function findFirst(el: Element, condition: (el: Element) => boolean): Element | null {
14
- if (condition(el)) return el;
15
-
16
- var children = el.children;
17
- if (children)
18
- for (var i = 0; i < children.length; i++) {
19
- var child = findFirst(children[i], condition);
20
- if (child) return child;
21
- }
22
- return null;
23
- }
24
-
25
- export function findFirstChild<T extends Element>(el: Element, condition: (el: Element) => el is T): T | null;
26
- export function findFirstChild(el: Element, condition: (el: Element) => boolean): Element | null;
27
- export function findFirstChild(el: Element, condition: (el: Element) => boolean): Element | null {
28
- var children = el.children;
29
- if (children)
30
- for (var i = 0; i < children.length; i++) {
31
- var child = findFirst(children[i], condition);
32
- if (child) return child;
33
- }
34
- return null;
35
- }
36
-
37
- export function closest(el: HTMLElement | null, condition: (el: HTMLElement) => boolean): HTMLElement | null;
38
- export function closest(el: Element | null, condition: (el: Element) => boolean): Element | null;
39
- export function closest(el: Element | null, condition: (el: any) => boolean): Element | null {
40
- while (el) {
41
- if (condition(el)) return el;
42
- el = el.parentElement;
43
- }
44
- return null;
45
- }
46
-
47
- export function closestParent(el: HTMLElement, condition: (el: HTMLElement) => boolean): HTMLElement | null;
48
- export function closestParent(el: Element, condition: (el: HTMLElement) => boolean): HTMLElement | null;
49
- export function closestParent(el: Element, condition: (el: any) => boolean): HTMLElement | null {
50
- return el && closest(el.parentElement, condition);
51
- }
52
-
53
- export function isFocused(el: Element): boolean {
54
- return document.activeElement == el;
55
- }
56
-
57
- export function isFocusedDeep(el: Element): boolean {
58
- return document.activeElement == el || (!!document.activeElement && el.contains(document.activeElement));
59
- }
60
-
61
- const focusableWithoutTabIndex = ["INPUT", "SELECT", "TEXTAREA", "A", "BUTTON"];
62
-
63
- export function isFocusable(el: Element): el is HTMLElement {
64
- if (!(el instanceof HTMLElement)) return false;
65
-
66
- var firstPass = el && isNumber(el.tabIndex) && el.tabIndex >= 0;
67
- if (!firstPass) return false;
68
-
69
- if (focusableWithoutTabIndex.indexOf(el.tagName) != -1 && !el.hasAttribute("disabled")) return true;
70
-
71
- return el.hasAttribute("tabindex");
72
- }
73
-
74
- /**
75
- * Returns focused element.
76
- * @returns {Element}
77
- */
78
- export function getFocusedElement(): Element | null {
79
- return document.activeElement;
80
- }
81
-
82
- export function isDescendant(el: Element, descEl: Element): boolean {
83
- return el.contains(descEl);
84
- }
85
-
86
- export function isSelfOrDescendant(el: Element, descEl: Element): boolean {
87
- return el == descEl || el.contains(descEl);
88
- }
1
+ import { isNumber } from "../util/isNumber";
2
+
3
+ type ElementFilter = (el: Element, condition: (el: Element) => boolean) => Element | null;
4
+
5
+ /**
6
+ * Returns first child element, or the parent element itself, that satisfies the `condition` function.
7
+ * @param el
8
+ * @param condition
9
+ * @returns {Element}
10
+ */
11
+ export function findFirst<T extends Element>(el: Element, condition: (el: Element) => el is T): T | null;
12
+ export function findFirst(el: Element, condition: (el: Element) => boolean): Element | null;
13
+ export function findFirst(el: Element, condition: (el: Element) => boolean): Element | null {
14
+ if (condition(el)) return el;
15
+
16
+ var children = el.children;
17
+ if (children)
18
+ for (var i = 0; i < children.length; i++) {
19
+ var child = findFirst(children[i], condition);
20
+ if (child) return child;
21
+ }
22
+ return null;
23
+ }
24
+
25
+ export function findFirstChild<T extends Element>(el: Element, condition: (el: Element) => el is T): T | null;
26
+ export function findFirstChild(el: Element, condition: (el: Element) => boolean): Element | null;
27
+ export function findFirstChild(el: Element, condition: (el: Element) => boolean): Element | null {
28
+ var children = el.children;
29
+ if (children)
30
+ for (var i = 0; i < children.length; i++) {
31
+ var child = findFirst(children[i], condition);
32
+ if (child) return child;
33
+ }
34
+ return null;
35
+ }
36
+
37
+ export function closest(el: HTMLElement | null, condition: (el: HTMLElement) => boolean): HTMLElement | null;
38
+ export function closest(el: Element | null, condition: (el: Element) => boolean): Element | null;
39
+ export function closest(el: Element | null, condition: (el: any) => boolean): Element | null {
40
+ while (el) {
41
+ if (condition(el)) return el;
42
+ el = el.parentElement;
43
+ }
44
+ return null;
45
+ }
46
+
47
+ export function closestParent(el: HTMLElement, condition: (el: HTMLElement) => boolean): HTMLElement | null;
48
+ export function closestParent(el: Element, condition: (el: HTMLElement) => boolean): HTMLElement | null;
49
+ export function closestParent(el: Element, condition: (el: any) => boolean): HTMLElement | null {
50
+ return el && closest(el.parentElement, condition);
51
+ }
52
+
53
+ export function isFocused(el: Element): boolean {
54
+ return document.activeElement == el;
55
+ }
56
+
57
+ export function isFocusedDeep(el: Element): boolean {
58
+ return document.activeElement == el || (!!document.activeElement && el.contains(document.activeElement));
59
+ }
60
+
61
+ const focusableWithoutTabIndex = ["INPUT", "SELECT", "TEXTAREA", "A", "BUTTON"];
62
+
63
+ export function isFocusable(el: Element): el is HTMLElement {
64
+ if (!(el instanceof HTMLElement)) return false;
65
+
66
+ var firstPass = el && isNumber(el.tabIndex) && el.tabIndex >= 0;
67
+ if (!firstPass) return false;
68
+
69
+ if (focusableWithoutTabIndex.indexOf(el.tagName) != -1 && !el.hasAttribute("disabled")) return true;
70
+
71
+ return el.hasAttribute("tabindex");
72
+ }
73
+
74
+ /**
75
+ * Returns focused element.
76
+ * @returns {Element}
77
+ */
78
+ export function getFocusedElement(): Element | null {
79
+ return document.activeElement;
80
+ }
81
+
82
+ export function isDescendant(el: Element, descEl: Element): boolean {
83
+ return el.contains(descEl);
84
+ }
85
+
86
+ export function isSelfOrDescendant(el: Element, descEl: Element): boolean {
87
+ return el == descEl || el.contains(descEl);
88
+ }
@@ -1,69 +1,69 @@
1
- import assert from "assert";
2
- import { Format } from "./Format";
3
-
4
- describe("Format", function () {
5
- describe("n,number ", function () {
6
- it("correctly formats numbers with min and max allowed precision", function () {
7
- assert.equal(Format.value(0.5, "n;2;4"), "0.50");
8
- assert.equal(Format.value(0.50101, "n;2;4"), "0.501");
9
- assert.equal(Format.value(0.5012, "n;2;4"), "0.5012");
10
- assert.equal(Format.value(0.0, "n;0;4"), "0");
11
- });
12
-
13
- it("correctly formats numbers fixed precision", function () {
14
- assert.equal(Format.value(0.5, "number;3"), "0.500");
15
- assert.equal(Format.value(0.50101, "number;3"), "0.501");
16
- assert.equal(Format.value(0.5016, "number;3"), "0.502");
17
- });
18
- });
19
-
20
- describe("p,percentage", function () {
21
- it("correctly formats numbers with min and max allowed precision", function () {
22
- assert.equal(Format.value(0.5, "p;2;4"), "50.00%");
23
- assert.equal(Format.value(0.50101, "p;2;4"), "50.101%");
24
- assert.equal(Format.value(0.50123456, "p;2;4"), "50.1235%");
25
- assert.equal(Format.value(0.0, "p;0;4"), "0%");
26
- });
27
-
28
- it("correctly formats numbers fixed precision", function () {
29
- assert.equal(Format.value(0.5, "percentage;3"), "50.000%");
30
- assert.equal(Format.value(0.50101, "percentage;3"), "50.101%");
31
- assert.equal(Format.value(0.5016, "percentage;3"), "50.160%");
32
- });
33
- });
34
-
35
- describe("date,time,datetime", function () {
36
- it("correctly formats dates", function () {
37
- assert.equal(Format.value(new Date(2015, 3, 1), "d"), "4/1/2015");
38
- });
39
-
40
- it("correctly formats time", function () {
41
- assert.equal(Format.value(new Date(2015, 3, 1, 16, 15, 14), "t"), "16:15");
42
- assert.equal(Format.value(new Date(2015, 3, 1, 5, 6, 14), "time"), "05:06");
43
- });
44
-
45
- it("correctly formats date-time", function () {
46
- assert.equal(Format.value(new Date(2015, 3, 1, 5, 6, 14), "dt"), "4/1/2015 05:06");
47
- });
48
- });
49
-
50
- describe("ellipsis", function () {
51
- it("can shorten long texts", function () {
52
- assert.equal(Format.value("This is a very long text.", "ellipsis;7"), "This...");
53
- });
54
-
55
- it("can be used at the start of string", function () {
56
- assert.equal(Format.value("This is a very long text.", "ellipsis;8;start"), "...text.");
57
- });
58
-
59
- it("can be used in the middle of the string", function () {
60
- assert.equal(Format.value("First (Middle) Last", "ellipsis;11;middle"), "Firs...Last");
61
- });
62
- });
63
-
64
- describe("null text", function () {
65
- it("can contain null text", function () {
66
- assert.equal(Format.value(null, "n;2|N/A"), "N/A");
67
- });
68
- });
69
- });
1
+ import assert from "assert";
2
+ import { Format } from "./Format";
3
+
4
+ describe("Format", function () {
5
+ describe("n,number ", function () {
6
+ it("correctly formats numbers with min and max allowed precision", function () {
7
+ assert.equal(Format.value(0.5, "n;2;4"), "0.50");
8
+ assert.equal(Format.value(0.50101, "n;2;4"), "0.501");
9
+ assert.equal(Format.value(0.5012, "n;2;4"), "0.5012");
10
+ assert.equal(Format.value(0.0, "n;0;4"), "0");
11
+ });
12
+
13
+ it("correctly formats numbers fixed precision", function () {
14
+ assert.equal(Format.value(0.5, "number;3"), "0.500");
15
+ assert.equal(Format.value(0.50101, "number;3"), "0.501");
16
+ assert.equal(Format.value(0.5016, "number;3"), "0.502");
17
+ });
18
+ });
19
+
20
+ describe("p,percentage", function () {
21
+ it("correctly formats numbers with min and max allowed precision", function () {
22
+ assert.equal(Format.value(0.5, "p;2;4"), "50.00%");
23
+ assert.equal(Format.value(0.50101, "p;2;4"), "50.101%");
24
+ assert.equal(Format.value(0.50123456, "p;2;4"), "50.1235%");
25
+ assert.equal(Format.value(0.0, "p;0;4"), "0%");
26
+ });
27
+
28
+ it("correctly formats numbers fixed precision", function () {
29
+ assert.equal(Format.value(0.5, "percentage;3"), "50.000%");
30
+ assert.equal(Format.value(0.50101, "percentage;3"), "50.101%");
31
+ assert.equal(Format.value(0.5016, "percentage;3"), "50.160%");
32
+ });
33
+ });
34
+
35
+ describe("date,time,datetime", function () {
36
+ it("correctly formats dates", function () {
37
+ assert.equal(Format.value(new Date(2015, 3, 1), "d"), "4/1/2015");
38
+ });
39
+
40
+ it("correctly formats time", function () {
41
+ assert.equal(Format.value(new Date(2015, 3, 1, 16, 15, 14), "t"), "16:15");
42
+ assert.equal(Format.value(new Date(2015, 3, 1, 5, 6, 14), "time"), "05:06");
43
+ });
44
+
45
+ it("correctly formats date-time", function () {
46
+ assert.equal(Format.value(new Date(2015, 3, 1, 5, 6, 14), "dt"), "4/1/2015 05:06");
47
+ });
48
+ });
49
+
50
+ describe("ellipsis", function () {
51
+ it("can shorten long texts", function () {
52
+ assert.equal(Format.value("This is a very long text.", "ellipsis;7"), "This...");
53
+ });
54
+
55
+ it("can be used at the start of string", function () {
56
+ assert.equal(Format.value("This is a very long text.", "ellipsis;8;start"), "...text.");
57
+ });
58
+
59
+ it("can be used in the middle of the string", function () {
60
+ assert.equal(Format.value("First (Middle) Last", "ellipsis;11;middle"), "Firs...Last");
61
+ });
62
+ });
63
+
64
+ describe("null text", function () {
65
+ it("can contain null text", function () {
66
+ assert.equal(Format.value(null, "n;2|N/A"), "N/A");
67
+ });
68
+ });
69
+ });