@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/input/chips/index.js

@@ -0,0 +1,583 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmChips = 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"));
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _core = require("@dnd-kit/core");
+var _sortable = require("@dnd-kit/sortable");
+var _modifiers = require("@dnd-kit/modifiers");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _lodash = require("lodash");
+var _search = require("@wavemaker-ai/react-runtime/components/basic/search");
+var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _SortableChip = _interopRequireDefault(require("./SortableChip"));
+var _utils = require("./utils");
+var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
+var _constants = require("@wavemaker-ai/react-runtime/components/constants");
+var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
+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"].memo(function (props) {
+  var _props$hidden;
+  var _props$allowonlyselec = props.allowonlyselect,
+    allowonlyselect = _props$allowonlyselec === void 0 ? false : _props$allowonlyselec,
+    _props$autofocus = props.autofocus,
+    autofocus = _props$autofocus === void 0 ? false : _props$autofocus,
+    _props$chipclass = props.chipclass,
+    chipclass = _props$chipclass === void 0 ? "" : _props$chipclass,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$datafield = props.datafield,
+    datafield = _props$datafield === void 0 ? "All Fields" : _props$datafield,
+    _props$dataset = props.dataset,
+    dataset = _props$dataset === void 0 ? _constants.DEFAULT_CHIPS_DATASET : _props$dataset,
+    datavalue = props.datavalue,
+    dateformat = props.dateformat,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    displayexpression = props.displayexpression,
+    displayfield = props.displayfield,
+    displayimagesrc = props.displayimagesrc,
+    _props$enablereorder = props.enablereorder,
+    enablereorder = _props$enablereorder === void 0 ? false : _props$enablereorder,
+    groupby = props.groupby,
+    _props$inputposition = props.inputposition,
+    inputposition = _props$inputposition === void 0 ? "last" : _props$inputposition,
+    _props$inputwidth = props.inputwidth,
+    inputwidth = _props$inputwidth === void 0 ? "default" : _props$inputwidth,
+    limit = props.limit,
+    match = props.match,
+    _props$matchmode = props.matchmode,
+    matchmode = _props$matchmode === void 0 ? "contains" : _props$matchmode,
+    maxsize = props.maxsize,
+    _props$minchars = props.minchars,
+    minchars = _props$minchars === void 0 ? 1 : _props$minchars,
+    name = props.name,
+    orderby = props.orderby,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Type here.." : _props$placeholder,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    searchkey = props.searchkey,
+    _props$showsearchicon = props.showsearchicon,
+    showsearchicon = _props$showsearchicon === void 0 ? false : _props$showsearchicon,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "search" : _props$type,
+    _props$debouncetime = props.debouncetime,
+    debouncetime = _props$debouncetime === void 0 ? 250 : _props$debouncetime,
+    _props$datacompletems = props.datacompletemsg,
+    datacompletemsg = _props$datacompletems === void 0 ? "No more data to load" : _props$datacompletems,
+    width = props.width,
+    height = props.height,
+    _props$styles = props.styles,
+    styles = _props$styles === void 0 ? {} : _props$styles,
+    listener = props.listener,
+    onAdd = props.onAdd,
+    onBeforeadd = props.onBeforeadd,
+    onBeforeremove = props.onBeforeremove,
+    onBeforereorder = props.onBeforereorder,
+    onBeforeservicecall = props.onBeforeservicecall,
+    onChipclick = props.onChipclick,
+    onChipselect = props.onChipselect,
+    onChange = props.onChange,
+    onRemove = props.onRemove,
+    onReorder = props.onReorder,
+    dataPath = props.dataPath,
+    _props$standalone = props.standalone,
+    standalone = _props$standalone === void 0 ? false : _props$standalone;
+
+  // State management
+  var _useState = (0, _react.useState)([]),
+    chipsList = _useState[0],
+    setChipsList = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    saturate = _useState2[0],
+    setSaturate = _useState2[1];
+  var _useState3 = (0, _react.useState)(""),
+    searchQuery = _useState3[0],
+    setSearchQuery = _useState3[1];
+  var _useState4 = (0, _react.useState)([]),
+    modelByValue = _useState4[0],
+    setModelByValue = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    datasetItems = _useState5[0],
+    setDatasetItems = _useState5[1];
+  var _useState6 = (0, _react.useState)(0),
+    uniqueKeyCounter = _useState6[0],
+    setUniqueKeyCounter = _useState6[1];
+  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";
+  var isFullWidth = inputwidth === "full";
+
+  // Generate stable unique key that doesn't change on re-renders
+  var generateStableKeyCb = (0, _react.useCallback)(function (item, index) {
+    return (0, _utils.generateStableKey)(item, index, datafield);
+  }, [datafield]);
+
+  // Generate unique key for new chips (only when adding new items)
+  var generateUniqueKey = (0, _react.useCallback)(function () {
+    var key = "chip_new_".concat(uniqueKeyCounter);
+    setUniqueKeyCounter(function (prev) {
+      return prev + 1;
+    });
+    return key;
+  }, [uniqueKeyCounter]);
+  var processDatasetCb = (0, _react.useCallback)(function (data) {
+    return (0, _utils.processDataset)(data, displayfield || "label", displayexpression, displayimagesrc, datafield, generateStableKeyCb);
+  }, [displayfield, displayexpression, displayimagesrc, datafield, generateStableKeyCb]);
+
+  /** Standalone: `dataset` may be a function; evaluate once for chip model + inner WmSearch. */
+  var datasetForSearchAndChips = (0, _react.useMemo)(function () {
+    if (typeof dataset === "function") {
+      try {
+        var _ref;
+        return (_ref = dataset()) !== null && _ref !== void 0 ? _ref : [];
+      } catch (_unused) {
+        return [];
+      }
+    }
+    return dataset;
+  }, [standalone, dataset]);
+  (0, _react.useEffect)(function () {
+    var items = processDatasetCb(datasetForSearchAndChips);
+    setDatasetItems(items);
+    setIsInitialized(true);
+  }, [datasetForSearchAndChips, processDatasetCb]);
+  var createCustomDataModel = (0, _react.useCallback)(function (val) {
+    var fieldKey = displayfield || "label";
+    var customObj = {};
+    customObj[fieldKey] = val;
+    customObj._uniqueKey = generateUniqueKey();
+    return customObj;
+  }, [displayfield, generateUniqueKey]);
+  var updateMaxSize = (0, _react.useCallback)(function (currentLength) {
+    var length = currentLength !== undefined ? currentLength : chipsList.length;
+    setSaturate((maxsize || 0) > 0 && length === maxsize);
+  }, [maxsize, chipsList.length]);
+  var updateQueryModel = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(data) {
+      var dataValue, newChipsList, searchQuery;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!data || !isInitialized)) {
+              _context.next = 4;
+              break;
+            }
+            setChipsList([]);
+            setModelByValue([]);
+            return _context.abrupt("return");
+          case 4:
+            if (typeof data === "string") {
+              dataValue = data.split(",");
+            } else if (Array.isArray(data)) {
+              dataValue = (0, _toConsumableArray2["default"])(data);
+            } else {
+              dataValue = [data];
+            }
+            setChipsList([]);
+            if (maxsize && dataValue.length > maxsize) {
+              dataValue = (0, _lodash.slice)(dataValue, 0, maxsize);
+            }
+            newChipsList = [];
+            searchQuery = [];
+            dataValue.forEach(function (val, i) {
+              var itemFound = (0, _lodash.find)(datasetItems, function (item) {
+                var value_obj = val.dataObject ? val.dataObject : val;
+                return (0, _lodash.isEqual)(item.value, value_obj);
+              });
+              if (itemFound) {
+                newChipsList.push(_objectSpread(_objectSpread({}, itemFound), {}, {
+                  key: generateStableKeyCb(itemFound.value, i),
+                  // Use stable key for dataset items
+                  active: false,
+                  isDuplicate: false,
+                  imgSrc: itemFound.displayImage,
+                  iscustom: false
+                }));
+              } else if (datafield === "All Fields") {
+                var dataObj = val;
+                var isCustom = false;
+                if (!(0, _lodash.isEqual)(val, dataObj)) {
+                  dataObj = createCustomDataModel(val);
+                  isCustom = true;
+                  if (dataObj) {
+                    dataValue[i] = dataObj;
+                  }
+                }
+                var finalDataObj = dataObj || val;
+                var chipObj = {
+                  key: generateStableKeyCb(finalDataObj, i),
+                  value: finalDataObj,
+                  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,
+                  isDuplicate: false,
+                  imgSrc: null,
+                  iscustom: isCustom
+                };
+                newChipsList.push(chipObj);
+              } else {
+                searchQuery.push(val);
+              }
+            });
+            if (searchQuery.length && datafield !== "All Fields") {
+              searchQuery.forEach(function (val, searchIndex) {
+                var chipObj = {
+                  key: generateStableKeyCb(val, newChipsList.length + searchIndex),
+                  value: val,
+                  label: String(val),
+                  displayValue: String(val),
+                  displayImage: null,
+                  dataObject: val,
+                  active: false,
+                  isDuplicate: false,
+                  imgSrc: null,
+                  iscustom: true
+                };
+                newChipsList.push(chipObj);
+              });
+            }
+            setChipsList(newChipsList);
+            setModelByValue(dataValue);
+            updateMaxSize(newChipsList.length);
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [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 || "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, 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.nativeEvent, listener.Widgets[name], chip);
+    }
+  }, [readonly, onChipclick, name]);
+  var handleChipSelect = (0, _react.useCallback)(function (chip, index) {
+    if (readonly) return;
+    var newChipsList = chipsList.map(function (item, i) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        active: i === index
+      });
+    });
+    setChipsList(newChipsList);
+    if (onChipselect && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
+      onChipselect(new Event("focus"), listener.Widgets[name], chip);
+    }
+  }, [readonly, chipsList, onChipselect, name]);
+  var handleKeyDown = (0, _react.useCallback)(function (event, index) {
+    if (readonly) return;
+    if ((event.key == "Backspace" || event.key == "Delete") && index !== undefined) {
+      removeItem(event, chipsList[index], index);
+    }
+  }, [readonly, chipsList, removeItem]);
+  var handleSearchSelect = (0, _react.useCallback)(function (event, widget, selectedValue) {
+    if (selectedValue) {
+      addItem(selectedValue.dataObject ? selectedValue.dataObject : selectedValue);
+      setSearchQuery("");
+      backspaceArmedRef.current = false;
+    }
+  }, [addItem]);
+  var handleSearchSubmit = (0, _react.useCallback)(function (event, widget) {
+    var currentQuery = (widget === null || widget === void 0 ? void 0 : widget.query) || searchQuery;
+    var trimmedQuery = (0, _lodash.trim)(currentQuery);
+    if (!trimmedQuery) return;
+    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;
+    var trimmedQuery = (0, _lodash.trim)(currentQuery);
+    if (!trimmedQuery) return;
+    if (allowonlyselect) return;
+    if (maxsize && chipsList.length >= maxsize) return;
+    addItem(trimmedQuery);
+  }, [searchQuery, allowonlyselect, addItem, maxsize, chipsList.length]);
+  var handleSearchKeyDown = (0, _react.useCallback)(function (event) {
+    // Two-step backspace: first focuses last chip, second deletes it
+    if (event.key === "Backspace") {
+      var _ref3, _inputElement$value;
+      var inputElement = event.target;
+      var currentQuery = ((_ref3 = (_inputElement$value = inputElement === null || inputElement === void 0 ? void 0 : inputElement.value) !== null && _inputElement$value !== void 0 ? _inputElement$value : searchQuery) !== null && _ref3 !== void 0 ? _ref3 : "").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;
+      }
+      if (allowonlyselect) {
+        return;
+      }
+      if (maxsize && chipsList.length >= maxsize) {
+        return;
+      }
+    }
+    // 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: {
+        distance: 5
+      }
+    }));
+    var handleDndEnd = function handleDndEnd(event) {
+      var active = event.active,
+        over = event.over;
+      if (!over || !enablereorder) return;
+      if (active.id === over.id) return;
+      var oldIndex = chipsList.findIndex(function (chip) {
+        return chip.key === active.id;
+      });
+      var newIndex = chipsList.findIndex(function (chip) {
+        return chip.key === over.id;
+      });
+      if (oldIndex === -1 || newIndex === -1) return;
+      var newChipsList = (0, _sortable.arrayMove)(chipsList, oldIndex, newIndex);
+      var changedItem = {
+        oldIndex: oldIndex,
+        newIndex: newIndex,
+        item: newChipsList[newIndex]
+      };
+      if (onBeforereorder && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
+        var allowReorder = onBeforereorder(new MouseEvent("dragend"), listener.Widgets[name], newChipsList, changedItem);
+        if (allowReorder === false) {
+          return;
+        }
+      }
+      var newModelByValue = (0, _sortable.arrayMove)(modelByValue, oldIndex, newIndex);
+      setChipsList(newChipsList);
+      setModelByValue(newModelByValue);
+      if (onChange && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
+        onChange(new MouseEvent("dragend"), listener.Widgets[name], newModelByValue, modelByValue);
+      }
+      if (onReorder && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
+        onReorder(new MouseEvent("dragend"), listener.Widgets[name], newChipsList, changedItem);
+      }
+    };
+    if (enablereorder && !readonly && !disabled) {
+      return __jsx(_core.DndContext, {
+        sensors: sensors,
+        collisionDetection: _core.closestCenter,
+        onDragEnd: handleDndEnd,
+        modifiers: [_modifiers.restrictToParentElement]
+      }, __jsx(_sortable.SortableContext, {
+        items: chipsList.map(function (chip) {
+          return chip.key;
+        }),
+        strategy: _sortable.horizontalListSortingStrategy
+      }, __jsx(_material.Box, {
+        component: "ul",
+        className: (0, _clsx["default"])(DEFAULT_CLASS, "wm-chips-list", className),
+        name: name
+      }, inputposition === "first" && renderSearchInput(), chipsList.map(function (chip, index) {
+        return __jsx(_SortableChip["default"], {
+          key: chip.key,
+          chip: chip,
+          index: index,
+          readonly: readonly,
+          disabled: disabled,
+          chipclass: chipclass,
+          enablereorder: enablereorder,
+          handleChipClick: handleChipClick,
+          handleChipSelect: handleChipSelect,
+          handleKeyDown: handleKeyDown,
+          removeItem: removeItem,
+          chipsList: chipsList,
+          setChipsList: setChipsList
+        });
+      }), inputposition === "last" && renderSearchInput())));
+    }
+    return __jsx(_material.Box, {
+      component: "ul",
+      className: (0, _clsx["default"])(DEFAULT_CLASS, "wm-chips-list", className),
+      "aria-readonly": readonly,
+      name: name
+    }, inputposition === "first" && renderSearchInput(), chipsList.map(function (chip, index) {
+      return __jsx(_SortableChip["default"], {
+        key: chip.key,
+        chip: chip,
+        index: index,
+        readonly: readonly,
+        disabled: disabled,
+        chipclass: chipclass,
+        enablereorder: false,
+        handleChipClick: handleChipClick,
+        handleChipSelect: handleChipSelect,
+        handleKeyDown: handleKeyDown,
+        removeItem: removeItem,
+        chipsList: chipsList,
+        setChipsList: setChipsList
+      });
+    }), inputposition === "last" && renderSearchInput());
+  };
+  var renderSearchInput = function renderSearchInput() {
+    return __jsx(_material.Box, {
+      component: "li",
+      className: (0, _clsx["default"])("app-chip-search", {
+        "full-width": isFullWidth
+      })
+    }, __jsx(_search.WmSearch, (0, _extends2["default"])({}, props, {
+      name: "".concat(name, "_app-chip-search"),
+      disabled: disabled || saturate,
+      readonly: readonly,
+      datafield: datafield,
+      searchkey: searchkey,
+      orderby: orderby,
+      placeholder: saturate ? maxSizeReached : placeholder,
+      showsearchicon: showsearchicon,
+      tabindex: tabindex,
+      minchars: minchars,
+      debouncetime: debouncetime,
+      matchmode: matchmode,
+      datacompletemsg: datacompletemsg,
+      groupby: groupby,
+      match: match,
+      dateformat: dateformat,
+      dataset: datasetForSearchAndChips,
+      displayfield: displayfield,
+      displayexpression: displayexpression,
+      displayimagesrc: displayimagesrc,
+      type: type,
+      limit: limit,
+      datavalue: searchQuery,
+      onSelect: handleSearchSelect,
+      onSubmit: handleSearchSubmit,
+      onSearch: handleSearchAction,
+      onChange: handleSearchChange,
+      onKeyDown: handleSearchKeyDown,
+      onBeforeservicecall: onBeforeservicecall,
+      listener: listener,
+      className: "app-chip-input",
+      width: isFullWidth ? "100%" : undefined,
+      autofocus: autofocus,
+      isSearchInChips: true,
+      dataPath: dataPath,
+      ignoreInForm: true
+    })));
+  };
+  return __jsx(_material.Box, {
+    hidden: (_props$hidden = props.hidden) !== null && _props$hidden !== void 0 ? _props$hidden : false,
+    component: "div",
+    className: "wm-chips-root",
+    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 WithFormController = (0, _withFormController["default"])(WmChips);
+var WmChipsStandalone = exports.WmChips = (0, _withStandalone["default"])(WithFormController);
+/**
+ * The WmChips component provides a chip/tag input with autocomplete, reorder, and search support.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-chips--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-chips--docs)
+ *
+ * @param props - {@link WmChipsProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithFormController);