cx 25.4.1 → 25.5.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 (140) hide show
  1. package/dist/charts.js +2 -2
  2. package/dist/data.js +17 -3
  3. package/dist/manifest.js +732 -732
  4. package/dist/ui.js +94 -61
  5. package/dist/widgets.js +25 -13
  6. package/package.json +1 -1
  7. package/src/charts/Legend.d.ts +45 -45
  8. package/src/charts/LegendEntry.js +128 -128
  9. package/src/charts/LegendEntry.scss +27 -27
  10. package/src/charts/PieChart.d.ts +92 -92
  11. package/src/charts/RangeMarker.js +6 -2
  12. package/src/charts/axis/Axis.d.ts +113 -113
  13. package/src/charts/axis/Axis.js +280 -280
  14. package/src/charts/axis/CategoryAxis.d.ts +30 -30
  15. package/src/charts/axis/CategoryAxis.js +241 -241
  16. package/src/charts/axis/NumericAxis.d.ts +46 -46
  17. package/src/charts/axis/NumericAxis.js +351 -351
  18. package/src/charts/axis/Stack.js +55 -55
  19. package/src/charts/axis/TimeAxis.d.ts +31 -28
  20. package/src/charts/axis/TimeAxis.js +611 -611
  21. package/src/charts/helpers/PointReducer.js +47 -47
  22. package/src/charts/helpers/SnapPointFinder.js +69 -69
  23. package/src/data/AugmentedViewBase.js +77 -75
  24. package/src/data/Binding.spec.js +69 -69
  25. package/src/data/ExposedRecordView.js +75 -70
  26. package/src/data/ExposedValueView.js +73 -72
  27. package/src/data/Expression.js +229 -229
  28. package/src/data/Expression.spec.js +229 -229
  29. package/src/data/Ref.d.ts +24 -24
  30. package/src/data/Ref.spec.js +79 -79
  31. package/src/data/StoreRef.spec.js +24 -24
  32. package/src/data/StringTemplate.js +92 -92
  33. package/src/data/StringTemplate.spec.js +132 -132
  34. package/src/data/StructuredDataAccessor.d.ts +7 -7
  35. package/src/data/StructuredSelector.js +132 -132
  36. package/src/data/SubscribableView.js +54 -54
  37. package/src/data/getAccessor.spec.js +11 -11
  38. package/src/data/getSelector.js +49 -49
  39. package/src/hooks/createLocalStorageRef.d.ts +3 -3
  40. package/src/hooks/createLocalStorageRef.js +20 -20
  41. package/src/index.scss +6 -6
  42. package/src/ui/Container.js +154 -183
  43. package/src/ui/Culture.d.ts +57 -57
  44. package/src/ui/Culture.js +139 -139
  45. package/src/ui/Cx.js +3 -3
  46. package/src/ui/DataProxy.js +45 -44
  47. package/src/ui/DetachedScope.js +98 -94
  48. package/src/ui/FocusManager.js +171 -171
  49. package/src/ui/Format.js +108 -108
  50. package/src/ui/HoverSync.js +147 -147
  51. package/src/ui/Instance.d.ts +1 -1
  52. package/src/ui/Instance.js +25 -16
  53. package/src/ui/IsolatedScope.js +30 -30
  54. package/src/ui/Repeater.d.ts +61 -61
  55. package/src/ui/Repeater.js +109 -102
  56. package/src/ui/Rescope.js +35 -31
  57. package/src/ui/Restate.js +167 -163
  58. package/src/ui/Widget.js +184 -200
  59. package/src/ui/adapter/ArrayAdapter.js +152 -142
  60. package/src/ui/adapter/TreeAdapter.js +101 -100
  61. package/src/ui/createFunctionalComponent.d.ts +1 -1
  62. package/src/ui/createFunctionalComponent.js +31 -36
  63. package/src/ui/layout/ContentPlaceholder.d.ts +19 -19
  64. package/src/ui/layout/ContentPlaceholder.js +105 -105
  65. package/src/ui/layout/ContentPlaceholder.spec.js +579 -579
  66. package/src/ui/layout/LabelsTopLayout.js +134 -134
  67. package/src/ui/layout/exploreChildren.d.ts +12 -15
  68. package/src/ui/layout/exploreChildren.js +27 -40
  69. package/src/util/Format.js +270 -270
  70. package/src/util/date/encodeDate.d.ts +1 -1
  71. package/src/util/date/encodeDate.js +8 -8
  72. package/src/util/date/encodeDateWithTimezoneOffset.d.ts +1 -1
  73. package/src/util/date/index.d.ts +11 -11
  74. package/src/util/date/index.js +11 -11
  75. package/src/util/date/parseDateInvariant.d.ts +3 -3
  76. package/src/util/date/parseDateInvariant.js +20 -20
  77. package/src/util/debounce.js +18 -18
  78. package/src/util/getSearchQueryPredicate.js +59 -59
  79. package/src/util/index.d.ts +51 -51
  80. package/src/util/index.js +54 -54
  81. package/src/util/isValidIdentifierName.d.ts +1 -1
  82. package/src/util/isValidIdentifierName.js +5 -5
  83. package/src/util/isValidIdentifierName.spec.js +33 -33
  84. package/src/util/scss/add-rules.scss +38 -38
  85. package/src/util/validatedDebounce.js +19 -19
  86. package/src/widgets/Button.js +118 -118
  87. package/src/widgets/CxCredit.scss +37 -37
  88. package/src/widgets/HighlightedSearchText.js +36 -36
  89. package/src/widgets/HighlightedSearchText.scss +18 -18
  90. package/src/widgets/List.js +594 -587
  91. package/src/widgets/List.scss +91 -91
  92. package/src/widgets/Sandbox.js +9 -8
  93. package/src/widgets/drag-drop/DropZone.js +214 -214
  94. package/src/widgets/form/Calendar.d.ts +86 -86
  95. package/src/widgets/form/Calendar.js +618 -618
  96. package/src/widgets/form/Calendar.scss +196 -196
  97. package/src/widgets/form/Checkbox.scss +127 -127
  98. package/src/widgets/form/ColorField.js +397 -397
  99. package/src/widgets/form/ColorField.scss +96 -96
  100. package/src/widgets/form/ColorPicker.scss +283 -283
  101. package/src/widgets/form/DateTimeField.js +576 -576
  102. package/src/widgets/form/DateTimePicker.js +392 -392
  103. package/src/widgets/form/LookupField.d.ts +179 -179
  104. package/src/widgets/form/LookupField.scss +219 -219
  105. package/src/widgets/form/MonthField.d.ts +99 -99
  106. package/src/widgets/form/MonthField.js +523 -523
  107. package/src/widgets/form/MonthPicker.d.ts +76 -76
  108. package/src/widgets/form/MonthPicker.js +641 -641
  109. package/src/widgets/form/MonthPicker.scss +118 -118
  110. package/src/widgets/form/NumberField.js +459 -459
  111. package/src/widgets/form/NumberField.scss +61 -61
  112. package/src/widgets/form/Radio.scss +121 -121
  113. package/src/widgets/form/Select.scss +99 -99
  114. package/src/widgets/form/Slider.scss +118 -118
  115. package/src/widgets/form/Switch.scss +140 -140
  116. package/src/widgets/form/TextArea.scss +43 -43
  117. package/src/widgets/form/TextField.js +290 -290
  118. package/src/widgets/form/TextField.scss +55 -55
  119. package/src/widgets/form/UploadButton.d.ts +34 -34
  120. package/src/widgets/form/variables.scss +353 -353
  121. package/src/widgets/grid/Grid.d.ts +442 -442
  122. package/src/widgets/grid/Grid.js +7 -0
  123. package/src/widgets/grid/GridRow.js +228 -228
  124. package/src/widgets/grid/TreeNode.d.ts +23 -23
  125. package/src/widgets/grid/TreeNode.scss +88 -88
  126. package/src/widgets/grid/variables.scss +133 -133
  127. package/src/widgets/nav/LinkButton.js +128 -128
  128. package/src/widgets/nav/Menu.scss +74 -74
  129. package/src/widgets/nav/Route.js +102 -106
  130. package/src/widgets/overlay/Dropdown.js +612 -612
  131. package/src/widgets/overlay/FlyweightTooltipTracker.js +39 -39
  132. package/src/widgets/overlay/Overlay.d.ts +73 -73
  133. package/src/widgets/overlay/Tooltip.js +1 -1
  134. package/src/widgets/overlay/Window.js +202 -202
  135. package/src/widgets/overlay/captureMouse.js +124 -124
  136. package/src/widgets/overlay/createHotPromiseWindowFactory.d.ts +18 -18
  137. package/src/widgets/overlay/createHotPromiseWindowFactory.js +56 -56
  138. package/src/widgets/overlay/index.d.ts +11 -11
  139. package/src/widgets/overlay/index.js +11 -11
  140. package/src/widgets/variables.scss +144 -144
