cx 25.5.2 → 25.6.0

package/src/widgets/form/Calendar.d.ts

@@ -1,86 +1,86 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface DayInfo {
-   mod?: string;
-   className?: string;
-   style?: Cx.Record;
-   unselectable?: boolean;
-   disabled?: boolean;
-}
-
-interface DayData {
-   [day: string]: DayInfo;
-}
-
-interface CalendarProps extends FieldProps {
-   /** Selected date. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
-   value?: Cx.Prop<string | Date>;
-
-   /** View reference date. If no date is selected, this date is used to determine which month to show in the calendar. */
-   refDate?: Cx.Prop<string | Date>;
-
-   /** Minimum date value. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
-   minValue?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
-   minExclusive?: Cx.BooleanProp;
-
-   /** Maximum date value. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
-   maxValue?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
-   maxExclusive?: Cx.BooleanProp;
-
-   /** Base CSS class to be applied to the calendar. Defaults to `calendar`. */
-   baseClass?: string;
-
-   /** Highlight today's date. Default is true. */
-   highlightToday?: boolean;
-
-   /** Maximum value error text. */
-   maxValueErrorText?: string;
-
-   /** Maximum exclusive value error text. */
-   maxExclusiveErrorText?: string;
-
-   /** Minimum value error text. */
-   minValueErrorText?: string;
-
-   /** Minimum exclusive value error text. */
-   minExclusiveErrorText?: string;
-
-   /** The function that will be used to convert Date objects before writing data to the store.
-    * Default implementation is Date.toISOString.
-    * See also Culture.setDefaultDateEncoding.
-    */
-   encoding?: (date: Date) => any;
-
-   /** Set to true to show the button for quickly selecting today's date.  */
-   showTodayButton?: boolean;
-
-   /** Localizable text for the todayButton. Defaults to `"Today"`. */
-   todayButtonText?: string;
-
-   /**  Defines which days of week should be displayed as disabled, i.e. `[0, 6]` will make Sunday and Saturday unselectable. */
-   disabledDaysOfWeek?: number[];
-
-   /** Set to true to show weeks starting from Monday. */
-   startWithMonday?: boolean;
-
-   /** Map of days to additional day information such as style, className, mod, unselectable and disabled.
-    * Keys for the map should be created with date.toDateString().
-    * Example. {
-    *    [new Date().toDateString()]: {
-    *       style: "color: red",
-    *       className: 'test-class',
-    *       mod: 'holiday',
-    *       unselectable: false,
-    *       disabled: false
-    *    }
-    * }
-    */
-   dayData?: Cx.Prop<DayData>;
-}
-
-export class Calendar extends Cx.Widget<CalendarProps> {}
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
+
+interface DayInfo {
+   mod?: string;
+   className?: string;
+   style?: Cx.Record;
+   unselectable?: boolean;
+   disabled?: boolean;
+}
+
+interface DayData {
+   [day: string]: DayInfo;
+}
+
+interface CalendarProps extends FieldProps {
+   /** Selected date. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
+   value?: Cx.Prop<string | Date>;
+
+   /** View reference date. If no date is selected, this date is used to determine which month to show in the calendar. */
+   refDate?: Cx.Prop<string | Date>;
+
+   /** Minimum date value. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
+   minValue?: Cx.Prop<string | Date>;
+
+   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
+   minExclusive?: Cx.BooleanProp;
+
+   /** Maximum date value. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
+   maxValue?: Cx.Prop<string | Date>;
+
+   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
+   maxExclusive?: Cx.BooleanProp;
+
+   /** Base CSS class to be applied to the calendar. Defaults to `calendar`. */
+   baseClass?: string;
+
+   /** Highlight today's date. Default is true. */
+   highlightToday?: boolean;
+
+   /** Maximum value error text. */
+   maxValueErrorText?: string;
+
+   /** Maximum exclusive value error text. */
+   maxExclusiveErrorText?: string;
+
+   /** Minimum value error text. */
+   minValueErrorText?: string;
+
+   /** Minimum exclusive value error text. */
+   minExclusiveErrorText?: string;
+
+   /** The function that will be used to convert Date objects before writing data to the store.
+    * Default implementation is Date.toISOString.
+    * See also Culture.setDefaultDateEncoding.
+    */
+   encoding?: (date: Date) => any;
+
+   /** Set to true to show the button for quickly selecting today's date.  */
+   showTodayButton?: boolean;
+
+   /** Localizable text for the todayButton. Defaults to `"Today"`. */
+   todayButtonText?: string;
+
+   /**  Defines which days of week should be displayed as disabled, i.e. `[0, 6]` will make Sunday and Saturday unselectable. */
+   disabledDaysOfWeek?: number[];
+
+   /** Set to true to show weeks starting from Monday. */
+   startWithMonday?: boolean;
+
+   /** Map of days to additional day information such as style, className, mod, unselectable and disabled.
+    * Keys for the map should be created with date.toDateString().
+    * Example. {
+    *    [new Date().toDateString()]: {
+    *       style: "color: red",
+    *       className: 'test-class',
+    *       mod: 'holiday',
+    *       unselectable: false,
+    *       disabled: false
+    *    }
+    * }
+    */
+   dayData?: Cx.Prop<DayData>;
+}
+
+export class Calendar extends Cx.Widget<CalendarProps> {}

