@pisell/private-materials 6.8.6 → 6.8.8

package/lib/pro/multiDayTimeSelect/MultiDayTimeSelect.js

@@ -0,0 +1,290 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pro/multiDayTimeSelect/MultiDayTimeSelect.tsx
+var MultiDayTimeSelect_exports = {};
+__export(MultiDayTimeSelect_exports, {
+  default: () => MultiDayTimeSelect_default
+});
+module.exports = __toCommonJS(MultiDayTimeSelect_exports);
+var import_react = __toESM(require("react"));
+var import_icons = require("@ant-design/icons");
+var import_dayjs = __toESM(require("dayjs"));
+var import_materials = require("@pisell/materials");
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var import_dateRange = require("../../components/booking/info/dateRange");
+var import_MultiDayTimeSelect = require("./MultiDayTimeSelect.less");
+var RangePicker = import_materials.DatePicker.RangePicker;
+var MultiDayTimeSelect = (0, import_react.forwardRef)(({
+  maxDays = 30,
+  defaultStartDate,
+  separateStartEnd = false,
+  value,
+  onChange,
+  locale = "en",
+  disabled = false,
+  startDateLabel,
+  endDateLabel,
+  durationLabel
+}, ref) => {
+  const [form] = import_antd.Form.useForm();
+  const [internalValue, setInternalValue] = (0, import_react.useState)(null);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    validate: async () => {
+      await form.validateFields();
+    },
+    getValue: () => internalValue
+  }));
+  const formatLocale = (0, import_react.useMemo)(() => {
+    const isEn = locale === "en" || locale === "en-US";
+    return isEn ? "DD/MM/YYYY" : "YYYY-MM-DD";
+  }, [locale]);
+  const durationOptions = (0, import_react.useMemo)(() => {
+    const options = [];
+    for (let i = 1; i <= maxDays; i++) {
+      options.push({
+        label: `${i} ${i === 1 ? locale === "en" ? "day" : "天" : locale === "en" ? "days" : "天"}`,
+        value: i
+      });
+    }
+    const currentDuration = internalValue == null ? void 0 : internalValue.duration;
+    if (currentDuration && currentDuration > maxDays) {
+      options.push({
+        label: `${currentDuration} ${currentDuration === 1 ? locale === "en" ? "day" : "天" : locale === "en" ? "days" : "天"}`,
+        value: currentDuration,
+        disabled: true
+      });
+    }
+    return options;
+  }, [maxDays, locale, internalValue == null ? void 0 : internalValue.duration]);
+  (0, import_react.useEffect)(() => {
+    if (value) {
+      setInternalValue(value);
+      form.setFieldsValue({
+        dateRange: separateStartEnd ? void 0 : [value.startDate, value.endDate],
+        startDate: separateStartEnd ? value.startDate : void 0,
+        endDate: separateStartEnd ? value.endDate : void 0,
+        duration: value.duration
+      });
+    } else {
+      const startDate = defaultStartDate || (0, import_dayjs.default)();
+      const endDate = startDate.add(1, "day");
+      const initialValue = {
+        startDate,
+        endDate,
+        duration: 1
+      };
+      setInternalValue(initialValue);
+      form.setFieldsValue({
+        dateRange: separateStartEnd ? void 0 : [startDate, endDate],
+        startDate: separateStartEnd ? startDate : void 0,
+        endDate: separateStartEnd ? endDate : void 0,
+        duration: 1
+      });
+      onChange == null ? void 0 : onChange(initialValue);
+    }
+  }, [value, defaultStartDate, separateStartEnd, form, onChange]);
+  const updateValue = (newValue) => {
+    setInternalValue(newValue);
+    onChange == null ? void 0 : onChange(newValue);
+  };
+  const handleDateRangeChange = (dates) => {
+    if (dates && dates[0] && dates[1]) {
+      const days = dates[1].diff(dates[0], "day");
+      let finalEndDate = dates[1];
+      let finalDuration = days;
+      if (days > 0) {
+        const newValue = {
+          startDate: dates[0],
+          endDate: finalEndDate,
+          duration: finalDuration
+        };
+        updateValue(newValue);
+        form.setFieldsValue({
+          dateRange: [dates[0], finalEndDate],
+          duration: finalDuration
+        });
+      }
+    }
+  };
+  const handleStartDateChange = (date) => {
+    if (date && internalValue) {
+      const currentEndDate = internalValue.endDate;
+      const endTime = {
+        hour: currentEndDate.hour(),
+        minute: currentEndDate.minute(),
+        second: currentEndDate.second(),
+        millisecond: currentEndDate.millisecond()
+      };
+      const targetDuration = Math.min(internalValue.duration, maxDays);
+      let newEndDate = date.add(targetDuration, "day");
+      const finalEndDate = newEndDate.hour(endTime.hour).minute(endTime.minute).second(endTime.second).millisecond(endTime.millisecond);
+      const newValue = {
+        startDate: date,
+        endDate: finalEndDate,
+        duration: targetDuration
+      };
+      updateValue(newValue);
+      form.setFieldsValue({
+        endDate: finalEndDate,
+        duration: targetDuration
+      });
+    }
+  };
+  const handleEndDateChange = (date) => {
+    if (date && internalValue) {
+      const days = date.diff(internalValue.startDate, "day");
+      if (days > 0) {
+        const newValue = {
+          startDate: internalValue.startDate,
+          endDate: date,
+          duration: days
+        };
+        updateValue(newValue);
+        form.setFieldsValue({
+          endDate: date,
+          duration: days
+        });
+      }
+    }
+  };
+  const handleDurationChange = (durationValue) => {
+    if (internalValue) {
+      const newEndDate = internalValue.startDate.add(durationValue, "day");
+      const newValue = {
+        startDate: internalValue.startDate,
+        endDate: newEndDate,
+        duration: durationValue
+      };
+      updateValue(newValue);
+      if (separateStartEnd) {
+        form.setFieldsValue({ endDate: newEndDate });
+      } else {
+        form.setFieldsValue({ dateRange: [internalValue.startDate, newEndDate] });
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Form, { form, layout: "vertical", className: "multi-day-time-select-form" }, separateStartEnd ? /* @__PURE__ */ import_react.default.createElement("div", { className: "multi-day-time-select-row" }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Form.Item,
+    {
+      label: startDateLabel || import_utils.locales.getText("pisell2.text.start_date"),
+      name: "startDate",
+      rules: [{ required: true, message: startDateLabel || import_utils.locales.getText("pisell2.text.start_date") }],
+      style: { flex: 1 }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_materials.DatePicker,
+      {
+        inputReadOnly: true,
+        allowClear: false,
+        size: "large",
+        style: { width: "100%", padding: 0 },
+        suffixIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.CalendarOutlined, null),
+        value: internalValue == null ? void 0 : internalValue.startDate,
+        onChange: handleStartDateChange,
+        format: formatLocale,
+        isHideCustomSelect: true,
+        disabled
+      }
+    )
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Form.Item,
+    {
+      label: endDateLabel || import_utils.locales.getText("pisell2.text.end_date"),
+      name: "endDate",
+      rules: [{ required: true, message: endDateLabel || import_utils.locales.getText("pisell2.text.end_date") }],
+      style: { flex: 1 }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_materials.DatePicker,
+      {
+        inputReadOnly: true,
+        allowClear: false,
+        size: "large",
+        style: { width: "100%", padding: 0 },
+        suffixIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.CalendarOutlined, null),
+        value: internalValue == null ? void 0 : internalValue.endDate,
+        onChange: handleEndDateChange,
+        format: formatLocale,
+        isHideCustomSelect: true,
+        disabled,
+        disabledDate: (current) => {
+          if (internalValue == null ? void 0 : internalValue.startDate) {
+            return current.isSameOrBefore(internalValue.startDate, "day");
+          }
+          return false;
+        }
+      }
+    )
+  )) : /* @__PURE__ */ import_react.default.createElement("div", { className: "multi-day-time-select-row" }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Form.Item,
+    {
+      label: startDateLabel || import_utils.locales.getText("pisell2.text.start_date"),
+      name: "dateRange",
+      rules: [{ required: true, message: startDateLabel || import_utils.locales.getText("pisell2.text.start_date") }],
+      style: { flex: 1 }
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_materials.Page, { isRenderPisellConfigProvider: false }, /* @__PURE__ */ import_react.default.createElement(
+      RangePicker,
+      {
+        inputReadOnly: true,
+        allowClear: false,
+        size: "large",
+        style: { width: "100%", padding: 0 },
+        suffixIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.CalendarOutlined, null),
+        value: internalValue ? [internalValue.startDate, internalValue.endDate] : null,
+        onChange: handleDateRangeChange,
+        format: formatLocale,
+        isHideCustomSelect: true,
+        endDateDays: 1,
+        disabled,
+        disabledDate: import_dateRange.disabledDate
+      }
+    ))
+  )), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Form.Item,
+    {
+      label: durationLabel || import_utils.locales.getText("pisell2.text.duration"),
+      name: "duration",
+      rules: [{ required: true, message: durationLabel || import_utils.locales.getText("pisell2.text.duration") }]
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Select,
+      {
+        size: "large",
+        value: internalValue == null ? void 0 : internalValue.duration,
+        onChange: handleDurationChange,
+        options: durationOptions,
+        disabled
+      }
+    )
+  ));
+});
+MultiDayTimeSelect.displayName = "MultiDayTimeSelect";
+var MultiDayTimeSelect_default = MultiDayTimeSelect;

