@wavemaker-ai/react-runtime 1.0.0-rc.647502 → 1.0.0-rc.647565

package/components/input/chips/index.js

@@ -1,583 +1,676 @@
-"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 [];
-      }
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-    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);
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import { Box } from "@mui/material";
+import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { arrayMove, SortableContext, horizontalListSortingStrategy } from "@dnd-kit/sortable";
+import { restrictToParentElement } from "@dnd-kit/modifiers";
+import clsx from "clsx";
+import { debounce, isEqual, trim, find, slice } from "lodash";
+import { WmSearch } from "../../basic/search";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import SortableChip from "./SortableChip";
+import { generateStableKey, processDataset, performAddItem, performRemoveItem } from "./utils";
+import withFormController from "../../data/form/form-controller/withFormController";
+import { DEFAULT_CHIPS_DATASET } from "../../constants";
+import withStandalone from "../../../higherOrder/withStandalone";
+const DEFAULT_CLASS = "app-chips nav nav-pills list-inline";
+const WmChips = React.memo(
+  (props) => {
+    var _a;
+    const {
+      allowonlyselect = false,
+      autofocus = false,
+      chipclass = "",
+      className = "",
+      datafield = "All Fields",
+      dataset = DEFAULT_CHIPS_DATASET,
+      datavalue,
+      dateformat,
+      disabled = false,
+      displayexpression,
+      displayfield,
+      displayimagesrc,
+      enablereorder = false,
+      groupby,
+      inputposition = "last",
+      inputwidth = "default",
+      limit,
+      match,
+      matchmode = "contains",
+      maxsize,
+      minchars = 1,
+      name,
+      orderby,
+      placeholder = "Type here..",
+      readonly = false,
+      searchkey,
+      showsearchicon = false,
+      tabindex = 0,
+      type = "search",
+      debouncetime = 250,
+      datacompletemsg = "No more data to load",
+      width,
+      height,
+      styles = {},
+      listener,
+      // Event handlers
+      onAdd,
+      onBeforeadd,
+      onBeforeremove,
+      onBeforereorder,
+      onBeforeservicecall,
+      onChipclick,
+      onChipselect,
+      onChange,
+      onRemove,
+      onReorder,
+      dataPath,
+      standalone = false
+    } = props;
+    const [chipsList, setChipsList] = useState([]);
+    const [saturate, setSaturate] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [modelByValue, setModelByValue] = useState([]);
+    const [datasetItems, setDatasetItems] = useState([]);
+    const [uniqueKeyCounter, setUniqueKeyCounter] = useState(0);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const backspaceArmedRef = useRef(false);
+    const maxSizeReached = "Max size reached";
+    const isFullWidth = inputwidth === "full";
+    const generateStableKeyCb = useCallback(
+      (item, index) => {
+        return generateStableKey(item, index, datafield);
+      },
+      [datafield]
+    );
+    const generateUniqueKey = useCallback(() => {
+      const key = `chip_new_${uniqueKeyCounter}`;
+      setUniqueKeyCounter((prev) => prev + 1);
+      return key;
+    }, [uniqueKeyCounter]);
+    const processDatasetCb = useCallback(
+      (data) => {
+        return processDataset(
+          data,
+          displayfield || "label",
+          displayexpression,
+          displayimagesrc,
+          datafield,
+          generateStableKeyCb
+        );
+      },
+      [displayfield, displayexpression, displayimagesrc, datafield, generateStableKeyCb]
+    );
+    const datasetForSearchAndChips = useMemo(() => {
+      var _a2;
+      if (typeof dataset === "function") {
+        try {
+          return (_a2 = dataset()) != null ? _a2 : [];
+        } catch (e) {
+          return [];
+        }
+      }
+      return dataset;
+    }, [standalone, dataset]);
+    useEffect(() => {
+      const items = processDatasetCb(datasetForSearchAndChips);
+      setDatasetItems(items);
+      setIsInitialized(true);
+    }, [datasetForSearchAndChips, processDatasetCb]);
+    const createCustomDataModel = useCallback(
+      (val) => {
+        const fieldKey = displayfield || "label";
+        const customObj = {};
+        customObj[fieldKey] = val;
+        customObj._uniqueKey = generateUniqueKey();
+        return customObj;
+      },
+      [displayfield, generateUniqueKey]
+    );
+    const updateMaxSize = useCallback(
+      (currentLength) => {
+        const length = currentLength !== void 0 ? currentLength : chipsList.length;
+        setSaturate((maxsize || 0) > 0 && length === maxsize);
+      },
+      [maxsize, chipsList.length]
+    );
+    const updateQueryModel = useCallback(
+      async (data) => {
+        if (!data || !isInitialized) {
+          setChipsList([]);
+          setModelByValue([]);
+          return;
+        }
+        let dataValue;
+        if (typeof data === "string") {
+          dataValue = data.split(",");
+        } else if (Array.isArray(data)) {
+          dataValue = [...data];
+        } else {
+          dataValue = [data];
+        }
+        setChipsList([]);
+        if (maxsize && dataValue.length > maxsize) {
+          dataValue = slice(dataValue, 0, maxsize);
+        }
+        const newChipsList = [];
+        const searchQuery2 = [];
+        dataValue.forEach((val, i) => {
+          const itemFound = find(datasetItems, (item) => {
+            const value_obj = val.dataObject ? val.dataObject : val;
+            return isEqual(item.value, value_obj);
+          });
+          if (itemFound) {
+            newChipsList.push(__spreadProps(__spreadValues({}, 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") {
+            let dataObj = val;
+            let isCustom = false;
+            if (!isEqual(val, dataObj)) {
+              dataObj = createCustomDataModel(val);
+              isCustom = true;
+              if (dataObj) {
+                dataValue[i] = dataObj;
               }
-            });
-            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();
+            const finalDataObj = dataObj || val;
+            const chipObj = {
+              key: generateStableKeyCb(finalDataObj, i),
+              value: finalDataObj,
+              label: isCustom || typeof finalDataObj == "string" ? val : finalDataObj[displayfield || "label"] || "",
+              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 {
+            searchQuery2.push(val);
+          }
+        });
+        if (searchQuery2.length && datafield !== "All Fields") {
+          searchQuery2.forEach((val, searchIndex) => {
+            const 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);
+          });
         }
-      }, _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("");
+        setChipsList(newChipsList);
+        setModelByValue(dataValue);
+        updateMaxSize(newChipsList.length);
+      },
+      [datasetItems, maxsize, datafield, displayfield, generateStableKeyCb, isInitialized]
+    );
+    const debouncedUpdateQueryModel = useMemo(() => {
+      return debounce(updateQueryModel, 150);
+    }, [updateQueryModel]);
+    useEffect(() => {
+      if (isInitialized && datavalue !== void 0) {
+        debouncedUpdateQueryModel(datavalue);
+      } else if (datavalue == void 0 || datavalue.length == 0) {
+        setChipsList([]);
+        setSearchQuery(void 0);
+        setModelByValue([]);
+        updateMaxSize(0);
+      }
+    }, [datavalue, debouncedUpdateQueryModel]);
+    const addItem = useCallback(
+      (newItem) => {
+        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
+      ]
+    );
+    const removeItem = useCallback(
+      (event, item, index) => {
+        performRemoveItem(
+          event,
+          item,
+          index,
+          chipsList,
+          modelByValue,
+          setChipsList,
+          setModelByValue,
+          updateMaxSize,
+          listener,
+          name,
+          onBeforeremove,
+          onChange,
+          onRemove,
+          props
+        );
+      },
+      [chipsList, modelByValue, updateMaxSize, onChange, onRemove, onBeforeremove, name, props]
+    );
+    const handleChipClick = useCallback(
+      (event, chip, index) => {
+        if (readonly) return;
+        if (onChipclick && (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets) {
+          onChipclick(event.nativeEvent, listener.Widgets[name], chip);
+        }
+      },
+      [readonly, onChipclick, name]
+    );
+    const handleChipSelect = useCallback(
+      (chip, index) => {
+        if (readonly) return;
+        const newChipsList = chipsList.map((item, i) => __spreadProps(__spreadValues({}, item), {
+          active: i === index
+        }));
+        setChipsList(newChipsList);
+        if (onChipselect && (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets) {
+          onChipselect(new Event("focus"), listener.Widgets[name], chip);
+        }
+      },
+      [readonly, chipsList, onChipselect, name]
+    );
+    const handleKeyDown = useCallback(
+      (event, index) => {
+        if (readonly) return;
+        if ((event.key == "Backspace" || event.key == "Delete") && index !== void 0) {
+          removeItem(event, chipsList[index], index);
+        }
+      },
+      [readonly, chipsList, removeItem]
+    );
+    const handleSearchSelect = useCallback(
+      (event, widget, selectedValue) => {
+        if (selectedValue) {
+          addItem(selectedValue.dataObject ? selectedValue.dataObject : selectedValue);
+          setSearchQuery("");
+          backspaceArmedRef.current = false;
+        }
+      },
+      [addItem]
+    );
+    const handleSearchSubmit = useCallback(
+      (event, widget) => {
+        const currentQuery = (widget == null ? void 0 : widget.query) || searchQuery;
+        const trimmedQuery = 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]
+    );
+    const handleSearchChange = useCallback((event, widget, newValue) => {
+      setSearchQuery(newValue || "");
       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 {
+    }, []);
+    const handleSearchAction = useCallback(
+      (event, widget) => {
+        const currentQuery = (widget == null ? void 0 : widget.query) || searchQuery;
+        const trimmedQuery = trim(currentQuery);
+        if (!trimmedQuery) return;
+        if (allowonlyselect) return;
+        if (maxsize && chipsList.length >= maxsize) return;
+        addItem(trimmedQuery);
+      },
+      [searchQuery, allowonlyselect, addItem, maxsize, chipsList.length]
+    );
+    const handleSearchKeyDown = useCallback(
+      (event) => {
+        var _a2, _b;
+        if (event.key === "Backspace") {
+          const inputElement = event.target;
+          const currentQuery = ((_b = (_a2 = inputElement == null ? void 0 : inputElement.value) != null ? _a2 : searchQuery) != null ? _b : "").trim();
+          if (!readonly && !disabled && currentQuery === "" && chipsList.length > 0) {
+            if (!backspaceArmedRef.current) {
+              setChipsList(
+                (prev) => prev.map((c, i) => __spreadProps(__spreadValues({}, c), {
+                  active: i === prev.length - 1
+                }))
+              );
+              event.preventDefault();
+              backspaceArmedRef.current = true;
+              return;
+            } else {
+              event.preventDefault();
+              const lastIndex = chipsList.length - 1;
+              removeItem(event, chipsList[lastIndex], lastIndex);
+              backspaceArmedRef.current = false;
+              return;
+            }
+          }
+        }
+        if (event.key === "Enter") {
           event.preventDefault();
-          var lastIndex = chipsList.length - 1;
-          removeItem(event, chipsList[lastIndex], lastIndex);
+          const inputElement = event.target;
+          const currentQuery = (inputElement == null ? void 0 : inputElement.value) || searchQuery || "";
+          const trimmedQuery = trim(currentQuery);
+          if (!trimmedQuery) {
+            return;
+          }
+          if (allowonlyselect) {
+            return;
+          }
+          if (maxsize && chipsList.length >= maxsize) {
+            return;
+          }
+        }
+        if (event.key !== "Backspace") {
           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]
+      },
+      [searchQuery, readonly, disabled, chipsList, removeItem, allowonlyselect, maxsize]
+    );
+    const rootRef = useRef(null);
+    useEffect(() => {
+      const container = rootRef.current;
+      const formEl = container == null ? void 0 : container.closest("form");
+      if (!formEl) return;
+      const handleFormReset = () => {
+        setSearchQuery(void 0);
+        backspaceArmedRef.current = false;
       };
-      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;
+      formEl.addEventListener("wmformreset", handleFormReset);
+      return () => {
+        formEl.removeEventListener("wmformreset", handleFormReset);
+      };
+    }, []);
+    const renderChipsList = () => {
+      const sensors = useSensors(
+        useSensor(PointerSensor, {
+          activationConstraint: { distance: 5 }
+        })
+      );
+      const handleDndEnd = (event) => {
+        const { active, over } = event;
+        if (!over || !enablereorder) return;
+        if (active.id === over.id) return;
+        const oldIndex = chipsList.findIndex((chip) => chip.key === active.id);
+        const newIndex = chipsList.findIndex((chip) => chip.key === over.id);
+        if (oldIndex === -1 || newIndex === -1) return;
+        const newChipsList = arrayMove(chipsList, oldIndex, newIndex);
+        const changedItem = { oldIndex, newIndex, item: newChipsList[newIndex] };
+        if (onBeforereorder && (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets) {
+          const allowReorder = onBeforereorder(
+            new MouseEvent("dragend"),
+            listener.Widgets[name],
+            newChipsList,
+            changedItem
+          );
+          if (allowReorder === false) {
+            return;
+          }
         }
+        const newModelByValue = arrayMove(modelByValue, oldIndex, newIndex);
+        setChipsList(newChipsList);
+        setModelByValue(newModelByValue);
+        if (onChange && (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets) {
+          onChange(
+            new MouseEvent("dragend"),
+            listener.Widgets[name],
+            newModelByValue,
+            modelByValue
+          );
+        }
+        if (onReorder && (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets) {
+          onReorder(
+            new MouseEvent("dragend"),
+            listener.Widgets[name],
+            newChipsList,
+            changedItem
+          );
+        }
+      };
+      if (enablereorder && !readonly && !disabled) {
+        return /* @__PURE__ */ jsx(
+          DndContext,
+          {
+            sensors,
+            collisionDetection: closestCenter,
+            onDragEnd: handleDndEnd,
+            modifiers: [restrictToParentElement],
+            children: /* @__PURE__ */ jsx(
+              SortableContext,
+              {
+                items: chipsList.map((chip) => chip.key),
+                strategy: horizontalListSortingStrategy,
+                children: /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    component: "ul",
+                    className: clsx(DEFAULT_CLASS, "wm-chips-list", className),
+                    name,
+                    children: [
+                      inputposition === "first" && renderSearchInput(),
+                      chipsList.map((chip, index) => /* @__PURE__ */ jsx(
+                        SortableChip,
+                        {
+                          chip,
+                          index,
+                          readonly,
+                          disabled,
+                          chipclass,
+                          enablereorder,
+                          handleChipClick,
+                          handleChipSelect,
+                          handleKeyDown,
+                          removeItem,
+                          chipsList,
+                          setChipsList
+                        },
+                        chip.key
+                      )),
+                      inputposition === "last" && renderSearchInput()
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        );
       }
-      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);
-      }
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          component: "ul",
+          className: clsx(DEFAULT_CLASS, "wm-chips-list", className),
+          "aria-readonly": readonly,
+          name,
+          children: [
+            inputposition === "first" && renderSearchInput(),
+            chipsList.map((chip, index) => /* @__PURE__ */ jsx(
+              SortableChip,
+              {
+                chip,
+                index,
+                readonly,
+                disabled,
+                chipclass,
+                enablereorder: false,
+                handleChipClick,
+                handleChipSelect,
+                handleKeyDown,
+                removeItem,
+                chipsList,
+                setChipsList
+              },
+              chip.key
+            )),
+            inputposition === "last" && renderSearchInput()
+          ]
+        }
+      );
     };
-    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]);
-  });
-});
+    const renderSearchInput = () => {
+      return /* @__PURE__ */ jsx(Box, { component: "li", className: clsx("app-chip-search", { "full-width": isFullWidth }), children: /* @__PURE__ */ jsx(
+        WmSearch,
+        __spreadProps(__spreadValues({}, props), {
+          name: `${name}_app-chip-search`,
+          disabled: disabled || saturate,
+          readonly,
+          datafield,
+          searchkey,
+          orderby,
+          placeholder: saturate ? maxSizeReached : placeholder,
+          showsearchicon,
+          tabindex,
+          minchars,
+          debouncetime,
+          matchmode,
+          datacompletemsg,
+          groupby,
+          match,
+          dateformat,
+          dataset: datasetForSearchAndChips,
+          displayfield,
+          displayexpression,
+          displayimagesrc,
+          type,
+          limit,
+          datavalue: searchQuery,
+          onSelect: handleSearchSelect,
+          onSubmit: handleSearchSubmit,
+          onSearch: handleSearchAction,
+          onChange: handleSearchChange,
+          onKeyDown: handleSearchKeyDown,
+          onBeforeservicecall,
+          listener,
+          className: "app-chip-input",
+          width: isFullWidth ? "100%" : void 0,
+          autofocus,
+          isSearchInChips: true,
+          dataPath,
+          ignoreInForm: true
+        })
+      ) });
+    };
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        hidden: (_a = props.hidden) != null ? _a : false,
+        component: "div",
+        className: "wm-chips-root",
+        ref: rootRef,
+        style: __spreadValues({ width, height }, styles),
+        children: renderChipsList()
+      }
+    );
+  },
+  (prev, next) => {
+    const 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((key) => {
+      return 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);
+const WithFormController = withFormController(WmChips);
+const WmChipsStandalone = withStandalone(WithFormController);
+var chips_default = withBaseWrapper(WithFormController);
+export {
+  WmChipsStandalone as WmChips,
+  chips_default as default
+};