package/src/widgets/form/Checkbox.js

@@ -1,203 +1,203 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Field, getFieldTooltip } from "./Field";
-import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { KeyCode } from "../../util/KeyCode";
-import CheckIcon from "../icons/check";
-import SquareIcon from "../icons/square";
-
-export class Checkbox extends Field {
-   init() {
-      if (this.checked) this.value = this.checked;
-
-      super.init();
-   }
-
-   declareData() {
-      super.declareData(
-         {
-            value: !this.indeterminate ? false : undefined,
-            text: undefined,
-            readOnly: undefined,
-            disabled: undefined,
-            enabled: undefined,
-            required: undefined,
-            viewText: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   renderWrap(context, instance, key, content) {
-      let { data } = instance;
-      return (
-         <label
-            key={key}
-            className={data.classNames}
-            onMouseDown={(e) => {
-               e.stopPropagation();
-               if (this.unfocusable) e.preventDefault();
-            }}
-            onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
-            onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
-            onClick={(e) => {
-               this.handleClick(e, instance);
-            }}
-            style={data.style}
-         >
-            {content}
-            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-         </label>
-      );
-   }
-
-   validateRequired(context, instance) {
-      let { data } = instance;
-      if (!data.value) return this.requiredText;
-   }
-
-   renderNativeCheck(context, instance) {
-      let { CSS, baseClass } = this;
-      let { data } = instance;
-      return (
-         <input
-            key="input"
-            className={CSS.element(baseClass, "checkbox")}
-            id={data.id}
-            type="checkbox"
-            checked={data.value || false}
-            disabled={data.disabled}
-            {...data.inputAttrs}
-            onClick={stopPropagation}
-            onChange={(e) => {
-               this.handleChange(e, instance);
-            }}
-         />
-      );
-   }
-
-   renderCheck(context, instance) {
-      return <CheckboxCmp key="check" instance={instance} data={instance.data} />;
-   }
-
-   renderInput(context, instance, key) {
-      let { data } = instance;
-      let text = data.text || this.renderChildren(context, instance);
-      let { CSS, baseClass } = this;
-      return this.renderWrap(context, instance, key, [
-         this.native ? this.renderNativeCheck(context, instance) : this.renderCheck(context, instance),
-         text ? (
-            <div key="text" className={CSS.element(baseClass, "text")}>
-               {text}
-            </div>
-         ) : (
-            <span key="baseline" className={CSS.element(baseClass, "baseline")}>
-               &nbsp;
-            </span>
-         ),
-      ]);
-   }
-
-   renderValue(context, { data }) {
-      if (!data.viewText) return super.renderValue(...arguments);
-      return <span className={this.CSS.element(this.baseClass, "view-text")}>{data.viewText}</span>;
-   }
-
-   formatValue(context, instance) {
-      let { data } = instance;
-      return data.value && (data.text || this.renderChildren(context, instance));
-   }
-
-   handleClick(e, instance) {
-      if (this.native) e.stopPropagation();
-      else {
-         var el = document.getElementById(instance.data.id);
-         if (el) el.focus();
-         if (!instance.data.viewMode) {
-            e.preventDefault();
-            e.stopPropagation();
-            this.handleChange(e, instance, !instance.data.value);
-         }
-      }
-   }
-
-   handleChange(e, instance, checked) {
-      let { data } = instance;
-
-      if (data.readOnly || data.disabled || data.viewMode) return;
-
-      instance.set("value", checked != null ? checked : e.target.checked);
-   }
-}
-
-Checkbox.prototype.baseClass = "checkbox";
-Checkbox.prototype.native = false;
-Checkbox.prototype.indeterminate = false;
-Checkbox.prototype.unfocusable = false;
-
-Widget.alias("checkbox", Checkbox);
-
-class CheckboxCmp extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         value: props.data.value,
-      };
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      this.setState({
-         value: props.data.value,
-      });
-   }
-
-   render() {
-      let { instance, data } = this.props;
-      let { widget } = instance;
-      let { baseClass, CSS } = widget;
-
-      let check = false;
-
-      if (this.state.value == null && widget.indeterminate) check = "indeterminate";
-      else if (this.state.value) check = "check";
-
-      return (
-         <span
-            key="check"
-            tabIndex={widget.unfocusable || data.disabled ? null : data.tabIndex || 0}
-            className={CSS.element(baseClass, "input", {
-               checked: check,
-            })}
-            style={CSS.parseStyle(data.inputStyle)}
-            id={data.id}
-            onClick={this.onClick.bind(this)}
-            onKeyDown={this.onKeyDown.bind(this)}
-         >
-            {check == "check" && <CheckIcon className={CSS.element(baseClass, "input-check")} />}
-            {check == "indeterminate" && <SquareIcon className={CSS.element(baseClass, "input-check")} />}
-         </span>
-      );
-   }
-
-   onClick(e) {
-      let { instance, data } = this.props;
-      let { widget } = instance;
-      if (!data.disabled && !data.readOnly) {
-         e.stopPropagation();
-         e.preventDefault();
-         this.setState({ value: !this.state.value });
-         widget.handleChange(e, instance, !this.state.value);
-      }
-   }
-
-   onKeyDown(e) {
-      let { instance } = this.props;
-      if (instance.widget.handleKeyDown(e, instance) === false) return;
-
-      switch (e.keyCode) {
-         case KeyCode.space:
-            this.onClick(e);
-            break;
-      }
-   }
-}
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { Field, getFieldTooltip } from "./Field";
+import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { KeyCode } from "../../util/KeyCode";
+import CheckIcon from "../icons/check";
+import SquareIcon from "../icons/square";
+
+export class Checkbox extends Field {
+   init() {
+      if (this.checked) this.value = this.checked;
+
+      super.init();
+   }
+
+   declareData() {
+      super.declareData(
+         {
+            value: !this.indeterminate ? false : undefined,
+            text: undefined,
+            readOnly: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            required: undefined,
+            viewText: undefined,
+         },
+         ...arguments,
+      );
+   }
+
+   renderWrap(context, instance, key, content) {
+      let { data } = instance;
+      return (
+         <label
+            key={key}
+            className={data.classNames}
+            onMouseDown={(e) => {
+               e.stopPropagation();
+               if (this.unfocusable) e.preventDefault();
+            }}
+            onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
+            onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
+            onClick={(e) => {
+               this.handleClick(e, instance);
+            }}
+            style={data.style}
+         >
+            {content}
+            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+         </label>
+      );
+   }
+
+   validateRequired(context, instance) {
+      let { data } = instance;
+      if (!data.value) return this.requiredText;
+   }
+
+   renderNativeCheck(context, instance) {
+      let { CSS, baseClass } = this;
+      let { data } = instance;
+      return (
+         <input
+            key="input"
+            className={CSS.element(baseClass, "checkbox")}
+            id={data.id}
+            type="checkbox"
+            checked={data.value || false}
+            disabled={data.disabled}
+            {...data.inputAttrs}
+            onClick={stopPropagation}
+            onChange={(e) => {
+               this.handleChange(e, instance);
+            }}
+         />
+      );
+   }
+
+   renderCheck(context, instance) {
+      return <CheckboxCmp key="check" instance={instance} data={instance.data} />;
+   }
+
+   renderInput(context, instance, key) {
+      let { data } = instance;
+      let text = data.text || this.renderChildren(context, instance);
+      let { CSS, baseClass } = this;
+      return this.renderWrap(context, instance, key, [
+         this.native ? this.renderNativeCheck(context, instance) : this.renderCheck(context, instance),
+         text ? (
+            <div key="text" className={CSS.element(baseClass, "text")}>
+               {text}
+            </div>
+         ) : (
+            <span key="baseline" className={CSS.element(baseClass, "baseline")}>
+               &nbsp;
+            </span>
+         ),
+      ]);
+   }
+
+   renderValue(context, { data }) {
+      if (!data.viewText) return super.renderValue(...arguments);
+      return <span className={this.CSS.element(this.baseClass, "view-text")}>{data.viewText}</span>;
+   }
+
+   formatValue(context, instance) {
+      let { data } = instance;
+      return data.value && (data.text || this.renderChildren(context, instance));
+   }
+
+   handleClick(e, instance) {
+      if (this.native) e.stopPropagation();
+      else {
+         var el = document.getElementById(instance.data.id);
+         if (el) el.focus();
+         if (!instance.data.viewMode) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.handleChange(e, instance, !instance.data.value);
+         }
+      }
+   }
+
+   handleChange(e, instance, checked) {
+      let { data } = instance;
+
+      if (data.readOnly || data.disabled || data.viewMode) return;
+
+      instance.set("value", checked != null ? checked : e.target.checked);
+   }
+}
+
+Checkbox.prototype.baseClass = "checkbox";
+Checkbox.prototype.native = false;
+Checkbox.prototype.indeterminate = false;
+Checkbox.prototype.unfocusable = false;
+
+Widget.alias("checkbox", Checkbox);
+
+class CheckboxCmp extends VDOM.Component {
+   constructor(props) {
+      super(props);
+      this.state = {
+         value: props.data.value,
+      };
+   }
+
+   UNSAFE_componentWillReceiveProps(props) {
+      this.setState({
+         value: props.data.value,
+      });
+   }
+
+   render() {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+      let { baseClass, CSS } = widget;
+
+      let check = false;
+
+      if (this.state.value == null && widget.indeterminate) check = "indeterminate";
+      else if (this.state.value) check = "check";
+
+      return (
+         <span
+            key="check"
+            tabIndex={widget.unfocusable || data.disabled ? null : data.tabIndex || 0}
+            className={CSS.element(baseClass, "input", {
+               checked: check,
+            })}
+            style={CSS.parseStyle(data.inputStyle)}
+            id={data.id}
+            onClick={this.onClick.bind(this)}
+            onKeyDown={this.onKeyDown.bind(this)}
+         >
+            {check == "check" && <CheckIcon className={CSS.element(baseClass, "input-check")} />}
+            {check == "indeterminate" && <SquareIcon className={CSS.element(baseClass, "input-check")} />}
+         </span>
+      );
+   }
+
+   onClick(e) {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+      if (!data.disabled && !data.readOnly) {
+         e.stopPropagation();
+         e.preventDefault();
+         this.setState({ value: !this.state.value });
+         widget.handleChange(e, instance, !this.state.value);
+      }
+   }
+
+   onKeyDown(e) {
+      let { instance } = this.props;
+      if (instance.widget.handleKeyDown(e, instance) === false) return;
+
+      switch (e.keyCode) {
+         case KeyCode.space:
+            this.onClick(e);
+            break;
+      }
+   }
+}