package/lib/pro/multiDayTimeSelect/MultiDayTimeSelect.less

@@ -0,0 +1,8 @@
+.multi-day-time-select-form {
+  margin-top: 12px;
+  .multi-day-time-select-row {
+    display: flex;
+    gap: 16px;
+  }
+}
+

package/lib/pro/multiDayTimeSelect/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './MultiDayTimeSelect';
+export type { MultiDayTimeSelectRef } from './MultiDayTimeSelect';
+export type { MultiDayTimeSelectProps, MultiDayTimeSelectValue } from './types';

package/lib/{components/wallet/components → pro/multiDayTimeSelect}/index.js

@@ -26,20 +26,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/wallet/components/index.ts
-var components_exports = {};
-__export(components_exports, {
-  FooterButtons: () => import_FooterButtons.default,
-  UsageRules: () => import_UsageRules.default,
-  WalletBar: () => import_WalletBar.default
-});
-module.exports = __toCommonJS(components_exports);
-var import_WalletBar = __toESM(require("./WalletBar"));
-var import_FooterButtons = __toESM(require("./FooterButtons"));
-var import_UsageRules = __toESM(require("./UsageRules"));
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  FooterButtons,
-  UsageRules,
-  WalletBar
+// src/pro/multiDayTimeSelect/index.tsx
+var multiDayTimeSelect_exports = {};
+__export(multiDayTimeSelect_exports, {
+  default: () => import_MultiDayTimeSelect.default
 });
