cx 26.4.3 → 26.5.1

package/src/widgets/form/Select.scss

@@ -1,104 +1,104 @@
-@use "sass:math";
-@use "sass:map";
-@use "../variables" as *;
-@use "../maps" as *;
-@use "../../util/scss/add-rules.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-@use "../../util/scss/clockwise.scss" as *;
-@use "../../util/scss/besm.scss" as *;
-@use "../../util/scss/include.scss" as *;
-@use "./Field.scss" as *;
-
-@mixin cx-select(
-   $name: "select",
-   $state-style-map: $cx-std-field-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $empty-text: $cx-empty-text,
-   $width: $cx-default-input-width,
-   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
-   $clear-state-style-map: $cx-clear-state-style-map,
-   $tool-state-style-map: $cx-input-right-icon-state-style-map,
-   $icon-size: $cx-default-input-icon-size,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-   $mod: map.get($besm, mod);
-
-   .#{$block}#{$name} {
-      @include cxb-field($besm, $state-style-map: $state-style-map, $width: $width, $input: true);
-
-      .#{$element}#{$name}-left-icon {
-         pointer-events: none;
-         @include cxe-field-button($besm, $left-icon-state-style-map);
-      }
-   }
-
-   $padding: cx-get-state-rule($state-style-map, default, "padding");
-
-   .#{$element}#{$name}-select {
-      @include cxe-field-input(
-         $besm,
-         $state-style-map,
-         $placeholder: $placeholder,
-         $overrides: (
-            padding: $cx-default-input-padding-top
-               calc(#{$cx-default-input-padding-right} + #{$cx-default-clear-size} - #{$cx-default-input-padding-right})
-               $cx-default-input-padding-bottom $cx-default-input-padding-left,
-            -webkit-appearance: none,
-            -moz-appearance: none,
-            -ms-appearance: none,
-            appearance: none
-         )
-      );
-
-      .#{$state}icon > & {
-         padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
-      }
-
-      .#{$state}empty > & {
-         @include cx-add-rules($placeholder);
-      }
-
-      &::-ms-expand {
-         display: none;
-         margin: 0;
-         padding: 0;
-      }
-
-      option {
-         background-color: $cx-default-dropdown-background-color;
-         color: cx-get-state-rule($state-style-map, default, color);
-      }
-   }
-
-   .#{$element}#{$name}-clear {
-      @include cxe-field-button($besm, $clear-state-style-map);
-   }
-
-   .#{$element}#{$name}-placeholder {
-      @include cx-add-rules($placeholder);
-   }
-
-   .#{$element}#{$name}-tool {
-      pointer-events: none; //cannot call open-dropdown on native element
-      @include cxe-field-button($besm, $tool-state-style-map);
-
-      .#{$state}disabled > & {
-         border-width: 0;
-         @include cx-add-state-rules($state-style-map, disabled);
-      }
-      .#{$state}focus > & {
-         @include cx-add-state-rules($tool-state-style-map, focus);
-      }
-   }
-
-   .#{$element}#{$name}-icon {
-      @include cxe-field-button-icon($besm, $icon-size);
-   }
-}
-
-@if (cx-should-include("cx/widgets/Select")) {
-   @include cx-select;
-}
+@use "sass:math";
+@use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Field.scss" as *;
+
+@mixin cx-select(
+   $name: "select",
+   $state-style-map: $cx-std-field-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $width: $cx-default-input-width,
+   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
+   $clear-state-style-map: $cx-clear-state-style-map,
+   $tool-state-style-map: $cx-input-right-icon-state-style-map,
+   $icon-size: $cx-default-input-icon-size,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$block}#{$name} {
+      @include cxb-field($besm, $state-style-map: $state-style-map, $width: $width, $input: true);
+
+      .#{$element}#{$name}-left-icon {
+         pointer-events: none;
+         @include cxe-field-button($besm, $left-icon-state-style-map);
+      }
+   }
+
+   $padding: cx-get-state-rule($state-style-map, default, "padding");
+
+   .#{$element}#{$name}-select {
+      @include cxe-field-input(
+         $besm,
+         $state-style-map,
+         $placeholder: $placeholder,
+         $overrides: (
+            padding: $cx-default-input-padding-top
+               calc(#{$cx-default-input-padding-right} + #{$cx-default-clear-size} - #{$cx-default-input-padding-right})
+               $cx-default-input-padding-bottom $cx-default-input-padding-left,
+            -webkit-appearance: none,
+            -moz-appearance: none,
+            -ms-appearance: none,
+            appearance: none
+         )
+      );
+
+      .#{$state}icon > & {
+         padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
+      }
+
+      .#{$state}empty > & {
+         @include cx-add-rules($placeholder);
+      }
+
+      &::-ms-expand {
+         display: none;
+         margin: 0;
+         padding: 0;
+      }
+
+      option {
+         background-color: $cx-default-dropdown-background-color;
+         color: cx-get-state-rule($state-style-map, default, color);
+      }
+   }
+
+   .#{$element}#{$name}-clear {
+      @include cxe-field-button($besm, $clear-state-style-map);
+   }
+
+   .#{$element}#{$name}-placeholder {
+      @include cx-add-rules($placeholder);
+   }
+
+   .#{$element}#{$name}-tool {
+      pointer-events: none; //cannot call open-dropdown on native element
+      @include cxe-field-button($besm, $tool-state-style-map);
+
+      .#{$state}disabled > & {
+         border-width: 0;
+         @include cx-add-state-rules($state-style-map, disabled);
+      }
+      .#{$state}focus > & {
+         @include cx-add-state-rules($tool-state-style-map, focus);
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      @include cxe-field-button-icon($besm, $icon-size);
+   }
+}
+
+@if (cx-should-include("cx/widgets/Select")) {
+   @include cx-select;
+}