package/src/widgets/form/MonthField.d.ts

@@ -94,6 +94,11 @@ interface MonthFieldProps extends FieldProps {
    /** A boolean flag that determines whether the `to` date is included in the range.
     * When set to true the value stored in the to field would be the last day of the month, i.e. `2024-12-31`. */
    inclusiveTo?: boolean;
+
+   /** Optional configuration options for the MonthPicker component rendered within the dropdown.
+    * You can pass any valid additional MonthPicker props here, such as `startYear`, `endYear`, etc.
+    * Refer to the MonthPicker component documentation for a full list of supported options. */
+   monthPickerOptions?: Cx.Config;
 }
 
 export class MonthField extends Cx.Widget<MonthFieldProps> {}

package/src/widgets/form/MonthField.js

@@ -149,6 +149,7 @@ export class MonthField extends Field {
             data={instance.data}
             instance={instance}
             monthPicker={{
+               ...this.monthPickerOptions,
                value: this.value,
                from: this.from,
                to: this.to,

package/src/widgets/form/MonthPicker.d.ts

@@ -1,4 +1,5 @@
 import * as Cx from "../../core";
+import { Instance } from "../../ui";
 import { FieldProps } from "./Field";
 
 interface MonthPickerProps extends FieldProps {
@@ -71,6 +72,18 @@ interface MonthPickerProps extends FieldProps {
    /** A boolean flag that determines whether the `to` date is included in the range.
     * When set to true the value stored in the to field would be the last day of the month, i.e. `2024-12-31`. */
    inclusiveTo?: boolean;
+
+   /** Callback function that is called before writing data to the store. Return false to short-circuit updating the state. */
+   onBeforeSelect: (e: Event, instance: Instance, dateFrom?: Date, dateTo?: Date) => boolean;
+
+   /** Callback function that is called after value or date range has changed */
+   onSelect: (instance: Instance, dateFrom?: Date, dateTo?: Date) => void;
+
+   /**
+    * Optional parameter to hide the quarters period section on the picker.
+    * When true, the quarters section will not render.
+    */
+   hideQuarters?: boolean;
 }
 
 export class MonthPicker extends Cx.Widget<MonthPickerProps> {}