+module.exports = __toCommonJS(multiDayTimeSelect_exports);
+var import_MultiDayTimeSelect = __toESM(require("./MultiDayTimeSelect"));

package/lib/pro/multiDayTimeSelect/types.d.ts

@@ -0,0 +1,28 @@
+import { Dayjs } from 'dayjs';
+export interface MultiDayTimeSelectValue {
+    startDate: Dayjs;
+    endDate: Dayjs;
+    duration: number;
+}
+export interface MultiDayTimeSelectProps {
+    /** 最大天数，默认30天 */
+    maxDays?: number;
+    /** 默认开始时间 */
+    defaultStartDate?: Dayjs;
+    /** 开始时间和结束时间是否分离，false使用RangePicker，true使用两个独立的DatePicker */
+    separateStartEnd?: boolean;
+    /** 受控值 */
+    value?: MultiDayTimeSelectValue;
+    /** 值变化回调 */
+    onChange?: (value: MultiDayTimeSelectValue) => void;
+    /** 语言环境 */
+    locale?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 开始日期标签 */
+    startDateLabel?: string;
+    /** 结束日期标签 */
+    endDateLabel?: string;
+    /** 时长标签 */
+    durationLabel?: string;
+}

package/lib/pro/multiDayTimeSelect/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pro/multiDayTimeSelect/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/pro/skuDetailModal/types.d.ts