@@ -1,118 +1,118 @@
1
- import { Widget, VDOM, getContentArray } from "../ui/Widget";
2
- import { HtmlElement } from "./HtmlElement";
3
- import { yesNo } from "./overlay/alerts";
4
- import { Icon } from "./Icon";
5
- import { preventFocus } from "../ui/FocusManager";
6
- import { isFunction } from "../util/isFunction";
7
- import { isDefined } from "../util/isDefined";
8
- import { coalesce } from "../util/coalesce";
9
-
10
- export class Button extends HtmlElement {
11
- declareData() {
12
- super.declareData(...arguments, {
13
- confirm: { structured: true },
14
- pressed: undefined,
15
- icon: undefined,
16
- disabled: undefined,
17
- enabled: undefined,
18
- });
19
- }
20
-
21
- prepareData(context, instance) {
22
- let { data } = instance;
23
- data.stateMods = {
24
- ...data.stateMods,
25
- pressed: data.pressed,
26
- };
27
- if (isDefined(data.enabled)) data.disabled = !data.enabled;
28
-
29
- super.prepareData(context, instance);
30
- }
31
-
32
- explore(context, instance) {
33
- instance.data.parentDisabled = context.parentDisabled;
34
- instance.data.parentStrict = context.parentStrict;
35
-
36
- if (instance.cache("parentDisabled", context.parentDisabled)) instance.markShouldUpdate(context);
37
- if (instance.cache("parentStrict", context.parentStrict)) instance.markShouldUpdate(context);
38
-
39
- super.explore(context, instance);
40
- }
41
-
42
- attachProps(context, instance, props) {
43
- super.attachProps(context, instance, props);
44
-
45
- if (!this.focusOnMouseDown) {
46
- props.onMouseDown = (e) => {
47
- if (this.onMouseDown && instance.invoke("onMouseDown", e, instance) == false) return;
48
- preventFocus(e);
49
- };
50
- }
51
-
52
- if (this.dismiss) {
53
- let { onClick } = props;
54
-
55
- props.onClick = (...args) => {
56
- if (onClick && onClick(...args) === false) return;
57
-
58
- if (instance.parentOptions && isFunction(instance.parentOptions.dismiss)) instance.parentOptions.dismiss();
59
- };
60
- }
61
-
62
- if (this.tag === "button") props.type = this.submit ? "submit" : "button";
63
-
64
- delete props.confirm;
65
- delete props.dismiss;
66
- delete props.pressed;
67
- delete props.submit;
68
- delete props.focusOnMouseDown;
69
- delete props.icon;
70
- delete props.enabled;
71
-
72
- let oldOnClick,
73
- { data } = instance;
74
-
75
- props.disabled = coalesce(data.parentStrict ? data.parentDisabled : null, data.disabled, data.parentDisabled);
76
-
77
- if (data.confirm) {
78
- oldOnClick = props.onClick;
79
- props.onClick = () => {
80
- yesNo(data.confirm).then((btn) => {
81
- if (btn == "yes") oldOnClick.call(this, null, instance);
82
- });
83
- };
84
- }
85
-
86
- let icon, children;
87
-
88
- if (data.icon) {
89
- icon = Icon.render(data.icon, {
90
- key: "icon",
91
- className: this.CSS.element(this.baseClass, "icon"),
92
- });
93
- children = getContentArray(props.children);
94
- props.children = [icon, ...children];
95
- props.className = this.CSS.expand(
96
- props.className,
97
- this.CSS.state("icon"),
98
- children.length == 0 && this.CSS.state("empty")
99
- );
100
-
101
- if (children.length == 0) {
102
- props.children.push(
103
- <span key="baseline" className={this.CSS.element(this.baseClass, "baseline")}>
104
- &nbsp;
105
- </span>
106
- );
107
- }
108
- }
109
- }
110
- }
111
-
112
- Button.prototype.tag = "button";
113
- Button.prototype.baseClass = "button";
114
- Button.prototype.icon = false;
115
- Button.prototype.focusOnMouseDown = false;
116
- Button.prototype.submit = false;
117
-
118
- Widget.alias("button", Button);
1
+ import { Widget, VDOM, getContentArray } from "../ui/Widget";
2
+ import { HtmlElement } from "./HtmlElement";
3
+ import { yesNo } from "./overlay/alerts";
4
+ import { Icon } from "./Icon";
5
+ import { preventFocus } from "../ui/FocusManager";
6
+ import { isFunction } from "../util/isFunction";
7
+ import { isDefined } from "../util/isDefined";
8
+ import { coalesce } from "../util/coalesce";
9
+
10
+ export class Button extends HtmlElement {
11
+ declareData() {
12
+ super.declareData(...arguments, {
13
+ confirm: { structured: true },
14
+ pressed: undefined,
15
+ icon: undefined,
16
+ disabled: undefined,
17
+ enabled: undefined,
18
+ });
19
+ }
20
+
21
+ prepareData(context, instance) {
22
+ let { data } = instance;
23
+ data.stateMods = {
24
+ ...data.stateMods,
25
+ pressed: data.pressed,
26
+ };
27
+ if (isDefined(data.enabled)) data.disabled = !data.enabled;
28
+
29
+ super.prepareData(context, instance);
30
+ }
31
+
32
+ explore(context, instance) {
33
+ instance.data.parentDisabled = context.parentDisabled;
34
+ instance.data.parentStrict = context.parentStrict;
35
+
36
+ if (instance.cache("parentDisabled", context.parentDisabled)) instance.markShouldUpdate(context);
37
+ if (instance.cache("parentStrict", context.parentStrict)) instance.markShouldUpdate(context);
38
+
39
+ super.explore(context, instance);
40
+ }
41
+
42
+ attachProps(context, instance, props) {
43
+ super.attachProps(context, instance, props);
44
+
45
+ if (!this.focusOnMouseDown) {
46
+ props.onMouseDown = (e) => {
47
+ if (this.onMouseDown && instance.invoke("onMouseDown", e, instance) == false) return;
48
+ preventFocus(e);
49
+ };
50
+ }
51
+
52
+ if (this.dismiss) {
53
+ let { onClick } = props;
54
+
55
+ props.onClick = (...args) => {
56
+ if (onClick && onClick(...args) === false) return;
57
+
58
+ if (instance.parentOptions && isFunction(instance.parentOptions.dismiss)) instance.parentOptions.dismiss();
59
+ };
60
+ }
61
+
62
+ if (this.tag === "button") props.type = this.submit ? "submit" : "button";
63
+
64
+ delete props.confirm;
65
+ delete props.dismiss;
66
+ delete props.pressed;
67
+ delete props.submit;
68
+ delete props.focusOnMouseDown;
69
+ delete props.icon;
70
+ delete props.enabled;
71
+
72
+ let oldOnClick,
73
+ { data } = instance;
74
+
75
+ props.disabled = coalesce(data.parentStrict ? data.parentDisabled : null, data.disabled, data.parentDisabled);
76
+
77
+ if (data.confirm) {
78
+ oldOnClick = props.onClick;
79
+ props.onClick = () => {
80
+ yesNo(data.confirm).then((btn) => {
81
+ if (btn == "yes") oldOnClick.call(this, null, instance);
82
+ });
83
+ };
84
+ }
85
+
86
+ let icon, children;
87
+
88
+ if (data.icon) {
89
+ icon = Icon.render(data.icon, {
90
+ key: "icon",
91
+ className: this.CSS.element(this.baseClass, "icon"),
92
+ });
93
+ children = getContentArray(props.children);
94
+ props.children = [icon, ...children];
95
+ props.className = this.CSS.expand(
96
+ props.className,
97
+ this.CSS.state("icon"),
98
+ children.length == 0 && this.CSS.state("empty")
99
+ );
100
+
101
+ if (children.length == 0) {
102
+ props.children.push(
103
+ <span key="baseline" className={this.CSS.element(this.baseClass, "baseline")}>
104
+ &nbsp;
105
+ </span>
106
+ );
107
+ }
108
+ }
109
+ }
110
+ }
111
+
112
+ Button.prototype.tag = "button";
113
+ Button.prototype.baseClass = "button";
114
+ Button.prototype.icon = false;
115
+ Button.prototype.focusOnMouseDown = false;
116
+ Button.prototype.submit = false;
117
+
118
+ Widget.alias("button", Button);
@@ -1,37 +1,37 @@
1
- @mixin cx-cxcredit($name: "cxcredit", $besm: $cx-besm) {
2
- $block: map-get($besm, block);
3
- $element: map-get($besm, element);
4
- $state: map-get($besm, state);
5
- $mod: map-get($besm, mod);
6
-
7
- .#{$block}#{$name} {
8
- width: 50px;
9
- height: 50px;
10
- opacity: 0.5;
11
- transition: opacity 0.3s ease-in-out;
12
- background: rgba(255, 255, 255, 0.1);
13
- cursor: pointer;
14
- position: fixed;
15
- bottom: 20px;
16
- right: 20px;
17
-
18
- &:hover {
19
- opacity: 1;
20
- }
21
-
22
- &.#{$mod}inline {
23
- position: relative;
24
- bottom: auto;
25
- right: auto;
26
- }
27
- }
28
-
29
- .#{$element}#{$name}-icon {
30
- width: 100%;
31
- height: 100%;
32
- }
33
- }
34
-
35
- @if (cx-should-include("cx/widgets/CxCredit")) {
36
- @include cx-cxcredit();
37
- }
1
+ @mixin cx-cxcredit($name: "cxcredit", $besm: $cx-besm) {
2
+ $block: map-get($besm, block);
3
+ $element: map-get($besm, element);
4
+ $state: map-get($besm, state);
5
+ $mod: map-get($besm, mod);
6
+
7
+ .#{$block}#{$name} {
8
+ width: 50px;
9
+ height: 50px;
10
+ opacity: 0.5;
11
+ transition: opacity 0.3s ease-in-out;
12
+ background: rgba(255, 255, 255, 0.1);
13
+ cursor: pointer;
14
+ position: fixed;
15
+ bottom: 20px;
16
+ right: 20px;
17
+
18
+ &:hover {
19
+ opacity: 1;
20
+ }
21
+
22
+ &.#{$mod}inline {
23
+ position: relative;
24
+ bottom: auto;
25
+ right: auto;
26
+ }
27
+ }
28
+
29
+ .#{$element}#{$name}-icon {
30
+ width: 100%;
31
+ height: 100%;
32
+ }
33
+ }
34
+
35
+ @if (cx-should-include("cx/widgets/CxCredit")) {
36
+ @include cx-cxcredit();
37
+ }
@@ -1,36 +1,36 @@
1
- import { Widget } from "../ui/Widget";
2
- import { VDOM } from "../ui/VDOM";
3
- import { getSearchQueryHighlighter } from "../util/getSearchQueryPredicate";
4
-
5
- export class HighlightedSearchText extends Widget {
6
- declareData(...args) {
7
- super.declareData(...args, {
8
- text: undefined,
9
- chunks: undefined,
10
- query: undefined,
11
- });
12
- }
13
-
14
- render(context, instance, key) {
15
- let { data } = instance;
16
- let { text, chunks, query, classNames, style } = data;
17
-
18
- if (!chunks && text && query) {
19
- let highlighter = getSearchQueryHighlighter(query, { cache: true });
20
- chunks = highlighter(text);
21
- }
22
-
23
- if (!chunks) return text;
24
- return chunks.map((text, i) => {
25
- if (i % 2 == 0) return text;
26
- return (
27
- <span key={`${key}-${i}`} className={classNames} style={style}>
28
- {text}
29
- </span>
30
- );
31
- });
32
- }
33
- }
34
-
35
- HighlightedSearchText.prototype.styled = true;
36
- HighlightedSearchText.prototype.baseClass = "highlightedsearchtext";
1
+ import { Widget } from "../ui/Widget";
2
+ import { VDOM } from "../ui/VDOM";
3
+ import { getSearchQueryHighlighter } from "../util/getSearchQueryPredicate";
4
+
5
+ export class HighlightedSearchText extends Widget {
6
+ declareData(...args) {
7
+ super.declareData(...args, {
8
+ text: undefined,
9
+ chunks: undefined,
10
+ query: undefined,
11
+ });
12
+ }
13
+
14
+ render(context, instance, key) {
15
+ let { data } = instance;
16
+ let { text, chunks, query, classNames, style } = data;
17
+
18
+ if (!chunks && text && query) {
19
+ let highlighter = getSearchQueryHighlighter(query, { cache: true });
20
+ chunks = highlighter(text);
21
+ }
22
+
23
+ if (!chunks) return text;
24
+ return chunks.map((text, i) => {
25
+ if (i % 2 == 0) return text;
26
+ return (
27
+ <span key={`${key}-${i}`} className={classNames} style={style}>
28
+ {text}
29
+ </span>
30
+ );
31
+ });
32
+ }
33
+ }
34
+
35
+ HighlightedSearchText.prototype.styled = true;
36
+ HighlightedSearchText.prototype.baseClass = "highlightedsearchtext";
@@ -1,18 +1,18 @@
1
- @mixin cxb-highlightedsearchtext(
2
- $name: "highlightedsearchtext",
3
- $styles: $cx-highlightedsearchtext-style-map,
4
- $besm: $cx-besm
5
- ) {
6
- $block: map-get($besm, block);
7
- $element: map-get($besm, element);
8
- $state: map-get($besm, state);
9
- $mod: map-get($besm, mod);
10
-
11
- .#{$block}#{$name} {
12
- @include cx-add-rules($styles);
13
- }
14
- }
15
-
16
- @if (cx-should-include("cx/widgets/HighlightedSearchText")) {
17
- @include cxb-highlightedsearchtext();
18
- }
1
+ @mixin cxb-highlightedsearchtext(
2
+ $name: "highlightedsearchtext",
3
+ $styles: $cx-highlightedsearchtext-style-map,
4
+ $besm: $cx-besm
5
+ ) {
6
+ $block: map-get($besm, block);
7
+ $element: map-get($besm, element);
8
+ $state: map-get($besm, state);
9
+ $mod: map-get($besm, mod);
10
+
11
+ .#{$block}#{$name} {
12
+ @include cx-add-rules($styles);
13
+ }
14
+ }
15
+
16
+ @if (cx-should-include("cx/widgets/HighlightedSearchText")) {
17
+ @include cxb-highlightedsearchtext();
18
+ }