@pisell/materials 6.5.1 → 6.5.3

package/lib/components/table/Table/fields/rangePicker/Show/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FieldPropsType } from "../../types";
 declare const Show: (props: FieldPropsType) => JSX.Element;
 export default Show;

package/lib/components/table/Table/fields/rangePicker/Sort/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Sort: () => JSX.Element;
 export default Sort;

package/lib/components/table/Table/fields/rangePicker/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import filter from "./filterUtil";
 declare const _default: {
     field: {

package/lib/components/table/Table/fields/search/Config/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Config: () => JSX.Element;
 export default Config;

package/lib/components/table/Table/fields/search/Show/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FieldPropsType } from "../../types";
 declare const Show: (props: FieldPropsType) => JSX.Element;
 export default Show;

package/lib/components/table/Table/fields/search/Sort/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Sort: () => JSX.Element;
 export default Sort;

package/lib/components/table/Table/fields/search/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import filter from "./filterUtil";
 declare const _default: {
     field: {

package/lib/components/table/Table/fields/select/Config/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Config: () => JSX.Element;
 export default Config;

package/lib/components/table/Table/fields/select/Show/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FieldPropsType } from "../../types";
 declare const Show: (props: FieldPropsType) => JSX.Element;
 export default Show;

package/lib/components/table/Table/fields/select/Sort/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Sort: () => JSX.Element;
 export default Sort;

package/lib/components/table/Table/fields/select/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import filter from "./filterUtil";
 declare const _default: {
     field: {

package/lib/components/table/Table/fields/text/Config/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Config: () => JSX.Element;
 export default Config;

package/lib/components/table/Table/fields/text/Show/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FieldPropsType } from "../../types";
 import "./index.less";
 declare const Show: (props: FieldPropsType) => JSX.Element;

package/lib/components/table/Table/fields/text/Sort/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Sort: () => JSX.Element;
 export default Sort;

package/lib/components/table/Table/fields/text/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import filter from "./filterUtil";
 declare const _default: {
     field: {

package/lib/components/table/Table/fields/treeSelect/Config/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Config: () => JSX.Element;
 export default Config;

package/lib/components/table/Table/fields/treeSelect/Show/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FieldPropsType } from "../../types";
 declare const Show: (props: FieldPropsType) => JSX.Element;
 export default Show;

package/lib/components/table/Table/fields/treeSelect/Sort/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Sort: () => JSX.Element;
 export default Sort;

package/lib/components/table/Table/fields/treeSelect/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import filter from "./filterUtil";
 declare const _default: {
     field: {

package/lib/components/table/Table/tableConfig/SortRow/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./index.less";
 declare const SortRow: ({ children, rowKey, onSortChange }: any) => JSX.Element;
 export default SortRow;

package/lib/components/table/Table/tableConfig/summary/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const summary: (props: any) => JSX.Element;
 export default summary;

package/lib/components/table/Table/utils.d.ts

@@ -155,7 +155,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
     sort?: SortType | undefined;
     mode: "" | "localStorage" | "remote";
     currentViewMode: ModeType;
-}) => ("filter_setting" | "column_setting" | "gallery_setting" | "view_mode" | "group_by" | "order_by")[];
+}) => ("filters" | "filter_setting" | "column_setting" | "gallery_setting" | "view_mode" | "group_by" | "order_by")[];
 export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
 export declare const stringify: (obj: Record<string, any>) => string;
 export {};

package/lib/components/table/Table/utils.js

@@ -307,7 +307,24 @@ var setFormValuesToLocalStorage = ({
     currentSettingHash
   });
 };
-var getTableKey = (tableId) => `${tableKeyPrefix}-${tableId}`;
+var getTableKey = (tableId) => {
+  if (typeof window === "undefined" || typeof window.location === "undefined") {
+    return `${tableKeyPrefix}-${tableId}`;
+  }
+  const { pathname, search } = window.location;
+  let appendPath = pathname || "/";
+  let memoryKey = "";
+  try {
+    const params = new URLSearchParams(search || "");
+    const mk = params.get("memory_key");
+    if (mk && mk.trim() !== "") {
+      memoryKey = mk.trim();
+    }
+  } catch (e) {
+  }
+  const urlPart = memoryKey ? `${appendPath}#${memoryKey}` : appendPath;
+  return `${tableKeyPrefix}-${tableId}-${urlPart}`;
+};
 var mergeFilterSetting = ({
   list,
   quickFilterMaxLength,

package/lib/components/table/TableFilter/SortIcon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface SortIconProps {
     sortOrder: null | "ascend" | "descend";
 }

package/lib/components/table/View/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GridViewProps } from '../types';
 declare const View: (props: GridViewProps & {
     setTableSetting: (values: Record<string, any>) => void;

package/lib/components/table/hooks/useTableSetting.d.ts

@@ -1,5 +1,5 @@
 import { FilterType } from "../../filter/types";
-import { ColumnSettingType, DataSourceGroupType, GallerySettingType, GridViewType, ModeType, SortType, ExportImportModeType } from "../types";
+import { ColumnSettingType, DataSourceGroupType, GallerySettingType, GridViewType, ModeType, SortType, ExportImportModeType, LocalSettingsType } from "../types";
 declare type UseTableSettingProps = {
     tableId?: string;
     filter: FilterType;
@@ -12,11 +12,10 @@ declare type UseTableSettingProps = {
     gallery?: GallerySettingType;
     currentSettingHash: string;
     exportImport?: ExportImportModeType;
+    localSettings?: LocalSettingsType;
 };
 declare const useTableSetting: (params: UseTableSettingProps) => {
     setTableSetting: (values: Record<string, any>) => void;
-    tableSetting: {
-        [x: string]: any;
-    };
+    tableSetting: any;
 };
 export default useTableSetting;

package/lib/components/table/hooks/useTableSetting.js

@@ -1,6 +1,8 @@
+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)
@@ -14,6 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   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/components/table/hooks/useTableSetting.ts
@@ -25,6 +35,7 @@ module.exports = __toCommonJS(useTableSetting_exports);
 var import_react = require("react");
 var import_utils = require("../Table/utils");
 var import_ahooks = require("ahooks");
+var import_react2 = __toESM(require("react"));
 var useTableSetting = (params) => {
   const {
     tableId,
@@ -37,7 +48,8 @@ var useTableSetting = (params) => {
     columns: propsColumns,
     gallery,
     currentSettingHash,
-    exportImport
+    exportImport,
+    localSettings
   } = params;
   const columnsMap = (0, import_react.useMemo)(() => {
     return new Map(propsColumns.map((item) => [item.key, item]));
@@ -67,7 +79,8 @@ var useTableSetting = (params) => {
     };
   }, [gallery, columns]);
   const localStorageSettingKeyArr = (0, import_react.useMemo)(() => {
-    return (0, import_utils.getSettingKeyArrByMode)({
+    var _a;
+    const keys = (0, import_utils.getSettingKeyArrByMode)({
       filter,
       columnSetting,
       dataSourceGroup,
@@ -75,6 +88,12 @@ var useTableSetting = (params) => {
       mode: "localStorage",
       currentViewMode
     });
+    if ((localSettings == null ? void 0 : localSettings.enable) && ((_a = localSettings.scope) == null ? void 0 : _a.includes("filters"))) {
+      if (!keys.includes("filters")) {
+        keys.push("filters");
+      }
+    }
+    return keys;
   }, [tableId, filter, columnSetting, dataSourceGroup, sort, currentViewMode]);
   const defaultKeyArr = (0, import_react.useMemo)(() => {
     return (0, import_utils.getSettingKeyArrByMode)({
@@ -129,6 +148,8 @@ var useTableSetting = (params) => {
           compactMode: ((_c = mergedSetting == null ? void 0 : mergedSetting[item]) == null ? void 0 : _c.compactMode) || defaultGalleryCoverSetting.compactMode,
           isShowLabel: ((_d = mergedSetting == null ? void 0 : mergedSetting[item]) == null ? void 0 : _d.isShowLabel) ?? defaultGalleryCoverSetting.isShowLabel
         };
+      } else if (item === "filters") {
+        setting[item] = (mergedSetting == null ? void 0 : mergedSetting[item]) || {};
       } else {
         setting[item] = mergedSetting == null ? void 0 : mergedSetting[item];
       }
@@ -187,20 +208,109 @@ var useTableSetting = (params) => {
     sortButtonShow
   ]);
   const setTableSetting = (0, import_ahooks.useMemoizedFn)((values) => {
+    var _a;
+    let valuesForSave = values;
+    if ((localSettings == null ? void 0 : localSettings.enable) && ((_a = localSettings.scope) == null ? void 0 : _a.includes("filters"))) {
+      const excluded = new Set((localSettings == null ? void 0 : localSettings.excludedFilterFields) || []);
+      const filterValue = {};
+      ((filter == null ? void 0 : filter.list) || []).forEach((item) => {
+        const rawName = item == null ? void 0 : item.name;
+        if (!rawName) return;
+        const key = Array.isArray(rawName) ? rawName.join(",") : String(rawName);
+        if (excluded.has(key)) return;
+        if (values.hasOwnProperty(key)) {
+          filterValue[key] = values[key];
+        }
+      });
+      valuesForSave = {
+        ...values,
+        filters: filterValue
+      };
+    }
     (0, import_utils.setFormValuesToLocalStorage)({
       tableId,
-      allValues: values,
+      allValues: valuesForSave,
       keys: localStorageSettingKeyArr,
       currentViewMode,
       currentSettingHash
     });
   });
   const tableSetting = (0, import_react.useMemo)(() => {
-    return {
+    var _a;
+    const merged = {
       ...tableLocalSetting,
       ...defaultTableSetting
     };
+    if ((localSettings == null ? void 0 : localSettings.enable) && ((_a = localSettings.scope) == null ? void 0 : _a.includes("filters"))) {
+      const persistedFilter = tableLocalSetting == null ? void 0 : tableLocalSetting.filters;
+      if (persistedFilter && typeof persistedFilter === "object") {
+        return {
+          ...merged,
+          ...persistedFilter
+        };
+      }
+    }
+    return merged;
   }, [tableLocalSetting, defaultTableSetting]);
+  (0, import_react.useMemo)(() => {
+    var _a;
+    try {
+      if (!tableId) return;
+      const current = (0, import_utils.getTableSettingByCurrentViewMode)(tableId, currentViewMode) || {};
+      const persistedFilters = (current == null ? void 0 : current.filters) || {};
+      let nextFilters = { ...persistedFilters };
+      let shouldUpdate = false;
+      const enableFiltersMemory = !!((localSettings == null ? void 0 : localSettings.enable) && ((_a = localSettings.scope) == null ? void 0 : _a.includes("filters")));
+      if (!enableFiltersMemory) {
+        if (Object.keys(persistedFilters || {}).length > 0) {
+          nextFilters = {};
+          shouldUpdate = true;
+        }
+      } else {
+        let names = /* @__PURE__ */ new Set();
+        if (import_react2.default.isValidElement(filter)) {
+          names = new Set(
+            ((filter == null ? void 0 : filter.__items) || []).filter((item) => !item.isHidden).map((item) => {
+              const rawName = item == null ? void 0 : item.value;
+              if (!rawName) return void 0;
+              return Array.isArray(rawName) ? rawName.join(",") : String(rawName);
+            })
+          );
+        } else {
+          names = new Set(
+            ((filter == null ? void 0 : filter.list) || []).map((item) => {
+              const rawName = item == null ? void 0 : item.name;
+              if (!rawName) return void 0;
+              return Array.isArray(rawName) ? rawName.join(",") : String(rawName);
+            }).filter(Boolean)
+          );
+        }
+        const excluded = new Set((localSettings == null ? void 0 : localSettings.excludedFilterFields) || []);
+        const allowed = new Set(Array.from(names).filter((k) => !excluded.has(k)));
+        const filtered = {};
+        Object.keys(persistedFilters || {}).forEach((k) => {
+          if (allowed.has(k)) {
+            filtered[k] = persistedFilters[k];
+          } else {
+            shouldUpdate = true;
+          }
+        });
+        if (Object.keys(filtered).length !== Object.keys(persistedFilters || {}).length) {
+          shouldUpdate = true;
+        }
+        nextFilters = filtered;
+      }
+      if (shouldUpdate) {
+        (0, import_utils.setTableSettingToLocalStorage)({
+          tableId,
+          tableSettingObj: { filters: nextFilters },
+          currentViewMode,
+          currentSettingHash
+        });
+      }
+    } catch (e) {
+    }
+  }, []);
   return {
     setTableSetting,
     tableSetting

package/lib/components/table/index.js

@@ -76,6 +76,7 @@ var GridView = (0, import_model.Provider)(
       onValuesChange,
       columnSetting,
       dataSourceGroup: propsDataSourceGroup,
+      localSettings: _localSettings,
       view = defaultView,
       gallery,
       currentSettingKey,
@@ -171,7 +172,8 @@ var GridView = (0, import_model.Provider)(
       view,
       currentViewMode,
       gallery,
-      currentSettingHash
+      currentSettingHash,
+      localSettings: _localSettings
     });
     const getIsTriggerValuesChange = (0, import_useTriggerValuesChange.default)({
       filter,
@@ -260,6 +262,15 @@ var GridView = (0, import_model.Provider)(
     (0, import_react.useImperativeHandle)(ref, () => {
       if (wrapRef.current) {
         wrapRef.current.formInstance = form;
+        wrapRef.current.getCachedFilters = () => {
+          try {
+            if (!tableId) return {};
+            const setting = (0, import_utils.getTableSettingByCurrentViewMode)(tableId, currentViewMode);
+            return (setting == null ? void 0 : setting.filters) || {};
+          } catch (e) {
+            return {};
+          }
+        };
       }
       return wrapRef.current;
     });

package/lib/components/table/types.d.ts

@@ -191,6 +191,21 @@ export declare type ExportImportType = {
     apiUrl?: ApiProps;
     otherParams?: any;
 };
+/**
+ * 设置记忆范围
+ */
+export declare type LocalSettingsScope = "filters" | "sorting" | "columns";
+/**
+ * 本地记忆设置
+ */
+export declare type LocalSettingsType = {
+    /** 启用设置记忆 */
+    enable: boolean;
+    /** 记忆范围 */
+    scope: LocalSettingsScope[];
+    /** 不需要记忆的筛选字段（当 scope 包含 filters 时生效） */
+    excludedFilterFields?: string[];
+};
 export declare type GridViewProps = {
     columns: any;
     dataSource: any[];
@@ -247,5 +262,7 @@ export declare type GridViewProps = {
             sortBy?: string;
         }[];
     };
+    /** 本地记忆设置 */
+    localSettings?: LocalSettingsType;
 };
 export {};

package/lib/components/time-picker/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const TimePicker: (props: any) => JSX.Element;
 export default TimePicker;

package/lib/components/upload/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Upload: (props: any) => JSX.Element;
 export default Upload;

package/lib/components/versionSelect/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SelectProps } from 'antd';
 import './index.less';
 export interface Version {

package/lib/components/virtual-keyboard/Amount/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AmountProps, RightItemsStyleProps } from './types';
 import './index.less';
 export type { AmountProps, RightItemsStyleProps };

package/lib/components/virtual-keyboard/BaseNumberKeyboard/Presets.d.ts

@@ -1,8 +1,11 @@
-/// <reference types="react" />
-import "./Presets.less";
+import React from 'react';
+import './Presets.less';
 export declare type PresetsItem = {
     label: string;
     value: number | string;
+    style?: React.CSSProperties;
+    onClick?: (item: PresetsItem, _next: () => void) => void;
+    render?: (item: PresetsItem) => React.ReactNode;
 };
 export interface PresetsProps {
     presets?: PresetsItem[];

package/lib/components/virtual-keyboard/BaseNumberKeyboard/Presets.js

@@ -36,11 +36,28 @@ var import_react = __toESM(require("react"));
 var import_Presets = require("./Presets.less");
 var Presets = (props) => {
   const { presets, onChange } = props;
+  const handleItemClick = (item) => {
+    if (item.onClick) {
+      const _next = () => onChange(`${item.value}`);
+      item.onClick(item, _next);
+    } else {
+      onChange(`${item.value}`);
+    }
+  };
   return (0, import_react.useMemo)(() => {
     if (!(presets == null ? void 0 : presets.length)) {
       return null;
     }
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-virtual-keyboard-preset" }, presets.map((item) => /* @__PURE__ */ import_react.default.createElement("div", { onClick: () => onChange(`${item.value}`), className: "pisell-virtual-keyboard-preset-item" }, item.label)));
-  }, [presets]);
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-virtual-keyboard-preset" }, presets.map((item, index) => {
+      var _a;
+      const itemProps = {
+        key: index,
+        className: "pisell-virtual-keyboard-preset-item",
+        style: item.style,
+        onClick: () => handleItemClick(item)
+      };
+      return /* @__PURE__ */ import_react.default.createElement("div", { ...itemProps }, ((_a = item.render) == null ? void 0 : _a.call(item, item)) || item.label);
+    }));
+  }, [presets, onChange]);
 };
 var Presets_default = Presets;

package/lib/components/virtual-keyboard/BaseNumberKeyboard/Presets.less

@@ -1,18 +1,22 @@
 .pisell-virtual-keyboard-preset {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
   gap: 7px;
-  flex-wrap: wrap;
   margin-bottom: 8px;
+
   .pisell-virtual-keyboard-preset-item {
     display: flex;
-    flex: 1;
     padding: 12px 20px;
     align-items: center;
     justify-content: center;
-    height: 48px;
+    height: 40px;
     border-radius: 8px;
-    border: 1px solid var(--Gray-300, #D0D5DD);
+    border: 1px solid var(--Gray-300, #E9D7FE);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
     background: var(--Primary-25, #FCFAFF);
+    font-weight: 600;
+    color: #6941C6;
+    cursor: pointer;
+    position: relative;
   }
 }

package/lib/components/virtual-keyboard/BaseNumberKeyboard/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { PresetsProps } from './Presets';
+import { KeyboardProps } from '../Keyboard';
 import { RightItemsStyleProps } from '../Amount';
 import './index.less';
 export interface BaseNumberKeyboardProps {
@@ -16,6 +17,9 @@ export interface BaseNumberKeyboardProps {
     presets?: PresetsProps['presets'];
     defaultSelect?: boolean;
     rightItemsStyle?: RightItemsStyleProps;
+    customDisplay?: React.ReactNode | ((props: any) => React.ReactNode);
+    keyboardProps?: KeyboardProps;
+    style?: React.CSSProperties;
 }
 declare const BaseNumberKeyboard: (props: BaseNumberKeyboardProps) => JSX.Element;
 export default BaseNumberKeyboard;

package/lib/components/virtual-keyboard/BaseNumberKeyboard/index.js

@@ -128,7 +128,9 @@ var BaseNumberKeyboard = (props) => {
     onEnter,
     presets,
     defaultSelect,
-    rightItemsStyle
+    rightItemsStyle,
+    customDisplay,
+    style
   } = props;
   const [value, setValue] = (0, import_ahooks.useControllableValue)(props, {
     defaultValue
@@ -200,6 +202,8 @@ var BaseNumberKeyboard = (props) => {
     }
   };
   const handleChangeValue = (val) => {
+    var _a;
+    val = typeof val === "string" ? val : ((_a = val == null ? void 0 : val.target) == null ? void 0 : _a.value) || "";
     const detail = checkValue(val);
     if (detail) return;
     setValue(val);
@@ -228,38 +232,52 @@ var BaseNumberKeyboard = (props) => {
   const handleKeyboardChange = (0, import_ahooks.useMemoizedFn)((val) => {
     return (actions[val] || actions.default)(val);
   });
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-virtual-keyboard-base" }, /* @__PURE__ */ import_react.default.createElement(
-    import_VirtualKeyInput.default,
-    {
-      value,
-      onChange: (e) => handleChangeValue(e.target.value),
-      renderInput: (props2) => {
-        if ((0, import_utils.isUndefined)(props2.value) || props2.value === "") {
-          return /* @__PURE__ */ import_react.default.createElement(
-            import_VirtualInput.default,
-            {
-              autoFocus: true,
-              placeholder,
-              value: props2.value
-            }
-          );
-        }
-        return (format == null ? void 0 : format(props2.value)) || props2.value;
-      },
-      showDelete: false,
-      onValueSelect: setSelect,
-      defaultSelect,
-      style: {
-        backgroundColor: (rightItemsStyle == null ? void 0 : rightItemsStyle.buttonBackgroundColor) || "#fff",
-        color: (rightItemsStyle == null ? void 0 : rightItemsStyle.textColor) || "#000000"
+  const renderDisplayField = () => {
+    if (customDisplay) {
+      if (typeof customDisplay === "function") {
+        return customDisplay({
+          value,
+          onChange: handleChangeValue,
+          onValueSelect: setSelect
+        });
       }
+      return customDisplay;
     }
-  ), /* @__PURE__ */ import_react.default.createElement(import_Presets.default, { presets, onChange: handleChangeValue }), /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_VirtualKeyInput.default,
+      {
+        value,
+        onChange: (e) => handleChangeValue(e.target.value),
+        renderInput: (props2) => {
+          if ((0, import_utils.isUndefined)(props2.value) || props2.value === "") {
+            return /* @__PURE__ */ import_react.default.createElement(
+              import_VirtualInput.default,
+              {
+                autoFocus: true,
+                placeholder,
+                value: props2.value
+              }
+            );
+          }
+          return (format == null ? void 0 : format(props2.value)) || props2.value;
+        },
+        showDelete: false,
+        onValueSelect: setSelect,
+        defaultSelect,
+        style: {
+          backgroundColor: (rightItemsStyle == null ? void 0 : rightItemsStyle.buttonBackgroundColor) || "#fff",
+          color: (rightItemsStyle == null ? void 0 : rightItemsStyle.textColor) || "#000000"
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-virtual-keyboard-base", style }, renderDisplayField(), /* @__PURE__ */ import_react.default.createElement(import_Presets.default, { presets, onChange: handleChangeValue }), /* @__PURE__ */ import_react.default.createElement(
     import_Keyboard.default,
     {
       items: itemsWithStyle,
       rightItems,
-      onChange: handleKeyboardChange
+      onChange: handleKeyboardChange,
+      ...props.keyboardProps || {}
     }
   ));
 };