package/src/widgets/form/TextField.scss

@@ -1,66 +1,66 @@
-@use "sass:math";
-@use "sass:map";
-@use "../variables" as *;
-@use "../maps" as *;
-@use "../../util/scss/add-rules.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-@use "../../util/scss/clockwise.scss" as *;
-@use "../../util/scss/besm.scss" as *;
-@use "../../util/scss/include.scss" as *;
-@use "./Field.scss" as *;
-
-@mixin cx-textfield(
-   $name: "textfield",
-   $state-style-map: $cx-std-field-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $empty-text: $cx-empty-text,
-   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
-   $clear-state-style-map: $cx-clear-state-style-map,
-   $icon-size: $cx-default-input-icon-size,
-   $width: $cx-default-input-width,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-   $mod: map.get($besm, mod);
-
-   .#{$block}#{$name} {
-      @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
-   }
-
-   $padding: cx-get-state-rule($state-style-map, default, "padding");
-
-   .#{$element}#{$name}-input {
-      @include cxe-field-input($besm, $state-style-map, $placeholder: $placeholder);
-
-      .#{$state}icon > & {
-         padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
-      }
-
-      .#{$state}clear > & {
-         padding-right: cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing);
-      }
-   }
-
-   .#{$element}#{$name}-left-icon {
-      pointer-events: none;
-      @include cxe-field-button($besm, $left-icon-state-style-map);
-   }
-
-   .#{$element}#{$name}-clear {
-      @include cxe-field-button($besm, $clear-state-style-map);
-   }
-
-   .#{$element}#{$name}-icon {
-      @include cxe-field-button-icon($besm, $icon-size);
-   }
-
-   .#{$element}#{$name}-empty-text {
-      @include cxe-field-empty-text($empty-text);
-   }
-}
-
-@if (cx-should-include("cx/widgets/TextField")) {
-   @include cx-textfield();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Field.scss" as *;
+
+@mixin cx-textfield(
+   $name: "textfield",
+   $state-style-map: $cx-std-field-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
+   $clear-state-style-map: $cx-clear-state-style-map,
+   $icon-size: $cx-default-input-icon-size,
+   $width: $cx-default-input-width,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$block}#{$name} {
+      @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
+   }
+
+   $padding: cx-get-state-rule($state-style-map, default, "padding");
+
+   .#{$element}#{$name}-input {
+      @include cxe-field-input($besm, $state-style-map, $placeholder: $placeholder);
+
+      .#{$state}icon > & {
+         padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
+      }
+
+      .#{$state}clear > & {
+         padding-right: cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing);
+      }
+   }
+
+   .#{$element}#{$name}-left-icon {
+      pointer-events: none;
+      @include cxe-field-button($besm, $left-icon-state-style-map);
+   }
+
+   .#{$element}#{$name}-clear {
+      @include cxe-field-button($besm, $clear-state-style-map);
+   }
+
+   .#{$element}#{$name}-icon {
+      @include cxe-field-button-icon($besm, $icon-size);
+   }
+
+   .#{$element}#{$name}-empty-text {
+      @include cxe-field-empty-text($empty-text);
+   }
+}
+
+@if (cx-should-include("cx/widgets/TextField")) {
+   @include cx-textfield();
+}