@@ -330,6 +330,7 @@ export interface ProductData {
     _data: DataObj;
     autoClose: boolean;
     _serviceKey: string;
+    _holderKey: string;
     discount_list: DiscountItem[];
 }
 export declare type SkuDetailModalData = ProductData;

package/lowcode/event-select-holder/meta.ts

@@ -2,7 +2,7 @@ import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode
 
 const EventSelectHolderMeta: IPublicTypeComponentMetadata = {
   componentName: 'EventSelectHolder',
-  title: '选择持有人',
+  title: 'Event选择持有人',
   category: '数据展示',
   docUrl: '',
   screenshot: '',
@@ -65,7 +65,7 @@ const EventSelectHolderMeta: IPublicTypeComponentMetadata = {
 
 const snippets: IPublicTypeSnippet[] = [
   {
-    title: '选择持有人',
+    title: 'Event选择持有人',
     screenshot: '',
     schema: {
       componentName: 'EventSelectHolder',

package/lowcode/select-holder/meta.ts

@@ -0,0 +1,220 @@
+import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';
+import { AntdIconSetter } from '../../../materials/lowcode/_setters';
+import snippets from './snippets';
+
+const SelectHolderMeta: ComponentMetadata = {
+  componentName: "SelectHolder",
+  title: "选择持有人",
+  docUrl: "",
+  screenshot: "",
+  category: "数据展示",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/private-materials",
+    version: "1.0.4",
+    exportName: "SelectHolder",
+    main: "src/index.ts",
+    destructuring: true,
+    subName: ""
+  },
+  configure: {
+    props: [
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'dataSource',
+            'zh-CN': '数据源',
+          },
+        },
+        name: 'dataSource',
+        setter: {
+          componentName: 'JsonSetter',
+        },
+      },
+      {
+        title: { label: '选中的值', tip: 'Array<any> | 选中的值' },
+        name: 'value',
+        setter: {
+          componentName: 'ObjectSetter',
+        },
+      },
+      {
+        title: '录入方式',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'modalConfig.title',
+            title: '标题文案',
+            setter: 'StringSetter',
+            defaultValue: 'Who would you like to book this event for?',
+          },
+          {
+            name: 'modalConfig.confirmText',
+            title: '按钮文案',
+            setter: 'StringSetter',
+            defaultValue: 'Confirm',
+          },
+          {
+            name: 'modalConfig.showClose',
+            title: { label: '显示弹窗关闭', tip: 'showClose | 显示弹窗关闭' },
+            setter: 'BoolSetter',
+          },
+        ],
+      },
+      {
+        title: '字段展示',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'displayConfig.showAvatar',
+            title: { label: '显示图像', tip: 'showAvatar | 显示图像' },
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'displayConfig.showTitle',
+            title: { label: '显示名称', tip: 'showTitle | 显示名称' },
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'displayConfig.showSubtitle',
+            title: { label: '显示次级标题', tip: 'showSubtitle | 显示次级标题' },
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'displayConfig.isSkipable',
+            title: { label: '可跳过', tip: 'isSkipable | 可跳过' },
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'displayConfig.direction',
+            title: { label: '展示方向', tip: '展示方向' },
+            propType: { type: 'oneOf', value: ['horizontal', 'vertical'] },
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { label: '水平', value: 'horizontal' },
+                  { label: '垂直', value: 'vertical' },
+                ],
+              },
+            },
+          },
+          {
+            name: 'displayConfig.selectType',
+            title: { label: '选择类型', tip: '选择类型' },
+            propType: { type: 'oneOf', value: ['single', 'multiple'] },
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { label: '单选', value: 'single' },
+                  { label: '多选', value: 'multiple' },
+                ],
+              },
+            },
+          },
+          {
+            name: 'displayConfig.showExtraFields',
+            title: { label: '增加字段', tip: 'showExtraFields | 增加字段' },
+            setter: 'BoolSetter',
+            defaultValue: false,
+          },
+          {
+            name: 'displayConfig.extraFields',
+            title: { label: '额外字段', tip: 'extraFields | 额外字段' },
+            setter: {
+              componentName: 'ArraySetter',
+              props: {
+                itemSetter: {
+                  componentName: 'ObjectSetter',
+                  props: {
+                    config: {
+                      items: [
+                        {
+                          name: 'label',
+                          title: '标签',
+                          setter: 'PisellI18nSetter',
+                          important: true,
+                        },
+                        {
+                          name: 'value',
+                          title: 'key',
+                          setter: 'StringSetter',
+                          important: true,
+                        },
+                        {
+                          name: 'isShowLabel',
+                          title: '显示标签',
+                          setter: 'BoolSetter',
+                        },
+                        {
+                          name: 'isShowValue',
+                          title: '显示key',
+                          setter: 'BoolSetter',
+                        },
+                        // {
+                        //   name: 'icon',
+                        //   title: 'icon选择',
+                        //   setter: AntdIconSetter,
+                        // },
+                        // {
+                        //   name: 'iconSize',
+                        //   title: 'icon大小',
+                        //   setter: ['NumberSetter'],
+                        // },
+                        // {
+                        //   name: 'iconColor',
+                        //   title: 'icon颜色',
+                        //   setter: 'ColorSetter',
+                        // },
+                      ],
+                    },
+                  },
+                  initialValue: {
+                    isShowLabel: false,
+                    isShowValue: true
+                  }
+                },
+              },
+            },
+            condition: (target: any) => target.getProps().getPropValue('displayConfig.showExtraFields'),
+          },
+        ],
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onAdd',
+          template:
+            "onAdd(){\n// 创建新的回调函数\nconsole.log('onAdd');}",
+        },
+        {
+          name: 'onClose',
+          template:
+            "onClose(){\n// 关闭弹窗回调函数\nconsole.log('onClose');}",
+        },
+        {
+          name: 'onConfirm',
+          template:
+            "onConfirm(checkedValue,${extParams}){\n// 确认回调函数\nconsole.log('onConfirm');}",
+        },
+        {
+          name: 'onSkip',
+          template:
+            "onSkip(){\n// 跳过回调函数\nconsole.log('onSkip');}",
+        },
+      ],
+    },
+    component: {}
+  }
+};
+
+export default {
+  ...SelectHolderMeta,
+  snippets
+};

