@plasmicpkgs/antd5 0.0.131 → 0.0.132

package/skinny/registerDateRangePicker.esm.js

@@ -0,0 +1,408 @@
+import { DatePicker } from 'antd';
+import React, { useMemo } from 'react';
+import { r as registerComponentHelper, c as capitalize } from './utils-7d8f2418.esm.js';
+import dayjs from 'dayjs';
+import kebabCase from 'lodash/kebabCase';
+import '@plasmicapp/host/registerComponent';
+import '@plasmicapp/host/registerGlobalContext';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const { RangePicker } = DatePicker;
+function getDayjsRange(dateRange) {
+  return Array.isArray(dateRange) ? [
+    dateRange[0] ? dayjs(dateRange[0]) : null,
+    dateRange[1] ? dayjs(dateRange[1]) : null
+  ] : [null, null];
+}
+function getStrRange(dateRange) {
+  return Array.isArray(dateRange) ? dateRange.map(
+    (date) => date && !(typeof date === "string") && "toISOString" in date ? date.toISOString() : date === null ? void 0 : date
+  ) : void 0;
+}
+function AntdDateRangePicker(props) {
+  const _a = props, {
+    defaultStartDate,
+    defaultEndDate,
+    startDate,
+    endDate,
+    allowEmpty,
+    allowEmptyEndDate,
+    allowEmptyStartDate,
+    disabled,
+    renderExtraFooter,
+    disableStartDate,
+    disableEndDate,
+    presets,
+    picker,
+    placeholder,
+    onChange,
+    popupScopeClassName,
+    className
+  } = _a, rest = __objRest(_a, [
+    "defaultStartDate",
+    "defaultEndDate",
+    "startDate",
+    "endDate",
+    "allowEmpty",
+    "allowEmptyEndDate",
+    "allowEmptyStartDate",
+    "disabled",
+    "renderExtraFooter",
+    "disableStartDate",
+    "disableEndDate",
+    "presets",
+    "picker",
+    "placeholder",
+    "onChange",
+    "popupScopeClassName",
+    "className"
+  ]);
+  const popupScopeClassNameSelector = popupScopeClassName ? `.${popupScopeClassName}` : "";
+  const css = `
+    @media(max-width: 900px) { 
+      .ant-picker-panels{ 
+        flex-direction: column;
+      }
+    }
+    
+    @media(max-width: 500px) { 
+      ${popupScopeClassNameSelector}.ant-picker-dropdown {
+        top: 20px !important;
+        left: 10px !important;
+        right: 10px !important;
+        max-height: 95vh;
+        position: fixed;
+        overflow-y: scroll;
+        max-width: 100vw;
+      }
+
+      ${popupScopeClassNameSelector} .ant-picker-panel-container {
+        min-width: 300px;
+      }
+
+      ${popupScopeClassNameSelector} .ant-picker-datetime-panel {
+        flex-direction: column;
+      }
+
+      .${className} .ant-picker-input > input {
+        font-size: 16px !important;
+      }
+      
+      ${popupScopeClassNameSelector} .ant-picker-header-view {
+        line-height: unset !important;
+      }
+      
+      ${popupScopeClassNameSelector} .ant-picker-content {
+        height: unset !important;
+      }
+      
+      ${popupScopeClassNameSelector} .ant-picker-time-panel-column {
+        height: 100px;
+      }
+
+      ${popupScopeClassNameSelector} .ant-picker-range-arrow {
+        display: none;
+      }
+    }
+  `;
+  const presetsDayjs = useMemo(
+    () => presets == null ? void 0 : presets.map((p) => __spreadProps(__spreadValues({}, p), { value: getDayjsRange([p.startDate, p.endDate]) })).filter((p) => {
+      var _a2, _b;
+      return ((_a2 = p.value[0]) == null ? void 0 : _a2.isValid()) && ((_b = p.value[1]) == null ? void 0 : _b.isValid());
+    }),
+    [presets]
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    RangePicker,
+    __spreadProps(__spreadValues({}, rest), {
+      picker,
+      presets: presetsDayjs,
+      allowEmpty: allowEmpty ? [allowEmpty, allowEmpty] : [allowEmptyStartDate, allowEmptyEndDate],
+      value: getDayjsRange([startDate, endDate]),
+      defaultValue: getDayjsRange([defaultStartDate, defaultEndDate]),
+      renderExtraFooter: renderExtraFooter ? () => renderExtraFooter : void 0,
+      className,
+      inputReadOnly: true,
+      disabled: disabled ? disabled : [disableStartDate, disableEndDate],
+      placeholder: placeholder == null ? void 0 : placeholder.split(/,\s*/).slice(0, 2),
+      popupClassName: popupScopeClassName,
+      onChange: (values, _dateStrings) => {
+        onChange == null ? void 0 : onChange(getStrRange(values) || [null, null]);
+      }
+    })
+  ), /* @__PURE__ */ React.createElement("style", { dangerouslySetInnerHTML: { __html: css } }));
+}
+const dateRangePickerComponentName = "plasmic-antd5-date-range-picker";
+const dateRangePickerHelpers = {
+  states: {
+    startDate: {
+      onChangeArgsToValue: (value) => value[0]
+    },
+    endDate: {
+      onChangeArgsToValue: (value) => value[1]
+    }
+  }
+};
+function registerDateRangePicker(loader) {
+  registerComponentHelper(loader, AntdDateRangePicker, {
+    name: dateRangePickerComponentName,
+    displayName: "Date Range Picker",
+    props: {
+      startDate: {
+        type: "dateString",
+        editOnly: true,
+        uncontrolledProp: "defaultStartDate",
+        description: "The default start date as ISO strings",
+        // TODO: Can there be a default validator attached to each prop type, so dynamic values can be checked?
+        hidden: (ps) => !!ps.__plasmicFormField
+      },
+      endDate: {
+        type: "dateString",
+        editOnly: true,
+        uncontrolledProp: "defaultEndDate",
+        description: "The default end date as ISO strings",
+        // TODO: Can there be a default validator attached to each prop type, so dynamic values can be checked?
+        hidden: (ps) => !!ps.__plasmicFormField
+      },
+      allowClear: {
+        type: "boolean",
+        advanced: true,
+        defaultValueHint: true,
+        description: "Whether to show the clear button"
+      },
+      autoFocus: {
+        type: "boolean",
+        description: "Focus when component is rendered",
+        defaultValueHint: false,
+        advanced: true
+      },
+      bordered: {
+        type: "boolean",
+        advanced: true,
+        defaultValueHint: true
+      },
+      changeOnBlur: {
+        type: "boolean",
+        advanced: true,
+        description: "Trigger change when blur. e.g. datetime picker no need click confirm button",
+        defaultValueHint: false,
+        hidden: (ps) => !ps.showTime
+      },
+      disabled: {
+        type: "boolean",
+        description: "Disable date range inputs",
+        defaultValueHint: false
+      },
+      disableStartDate: {
+        type: "boolean",
+        defaultValueHint: false,
+        advanced: true,
+        description: "Disable start date input only",
+        hidden: (ps) => ps.disabled
+      },
+      disableEndDate: {
+        type: "boolean",
+        defaultValueHint: false,
+        advanced: true,
+        description: "Disable end date input only",
+        hidden: (ps) => ps.disabled
+      },
+      picker: {
+        type: "choice",
+        options: ["date", "week", "month", "quarter", "year"].map((value) => ({
+          value,
+          label: capitalize(value)
+        })),
+        defaultValueHint: "date"
+      },
+      placeholder: {
+        type: "string",
+        advanced: true,
+        defaultValueHint: "Start date, End date",
+        description: "The placeholders of the start and end date inputs, separated by a comma"
+      },
+      placement: {
+        type: "choice",
+        options: ["bottomLeft", "bottomRight", "topLeft", "topRight"].map(
+          (value) => ({
+            value,
+            label: kebabCase(value)
+          })
+        ),
+        advanced: true,
+        defaultValueHint: "bottom-left",
+        description: "The position where the selection box pops up"
+      },
+      presets: {
+        type: "array",
+        advanced: true,
+        description: "The preset ranges for quick selection",
+        itemType: {
+          type: "object",
+          nameFunc: (item) => item.label,
+          fields: {
+            label: "string",
+            startDate: {
+              type: "dateString"
+            },
+            endDate: {
+              type: "dateString"
+            }
+          }
+        }
+      },
+      size: {
+        type: "choice",
+        advanced: true,
+        options: ["small", "middle", "large"].map((value) => ({
+          value,
+          label: capitalize(value)
+        })),
+        defaultValueHint: "middle"
+      },
+      status: {
+        type: "choice",
+        advanced: true,
+        options: ["error", "warning"].map((value) => ({
+          value,
+          label: capitalize(value)
+        })),
+        description: "Set validation status"
+      },
+      allowEmpty: {
+        type: "boolean",
+        advanced: true,
+        description: "Allow leaving start or end input empty",
+        defaultValueHint: false
+      },
+      allowEmptyStartDate: {
+        type: "boolean",
+        advanced: true,
+        description: "Allow leaving start input empty",
+        defaultValueHint: false,
+        hidden: (ps) => ps.allowEmpty
+      },
+      allowEmptyEndDate: {
+        type: "boolean",
+        advanced: true,
+        description: "Allow leaving end input empty",
+        defaultValueHint: false,
+        hidden: (ps) => ps.allowEmpty
+      },
+      renderExtraFooter: {
+        type: "slot",
+        displayName: "Extra footer",
+        hidePlaceholder: true
+      },
+      showTime: {
+        type: "boolean",
+        description: "Enable time selection",
+        defaultValueHint: false,
+        hidden: (ps) => ps.picker !== void 0 && ps.picker !== "date"
+      },
+      popupScopeClassName: {
+        type: "styleScopeClass",
+        scopeName: "dateRangePickerPopup"
+      },
+      popupClassName: {
+        type: "class",
+        displayName: "Popup container",
+        selectors: [
+          {
+            selector: ":dateRangePickerPopup .ant-picker-panel-container",
+            label: "Base"
+          }
+        ]
+      },
+      popupHeaderClassName: {
+        type: "class",
+        displayName: "Popup header",
+        selectors: [
+          {
+            selector: ":dateRangePickerPopup .ant-picker-header",
+            label: "Base"
+          }
+        ]
+      },
+      popupBodyClassName: {
+        type: "class",
+        displayName: "Popup body",
+        selectors: [
+          {
+            selector: ":dateRangePickerPopup .ant-picker-body",
+            label: "Base"
+          }
+        ]
+      },
+      popupFooterClassName: {
+        type: "class",
+        displayName: "Popup footer",
+        selectors: [
+          {
+            selector: ":dateRangePickerPopup .ant-picker-footer",
+            label: "Base"
+          }
+        ]
+      },
+      onChange: {
+        type: "eventHandler",
+        advanced: true,
+        argTypes: [{ name: "value", type: "object" }]
+      }
+    },
+    states: {
+      startDate: __spreadValues({
+        type: "writable",
+        valueProp: "startDate",
+        onChangeProp: "onChange",
+        variableType: "text"
+      }, dateRangePickerHelpers.states.startDate),
+      endDate: __spreadValues({
+        type: "writable",
+        valueProp: "endDate",
+        onChangeProp: "onChange",
+        variableType: "text"
+      }, dateRangePickerHelpers.states.endDate)
+    },
+    componentHelpers: {
+      helpers: dateRangePickerHelpers,
+      importName: "dateRangePickerHelpers",
+      importPath: "@plasmicpkgs/antd5/skinny/registerDateRangePicker"
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerDateRangePicker",
+    importName: "AntdDateRangePicker"
+  });
+}
+
+export { AntdDateRangePicker, dateRangePickerComponentName, dateRangePickerHelpers, registerDateRangePicker };
+//# sourceMappingURL=registerDateRangePicker.esm.js.map

package/skinny/registerDateRangePicker.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerDateRangePicker.esm.js","sources":["../src/registerDateRangePicker.tsx"],"sourcesContent":["import { DatePicker } from \"antd\";\nimport React, { useMemo } from \"react\";\nimport { capitalize, Registerable, registerComponentHelper } from \"./utils\";\nimport dayjs from \"dayjs\";\nimport type { Dayjs } from \"dayjs\";\nimport kebabCase from \"lodash/kebabCase\";\n\nconst { RangePicker } = DatePicker;\n\nfunction getDayjsRange(dateRange: any): [Dayjs | null, Dayjs | null] {\n  return Array.isArray(dateRange)\n    ? [\n        dateRange[0] ? dayjs(dateRange[0]) : null,\n        dateRange[1] ? dayjs(dateRange[1]) : null,\n      ]\n    : [null, null];\n}\n\nfunction getStrRange(dateRange: any): string[] | undefined {\n  return Array.isArray(dateRange)\n    ? dateRange.map((date: any) =>\n        date && !(typeof date === \"string\") && \"toISOString\" in date\n          ? date.toISOString()\n          : date === null\n          ? undefined\n          : date\n      )\n    : undefined;\n}\n\nexport function AntdDateRangePicker(\n  props: Omit<\n    React.ComponentProps<typeof RangePicker>,\n    | \"value\"\n    | \"onChange\"\n    | \"presets\"\n    | \"placeholder\"\n    | \"renderExtraFooter\"\n    | \"disabled\"\n    | \"allowEmpty\"\n  > & {\n    onChange: (value: [string | undefined, string | undefined]) => void;\n    value?: [Dayjs, Dayjs];\n    // Not sure why this is missing from DatePicker props!\n    showTime?: boolean;\n    popupScopeClassName: string;\n    presets: {\n      label: string;\n      startDate: string;\n      endDate: string;\n    }[];\n    placeholder: string;\n    disableStartDate: boolean;\n    disableEndDate: boolean;\n    renderExtraFooter: React.ReactNode;\n    allowEmptyStartDate: boolean;\n    allowEmptyEndDate: boolean;\n    disabled: boolean;\n    allowEmpty: boolean;\n    defaultStartDate?: string;\n    defaultEndDate?: string;\n    startDate?: string;\n    endDate?: string;\n  }\n) {\n  const {\n    defaultStartDate,\n    defaultEndDate,\n    startDate,\n    endDate,\n    allowEmpty,\n    allowEmptyEndDate,\n    allowEmptyStartDate,\n    disabled,\n    renderExtraFooter,\n    disableStartDate,\n    disableEndDate,\n    presets,\n    picker,\n    placeholder,\n    onChange,\n    popupScopeClassName,\n    className,\n    ...rest\n  } = props;\n  const popupScopeClassNameSelector = popupScopeClassName\n    ? `.${popupScopeClassName}`\n    : \"\";\n  const css = `\n    @media(max-width: 900px) { \n      .ant-picker-panels{ \n        flex-direction: column;\n      }\n    }\n    \n    @media(max-width: 500px) { \n      ${popupScopeClassNameSelector}.ant-picker-dropdown {\n        top: 20px !important;\n        left: 10px !important;\n        right: 10px !important;\n        max-height: 95vh;\n        position: fixed;\n        overflow-y: scroll;\n        max-width: 100vw;\n      }\n\n      ${popupScopeClassNameSelector} .ant-picker-panel-container {\n        min-width: 300px;\n      }\n\n      ${popupScopeClassNameSelector} .ant-picker-datetime-panel {\n        flex-direction: column;\n      }\n\n      .${className} .ant-picker-input > input {\n        font-size: 16px !important;\n      }\n      \n      ${popupScopeClassNameSelector} .ant-picker-header-view {\n        line-height: unset !important;\n      }\n      \n      ${popupScopeClassNameSelector} .ant-picker-content {\n        height: unset !important;\n      }\n      \n      ${popupScopeClassNameSelector} .ant-picker-time-panel-column {\n        height: 100px;\n      }\n\n      ${popupScopeClassNameSelector} .ant-picker-range-arrow {\n        display: none;\n      }\n    }\n  `;\n\n  const presetsDayjs = useMemo(\n    () =>\n      presets\n        ?.map((p) => ({ ...p, value: getDayjsRange([p.startDate, p.endDate]) }))\n        .filter((p) => p.value[0]?.isValid() && p.value[1]?.isValid()),\n    [presets]\n  );\n  return (\n    <>\n      <RangePicker\n        {...rest}\n        picker={picker as any}\n        presets={presetsDayjs}\n        allowEmpty={\n          allowEmpty\n            ? [allowEmpty, allowEmpty]\n            : [allowEmptyStartDate, allowEmptyEndDate]\n        }\n        value={getDayjsRange([startDate, endDate])}\n        defaultValue={getDayjsRange([defaultStartDate, defaultEndDate])}\n        renderExtraFooter={\n          renderExtraFooter ? () => renderExtraFooter : undefined\n        }\n        className={className}\n        inputReadOnly\n        disabled={disabled ? disabled : [disableStartDate, disableEndDate]}\n        placeholder={placeholder?.split(/,\\s*/).slice(0, 2) as [string, string]}\n        popupClassName={popupScopeClassName}\n        // dateString isn't a valid ISO string, and value is a dayjs object.\n        onChange={(values, _dateStrings) => {\n          onChange?.((getStrRange(values) as [string, string]) || [null, null]);\n        }}\n      />\n      <style dangerouslySetInnerHTML={{ __html: css }} />\n    </>\n  );\n}\n\nexport const dateRangePickerComponentName = \"plasmic-antd5-date-range-picker\";\n\nexport const dateRangePickerHelpers = {\n  states: {\n    startDate: {\n      onChangeArgsToValue: (value: string[]) => value[0],\n    },\n    endDate: {\n      onChangeArgsToValue: (value: string[]) => value[1],\n    },\n  },\n};\n\nexport function registerDateRangePicker(loader?: Registerable) {\n  registerComponentHelper(loader, AntdDateRangePicker, {\n    name: dateRangePickerComponentName,\n    displayName: \"Date Range Picker\",\n    props: {\n      startDate: {\n        type: \"dateString\",\n        editOnly: true,\n        uncontrolledProp: \"defaultStartDate\",\n        description: \"The default start date as ISO strings\",\n        // TODO: Can there be a default validator attached to each prop type, so dynamic values can be checked?\n        hidden: (ps: any) => !!ps.__plasmicFormField,\n      },\n      endDate: {\n        type: \"dateString\",\n        editOnly: true,\n        uncontrolledProp: \"defaultEndDate\",\n        description: \"The default end date as ISO strings\",\n        // TODO: Can there be a default validator attached to each prop type, so dynamic values can be checked?\n        hidden: (ps: any) => !!ps.__plasmicFormField,\n      },\n      allowClear: {\n        type: \"boolean\",\n        advanced: true,\n        defaultValueHint: true,\n        description: \"Whether to show the clear button\",\n      },\n      autoFocus: {\n        type: \"boolean\",\n        description: \"Focus when component is rendered\",\n        defaultValueHint: false,\n        advanced: true,\n      },\n      bordered: {\n        type: \"boolean\",\n        advanced: true,\n        defaultValueHint: true,\n      },\n      changeOnBlur: {\n        type: \"boolean\",\n        advanced: true,\n        description:\n          \"Trigger change when blur. e.g. datetime picker no need click confirm button\",\n        defaultValueHint: false,\n        hidden: (ps) => !ps.showTime,\n      },\n      disabled: {\n        type: \"boolean\",\n        description: \"Disable date range inputs\",\n        defaultValueHint: false,\n      },\n      disableStartDate: {\n        type: \"boolean\",\n        defaultValueHint: false,\n        advanced: true,\n        description: \"Disable start date input only\",\n        hidden: (ps) => ps.disabled,\n      },\n      disableEndDate: {\n        type: \"boolean\",\n        defaultValueHint: false,\n        advanced: true,\n        description: \"Disable end date input only\",\n        hidden: (ps) => ps.disabled,\n      },\n      picker: {\n        type: \"choice\",\n        options: [\"date\", \"week\", \"month\", \"quarter\", \"year\"].map((value) => ({\n          value,\n          label: capitalize(value),\n        })),\n        defaultValueHint: \"date\",\n      },\n      placeholder: {\n        type: \"string\",\n        advanced: true,\n        defaultValueHint: \"Start date, End date\",\n        description:\n          \"The placeholders of the start and end date inputs, separated by a comma\",\n      },\n      placement: {\n        type: \"choice\",\n        options: [\"bottomLeft\", \"bottomRight\", \"topLeft\", \"topRight\"].map(\n          (value) => ({\n            value,\n            label: kebabCase(value),\n          })\n        ),\n        advanced: true,\n        defaultValueHint: \"bottom-left\",\n        description: \"The position where the selection box pops up\",\n      },\n      presets: {\n        type: \"array\",\n        advanced: true,\n        description: \"The preset ranges for quick selection\",\n        itemType: {\n          type: \"object\",\n          nameFunc: (item) => item.label,\n          fields: {\n            label: \"string\",\n            startDate: {\n              type: \"dateString\",\n            },\n            endDate: {\n              type: \"dateString\",\n            },\n          },\n        },\n      },\n      size: {\n        type: \"choice\",\n        advanced: true,\n        options: [\"small\", \"middle\", \"large\"].map((value) => ({\n          value,\n          label: capitalize(value),\n        })),\n        defaultValueHint: \"middle\",\n      },\n      status: {\n        type: \"choice\",\n        advanced: true,\n        options: [\"error\", \"warning\"].map((value) => ({\n          value,\n          label: capitalize(value),\n        })),\n        description: \"Set validation status\",\n      },\n      allowEmpty: {\n        type: \"boolean\",\n        advanced: true,\n        description: \"Allow leaving start or end input empty\",\n        defaultValueHint: false,\n      },\n      allowEmptyStartDate: {\n        type: \"boolean\",\n        advanced: true,\n        description: \"Allow leaving start input empty\",\n        defaultValueHint: false,\n        hidden: (ps) => ps.allowEmpty,\n      },\n      allowEmptyEndDate: {\n        type: \"boolean\",\n        advanced: true,\n        description: \"Allow leaving end input empty\",\n        defaultValueHint: false,\n        hidden: (ps) => ps.allowEmpty,\n      },\n      renderExtraFooter: {\n        type: \"slot\",\n        displayName: \"Extra footer\",\n        hidePlaceholder: true,\n      },\n      showTime: {\n        type: \"boolean\",\n        description: \"Enable time selection\",\n        defaultValueHint: false,\n        hidden: (ps) => ps.picker !== undefined && ps.picker !== \"date\",\n      },\n      popupScopeClassName: {\n        type: \"styleScopeClass\",\n        scopeName: \"dateRangePickerPopup\",\n      } as any,\n      popupClassName: {\n        type: \"class\",\n        displayName: \"Popup container\",\n        selectors: [\n          {\n            selector: \":dateRangePickerPopup .ant-picker-panel-container\",\n            label: \"Base\",\n          },\n        ],\n      },\n      popupHeaderClassName: {\n        type: \"class\",\n        displayName: \"Popup header\",\n        selectors: [\n          {\n            selector: \":dateRangePickerPopup .ant-picker-header\",\n            label: \"Base\",\n          },\n        ],\n      },\n      popupBodyClassName: {\n        type: \"class\",\n        displayName: \"Popup body\",\n        selectors: [\n          {\n            selector: \":dateRangePickerPopup .ant-picker-body\",\n            label: \"Base\",\n          },\n        ],\n      },\n      popupFooterClassName: {\n        type: \"class\",\n        displayName: \"Popup footer\",\n        selectors: [\n          {\n            selector: \":dateRangePickerPopup .ant-picker-footer\",\n            label: \"Base\",\n          },\n        ],\n      },\n      onChange: {\n        type: \"eventHandler\",\n        advanced: true,\n        argTypes: [{ name: \"value\", type: \"object\" }],\n      },\n    },\n    states: {\n      startDate: {\n        type: \"writable\",\n        valueProp: \"startDate\",\n        onChangeProp: \"onChange\",\n        variableType: \"text\",\n        ...dateRangePickerHelpers.states.startDate,\n      },\n      endDate: {\n        type: \"writable\",\n        valueProp: \"endDate\",\n        onChangeProp: \"onChange\",\n        variableType: \"text\",\n        ...dateRangePickerHelpers.states.endDate,\n      },\n    },\n    componentHelpers: {\n      helpers: dateRangePickerHelpers,\n      importName: \"dateRangePickerHelpers\",\n      importPath: \"@plasmicpkgs/antd5/skinny/registerDateRangePicker\",\n    },\n    importPath: \"@plasmicpkgs/antd5/skinny/registerDateRangePicker\",\n    importName: \"AntdDateRangePicker\",\n  });\n}\n"],"names":["_a"],"mappings":"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"}

package/skinny/registerForm.cjs.js

@@ -686,12 +686,12 @@ function registerForm(loader) {
         ]
       },
       validateTrigger: {
-        displayName: "Validate rules",
+        displayName: "Validate when",
         type: "choice",
         options: [
-          { value: "onBlur", label: "When a field loses focus" },
-          { value: "onChange", label: "When a field changes" },
-          { value: "onSubmit", label: "When the form is submitted" }
+          { value: "onBlur", label: "a field loses focus" },
+          { value: "onChange", label: "a field changes" },
+          { value: "onSubmit", label: "the form is submitted" }
         ],
         multiSelect: true,
         defaultValueHint: ["onChange"],
@@ -1198,9 +1198,15 @@ function commonFormItemProps(usage) {
       defaultValueHint: getDefaultValueHint("hidden")
     },
     validateTrigger: {
+      displayName: "Validate when",
       type: "choice",
-      options: ["onSubmit", "onChange", "onBlur"],
+      options: [
+        { value: "onBlur", label: "a field loses focus" },
+        { value: "onChange", label: "a field changes" },
+        { value: "onSubmit", label: "the form is submitted" }
+      ],
       multiSelect: true,
+      defaultValueHint: ["onChange"],
       advanced: true
     },
     shouldUpdate: {