@wavemaker-ai/react-runtime 1.0.0-rc.647655 → 1.0.0-rc.647684

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (112) hide show
  1. package/actions/notification-action.js +3 -3
  2. package/actions/toast.js +2 -1
  3. package/components/basic/icon/index.js +36 -5
  4. package/components/basic/iframe/index.js +18 -8
  5. package/components/basic/label/index.js +4 -3
  6. package/components/basic/message/index.js +1 -0
  7. package/components/basic/search/index.d.ts +72 -3
  8. package/components/basic/search/index.js +84 -32
  9. package/components/basic/search/props.d.ts +4 -0
  10. package/components/basic/search/providers.d.ts +1 -1
  11. package/components/basic/search/providers.js +6 -3
  12. package/components/common/WmAppIcon/index.js +11 -8
  13. package/components/common/WmAppIcon/props.d.ts +2 -0
  14. package/components/container/accordion/accordion-pane/index.d.ts +1 -0
  15. package/components/container/accordion/accordion-pane/index.js +7 -3
  16. package/components/container/accordion/accordion-pane/props.d.ts +1 -0
  17. package/components/container/index.js +13 -5
  18. package/components/container/layout-grid/index.js +1 -0
  19. package/components/container/linear-layout/index.js +0 -1
  20. package/components/container/panel/components/panel-header/index.js +1 -3
  21. package/components/container/tabs/tab-pane/index.d.ts +1 -0
  22. package/components/container/tabs/tab-pane/index.js +2 -2
  23. package/components/container/tabs/tab-pane/props.d.ts +1 -0
  24. package/components/container/wizard/index.js +11 -10
  25. package/components/container/wizard/utils.js +1 -0
  26. package/components/data/form/base-form/hooks/useFormOperations.js +9 -15
  27. package/components/data/form/base-form/index.js +17 -14
  28. package/components/data/form/base-form/utils.js +5 -4
  29. package/components/data/form/dynamic-fields/WmxDynamicFormField.d.ts +11 -0
  30. package/components/data/form/dynamic-fields/WmxDynamicFormField.js +77 -0
  31. package/components/data/form/dynamic-fields/index.js +12 -1
  32. package/components/data/form/form-action/index.d.ts +2 -2
  33. package/components/data/form/form-action/index.js +2 -2
  34. package/components/data/form/form-context.d.ts +12 -13
  35. package/components/data/form/form-context.js +4 -6
  36. package/components/data/form/form-controller/withFormController.js +4 -18
  37. package/components/data/form/form-field/index.js +10 -6
  38. package/components/data/list/components/ListItems.js +1 -3
  39. package/components/data/list/index.js +5 -4
  40. package/components/data/pagination/hooks/usePagination.js +2 -2
  41. package/components/data/table/components/RowCells.js +3 -1
  42. package/components/data/table/components/TableBody.js +2 -1
  43. package/components/data/table/components/TableDataRow.js +1 -1
  44. package/components/data/table/components/TableHeader.js +5 -1
  45. package/components/data/table/hooks/useRowHandlers.d.ts +4 -2
  46. package/components/data/table/hooks/useRowHandlers.js +23 -11
  47. package/components/data/table/hooks/useRowSelection.d.ts +1 -1
  48. package/components/data/table/hooks/useRowSelection.js +93 -74
  49. package/components/data/table/hooks/useTableColumns.js +5 -5
  50. package/components/data/table/hooks/useTableState.js +14 -2
  51. package/components/data/table/index.js +54 -50
  52. package/components/data/table/props.d.ts +12 -8
  53. package/components/data/table/utils/buildSelectionColumns.js +31 -31
  54. package/components/data/table/utils/columnBuilder.js +1 -1
  55. package/components/data/table/utils/index.d.ts +9 -1
  56. package/components/data/table/utils/index.js +30 -2
  57. package/components/data/table/utils/selectionUtils.d.ts +7 -0
  58. package/components/data/table/utils/selectionUtils.js +28 -1
  59. package/components/dialogs/dialog-actions/index.js +11 -2
  60. package/components/dialogs/dialog-header/index.js +1 -1
  61. package/components/dialogs/index.js +14 -2
  62. package/components/input/chips/index.js +29 -5
  63. package/components/input/color-picker/index.js +4 -6
  64. package/components/input/epoch/date/index.js +3 -2
  65. package/components/input/epoch/date/utils.js +4 -2
  66. package/components/input/epoch/datetime/index.js +2 -2
  67. package/components/input/epoch/datetime/props.d.ts +2 -2
  68. package/components/input/epoch/time/utils.d.ts +1 -1
  69. package/components/input/epoch/time/utils.js +2 -2
  70. package/components/input/fileupload/useFileUpload.js +19 -24
  71. package/components/input/select/index.js +8 -6
  72. package/components/input/text/index.js +2 -2
  73. package/components/input/textarea/index.js +41 -16
  74. package/components/navbar/nav/index.js +10 -5
  75. package/components/navigation/breadcrumb/index.js +2 -1
  76. package/components/navigation/popover/index.d.ts +1 -1
  77. package/components/navigation/popover/index.js +10 -2
  78. package/components/navigation/popover/props.d.ts +1 -1
  79. package/components/page/page-content/index.js +24 -4
  80. package/components/page/page-content/props.d.ts +1 -0
  81. package/components/page/partial-container/index.js +1 -1
  82. package/components/wmx/WmxRenderer.d.ts +8 -0
  83. package/components/wmx/WmxRenderer.js +57 -0
  84. package/core/appstore.js +1 -1
  85. package/core/proxy-service.d.ts +16 -1
  86. package/core/proxy-service.js +39 -12
  87. package/core/util/index.d.ts +0 -2
  88. package/core/util/index.js +0 -29
  89. package/higherOrder/BaseDateTime.js +8 -1
  90. package/higherOrder/BasePage.js +31 -65
  91. package/higherOrder/DataNav.js +4 -1
  92. package/higherOrder/withBaseWrapper.js +3 -4
  93. package/hooks/useHttp.js +4 -2
  94. package/hooks/useLayoutSize.js +1 -1
  95. package/package-lock.json +360 -696
  96. package/package.json +3 -3
  97. package/runtime-dynamic/app-initializer.js +2 -1
  98. package/runtime-dynamic/components/partial-content.js +2 -1
  99. package/runtime-dynamic/components/wmx-placeholder.d.ts +18 -0
  100. package/runtime-dynamic/components/wmx-placeholder.js +48 -0
  101. package/runtime-dynamic/main.js +6 -0
  102. package/runtime-dynamic/services/compile-render.js +75 -12
  103. package/store/slices/i18nSlice.d.ts +0 -1
  104. package/store/slices/i18nSlice.js +0 -2
  105. package/utils/layoutsize-util.js +12 -7
  106. package/utils/style-utils.d.ts +6 -0
  107. package/utils/style-utils.js +10 -0
  108. package/utils/wmx.utils.d.ts +6 -0
  109. package/utils/wmx.utils.js +41 -0
  110. package/variables/crud-variable.js +1 -1
  111. package/variables/live-variable.js +1 -1
  112. package/variables/service-variable.js +6 -3