package/lowcode/select-holder/snippets.ts

@@ -0,0 +1,41 @@
+import { Snippet } from '@alilc/lowcode-types';
+
+const snippets: Snippet[] = [
+  {
+    title: '选择持有人',
+    screenshot: '',
+    schema: {
+      componentName: 'SelectHolder',
+      props: {
+        dataSource: [
+          {
+            value: 1,
+            label: 'Olivia',
+            subtitle: 'Subtitle',
+          },
+          {
+            value: 2,
+            label: 'Ricky Spagehetti',
+            subtitle: 'SubtitleSubtitleSubtitleSubtitleSubtitleSubtitleSubtitleSubtitle',
+          },
+        ],
+        value: [1],
+        modalConfig: {
+          title: 'Who would you like to book this event for?',
+          confirmText: 'Confirm',
+          showClose: true,
+        },
+        displayConfig: {
+          showAvatar: true,
+          showTitle: true,
+          showSubtitle: true,
+          isSkipable: true,
+          direction: 'horizontal',
+          selectType: 'single',
+        },
+      },
+    },
+  },
+];
+
+export default snippets;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/private-materials",
-  "version": "6.8.6",
+  "version": "6.8.8",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -61,10 +61,10 @@
     "styled-components": "^6.0.0-rc.3",
     "@react-spring/web": "^9.6.1",
     "@use-gesture/react": "^10.3.1",
+    "@pisell/utils": "3.0.2",
     "@pisell/icon": "0.0.11",
     "@pisell/materials": "6.8.3",
-    "@pisell/date-picker": "3.0.7",
-    "@pisell/utils": "3.0.2"
+    "@pisell/date-picker": "3.0.7"
   },
   "peerDependencies": {
     "react": "^18.0.0",