@wavemaker/react-runtime 11.14.2-rc.6311 → 11.15.0-1.246

package/components/form/button/index.js

@@ -16,7 +16,7 @@ var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
 var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
-var _excluded = ["iconurl", "iconclass", "iconwidth", "iconheight", "iconmargin", "iconposition", "caption", "badgevalue", "children", "styles", "conditionalstyles", "className", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onKeydown", "onKeyup", "listener", "name", "disabled", "type", "shortcutkey", "arialabel", "show"];
+var _excluded = ["iconurl", "iconclass", "iconwidth", "iconheight", "iconmargin", "iconposition", "caption", "badgevalue", "children", "styles", "conditionalstyles", "className", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onKeydown", "onKeypress", "onKeyup", "listener", "name", "disabled", "type", "shortcutkey", "arialabel", "show"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var __jsx = _react["default"].createElement;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -44,6 +44,7 @@ var WmButton = exports.WmButton = /*#__PURE__*/(0, _react.memo)(function (props)
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     onKeydown = props.onKeydown,
+    onKeypress = props.onKeypress,
     onKeyup = props.onKeyup,
     listener = props.listener,
     name = props.name,
@@ -56,6 +57,7 @@ var WmButton = exports.WmButton = /*#__PURE__*/(0, _react.memo)(function (props)
     _props$show = props.show,
     show = _props$show === void 0 ? "true" : _props$show,
     restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var safeCaption = (caption === null || caption === void 0 ? void 0 : caption.toString().replace(/undefined|null/g, "")) || "";
   var btnRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (!shortcutkey) return;
@@ -73,7 +75,9 @@ var WmButton = exports.WmButton = /*#__PURE__*/(0, _react.memo)(function (props)
   }, [shortcutkey]);
   function handleClick(event) {
     event.preventDefault();
-    event.stopPropagation();
+    if (!props.stopPropagation) {
+      event.stopPropagation();
+    }
     onClick === null || onClick === void 0 || onClick(event, props);
   }
   function handleOnBlur(event) {
@@ -109,7 +113,25 @@ var WmButton = exports.WmButton = /*#__PURE__*/(0, _react.memo)(function (props)
     event.stopPropagation();
     onKeyup === null || onKeyup === void 0 || onKeyup(event, props);
   }
-  var EVENTS = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, onBlur && {
+  function handleKeyPress(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onKeypress === null || onKeypress === void 0 || onKeypress(event, props);
+  }
+  var handleMouseDown = function handleMouseDown(event) {
+    var formName = props.formName;
+    if (type == "reset" && formName) {
+      var _document;
+      event.preventDefault();
+      (_document = document) === null || _document === void 0 || (_document = _document.activeElement) === null || _document === void 0 || _document.blur();
+      setTimeout(function () {
+        var _listener$Widgets, _listener$Widgets$for;
+        (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 || (_listener$Widgets = _listener$Widgets[formName]) === null || _listener$Widgets === void 0 || (_listener$Widgets$for = _listener$Widgets.formreset) === null || _listener$Widgets$for === void 0 || _listener$Widgets$for.call(_listener$Widgets);
+        onClick === null || onClick === void 0 || onClick(event, props);
+      }, 0);
+    }
+  };
+  var EVENTS = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, onBlur && {
     onBlur: handleOnBlur
   }), onFocus && {
     onFocus: handleOnFocus
@@ -125,6 +147,10 @@ var WmButton = exports.WmButton = /*#__PURE__*/(0, _react.memo)(function (props)
     onKeyUp: handleKeyUp
   }), onClick && {
     onClick: handleClick
+  }), onKeypress && {
+    onKeyPress: handleKeyPress
+  }), {
+    onMouseDown: handleMouseDown
   });
   return __jsx(_Button["default"], (0, _extends2["default"])({
     sx: {
@@ -145,7 +171,7 @@ var WmButton = exports.WmButton = /*#__PURE__*/(0, _react.memo)(function (props)
     ref: btnRef,
     caption: caption,
     disabled: disabled,
-    "aria-label": arialabel,
+    "aria-label": safeCaption,
     title: props.hint,
     show: show === null || show === void 0 ? void 0 : show.toString()
   }, restProps, EVENTS), iconurl && __jsx(_image["default"], {
@@ -172,11 +198,11 @@ var WmButton = exports.WmButton = /*#__PURE__*/(0, _react.memo)(function (props)
   }), __jsx(_Box["default"], {
     component: "span",
     className: "sr-only"
-  }, caption, " ", listener === null || listener === void 0 || (_listener$appLocale = listener.appLocale) === null || _listener$appLocale === void 0 ? void 0 : _listener$appLocale.LABEL_ICON)), __jsx(_Box["default"], {
+  }, safeCaption, " ", listener === null || listener === void 0 || (_listener$appLocale = listener.appLocale) === null || _listener$appLocale === void 0 ? void 0 : _listener$appLocale.LABEL_ICON)), __jsx(_Box["default"], {
     component: "span",
     className: "btn-caption",
     dangerouslySetInnerHTML: {
-      __html: caption || ""
+      __html: safeCaption || ""
     },
     sx: {
       color: "inherit",
@@ -207,7 +233,7 @@ var WmButton = exports.WmButton = /*#__PURE__*/(0, _react.memo)(function (props)
     }
   }));
 }, function (prev, current) {
-  var keys = ["iconurl", "iconclass", "icon", "width", "iconheight", "iconmargin", "caption", "badgevalue", "disabled"];
+  var keys = ["iconurl", "iconclass", "icon", "width", "iconheight", "iconmargin", "caption", "badgevalue", "disabled", "hidden", "onClick"];
   return keys.every(function (key) {
     return prev[key] === current[key];
   });

package/components/input/calendar/index.js

@@ -28,6 +28,7 @@ var __jsx = _react["default"].createElement;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var WmCalendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$hidden;
   var name = props.name,
     dataset = props.dataset,
     datavalue = props.datavalue,
@@ -122,24 +123,34 @@ var WmCalendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }, [calendartype, controls]);
   var invokeCallback = (0, _react.useCallback)(function (eventName, eventData) {
+    var $start = eventData.$start,
+      $end = eventData.$end,
+      $view = eventData.$view,
+      $data = eventData.$data,
+      $event = eventData.$event,
+      $newData = eventData.$newData,
+      $oldData = eventData.$oldData,
+      $delta = eventData.$delta,
+      $revertFunc = eventData.$revertFunc,
+      $ui = eventData.$ui;
     switch (eventName) {
       case "select":
-        onSelect === null || onSelect === void 0 || onSelect(eventData);
+        onSelect === null || onSelect === void 0 || onSelect($start, $end, $view, $data);
         break;
       case "beforerender":
         onBeforerender === null || onBeforerender === void 0 || onBeforerender(eventData, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
         break;
       case "eventdrop":
-        onEventdrop === null || onEventdrop === void 0 || onEventdrop(eventData);
+        onEventdrop === null || onEventdrop === void 0 || onEventdrop($event, $newData, $oldData, $delta, $revertFunc, $ui, $view);
         break;
       case "eventresize":
-        onEventresize === null || onEventresize === void 0 || onEventresize(eventData);
+        onEventresize === null || onEventresize === void 0 || onEventresize($event, $newData, $oldData, $delta, $revertFunc, $ui, $view);
         break;
       case "eventclick":
-        onEventclick === null || onEventclick === void 0 || onEventclick(eventData);
+        onEventclick === null || onEventclick === void 0 || onEventclick($event, $data, $view);
         break;
       case "eventrender":
-        onEventrender === null || onEventrender === void 0 || onEventrender(eventData);
+        onEventrender === null || onEventrender === void 0 || onEventrender($event, $data, $view);
         break;
       case "viewrender":
         onViewrender === null || onViewrender === void 0 || onViewrender(eventData.$view);
@@ -164,7 +175,7 @@ var WmCalendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         selectable: selectionmode !== _utils.SELECTION_MODES.NONE,
         longPressDelay: 1000,
         headerToolbar: _utils.defaultHeaderOptions,
-        nextDayThreshold: _utils.NEXT_DAY_THRESHOLD.END,
+        nextDayThreshold: _utils.NEXT_DAY_THRESHOLD.START,
         eventSources: [dataSetEvents],
         views: {
           month: {
@@ -536,6 +547,7 @@ var WmCalendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     "aria-label": view ? view + " view" : "month view"
   };
   return __jsx(_material.Box, (0, _extends2["default"])({
+    hidden: (_props$hidden = props.hidden) !== null && _props$hidden !== void 0 ? _props$hidden : false,
     className: "app-calendar"
   }, componentProps), __jsx(_material.Box, {
     className: props.className,

package/components/input/chips/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
@@ -21,12 +22,15 @@ var _search = _interopRequireDefault(require("@wavemaker/react-runtime/component
 var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
 var _SortableChip = _interopRequireDefault(require("./SortableChip"));
 var _utils = require("./utils");
+var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
+var _constants = require("@wavemaker/react-runtime/components/constants");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var __jsx = _react["default"].createElement;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DEFAULT_CLASS = "app-chips nav nav-pills list-inline";
-var WmChips = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+var WmChips = /*#__PURE__*/_react["default"].memo(function (props) {
+  var _props$hidden;
   var _props$allowonlyselec = props.allowonlyselect,
     allowonlyselect = _props$allowonlyselec === void 0 ? false : _props$allowonlyselec,
     _props$autofocus = props.autofocus,
@@ -38,7 +42,7 @@ var WmChips = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     _props$datafield = props.datafield,
     datafield = _props$datafield === void 0 ? "All Fields" : _props$datafield,
     _props$dataset = props.dataset,
-    dataset = _props$dataset === void 0 ? ["Option 1", "Option 2", "Option 3"] : _props$dataset,
+    dataset = _props$dataset === void 0 ? _constants.DEFAULT_CHIPS_DATASET : _props$dataset,
     datavalue = props.datavalue,
     dateformat = props.dateformat,
     _props$disabled = props.disabled,
@@ -116,6 +120,7 @@ var WmChips = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var _useState7 = (0, _react.useState)(false),
     isInitialized = _useState7[0],
     setIsInitialized = _useState7[1];
+  var backspaceArmedRef = (0, _react.useRef)(false);
 
   // Computed values
   var maxSizeReached = "Max size reached";
@@ -135,7 +140,7 @@ var WmChips = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     return key;
   }, [uniqueKeyCounter]);
   var processDatasetCb = (0, _react.useCallback)(function (data) {
-    return (0, _utils.processDataset)(data, displayfield, displayexpression, displayimagesrc, datafield, generateStableKeyCb);
+    return (0, _utils.processDataset)(data, displayfield || "label", displayexpression, displayimagesrc, datafield, generateStableKeyCb);
   }, [displayfield, displayexpression, displayimagesrc, datafield, generateStableKeyCb]);
   (0, _react.useEffect)(function () {
     var items = processDatasetCb(dataset);
@@ -151,7 +156,7 @@ var WmChips = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   }, [displayfield, generateUniqueKey]);
   var updateMaxSize = (0, _react.useCallback)(function (currentLength) {
     var length = currentLength !== undefined ? currentLength : chipsList.length;
-    setSaturate(maxsize > 0 && length === maxsize);
+    setSaturate((maxsize || 0) > 0 && length === maxsize);
   }, [maxsize, chipsList.length]);
   var updateQueryModel = (0, _react.useCallback)(/*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(data) {
@@ -208,8 +213,8 @@ var WmChips = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
                 var chipObj = {
                   key: generateStableKeyCb(finalDataObj, i),
                   value: finalDataObj,
-                  label: isCustom ? val : finalDataObj[displayfield || "label" || Object.keys(finalDataObj)[0]] || "",
-                  displayValue: isCustom ? val : finalDataObj[displayfield || Object.keys(finalDataObj)[0]] || "",
+                  label: isCustom || typeof finalDataObj == "string" ? val : finalDataObj[displayfield || "label" || Object.keys(finalDataObj)[0]] || "",
+                  displayValue: isCustom || typeof finalDataObj == "string" ? val : finalDataObj[displayfield || Object.keys(finalDataObj)[0]] || "",
                   displayImage: null,
                   dataObject: finalDataObj,
                   active: false,
@@ -251,27 +256,32 @@ var WmChips = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     return function (_x) {
       return _ref.apply(this, arguments);
     };
-  }(), [datasetItems, maxsize, datafield, displayfield, generateStableKeyCb, createCustomDataModel, isInitialized]);
+  }(), [datasetItems, maxsize, datafield, displayfield, generateStableKeyCb, isInitialized]);
   var debouncedUpdateQueryModel = (0, _react.useMemo)(function () {
     return (0, _lodash.debounce)(updateQueryModel, 150);
   }, [updateQueryModel]);
   (0, _react.useEffect)(function () {
     if (isInitialized && datavalue !== undefined) {
       debouncedUpdateQueryModel(datavalue);
+    } else if (datavalue == undefined || datavalue.length == 0) {
+      setChipsList([]);
+      setSearchQuery(undefined);
+      setModelByValue([]);
+      updateMaxSize(0);
     }
   }, [datavalue, debouncedUpdateQueryModel]);
   var addItem = (0, _react.useCallback)(function (newItem) {
-    (0, _utils.performAddItem)(newItem, chipsList, modelByValue, setChipsList, setModelByValue, setSearchQuery, updateMaxSize, listener, name, datafield, displayfield, createCustomDataModel, generateUniqueKey, maxsize, onBeforeadd, onChange, onAdd, props);
-  }, [chipsList, modelByValue, updateMaxSize, onChange, onAdd, onBeforeadd, listener, name, datafield, displayfield, createCustomDataModel, generateUniqueKey, maxsize, props]);
+    (0, _utils.performAddItem)(newItem, chipsList, modelByValue, setChipsList, setModelByValue, setSearchQuery, updateMaxSize, listener, name, datafield, displayfield || "label", createCustomDataModel, generateUniqueKey, maxsize || 0, onBeforeadd, onChange, onAdd, props);
+  }, [chipsList, modelByValue, updateMaxSize, onChange, onAdd, onBeforeadd, name, datafield, displayfield, createCustomDataModel, generateUniqueKey, maxsize, props]);
   var removeItem = (0, _react.useCallback)(function (event, item, index) {
     (0, _utils.performRemoveItem)(event, item, index, chipsList, modelByValue, setChipsList, setModelByValue, updateMaxSize, listener, name, onBeforeremove, onChange, onRemove, props);
-  }, [chipsList, modelByValue, updateMaxSize, onChange, onRemove, onBeforeremove, listener, name, props]);
+  }, [chipsList, modelByValue, updateMaxSize, onChange, onRemove, onBeforeremove, name, props]);
   var handleChipClick = (0, _react.useCallback)(function (event, chip, index) {
     if (readonly) return;
     if (onChipclick && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
       onChipclick(event, listener.Widgets[name], chip);
     }
-  }, [readonly, onChipclick, listener, name]);
+  }, [readonly, onChipclick, name]);
   var handleChipSelect = (0, _react.useCallback)(function (chip, index) {
     if (readonly) return;
     var newChipsList = chipsList.map(function (item, i) {
@@ -283,7 +293,7 @@ var WmChips = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     if (onChipselect && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
       onChipselect(new MouseEvent("focus"), listener.Widgets[name], chip);
     }
-  }, [readonly, chipsList, onChipselect, listener, name]);
+  }, [readonly, chipsList, onChipselect, name]);
   var handleKeyDown = (0, _react.useCallback)(function (event, index) {
     if (readonly) return;
     if ((event.key == "Backspace" || event.key == "Delete") && index !== undefined) {
@@ -292,8 +302,9 @@ var WmChips = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   }, [readonly, chipsList, removeItem]);
   var handleSearchSelect = (0, _react.useCallback)(function (event, widget, selectedValue) {
     if (selectedValue) {
-      addItem(selectedValue);
+      addItem(selectedValue.dataObject ? selectedValue.dataObject : selectedValue);
       setSearchQuery("");
+      backspaceArmedRef.current = false;
     }
   }, [addItem]);
   var handleSearchSubmit = (0, _react.useCallback)(function (event, widget) {
@@ -303,9 +314,13 @@ var WmChips = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     if (allowonlyselect) return;
     if (maxsize && chipsList.length >= maxsize) return;
     addItem(trimmedQuery);
+    setSearchQuery("");
+    backspaceArmedRef.current = false;
   }, [searchQuery, allowonlyselect, addItem, maxsize, chipsList.length]);
   var handleSearchChange = (0, _react.useCallback)(function (event, widget, newValue) {
     setSearchQuery(newValue || "");
+    // Any typing disarms backspace-delete
+    backspaceArmedRef.current = false;
   }, []);
   var handleSearchAction = (0, _react.useCallback)(function (event, widget) {
     var currentQuery = (widget === null || widget === void 0 ? void 0 : widget.query) || searchQuery;
@@ -316,10 +331,38 @@ var WmChips = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     addItem(trimmedQuery);
   }, [searchQuery, allowonlyselect, addItem, maxsize, chipsList.length]);
   var handleSearchKeyDown = (0, _react.useCallback)(function (event) {
-    if (event.key === "Enter") {
+    // Two-step backspace: first focuses last chip, second deletes it
+    if (event.key === "Backspace") {
+      var _ref2, _inputElement$value;
       var inputElement = event.target;
-      var currentQuery = (inputElement === null || inputElement === void 0 ? void 0 : inputElement.value) || searchQuery || "";
-      var trimmedQuery = (0, _lodash.trim)(currentQuery);
+      var currentQuery = ((_ref2 = (_inputElement$value = inputElement === null || inputElement === void 0 ? void 0 : inputElement.value) !== null && _inputElement$value !== void 0 ? _inputElement$value : searchQuery) !== null && _ref2 !== void 0 ? _ref2 : "").trim();
+      if (!readonly && !disabled && currentQuery === "" && chipsList.length > 0) {
+        if (!backspaceArmedRef.current) {
+          // Mark last chip active and move focus to it
+          setChipsList(function (prev) {
+            return prev.map(function (c, i) {
+              return _objectSpread(_objectSpread({}, c), {}, {
+                active: i === prev.length - 1
+              });
+            });
+          });
+          event.preventDefault();
+          backspaceArmedRef.current = true;
+          return;
+        } else {
+          event.preventDefault();
+          var lastIndex = chipsList.length - 1;
+          removeItem(event, chipsList[lastIndex], lastIndex);
+          backspaceArmedRef.current = false;
+          return;
+        }
+      }
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      var _inputElement = event.target;
+      var _currentQuery = (_inputElement === null || _inputElement === void 0 ? void 0 : _inputElement.value) || searchQuery || "";
+      var trimmedQuery = (0, _lodash.trim)(_currentQuery);
       if (!trimmedQuery) {
         return;
       }
@@ -330,7 +373,28 @@ var WmChips = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
         return;
       }
     }
-  }, [searchQuery, allowonlyselect, maxsize, chipsList.length]);
+    // Any other key disarms backspace-delete
+    if (event.key !== "Backspace") {
+      backspaceArmedRef.current = false;
+    }
+  }, [searchQuery, readonly, disabled, chipsList, removeItem, allowonlyselect, maxsize]);
+
+  // Clear search input when the parent form emits a reset
+  var rootRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    // since this seach widget inside the form is not in control to make in control getting a dispatched event.
+    var container = rootRef.current;
+    var formEl = container === null || container === void 0 ? void 0 : container.closest("form");
+    if (!formEl) return;
+    var handleFormReset = function handleFormReset() {
+      setSearchQuery(undefined);
+      backspaceArmedRef.current = false;
+    };
+    formEl.addEventListener("wmformreset", handleFormReset);
+    return function () {
+      formEl.removeEventListener("wmformreset", handleFormReset);
+    };
+  }, []);
   var renderChipsList = function renderChipsList() {
     var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor, {
       activationConstraint: {
@@ -387,8 +451,7 @@ var WmChips = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
         display: "flex",
         flexWrap: "wrap",
         gap: 1,
-        className: DEFAULT_CLASS,
-        name: name
+        className: (0, _clsx["default"])(DEFAULT_CLASS, className)
       }, inputposition === "first" && renderSearchInput(), chipsList.map(function (chip, index) {
         return __jsx(_SortableChip["default"], {
           key: chip.key,
@@ -412,8 +475,8 @@ var WmChips = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       display: "flex",
       flexWrap: "wrap",
       gap: 1,
-      className: DEFAULT_CLASS,
-      name: name
+      className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+      "aria-readonly": readonly
     }, inputposition === "first" && renderSearchInput(), chipsList.map(function (chip, index) {
       return __jsx(_SortableChip["default"], {
         key: chip.key,
@@ -435,11 +498,11 @@ var WmChips = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var renderSearchInput = function renderSearchInput() {
     return __jsx(_material.Box, {
       component: "li",
-      className: (0, _clsx["default"])("app-chip-search", className, {
+      className: (0, _clsx["default"])("app-chip-search", {
         "full-width": isFullWidth
       })
-    }, __jsx(_search["default"], {
-      name: "app-chip-search",
+    }, __jsx(_search["default"], (0, _extends2["default"])({}, props, {
+      name: "".concat(name, "_app-chip-search"),
       disabled: disabled || saturate,
       readonly: readonly,
       datafield: datafield,
@@ -472,17 +535,25 @@ var WmChips = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       "class": "app-chip-input",
       width: isFullWidth ? "100%" : undefined,
       autofocus: autofocus,
-      dataPath: dataPath
-    }));
+      isSearchInChips: true,
+      dataPath: dataPath,
+      ignoreInForm: true
+    })));
   };
   return __jsx(_material.Box, {
-    ref: ref,
+    hidden: (_props$hidden = props.hidden) !== null && _props$hidden !== void 0 ? _props$hidden : false,
     component: "div",
+    ref: rootRef,
     style: _objectSpread({
       width: width,
       height: height
     }, styles)
   }, renderChipsList());
+}, function (prev, next) {
+  var keys = ["allowonlyselect", "autofocus", "chipclass", "className", "datafield", "dataset", "datavalue", "dateformat", "disabled", "displayexpression", "displayfield", "displayimagesrc", "enablereorder", "groupby", "inputposition", "inputwidth", "limit", "match", "matchmode", "maxsize", "minchars", "name", "orderby", "placeholder", "readonly", "searchkey", "showsearchicon", "tabindex", "type", "debouncetime", "datacompletemsg", "width", "height", "styles", "dataPath", "hidden"];
+  return keys.every(function (key) {
+    return (0, _lodash.isEqual)(prev[key], next[key]);
+  });
 });
 WmChips.displayName = "WmChips";
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmChips);
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)((0, _withFormController["default"])(WmChips));

package/components/input/chips/utils.js

@@ -56,9 +56,22 @@ function processDataset(data, displayfield, displayexpression, displayimagesrc,
   return normalizedData.map(function (item, index) {
     if ((0, _typeof2["default"])(item) === "object" && item !== null) {
       var displayKey = displayfield || Object.keys(item)[0];
+      // Align with Angular: for non "All Fields", value should be the item's datafield (e.g., id)
+      var finalValue;
+      if (datafield === "All Fields") {
+        finalValue = item;
+      } else {
+        if (Object.prototype.hasOwnProperty.call(item, datafield)) {
+          finalValue = item[datafield];
+        } else if (Object.prototype.hasOwnProperty.call(item, "key")) {
+          finalValue = item.key;
+        } else {
+          finalValue = item;
+        }
+      }
       return {
         key: generateStableKeyFn(item, index),
-        value: item,
+        value: finalValue,
         label: item[displayKey] || "",
         displayValue: displayexpression ? displayexpression(item) : item[displayKey] || "",
         displayImage: displayimagesrc ? item[displayimagesrc] : null,
@@ -125,9 +138,10 @@ function updateChipsListAndTriggerEvents(newChipsList, newModelByValue, setChips
 
   // Trigger listener.onChange if available
   if (listener !== null && listener !== void 0 && listener.onChange) {
-    listener.onChange(name, _objectSpread(_objectSpread({}, props), {}, {
+    listener.onChange(props.fieldName || name, {
+      // ...props,
       datavalue: newModelByValue
-    }));
+    });
   }
 
   // Trigger specific events (onAdd, onRemove)
@@ -198,6 +212,21 @@ function validateAddItem(newItem, chipsList, maxsize, datafield) {
   if (maxsize && chipsList.length >= maxsize) {
     return false;
   }
+  // Disallow empty/whitespace items
+  if (newItem && (0, _typeof2["default"])(newItem) === "object") {
+    if (datafield === "All Fields") {
+      var _ref, _newItem$label;
+      var text = (0, _lodash.toString)((_ref = (_newItem$label = newItem.label) !== null && _newItem$label !== void 0 ? _newItem$label : newItem.displayValue) !== null && _ref !== void 0 ? _ref : "").trim();
+      if (!text) {
+        return false;
+      }
+    } else {
+      var val = newItem.value;
+      if (val === undefined || val === null || (0, _lodash.toString)(val).trim() === "") {
+        return false;
+      }
+    }
+  }
   if (isDuplicate(chipsList, newItem, datafield)) {
     return false;
   }
@@ -215,6 +244,7 @@ function validateSearchInput(query, allowonlyselect, maxsize, chipsList) {
 
 // Common functionality for add item operation
 function performAddItem(newItem, chipsList, modelByValue, setChipsList, setModelByValue, setSearchQuery, updateMaxSizeFn, listener, name, datafield, displayfield, createCustomDataModel, generateUniqueKey, maxsize, onBeforeadd, onChange, onAdd, props) {
+  var _itemToAdd$dataObject, _itemToAdd$dataObject2;
   // Validate before adding
   if (!validateAddItem(newItem, chipsList, maxsize, datafield)) {
     setSearchQuery("");
@@ -232,7 +262,7 @@ function performAddItem(newItem, chipsList, modelByValue, setChipsList, setModel
   // Create chip item with proper structure
   var chipItem = createChipItemWithStructure(itemToAdd);
   var newChipsList = [].concat((0, _toConsumableArray2["default"])(chipsList), [chipItem]);
-  var newModelByValue = [].concat((0, _toConsumableArray2["default"])(modelByValue), [itemToAdd.value]);
+  var newModelByValue = [].concat((0, _toConsumableArray2["default"])(modelByValue), [(_itemToAdd$dataObject = itemToAdd === null || itemToAdd === void 0 || (_itemToAdd$dataObject2 = itemToAdd.dataObject) === null || _itemToAdd$dataObject2 === void 0 ? void 0 : _itemToAdd$dataObject2.value) !== null && _itemToAdd$dataObject !== void 0 ? _itemToAdd$dataObject : itemToAdd.value]);
 
   // Update chips list and trigger events
   updateChipsListAndTriggerEvents(newChipsList, newModelByValue, setChipsList, setModelByValue, updateMaxSizeFn, listener, name, new MouseEvent("change"), onChange, onAdd, undefined, chipItem, modelByValue, props);