@@ -44,12 +44,12 @@ class NotificationAction extends BaseAction {
44
44
  return this.invoke(arg1, arg2, arg3);
45
45
  }
46
46
  prepareToastOptions(params = {}) {
47
- var _a, _b, _c, _d;
47
+ var _a, _b, _c, _d, _e;
48
48
  const configParams = this.config.paramProvider();
49
49
  const mergedParams = __spreadValues(__spreadValues({}, configParams), params);
50
50
  const alertClass = (_b = (_a = String(mergedParams.class)) == null ? void 0 : _a.toLowerCase()) != null ? _b : "info";
51
51
  const type = NOTIFICATION_TYPE[alertClass] || "info";
52
- const position = (_c = mergedParams.toasterPosition) != null ? _c : "bottom right";
52
+ const position = (_d = (_c = mergedParams.position) != null ? _c : mergedParams.toasterPosition) != null ? _d : "bottom right";
53
53
  let duration = parseInt(String(mergedParams.duration));
54
54
  if (isNaN(duration)) {
55
55
  duration = type === "success" ? DEFAULT_DURATION : null;
@@ -63,7 +63,7 @@ class NotificationAction extends BaseAction {
63
63
  name: this.name,
64
64
  styles: mergedParams.styles || {},
65
65
  hideOnClick: mergedParams.hideOnClick !== false,
66
- showTypeLabel: (_d = mergedParams.showTypeLabel) != null ? _d : false,
66
+ showTypeLabel: (_e = mergedParams.showTypeLabel) != null ? _e : false,
67
67
  onClose: () => {
68
68
  if (this.config.onClose) {
69
69
  this.config.onClose(this, null);
package/actions/toast.js CHANGED
@@ -90,7 +90,8 @@ const CustomToast = ({ toast, onClose }) => {
90
90
  onClick: handleClick,
91
91
  sx: {
92
92
  "& .MuiSnackbarContent-root": {
93
- alignItems: "unset !important"
93
+ alignItems: "unset !important",
94
+ minWidth: "unset"
94
95
  },
95
96
  "& .MuiSnackbar-root": {
96
97
  all: "unset !important"
@@ -1,4 +1,6 @@
1
1
  var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
2
4
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
3
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
4
6
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,19 @@ var __spreadValues = (a, b) => {
14
16
  }
15
17
  return a;
16
18
  };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ var __objRest = (source, exclude) => {
21
+ var target = {};
22
+ for (var prop in source)
23
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
+ target[prop] = source[prop];
25
+ if (source != null && __getOwnPropSymbols)
26
+ for (var prop of __getOwnPropSymbols(source)) {
27
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
+ target[prop] = source[prop];
29
+ }
30
+ return target;
31
+ };
17
32
  import { jsx, jsxs } from "react/jsx-runtime";
18
33
  import { memo, useMemo } from "react";
19
34
  import clsx from "clsx";
@@ -21,9 +36,10 @@ import Box from "@mui/material/Box";
21
36
  import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
22
37
  import Label from "../label";
23
38
  import { WmAppIcon } from "../../common/WmAppIcon";
39
+ import { removeInvalidAttributes } from "../../../utils/attr";
24
40
  const DEFAULT_CLASS = "app-icon-wrapper";
25
41
  const WmIcon = memo((props) => {
26
- const {
42
+ const _a = props, {
27
43
  name,
28
44
  listener,
29
45
  caption,
@@ -37,7 +53,21 @@ const WmIcon = memo((props) => {
37
53
  styles,
38
54
  className,
39
55
  id
40
- } = props;
56
+ } = _a, restProps = __objRest(_a, [
57
+ "name",
58
+ "listener",
59
+ "caption",
60
+ "hint",
61
+ "iconclass",
62
+ "iconurl",
63
+ "prefabName",
64
+ "iconposition",
65
+ "iconsize",
66
+ "arialabel",
67
+ "styles",
68
+ "className",
69
+ "id"
70
+ ]);
41
71
  const wrapperStyle = useMemo(() => {
42
72
  const rootStyle = __spreadValues({}, styles || {});
43
73
  if (iconsize) {
@@ -49,7 +79,7 @@ const WmIcon = memo((props) => {
49
79
  }, [styles, iconsize]);
50
80
  return /* @__PURE__ */ jsxs(
51
81
  Box,
52
- {
82
+ __spreadProps(__spreadValues({
53
83
  className: clsx(
54
84
  DEFAULT_CLASS,
55
85
  "wm-icon-root",
@@ -61,7 +91,8 @@ const WmIcon = memo((props) => {
61
91
  "aria-label": arialabel,
62
92
  id,
63
93
  "data-icon-position": iconposition,
64
- hidden: props.hidden,
94
+ hidden: props.hidden
95
+ }, removeInvalidAttributes(restProps)), {
65
96
  children: [
66
97
  /* @__PURE__ */ jsxs(Box, { component: "span", className: "sr-only", children: [
67
98
  caption,
@@ -93,7 +124,7 @@ const WmIcon = memo((props) => {
93
124
  }
94
125
  )
95
126
  ]
96
- }
127
+ })
97
128
  );
98
129
  });
99
130
  WmIcon.displayName = "WmIcon";
@@ -27,17 +27,22 @@ import {
27
27
  import { needsEncoding, toCssLength } from "./iframe.utils";
28
28
  const DEFAULT_CLASS = "embed-responsive app-iframe";
29
29
  const WmIframe = (props) => {
30
+ var _a, _b;
30
31
  const {
31
32
  iframesrc,
32
33
  encodeurl = false,
33
34
  name,
34
35
  hint,
35
36
  arialabel,
36
- width = "300px",
37
- height = "150px",
37
+ width,
38
+ height,
38
39
  className,
39
40
  styles
40
41
  } = props;
42
+ const styleWidth = styles == null ? void 0 : styles.width;
43
+ const styleHeight = styles == null ? void 0 : styles.height;
44
+ const effectiveWidth = (_a = width != null ? width : styleWidth) != null ? _a : "300px";
45
+ const effectiveHeight = (_b = height != null ? height : styleHeight) != null ? _b : "150px";
41
46
  const { safeIframeSrc, showContentLoadError, errorMsg } = useMemo(() => {
42
47
  if (!iframesrc) {
43
48
  return {
@@ -63,13 +68,18 @@ const WmIframe = (props) => {
63
68
  const rootStyle = __spreadValues({}, styles || {});
64
69
  delete rootStyle.width;
65
70
  delete rootStyle.height;
66
- rootStyle["--wm-iframe-width"] = toCssLength(width);
67
- rootStyle["--wm-iframe-height"] = toCssLength(height);
68
- rootStyle["--wm-iframe-inner-width"] = toCssLength(width || "100%");
69
- rootStyle["--wm-iframe-inner-height"] = toCssLength(height || "400px");
71
+ rootStyle["--wm-iframe-width"] = toCssLength(effectiveWidth);
72
+ rootStyle["--wm-iframe-height"] = toCssLength(effectiveHeight);
73
+ rootStyle["--wm-iframe-inner-width"] = toCssLength(effectiveWidth || "100%");
74
+ rootStyle["--wm-iframe-inner-height"] = toCssLength(effectiveHeight || "400px");
70
75
  return rootStyle;
71
- }, [styles, width, height]);
72
- const iframeElementStyle = useMemo(() => __spreadValues({}, styles || {}), [styles]);
76
+ }, [styles, effectiveWidth, effectiveHeight]);
77
+ const iframeElementStyle = useMemo(() => {
78
+ const elementStyle = __spreadValues({}, styles || {});
79
+ delete elementStyle.width;
80
+ delete elementStyle.height;
81
+ return elementStyle;
82
+ }, [styles]);
73
83
  return /* @__PURE__ */ jsxs(
74
84
  Box,
75
85
  {
@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
30
30
  return target;
31
31
  };
32
32
  import { jsx } from "react/jsx-runtime";
33
- import { Fragment, memo } from "react";
33
+ import { Fragment, memo, useMemo } from "react";
34
34
  import clsx from "clsx";
35
35
  import DOMPurify from "dompurify";
36
36
  import Box from "@mui/material/Box";
@@ -75,7 +75,7 @@ const WmLabel = memo(
75
75
  htmlFor,
76
76
  onClick,
77
77
  listener,
78
- variant = "default:p",
78
+ variant,
79
79
  viewParent,
80
80
  loading,
81
81
  showSkeleton
@@ -116,6 +116,7 @@ const WmLabel = memo(
116
116
  onClick(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
117
117
  }
118
118
  };
119
+ const validProps = useMemo(() => removeInvalidAttributes(rest), [rest]);
119
120
  if (shouldRenderAsHTML) {
120
121
  return /* @__PURE__ */ jsx(
121
122
  Box,
@@ -129,7 +130,7 @@ const WmLabel = memo(
129
130
  caption: captionString,
130
131
  variant,
131
132
  dangerouslySetInnerHTML: { __html: sanitizedContent }
132
- }, removeInvalidAttributes(rest)), {
133
+ }, validProps), {
133
134
  onClick: handleOnClick
134
135
  })
135
136
  );
@@ -80,6 +80,7 @@ const WmMessage = memo(
80
80
  className
81
81
  ),
82
82
  title: caption,
83
+ name,
83
84
  children: [
84
85
  /* @__PURE__ */ jsx(
85
86
  Box,
@@ -37,6 +37,7 @@ declare const WmSearchStandalone: React.ComponentType<import("../../data/form/fo
37
37
  getDisplayExpression?: (data: any) => string;
38
38
  isSearchInChips?: boolean;
39
39
  onChange?: (event: any, widget: any, newVal?: any, oldVal?: any) => void;
40
+ onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
40
41
  clearSearch?: unknown;
41
42
  destroy?: (((names: string[]) => void) | ((formName?: string) => void)) & (((names: string[]) => void) | ((formName?: string) => void));
42
43
  standalone?: boolean;
@@ -131,8 +132,78 @@ export { WmSearchStandalone as WmSearch };
131
132
  *
132
133
  * @param props - {@link WmSearchProps}
133
134
  */
134
- declare const _default: React.NamedExoticComponent<import("../../data/form/form-controller/props").WithFormControllerProps & {
135
+ declare const _default: React.ComponentType<{
136
+ searchon?: import("./props").SearchOn;
137
+ showclear?: boolean | string;
138
+ fieldName?: string;
139
+ debouncetime?: number;
140
+ searchkey?: string;
141
+ matchmode?: string;
142
+ minchars?: number;
143
+ limit?: number;
144
+ placeholder?: string;
145
+ dropup?: boolean;
146
+ type?: import("./props").SearchType;
147
+ showsearchicon?: boolean;
148
+ showbackbutton?: boolean;
149
+ imagewidth?: string;
150
+ datacompletemsg?: string;
151
+ loadingdatamsg?: string;
152
+ clearsearchiconclass?: string;
153
+ clearsearchiconurl?: string;
154
+ backsearchiconclass?: string;
155
+ backsearchiconurl?: string;
156
+ searchiconclass?: string;
157
+ searchiconurl?: string;
158
+ navsearchbar?: boolean;
159
+ shortcutkey?: string;
160
+ id?: string;
161
+ onBeforeservicecall?: (widget: any, inputData: any) => void;
162
+ onSelect?: (event: React.MouseEvent<HTMLLIElement>, widget: any, selectedValue: any) => void;
163
+ onSubmit?: (event: React.MouseEvent<HTMLDivElement>, widget: any) => void;
164
+ onClear?: (event: any, widget: any) => void;
165
+ onSearch?: (event: React.MouseEvent<HTMLButtonElement>, widget: any) => void;
166
+ onDatasetready?: (widget: any, data: any[]) => void;
167
+ onQuerySearch?: (params: any, success: (val: any) => void, error: (err: any) => void) => void;
168
+ autofocus?: boolean;
169
+ dataPath?: string;
170
+ getDisplayExpression?: (data: any) => string;
171
+ isSearchInChips?: boolean;
172
+ onChange?: (event: any, widget: any, newVal?: any, oldVal?: any) => void;
173
+ onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
174
+ clearSearch?: unknown;
175
+ destroy?: (((names: string[]) => void) | ((formName?: string) => void)) & (((names: string[]) => void) | ((formName?: string) => void));
135
176
  standalone?: boolean;
177
+ datafield?: string;
178
+ displayfield?: string;
179
+ displaylabel?: string;
180
+ displayimagesrc?: string | ((data: any) => string);
181
+ displayexpression?: (data: any) => string;
182
+ usekeys?: boolean;
183
+ orderby?: string;
184
+ multiple?: boolean;
185
+ readonly?: boolean;
186
+ content?: string;
187
+ collapsible?: boolean;
188
+ groupby?: string;
189
+ allowempty?: boolean;
190
+ compareby?: string | any[];
191
+ disabled?: boolean;
192
+ required?: boolean;
193
+ isDestroyed?: boolean;
194
+ widgetType?: string;
195
+ validation?: any;
196
+ casesensitive?: boolean;
197
+ class?: string;
198
+ value?: any;
199
+ datasetItems?: any[];
200
+ selectedItems?: any[];
201
+ displayValue?: string;
202
+ groupedData?: any;
203
+ handleHeaderClick?: any;
204
+ toggleAllHeaders?: any;
205
+ isUpdateRequired?: boolean;
206
+ query?: string;
136
207
  ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
137
208
  animation?: string;
138
209
  show?: boolean | string;
@@ -158,14 +229,12 @@ declare const _default: React.NamedExoticComponent<import("../../data/form/form-
158
229
  eventCallback?: (eventName: string, data: any) => void;
159
230
  forwardedRef?: React.ForwardedRef<any>;
160
231
  viewParent?: any;
161
- destroy?: ((names: string[]) => void) | ((formName?: string) => void);
162
232
  hint?: string;
163
233
  arialabel?: string;
164
234
  tabindex?: number;
165
235
  styles?: React.CSSProperties;
166
236
  children?: React.ReactNode;
167
237
  hidden?: boolean;
168
- id?: string;
169
238
  name?: string;
170
239
  listener?: Record<string, any>;
171
240
  "data-widget-id"?: string;
@@ -105,6 +105,7 @@ const Search = React.forwardRef((props, ref) => {
105
105
  onSubmit,
106
106
  onClear,
107
107
  onSearch,
108
+ onKeyDown: onKeyDownProp,
108
109
  onDatasetready,
109
110
  styles: styles = {},
110
111
  name,
@@ -179,6 +180,7 @@ const Search = React.forwardRef((props, ref) => {
179
180
  "onSubmit",
180
181
  "onClear",
181
182
  "onSearch",
183
+ "onKeyDown",
182
184
  "onDatasetready",
183
185
  // Added onDatasetready callback
184
186
  "styles",
@@ -219,6 +221,8 @@ const Search = React.forwardRef((props, ref) => {
219
221
  const listRef = useRef(null);
220
222
  const initializedRef = useRef(false);
221
223
  const isLoadingNextPageRef = useRef(false);
224
+ const latestQueryRef = useRef("");
225
+ const latestDatavalueRef = useRef(datavalue);
222
226
  const [query, setQuery] = useState(typeof datavalue === "string" ? datavalue : "");
223
227
  const [isOpen, setIsOpen] = useState(false);
224
228
  const [loadingItems, setLoadingItems] = useState(false);
@@ -271,12 +275,28 @@ const Search = React.forwardRef((props, ref) => {
271
275
  handleQueryChange(queryValue);
272
276
  }, [queryProp]);
273
277
  useEffect(() => {
274
- var _a2;
278
+ latestQueryRef.current = query;
279
+ }, [query]);
280
+ useEffect(() => {
281
+ latestDatavalueRef.current = datavalue;
282
+ }, [datavalue]);
283
+ useEffect(() => {
284
+ var _a2, _b;
275
285
  if (datavalue === void 0 || datavalue === null || datavalue === "") {
276
286
  setQuery("");
277
287
  handleQueryChange("");
278
288
  setSelectedItem(null);
279
289
  setFormattedDataset([]);
290
+ setIsOpen(false);
291
+ setMenuOpen(false);
292
+ (_a2 = debouncedSearchRef.current) == null ? void 0 : _a2.cancel();
293
+ return;
294
+ }
295
+ if (props.isSearchInChips) {
296
+ if (!isPlainObject(datavalue)) {
297
+ setQuery(datavalue);
298
+ handleQueryChange(datavalue);
299
+ }
280
300
  return;
281
301
  }
282
302
  if ((isPlainObject(datavalue) || Array.isArray(datavalue)) && searchkey && Object.keys(datavalue).length > 0) {
@@ -298,13 +318,15 @@ const Search = React.forwardRef((props, ref) => {
298
318
  handleQueryChange(displayValue2);
299
319
  handleUpdateDatavalue(findItem);
300
320
  } else {
301
- (_a2 = debouncedSearchItemRef.current) == null ? void 0 : _a2.call(debouncedSearchItemRef, datavalue);
321
+ setQuery(datavalue);
322
+ handleQueryChange(datavalue);
323
+ (_b = debouncedSearchItemRef.current) == null ? void 0 : _b.call(debouncedSearchItemRef, datavalue);
302
324
  }
303
325
  } else if (!isPlainObject(datavalue)) {
304
326
  setQuery(datavalue);
305
327
  handleQueryChange(datavalue);
306
328
  }
307
- }, [datavalue]);
329
+ }, [datavalue, props.isSearchInChips]);
308
330
  const searchStyle = __spreadValues({
309
331
  width
310
332
  }, styles);
@@ -314,6 +336,7 @@ const Search = React.forwardRef((props, ref) => {
314
336
  }
315
337
  debouncedSearchItemRef.current = debounce(async (value2) => {
316
338
  const response = await (dataProvider == null ? void 0 : dataProvider.invokeVariable(props, value2));
339
+ if (latestDatavalueRef.current !== value2) return;
317
340
  if (response && response.length > 0) {
318
341
  let key = (searchkey == null ? void 0 : searchkey.split(",")[0]) || searchkey;
319
342
  if (!key) return;
@@ -432,6 +455,9 @@ const Search = React.forwardRef((props, ref) => {
432
455
  if (searchkey && isUpdateRequired2) {
433
456
  try {
434
457
  const response2 = await (dataProvider == null ? void 0 : dataProvider.invokeVariable(dataConfig, query2));
458
+ if (latestQueryRef.current !== query2) {
459
+ return [];
460
+ }
435
461
  if (response2) {
436
462
  const dataSet = Array.isArray(response2) ? response2 : [response2];
437
463
  if (!nextPage) {
@@ -469,6 +495,9 @@ const Search = React.forwardRef((props, ref) => {
469
495
  const localDataProvider = new LocalDataProvider();
470
496
  const response = await localDataProvider.filter(dataConfig);
471
497
  const { data, isLastPage } = response;
498
+ if (latestQueryRef.current !== query2) {
499
+ return [];
500
+ }
472
501
  setHasMoreData(data.length > 0 && !isLastPage);
473
502
  if (!nextPage) {
474
503
  setFormattedDataset(data);
@@ -539,6 +568,9 @@ const Search = React.forwardRef((props, ref) => {
539
568
  setLoadingItems(true);
540
569
  const data = await ((_a2 = getDataSourceRef.current) == null ? void 0 : _a2.call(getDataSourceRef, query2)) || [];
541
570
  setLoadingItems(false);
571
+ if (latestQueryRef.current !== query2) {
572
+ return;
573
+ }
542
574
  setFormattedDataset(data);
543
575
  if (data && data.length > 0) {
544
576
  setIsOpen(true);
@@ -562,9 +594,11 @@ const Search = React.forwardRef((props, ref) => {
562
594
  };
563
595
  }, [minchars, debouncetime]);
564
596
  useEffect(() => {
565
- var _a2;
597
+ var _a2, _b;
566
598
  if (query && (type === "autocomplete" && listenQuery || type === "search" && searchon === "typing")) {
567
599
  (_a2 = debouncedSearchRef.current) == null ? void 0 : _a2.call(debouncedSearchRef, query);
600
+ } else {
601
+ (_b = debouncedSearchRef.current) == null ? void 0 : _b.cancel();
568
602
  }
569
603
  }, [query, type, listenQuery, searchon]);
570
604
  function clearDataValue() {
@@ -695,18 +729,16 @@ const Search = React.forwardRef((props, ref) => {
695
729
  }
696
730
  };
697
731
  const handleFocus = (event) => {
698
- if (type === "autocomplete") {
699
- if (formattedDataset.length > 0 && !selectedItem) {
700
- setIsOpen(true);
701
- setMenuOpen(true);
702
- } else if (normalizedData && normalizedData.length > 0) {
703
- setFormattedDataset(normalizedData);
704
- if (props == null ? void 0 : props.groupby) {
705
- setGroupedData(getGroupedData(normalizedData));
706
- }
707
- setIsOpen(true);
708
- setMenuOpen(true);
732
+ if (formattedDataset.length > 0 && !selectedItem) {
733
+ setIsOpen(true);
734
+ setMenuOpen(true);
735
+ } else if (type === "autocomplete" && normalizedData && normalizedData.length > 0) {
736
+ setFormattedDataset(normalizedData);
737
+ if (props == null ? void 0 : props.groupby) {
738
+ setGroupedData(getGroupedData(normalizedData));
709
739
  }
740
+ setIsOpen(true);
741
+ setMenuOpen(true);
710
742
  }
711
743
  if (onFocus && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
712
744
  onFocus(
@@ -775,7 +807,7 @@ const Search = React.forwardRef((props, ref) => {
775
807
  return ((_a2 = item == null ? void 0 : item.dataObject) == null ? void 0 : _a2.dataObject) || (item == null ? void 0 : item.dataObject) || item;
776
808
  }
777
809
  const handleMatchSelect = (match) => {
778
- var _a2, _b;
810
+ var _a2, _b, _c;
779
811
  if (readonly || disabled) {
780
812
  return;
781
813
  }
@@ -814,10 +846,16 @@ const Search = React.forwardRef((props, ref) => {
814
846
  // Chips expects queryModel (DataSetItem), not the raw dataObject
815
847
  props.isSearchInChips ? item : selectedItem2
816
848
  );
817
- props.onSubmit && !props.isSearchInChips && props.onSubmit(
818
- new MouseEvent("click"),
819
- props
820
- );
849
+ }
850
+ if (onSubmit && !props.isSearchInChips && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
851
+ const submitEvent = new MouseEvent("click");
852
+ submitEvent.data = {
853
+ item: ((_c = item == null ? void 0 : item.dataObject) == null ? void 0 : _c.dataObject) || (item == null ? void 0 : item.dataObject) || item,
854
+ model: item.value,
855
+ label: item.label,
856
+ query
857
+ };
858
+ onSubmit(submitEvent, props);
821
859
  }
822
860
  } catch (error) {
823
861
  console.error("Error parsing item data:", error);
@@ -924,20 +962,17 @@ const Search = React.forwardRef((props, ref) => {
924
962
  const highlightMatch = (text, query2) => {
925
963
  if (!query2 || !text) return text;
926
964
  try {
927
- const parts = text.split(new RegExp(`(${query2})`, "gi"));
928
- return parts.map((part, index) => {
929
- if (part.toLowerCase() === query2.toLowerCase()) {
930
- return /* @__PURE__ */ jsx("strong", { className: "wm-search-match-highlight", children: part }, index);
931
- }
932
- return part;
933
- });
965
+ return text.replace(
966
+ new RegExp(`(${query2})`, "gi"),
967
+ '<strong class="wm-search-match-highlight">$1</strong>'
968
+ );
934
969
  } catch (e) {
935
970
  return text;
936
971
  }
937
972
  };
938
973
  const renderItem = (item, query2, index) => {
939
974
  const dataItem = prepareDataItem(item, index);
940
- const displayText = typeof dataItem.displayValue === "string" ? DOMPurify.sanitize(dataItem.displayValue) : String(dataItem.label);
975
+ const displayText = typeof dataItem.displayValue === "string" ? DOMPurify.sanitize(dataItem.displayValue) : DOMPurify.sanitize(String(dataItem.label));
941
976
  function handleClick(event) {
942
977
  handleMenuItemClick(event, dataItem);
943
978
  }
@@ -973,7 +1008,20 @@ const Search = React.forwardRef((props, ref) => {
973
1008
  className: "wm-search-item-image"
974
1009
  }
975
1010
  ),
976
- /* @__PURE__ */ jsx(Box, { component: "span", className: "", title: displayText, children: getDisplayExpression ? highlightMatch(getDisplayExpression(getSelectedItem(item)), query2) : highlightMatch(displayText, query2) })
1011
+ /* @__PURE__ */ jsx(
1012
+ Box,
1013
+ {
1014
+ component: "span",
1015
+ className: "",
1016
+ title: displayText,
1017
+ dangerouslySetInnerHTML: {
1018
+ __html: getDisplayExpression ? highlightMatch(
1019
+ DOMPurify.sanitize(String(getDisplayExpression(getSelectedItem(item)))),
1020
+ query2
1021
+ ) : highlightMatch(displayText, query2)
1022
+ }
1023
+ }
1024
+ )
977
1025
  ] })
978
1026
  }
979
1027
  )
@@ -1179,7 +1227,10 @@ const Search = React.forwardRef((props, ref) => {
1179
1227
  readOnly: readonly,
1180
1228
  onBlur: (e) => handleBlur(e),
1181
1229
  onFocus: (e) => handleFocus(e),
1182
- onKeyDown: (e) => handleKeyDown(e)
1230
+ onKeyDown: (e) => {
1231
+ onKeyDownProp == null ? void 0 : onKeyDownProp(e);
1232
+ handleKeyDown(e);
1233
+ }
1183
1234
  }
1184
1235
  ),
1185
1236
  type === "autocomplete" ? null : /* @__PURE__ */ jsx(Box, { component: "span", className: "input-group-addon", children: /* @__PURE__ */ jsx(Box, { component: "form", noValidate: true, autoComplete: "off", children: renderSearchIcon() }) }),
@@ -1190,9 +1241,10 @@ const Search = React.forwardRef((props, ref) => {
1190
1241
  })
1191
1242
  ) });
1192
1243
  });
1193
- const WmSearchStandalone = withStandalone(withFormController(Search));
1244
+ const WithFormSearch = withFormController(Search);
1245
+ const WmSearchStandalone = withStandalone(WithFormSearch);
1194
1246
  Search.displayName = "WmSearch";
1195
- var search_default = withFormController(withBaseWrapper(Search));
1247
+ var search_default = withBaseWrapper(WithFormSearch);
1196
1248
  export {
1197
1249
  WmSearchStandalone as WmSearch,
1198
1250
  search_default as default
@@ -152,6 +152,10 @@ export interface SearchProps extends DatasetAwareFormComponentProps {
152
152
  * Callback fired when the search value changes.
153
153
  */
154
154
  onChange?: (event: any, widget: any, newVal?: any, oldVal?: any) => void;
155
+ /**
156
+ * Callback fired on keydown in the search input (e.g. Chips' backspace-to-delete-chip handling).
157
+ */
158
+ onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
155
159
  clearSearch?: unknown;
156
160
  destroy?: ((names: string[]) => void) | ((formName?: string) => void);
157
161
  /**
@@ -43,7 +43,7 @@ export declare class LocalDataProvider implements IDataProvider {
43
43
  }
44
44
  export declare class DataProvider {
45
45
  private localDataProvider;
46
- init(component: any): any;
46
+ init(component: any): boolean;
47
47
  invokeVariable(component: any, query: string): Promise<any>;
48
48
  filter(config: DataProviderConfig): Promise<{
49
49
  data: any[];
@@ -194,10 +194,13 @@ class DataProvider {
194
194
  }
195
195
  // Check if the variable is of type service variable and whether update is required
196
196
  init(component) {
197
- var _a, _b, _c;
198
- let datasource = component == null ? void 0 : component.datasource;
197
+ const datasource = component == null ? void 0 : component.datasource;
199
198
  if (datasource && datasource.execute) {
200
- return datasource.execute(DataSource.Operation.IS_PAGEABLE) || ((_c = (_b = (_a = datasource == null ? void 0 : datasource.serviceInfo) == null ? void 0 : _a.parameters) == null ? void 0 : _b.length) != null ? _c : 0) > 0;
199
+ if (!datasource.execute(DataSource.Operation.IS_API_AWARE)) {
200
+ return false;
201
+ }
202
+ const hasData = !!((component == null ? void 0 : component.dataset) && component.dataset.length);
203
+ return !!datasource.execute(DataSource.Operation.IS_UPDATE_REQUIRED, hasData);
201
204
  }
202
205
  return false;
203
206
  }
@@ -64,6 +64,7 @@ function SvgIconInline({
64
64
  }
65
65
  const WmAppIcon = memo((props) => {
66
66
  const {
67
+ icon,
67
68
  iconclass,
68
69
  iconurl,
69
70
  defaultIconClass,
@@ -73,19 +74,21 @@ const WmAppIcon = memo((props) => {
73
74
  prefabName
74
75
  } = props;
75
76
  const extras = useMemo(() => toExtraClasses(defaultClasses), [defaultClasses]);
76
- const isSvg = isSvgIconUrl(iconurl);
77
- const isImage = !!iconurl && !isSvg;
77
+ const effectiveIconurl = iconurl || (isSvgIconUrl(icon) ? icon : null);
78
+ const effectiveIconclass = iconclass || (icon && !isSvgIconUrl(icon) ? icon : null);
79
+ const isSvg = isSvgIconUrl(effectiveIconurl);
80
+ const isImage = !!effectiveIconurl && !isSvg;
78
81
  const fontClass = useMemo(
79
- () => [defaultIconClass, iconclass].filter(Boolean).join(" "),
80
- [defaultIconClass, iconclass]
82
+ () => [defaultIconClass, effectiveIconclass].filter(Boolean).join(" "),
83
+ [defaultIconClass, effectiveIconclass]
81
84
  );
82
85
  const resolvedImageUrl = useMemo(
83
- () => isImage ? resolveIconUrl(iconurl, prefabName) : null,
84
- [isImage, iconurl, prefabName]
86
+ () => isImage ? resolveIconUrl(effectiveIconurl, prefabName) : null,
87
+ [isImage, effectiveIconurl, prefabName]
85
88
  );
86
89
  const resolvedSvgUrl = useMemo(
87
- () => isSvg && iconurl ? resolveIconUrl(iconurl, prefabName) : null,
88
- [isSvg, iconurl, prefabName]
90
+ () => isSvg && effectiveIconurl ? resolveIconUrl(effectiveIconurl, prefabName) : null,
91
+ [isSvg, effectiveIconurl, prefabName]
89
92
  );
90
93
  if (isSvg && resolvedSvgUrl) {
91
94
  return /* @__PURE__ */ jsx("span", { style: { display: "contents" }, children: /* @__PURE__ */ jsx(
@@ -1,5 +1,7 @@
1
1
  import { CSSProperties } from "react";
2
2
  export interface WmAppIconProps {
3
+ /** Generic icon value: `.svg` URL -> inline SVG, anything else -> font-icon class. Lower priority than iconclass/iconurl. */
4
+ icon?: string | null;
3
5
  /** Font-icon CSS class (e.g. `wi wi-user`). Lowest priority when iconurl is set. */
4
6
  iconclass?: string | null;
5
7
  /** Icon URL. `.svg` -> inline SVG, anything else -> `<img>`. Wins over iconclass. */
@@ -30,6 +30,7 @@ declare const _default: React.ComponentType<{
30
30
  render?: (props: WmAccordionPaneProps, onLoadCallback?: () => void) => React.ReactNode;
31
31
  tabindex?: number;
32
32
  layoutClassName?: string;
33
+ direction?: string;
33
34
  standalone?: boolean;
34
35
  ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
35
36
  animation?: string;