package/src/widgets/form/ValidationGroup.spec.tsx

@@ -1,8 +1,9 @@
 import { Store } from "../../data/Store";
 import { ValidationGroup } from "./ValidationGroup";
 import { Validator } from "./Validator";
+import { TextField } from "./TextField";
 import { bind } from "../../ui/bind";
-import { createTestRenderer } from "../../util/test/createTestRenderer";
+import { createTestRenderer, act } from "../../util/test/createTestRenderer";
 
 import assert from "assert";
 
@@ -107,6 +108,34 @@ describe("ValidationGroup", () => {
       assert(visited);
    });
 
+   it("visited flag changes are propagated to fields after being initialized to false", async () => {
+      let widget = (
+         <cx>
+            <ValidationGroup errors={bind("errors")} visited={bind("form.visited")}>
+               <TextField required value={bind("value1")} />
+            </ValidationGroup>
+         </cx>
+      );
+
+      let store = new Store();
+      //initializing the bound value to false used to shadow later updates
+      store.set("form.visited", false);
+
+      const component = await createTestRenderer(store, widget);
+
+      let errors = store.get("errors");
+      assert.equal(errors.length, 1);
+      assert.equal(errors[0].visited, false);
+
+      await act(async () => {
+         store.set("form.visited", true);
+      });
+
+      errors = store.get("errors");
+      assert.equal(errors.length, 1);
+      assert.equal(errors[0].visited, true);
+   });
+
    it("disabled flag can be overruled by the field props", async () => {
       let widget = (
          <cx>

package/src/widgets/form/Wheel.tsx

@@ -65,6 +65,10 @@ 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 interface WheelComponentProps {
    size: number;
    children: React.ReactNode[];
@@ -74,6 +78,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;
@@ -109,23 +118,30 @@ export class WheelComponent extends VDOM.Component<WheelComponentProps, WheelCom
    scrollRef: (el: HTMLDivElement | null) => void;
 
    render(): React.ReactNode {
-      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,
@@ -228,7 +244,19 @@ export class WheelComponent extends VDOM.Component<WheelComponentProps, WheelCom
    }
 
    UNSAFE_componentWillReceiveProps(props: WheelComponentProps): void {
-      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();
    }
 
@@ -272,8 +300,9 @@ export class WheelComponent extends VDOM.Component<WheelComponentProps, WheelCom
    }
 
    select(newIndex: number): void {
-      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/src/widgets/grid/Grid.tsx

@@ -405,7 +405,7 @@ export interface GridConfig<T = any> extends StyledContainerConfig {
    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;