cx 26.4.4 → 26.5.1

package/build/charts/axis/Axis.d.ts

@@ -50,6 +50,13 @@ export interface AxisConfig extends BoundedObjectConfig {
     labelMaxLineLength?: number;
     /** Set to true to hide the axis labels. */
     hideLabels?: boolean;
+    /**
+     * Set to `true` to drop a boundary (first/last) label, together with its tick,
+     * when the label would not fit within the chart and get clipped at the edge.
+     * Minor ticks are unaffected. Only affects horizontal axes. Defaults to `false`,
+     * except on `TimeAxis` where it defaults to `true`.
+     */
+    hideClippedLabels?: boolean;
     /** Set to true to hide the axis line. */
     hideLine?: boolean;
     /** Set to true to hide the axis ticks. */
@@ -94,6 +101,7 @@ export declare class Axis extends BoundedObject<AxisConfig, AxisInstance> {
     inverted: boolean;
     hidden: boolean;
     hideLabels: boolean;
+    hideClippedLabels: boolean;
     hideTicks: boolean;
     hideLine: boolean;
     tickSize: number;

package/build/charts/axis/Axis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Axis.d.ts","sourceRoot":"","sources":["../../../src/charts/axis/Axis.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Axis.d.ts","sourceRoot":"","sources":["../../../src/charts/axis/Axis.tsx"],"names":[],"mappings":"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"}

package/build/charts/axis/Axis.js

@@ -27,6 +27,7 @@ export class Axis extends BoundedObject {
         super.declareData({
             anchors: undefined,
             hideLabels: undefined,
+            hideClippedLabels: undefined,
             hideLine: undefined,
             hideTicks: undefined,
             labelRotation: undefined,
@@ -75,9 +76,22 @@ export class Axis extends BoundedObject {
         var t = [];
         if (!!size && !data.hideLabels) {
             var ticks = calculator.getTicks([size]);
+            // A boundary label is dropped when it would be clipped at the chart edge.
+            // How far a label reaches toward an edge depends only on its text anchor
+            // and minLabelDistance, so it is resolved once here rather than per tick.
+            // Chart bounds (parentRect) are used rather than axis bounds, since an
+            // axis can be inset within its chart and one Svg may host several charts.
+            let chartBounds = instance.parentRect;
+            let clipBoundaryLabels = !this.vertical && !!data.hideClippedLabels && !!chartBounds;
+            let reach = minLabelDistance * 0.8;
+            let leftReach = data.labelAnchor == "end" ? reach : data.labelAnchor == "middle" ? reach / 2 : 0;
+            let rightReach = data.labelAnchor == "start" ? reach : data.labelAnchor == "middle" ? reach / 2 : 0;
             ticks.forEach((serie, si) => {
                 serie.forEach((v, i) => {
                     var s = calculator.map(v);
+                    // Drop this boundary label (and its major tick) if it would be
+                    // clipped at the chart edge; minor ticks render separately and stay.
+                    let clipped = clipBoundaryLabels && (s + rightReach > chartBounds.r || s - leftReach < chartBounds.l);
                     if (this.secondary) {
                         x1 = this.vertical ? bounds.r + tickOffset : s;
                         y1 = this.vertical ? s : bounds.t - tickOffset;
@@ -90,8 +104,10 @@ export class Axis extends BoundedObject {
                         x2 = this.vertical ? bounds.l - tickOffset - tickSize : s;
                         y2 = this.vertical ? s : bounds.b + tickOffset + tickSize;
                     }
-                    if (!this.useGridlineTicks)
+                    if (!this.useGridlineTicks && !clipped)
                         t.push(`M ${x1} ${y1} L ${x2} ${y2}`);
+                    if (clipped)
+                        return;
                     var x, y;
                     let labelOffset = this.alternateLabelOffset != null && i % 2 == 1 ? this.alternateLabelOffset : this.labelOffset;
                     if (this.secondary) {
@@ -195,6 +211,7 @@ Axis.prototype.secondary = false;
 Axis.prototype.inverted = false;
 Axis.prototype.hidden = false;
 Axis.prototype.hideLabels = false;
+Axis.prototype.hideClippedLabels = false;
 Axis.prototype.hideTicks = false;
 Axis.prototype.hideLine = false;
 Axis.prototype.tickSize = 3;

package/build/charts/axis/TimeAxis.js

@@ -112,6 +112,7 @@ TimeAxis.prototype.minLabelDistance = 60;
 TimeAxis.prototype.minTickDistance = 60;
 TimeAxis.prototype.minTickUnit = "second";
 TimeAxis.prototype.useLabelDistanceFormatOverrides = false;
+TimeAxis.prototype.hideClippedLabels = true;
 TimeAxis.prototype.minLabelDistanceFormatOverrideDefaults = {
     [TimeFormats.fullDateAndTime]: 150,
     [TimeFormats.shortMonthDate]: 90,

package/build/ui/Format.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Format.d.ts","sourceRoot":"","sources":["../../src/ui/Format.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,GAAG,EAA0D,MAAM,gBAAgB,CAAC;AAMvG,eAAO,MAAM,MAAM,YAAM,CAAC;AAI1B,wBAAgB,4BAA4B,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAOhE;AAED,wBAAgB,gCAAgC,SAuF/C"}
+{"version":3,"file":"Format.d.ts","sourceRoot":"","sources":["../../src/ui/Format.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,GAAG,EAA0D,MAAM,gBAAgB,CAAC;AAMvG,eAAO,MAAM,MAAM,YAAM,CAAC;AAuB1B,wBAAgB,4BAA4B,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAOhE;AAED,wBAAgB,gCAAgC,SA6F/C"}

package/build/ui/Format.js

@@ -1,10 +1,29 @@
 import { Culture, getCurrentCultureCache } from "./Culture";
 import { Format as Fmt, resolveMinMaxFractionDigits, setGetFormatCacheCallback } from "../util/Format";
 import { setGetExpressionCacheCallback } from "../data/Expression";
-import { setGetStringTemplateCacheCallback } from "../data/StringTemplate";
-import { parseDateInvariant } from "../util";
+import { setGetStringTemplateCacheCallback, StringTemplate } from "../data/StringTemplate";
+import { dateQuarter, dayBefore, parseDateInvariant } from "../util";
 import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
 export const Format = Fmt;
+// The `quarter` formatter renders a calendar quarter via a string-template
+// pattern with `{q}` (quarter number), `{yyyy}` and `{yy}` (year) placeholders.
+// Placeholders are case-insensitive (`{Q}`, `{YYYY}`, `{YY}` work too). It lives
+// here rather than in util/Format because it depends on StringTemplate from the
+// data layer, which util/ cannot import. It is registered eagerly since it does
+// not depend on culture settings.
+Fmt.registerFactory("quarter", (fmt, pattern, mode) => {
+    let exclusive = mode === "exclusive" || mode === "ex" || mode === "e";
+    let template = StringTemplate.get(pattern || "Q{q} {yyyy}");
+    return (value) => {
+        let date = parseDateInvariant(value);
+        if (exclusive)
+            date = dayBefore(date);
+        let q = dateQuarter(date);
+        let yyyy = date.getFullYear();
+        let yy = String(yyyy % 100).padStart(2, "0");
+        return template({ q, Q: q, yyyy, YYYY: yyyy, yy, YY: yy });
+    };
+});
 let cultureSensitiveFormatsRegistered = false;
 export function resolveNumberFormattingFlags(flags) {
     if (!flags)
@@ -74,6 +93,11 @@ export function enableCultureSensitiveFormatting() {
         let formatter = culture.getFormatter(format);
         return (value) => formatter.format(parseDateInvariant(value));
     });
+    Fmt.registerFactory(["dayBefore", "daybefore"], (fmt, format = "yyyyMd hhmm") => {
+        let culture = Culture.getDateTimeCulture();
+        let formatter = culture.getFormatter(format);
+        return (value) => formatter.format(dayBefore(parseDateInvariant(value)));
+    });
     setGetFormatCacheCallback(() => {
         let cache = getCurrentCultureCache();
         if (!cache.formatCache)

package/build/util/Format.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Format.d.ts","sourceRoot":"","sources":["../../src/util/Format.ts"],"names":[],"mappings":"AAUA,KAAK,SAAS,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC;AAsMxC,wBAAgB,yBAAyB,CAAC,QAAQ,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAI,CAEzF;AAWD,qBAAa,MAAM;IAChB,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM;IAK5C,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS;IAIvC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,SAAS,EAAE,SAAS,GAAG,IAAI;IAItE,MAAM,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,SAAS,GAAG,IAAI;CAIjG;AAED,wBAAgB,2BAA2B,CACxC,qBAAqB,EAAE,MAAM,EAC7B,qBAAqB,EAAE,MAAM,GAC7B;IAAE,qBAAqB,EAAE,MAAM,CAAC;IAAC,qBAAqB,EAAE,MAAM,CAAA;CAAE,CAclE;AAED,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAMlE"}
+{"version":3,"file":"Format.d.ts","sourceRoot":"","sources":["../../src/util/Format.ts"],"names":[],"mappings":"AAWA,KAAK,SAAS,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC;AA4MxC,wBAAgB,yBAAyB,CAAC,QAAQ,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAI,CAEzF;AAWD,qBAAa,MAAM;IAChB,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM;IAK5C,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS;IAIvC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,SAAS,EAAE,SAAS,GAAG,IAAI;IAItE,MAAM,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,SAAS,GAAG,IAAI;CAIjG;AAED,wBAAgB,2BAA2B,CACxC,qBAAqB,EAAE,MAAM,EAC7B,qBAAqB,EAAE,MAAM,GAC7B;IAAE,qBAAqB,EAAE,MAAM,CAAC;IAAC,qBAAqB,EAAE,MAAM,CAAA;CAAE,CAclE;AAED,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAMlE"}

package/build/util/Format.js

@@ -5,6 +5,7 @@ import { isUndefined } from "../util/isUndefined";
 import { isArray } from "../util/isArray";
 import { capitalize } from "./capitalize";
 import { parseDateInvariant } from "./date/parseDateInvariant";
+import { dayBefore } from "./date/dayBefore";
 const defaultFormatter = (v) => v.toString();
 let formatFactory = {
     string: function () {
@@ -76,6 +77,10 @@ let formatFactory = {
         let time = formatFactory.time();
         return (value) => date(value) + " " + time(value);
     },
+    dayBefore: function () {
+        let datetime = formatFactory.datetime();
+        return (value) => datetime(dayBefore(parseDateInvariant(value)));
+    },
     ellipsis: function (part0, length, where) {
         length = Number(length);
         if (!(length > 3))
@@ -142,6 +147,7 @@ formatFactory.ps = formatFactory.percentageSign;
 formatFactory.d = formatFactory.date;
 formatFactory.t = formatFactory.time;
 formatFactory.dt = formatFactory.datetime;
+formatFactory.daybefore = formatFactory.dayBefore;
 formatFactory.zeropad = formatFactory.zeroPad;
 formatFactory.leftpad = formatFactory.leftPad;
 formatFactory.capitalize = formatFactory.capitalize;

package/build/util/date/dateQuarter.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns the calendar quarter (1-4) the given date falls in.
+ * @param date
+ * @returns {number}
+ */
+export declare function dateQuarter(date: Date): number;
+//# sourceMappingURL=dateQuarter.d.ts.map

package/build/util/date/dateQuarter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateQuarter.d.ts","sourceRoot":"","sources":["../../../src/util/date/dateQuarter.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAE9C"}

package/build/util/date/dateQuarter.js

@@ -0,0 +1,8 @@
+/**
+ * Returns the calendar quarter (1-4) the given date falls in.
+ * @param date
+ * @returns {number}
+ */
+export function dateQuarter(date) {
+    return Math.floor(date.getMonth() / 3) + 1;
+}

package/build/util/date/dayBefore.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Returns a new `Date` representing the calendar day before the given date,
+ * keeping the same time of day. Month and year boundaries are handled
+ * automatically. The input is not mutated.
+ *
+ * Useful for displaying the exclusive end of a date range as an inclusive
+ * value, e.g. a period ending at `2021-01-01` shown as `Dec 2020`.
+ * @param date
+ * @returns {Date}
+ */
+export declare function dayBefore(date: Date): Date;
+//# sourceMappingURL=dayBefore.d.ts.map

package/build/util/date/dayBefore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dayBefore.d.ts","sourceRoot":"","sources":["../../../src/util/date/dayBefore.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAI1C"}

package/build/util/date/dayBefore.js

@@ -0,0 +1,15 @@
+/**
+ * Returns a new `Date` representing the calendar day before the given date,
+ * keeping the same time of day. Month and year boundaries are handled
+ * automatically. The input is not mutated.
+ *
+ * Useful for displaying the exclusive end of a date range as an inclusive
+ * value, e.g. a period ending at `2021-01-01` shown as `Dec 2020`.
+ * @param date
+ * @returns {Date}
+ */
+export function dayBefore(date) {
+    let result = new Date(date.getTime());
+    result.setDate(result.getDate() - 1);
+    return result;
+}

package/build/util/date/index.d.ts

@@ -1,4 +1,6 @@
 export * from "./dateDiff";
+export * from "./dateQuarter";
+export * from "./dayBefore";
 export * from "./zeroTime";
 export * from "./monthStart";
 export * from "./lowerBoundCheck";

package/build/util/date/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/util/date/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/util/date/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC"}

package/build/util/date/index.js

@@ -1,4 +1,6 @@
 export * from "./dateDiff";
+export * from "./dateQuarter";
+export * from "./dayBefore";
 export * from "./zeroTime";
 export * from "./monthStart";
 export * from "./lowerBoundCheck";

package/build/widgets/form/DateTimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/widgets/form/DateTimePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAQ,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAO/C,qBAAa,cAAe,SAAQ,MAAM;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC;IAC9F,SAAS,EAAE,MAAM,CAAC;IAE1B,WAAW,CAAC,GAAG,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,IAAI;IAMrD,MAAM,CAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS;CAWrF"}
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/widgets/form/DateTimePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAQ,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAO/C,qBAAa,cAAe,SAAQ,MAAM;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC,CAAC;IACrD,QAAQ,CAAC,EACpB,MAAM,GACN,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC;IAC/D,SAAS,EAAE,MAAM,CAAC;IAE1B,WAAW,CAAC,GAAG,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,IAAI;IAMrD,MAAM,CACJ,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,MAAM,GACV,KAAK,CAAC,SAAS;CAWnB"}

package/build/widgets/form/DateTimePicker.js

@@ -24,18 +24,27 @@ DateTimePicker.prototype.size = 3;
 DateTimePicker.prototype.autoFocus = false;
 DateTimePicker.prototype.segment = "datetime";
 DateTimePicker.prototype.showSeconds = false;
+// Builds the option spans for a numeric wheel — one zero-padded span per value.
+// Pass the result to a WheelComponent with `cycle` set to make it scroll
+// endlessly; centre the current value by passing `index = value + range`.
+function buildNumberWheel(range, startAt) {
+    return Array.from({ length: range }, (_, j) => (_jsx("span", { children: String(j + startAt).padStart(2, "0") }, j)));
+}
 class DateTimePickerComponent extends VDOM.Component {
     el;
     keyDownPipes;
     constructor(props) {
         super(props);
-        let date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
+        let date = props.data.value
+            ? parseDateInvariant(props.data.value)
+            : new Date();
         if (isNaN(date.getTime()))
             date = new Date();
         this.state = {
             date: date,
             activeWheel: null,
         };
+        this.century = (date.getFullYear() / 100) | 0;
         let { widget } = props.instance;
         let pickerWidget = widget;
         this.handleChange = this.handleChange.bind(this);
@@ -55,7 +64,9 @@ class DateTimePickerComponent extends VDOM.Component {
         this.keyDownPipes = {};
     }
     UNSAFE_componentWillReceiveProps(props) {
-        let date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
+        let date = props.data.value
+            ? parseDateInvariant(props.data.value)
+            : new Date();
         if (isNaN(date.getTime()))
             date = new Date();
         this.setState({ date });
@@ -98,75 +109,86 @@ class DateTimePickerComponent extends VDOM.Component {
         let date = this.state.date;
         let culture = Culture.getDateTimeCulture();
         let monthNames = culture.getMonthNames("short");
-        let years = [];
-        for (let y = 1970; y <= 2050; y++)
-            years.push(_jsx("span", { children: y }, y));
-        let days = [];
-        let start = new Date(date.getFullYear(), date.getMonth(), 1);
-        while (start.getMonth() === date.getMonth()) {
-            let day = start.getDate();
-            days.push(_jsx("span", { children: day < 10 ? "0" + day : day }, day));
-            start.setDate(start.getDate() + 1);
-        }
-        let hours = [];
-        for (let h = 0; h < 24; h++) {
-            hours.push(_jsx("span", { children: h < 10 ? "0" + h : h }, h));
+        // Years: a window spanning the current century, rebuilt when it changes.
+        let currentCentury = (date.getFullYear() / 100) | 0;
+        if (!this.years || this.century !== currentCentury) {
+            this.century = currentCentury;
+            this.firstYear = currentCentury * 100 - 3;
+            let lastYear = (currentCentury + 1) * 100 + 5;
+            this.years = [];
+            for (let y = this.firstYear; y <= lastYear; y++)
+                this.years.push(_jsx("span", { children: y }, y));
         }
-        let minutes = [];
-        for (let m = 0; m < 60; m++) {
-            minutes.push(_jsx("span", { children: m < 10 ? "0" + m : m }, m));
+        let years = this.years;
+        // Day/hour/minute wheels use a 3x buffer (see buildNumberWheel). The day
+        // buffer depends on the month length, so it is rebuilt when that changes.
+        const numberOfDaysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+        if (!this.days || this.numberOfDaysInMonth !== numberOfDaysInMonth) {
+            this.numberOfDaysInMonth = numberOfDaysInMonth;
+            this.days = buildNumberWheel(numberOfDaysInMonth, 1);
         }
+        let days = this.days;
+        if (!this.hours)
+            this.hours = buildNumberWheel(24, 0);
+        let hours = this.hours;
+        if (!this.minutes)
+            this.minutes = buildNumberWheel(60, 0);
+        let minutes = this.minutes;
         return (_jsxs("div", { tabIndex: 0, ref: (el) => {
                 this.el = el;
-            }, className: data.classNames, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, children: [this.wheels.year && (_jsx(WheelComponent, { size: size, CSS: CSS, active: this.state.activeWheel === "year", baseClass: baseClass + "-wheel", index: date.getFullYear() - 1970, onChange: (newIndex) => {
+            }, className: data.classNames, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, children: [this.wheels.year && (_jsx(WheelComponent, { size: size, CSS: CSS, active: this.state.activeWheel === "year", baseClass: baseClass + "-wheel", index: date.getFullYear() - this.firstYear, onChange: (newIndex) => {
                         this.setState((state) => ({
-                            date: this.setDateComponent(this.state.date, "year", newIndex + 1970),
+                            date: this.setDateComponent(state.date, "year", newIndex + this.firstYear),
                         }), this.handleChange);
                     }, onPipeKeyDown: (kd) => {
                         this.keyDownPipes["year"] = kd;
                     }, onMouseDown: () => {
                         this.setState({ activeWheel: "year" });
-                    }, children: years })), this.wheels.year && this.wheels.month && _jsx("span", { children: "-" }), this.wheels.month && (_jsx(WheelComponent, { size: size, CSS: CSS, active: this.state.activeWheel === "month", baseClass: baseClass + "-wheel", index: date.getMonth(), onChange: (newIndex) => {
+                    }, children: years }, `years-${this.century}`)), this.wheels.year && this.wheels.month && _jsx("span", { children: "-" }), this.wheels.month && (_jsx(WheelComponent, { size: size, CSS: CSS, active: this.state.activeWheel === "month", baseClass: baseClass + "-wheel", index: date.getMonth(), onChange: (newIndex) => {
                         this.setState((state) => ({
-                            date: this.setDateComponent(this.state.date, "month", newIndex),
+                            date: this.setDateComponent(state.date, "month", newIndex),
                         }), this.handleChange);
                     }, onPipeKeyDown: (kd) => {
                         this.keyDownPipes["month"] = kd;
                     }, onMouseDown: () => {
                         this.setState({ activeWheel: "month" });
-                    }, children: monthNames.map((m, i) => (_jsx("span", { children: m }, i))) })), this.wheels.month && this.wheels.date && _jsx("span", { children: "-" }), this.wheels.date && (_jsx(WheelComponent, { size: size, CSS: CSS, active: this.state.activeWheel === "date", baseClass: baseClass + "-wheel", index: date.getDate() - 1, onChange: (newIndex) => {
+                    }, children: monthNames.map((m, i) => (_jsx("span", { children: m }, i))) })), this.wheels.month && this.wheels.date && _jsx("span", { children: "-" }), this.wheels.date && (_jsx(WheelComponent, { size: size, CSS: CSS, cycle: true, active: this.state.activeWheel === "date", baseClass: baseClass + "-wheel", index: date.getDate() - 1 + this.numberOfDaysInMonth, onChange: (rawIndex) => {
+                        let day = rawIndex % this.numberOfDaysInMonth;
                         this.setState((state) => ({
-                            date: this.setDateComponent(this.state.date, "date", newIndex + 1),
+                            date: this.setDateComponent(state.date, "date", day + 1),
                         }), this.handleChange);
                     }, onPipeKeyDown: (kd) => {
                         this.keyDownPipes["date"] = kd;
                     }, onMouseDown: () => {
                         this.setState({ activeWheel: "date" });
-                    }, children: days })), this.wheels.hours && this.wheels.year && _jsx("span", { className: CSS.element(baseClass, "spacer") }), this.wheels.hours && (_jsx(WheelComponent, { size: size, CSS: CSS, active: this.state.activeWheel === "hours", baseClass: baseClass + "-wheel", index: date.getHours(), onChange: (newIndex) => {
+                    }, children: days }, "date")), this.wheels.hours && this.wheels.year && (_jsx("span", { className: CSS.element(baseClass, "spacer") })), this.wheels.hours && (_jsx(WheelComponent, { size: size, CSS: CSS, cycle: true, active: this.state.activeWheel === "hours", baseClass: baseClass + "-wheel", index: date.getHours() + 24, onChange: (rawIndex) => {
+                        let hour = rawIndex % 24;
                         this.setState((state) => ({
-                            date: this.setDateComponent(this.state.date, "hours", newIndex),
+                            date: this.setDateComponent(state.date, "hours", hour),
                         }), this.handleChange);
                     }, onPipeKeyDown: (kd) => {
                         this.keyDownPipes["hours"] = kd;
                     }, onMouseDown: () => {
                         this.setState({ activeWheel: "hours" });
-                    }, children: hours })), this.wheels.hours && this.wheels.minutes && _jsx("span", { children: ":" }), this.wheels.minutes && (_jsx(WheelComponent, { size: size, CSS: CSS, baseClass: baseClass + "-wheel", active: this.state.activeWheel === "minutes", index: date.getMinutes(), onChange: (newIndex) => {
+                    }, children: hours }, "hours")), this.wheels.hours && this.wheels.minutes && _jsx("span", { children: ":" }), this.wheels.minutes && (_jsx(WheelComponent, { size: size, CSS: CSS, cycle: true, baseClass: baseClass + "-wheel", active: this.state.activeWheel === "minutes", index: date.getMinutes() + 60, onChange: (rawIndex) => {
+                        let minute = rawIndex % 60;
                         this.setState((state) => ({
-                            date: this.setDateComponent(this.state.date, "minutes", newIndex),
+                            date: this.setDateComponent(state.date, "minutes", minute),
                         }), this.handleChange);
                     }, onPipeKeyDown: (kd) => {
                         this.keyDownPipes["minutes"] = kd;
                     }, onMouseDown: () => {
                         this.setState({ activeWheel: "minutes" });
-                    }, children: minutes })), this.wheels.minutes && this.wheels.seconds && _jsx("span", { children: ":" }), this.wheels.seconds && (_jsx(WheelComponent, { size: size, CSS: CSS, baseClass: baseClass + "-wheel", active: this.state.activeWheel === "seconds", index: date.getSeconds(), onChange: (newIndex) => {
+                    }, children: minutes }, "minutes")), this.wheels.minutes && this.wheels.seconds && _jsx("span", { children: ":" }), this.wheels.seconds && (_jsx(WheelComponent, { size: size, CSS: CSS, cycle: true, baseClass: baseClass + "-wheel", active: this.state.activeWheel === "seconds", index: date.getSeconds() + 60, onChange: (rawIndex) => {
+                        let second = rawIndex % 60;
                         this.setState((state) => ({
-                            date: this.setDateComponent(this.state.date, "seconds", newIndex),
+                            date: this.setDateComponent(state.date, "seconds", second),
                         }), this.handleChange);
                     }, onPipeKeyDown: (kd) => {
                         this.keyDownPipes["seconds"] = kd;
                     }, onMouseDown: () => {
                         this.setState({ activeWheel: "seconds" });
-                    }, children: minutes }))] }));
+                    }, children: minutes }, "seconds"))] }));
     }
     componentDidMount() {
         let { widget } = this.props.instance;

package/build/widgets/form/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/widgets/form/Field.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/widgets/form/Field.tsx"],"names":[],"mappings":"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"}

package/build/widgets/form/Field.js

@@ -124,6 +124,7 @@ export class Field extends PureContainerBase {
         data._readOnly = data.readOnly;
         data._viewMode = data.mode === "view" || data.viewMode;
         data._tabOnEnterKey = data.tabOnEnterKey;
+        data._visited = data.visited;
         data.validationValue = this.getValidationValue(data);
         instance.parentDisabled = context.parentDisabled;
         instance.parentReadOnly = context.parentReadOnly;
@@ -148,7 +149,7 @@ export class Field extends PureContainerBase {
         data.readOnly = coalesce(context.parentStrict ? context.parentReadOnly : null, data._readOnly, context.parentReadOnly);
         data.viewMode = coalesce(context.parentStrict ? context.parentViewMode : null, data._viewMode, context.parentViewMode);
         data.tabOnEnterKey = coalesce(context.parentStrict ? context.parentTabOnEnterKey : null, data._tabOnEnterKey, context.parentTabOnEnterKey);
-        data.visited = coalesce(context.parentStrict ? context.parentVisited : null, data.visited, context.parentVisited);
+        data.visited = coalesce(context.parentStrict ? context.parentVisited : null, data._visited, context.parentVisited);
         if (!data.error && !data.disabled && !data.viewMode)
             this.validate(context, instance);
         if (data.visited && !state?.visited) {

package/build/widgets/form/Wheel.d.ts

@@ -19,6 +19,9 @@ export declare class Wheel extends PureContainerBase<WheelConfig> {
     declareData(...args: Record<string, unknown>[]): void;
     render(context: RenderingContext, instance: Instance, key: string): React.ReactNode;
 }
+/** A cyclic wheel renders its option list this many times, leaving scroll
+ * headroom on both sides of the centre copy. */
+export declare const WHEEL_BUFFER_COPIES = 3;
 export interface WheelComponentProps {
     size: number;
     children: React.ReactNode[];
@@ -28,6 +31,11 @@ export interface WheelComponentProps {
     className?: string;
     style?: React.CSSProperties;
     index?: number;
+    /** Set to render the option list as an endlessly scrolling wheel. The list
+     * is rendered `WHEEL_BUFFER_COPIES` times and the wheel snaps to whichever
+     * copy of the selected value is nearest its current position, so a wrap
+     * scrolls seamlessly into the adjacent identical copy. */
+    cycle?: boolean;
     onChange: (newIndex: number) => void;
     onPipeKeyDown?: (fn: (e: React.KeyboardEvent) => void) => void;
     onMouseDown?: () => void;

package/build/widgets/form/Wheel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../../src/widgets/form/Wheel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../../src/widgets/form/Wheel.tsx"],"names":[],"mappings":"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"}

package/build/widgets/form/Wheel.js

@@ -27,6 +27,9 @@ export class Wheel extends PureContainerBase {
 Wheel.prototype.baseClass = "wheel";
 Wheel.prototype.size = 3;
 Wheel.prototype.styled = true;
+/** A cyclic wheel renders its option list this many times, leaving scroll
+ * headroom on both sides of the centre copy. */
+export const WHEEL_BUFFER_COPIES = 3;
 export class WheelComponent extends VDOM.Component {
     index;
     wheelEl;
@@ -50,18 +53,25 @@ export class WheelComponent extends VDOM.Component {
     wheelRef;
     scrollRef;
     render() {
-        let { size, children, CSS, baseClass, active, className, style, onMouseDown } = this.props;
+        let { size, children, CSS, baseClass, active, className, style, onMouseDown, cycle } = this.props;
         let optionClass = CSS.element(baseClass, "option");
         let dummyClass = CSS.element(baseClass, "option", { dummy: true });
+        // A cyclic wheel repeats the option list so it can scroll past either end.
+        let options = children;
+        if (cycle) {
+            options = [];
+            for (let i = 0; i < WHEEL_BUFFER_COPIES; i++)
+                options.push(...children);
+        }
         let tpad = [], bpad = [], padSize = 0;
         for (let i = 0; i < (size - 1) / 2; i++) {
-            tpad.push({ key: -1 - i, child: children[0], cls: dummyClass });
-            bpad.push({ key: -100 - i, child: children[0], cls: dummyClass });
+            tpad.push({ key: -1 - i, child: options[0], cls: dummyClass });
+            bpad.push({ key: -100 - i, child: options[0], cls: dummyClass });
             padSize++;
         }
         let displayedOptions = [
             ...tpad,
-            ...children.map((c, i) => ({
+            ...options.map((c, i) => ({
                 key: i,
                 child: c,
                 cls: optionClass,
@@ -102,7 +112,19 @@ export class WheelComponent extends VDOM.Component {
             this.props.onPipeKeyDown(this.onKeyDown);
     }
     UNSAFE_componentWillReceiveProps(props) {
-        this.index = props.index || 0;
+        let newIndex = props.index || 0;
+        // A cyclic wheel renders the option list several times, so the same value
+        // appears in several copies. Snap to the copy nearest the wheel's current
+        // position rather than the one `props.index` names — a wrap then scrolls
+        // one item into the adjacent (identical) copy with no jump, instead of
+        // animating all the way back to the centre copy.
+        if (props.cycle) {
+            let period = props.children.length;
+            let value = ((newIndex % period) + period) % period;
+            newIndex = value + period * Math.round((this.index - value) / period);
+            newIndex = Math.max(0, Math.min(period * WHEEL_BUFFER_COPIES - 1, newIndex));
+        }
+        this.index = newIndex;
         this.scrollTo();
     }
     componentWillUnmount() {
@@ -141,8 +163,9 @@ export class WheelComponent extends VDOM.Component {
         }
     }
     select(newIndex) {
-        let { children } = this.props;
-        newIndex = Math.max(0, Math.min(children.length - 1, newIndex));
+        let { children, cycle } = this.props;
+        let length = children.length * (cycle ? WHEEL_BUFFER_COPIES : 1);
+        newIndex = Math.max(0, Math.min(length - 1, newIndex));
         if (this.index !== newIndex) {
             this.index = newIndex;
             this.props.onChange(newIndex);

package/build/widgets/grid/Grid.d.ts

@@ -259,7 +259,7 @@ export interface GridConfig<T = any> extends StyledContainerConfig {
     /** Callback function to be executed when a column header is right-clicked.  */
     onColumnContextMenu?: string | ((e: React.MouseEvent<any>, columnInstance: Instance) => void);
     /** Callback to create a filter function for given filter params. */
-    onCreateFilter?: (filterParams: any, instance?: Instance) => (record: T) => boolean;
+    onCreateFilter?: (filterParams: any, instance?: Instance) => undefined | null | ((record: T) => boolean);
     /** Enable infinite scrolling */
     infinite?: boolean;
     /** If set, clicking on the column header will loop between ASC, DESC and no sorting order, instead of ASC and DESC only. */