@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/input/chips/props.d.ts

@@ -0,0 +1,232 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Represents a single item in the dataset.
+ */
+export interface DataSetItem {
+    /** Unique key identifying the item. */
+    key: string;
+    /** The value of the item. */
+    value: string | number | boolean;
+    /** Display label for the item. */
+    label: string;
+    /** Formatted display value. */
+    displayValue: string;
+    /** URL of the display image. */
+    displayImage?: string | null;
+    /** The original data object associated with this item. */
+    dataObject?: unknown;
+    /** Whether this is a custom (user-typed) item. */
+    iscustom?: boolean;
+}
+/**
+ * Represents a chip item (extends DataSetItem with active/duplicate state).
+ */
+export interface ChipItem extends DataSetItem {
+    /** Whether the chip is currently active/selected. */
+    active?: boolean;
+    /** Whether the chip is a duplicate. */
+    isDuplicate?: boolean;
+    /** Image source URL for the chip. */
+    imgSrc?: string | null;
+    /** Whether this is a custom (user-typed) chip. */
+    iscustom?: boolean;
+}
+/**
+ * Props specific to the WmChips component.
+ */
+export interface ChipsProps {
+    /**
+     * Set by the standalone export path; function `dataset` is evaluated in the widget for chip model + inner search.
+     */
+    standalone?: boolean;
+    /**
+     * When true, only items from the dataset can be selected (no custom input).
+     */
+    allowonlyselect?: boolean;
+    /**
+     * Whether the chips input should be focused on mount.
+     */
+    autofocus?: boolean;
+    /**
+     * CSS class applied to individual chips.
+     */
+    chipclass?: string;
+    /**
+     * The field from the dataset to use as the data value.
+     */
+    datafield?: string;
+    /**
+     * The data source bound to the chips widget.
+     */
+    dataset?: unknown[] | string | Record<string, unknown>;
+    /**
+     * The current selected data values.
+     */
+    datavalue?: unknown[] | string | Record<string, unknown>;
+    /**
+     * Date format applied to date-type fields.
+     */
+    dateformat?: string;
+    /**
+     * Whether the chips input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Custom function to compute the display text for each chip.
+     */
+    displayexpression?: (data: Record<string, unknown>) => string;
+    /**
+     * The field from the dataset to display as the chip label.
+     */
+    displayfield?: string;
+    /**
+     * The field from the dataset to use as the chip image source.
+     */
+    displayimagesrc?: string;
+    /**
+     * Whether chip reordering via drag-and-drop is enabled.
+     */
+    enablereorder?: boolean;
+    /**
+     * The field to group chips by.
+     */
+    groupby?: string;
+    /**
+     * Position of the text input relative to chips.
+     * @default "last"
+     */
+    inputposition?: "first" | "last";
+    /**
+     * Width of the text input.
+     * @default "default"
+     */
+    inputwidth?: "default" | "full" | string;
+    /**
+     * Maximum number of chips that can be selected.
+     */
+    limit?: number;
+    /**
+     * Match mode for filtering the dataset.
+     */
+    match?: string;
+    /**
+     * Strategy for matching search input against dataset items.
+     */
+    matchmode?: string;
+    /**
+     * Maximum number of characters allowed in the chip input.
+     */
+    maxsize?: number;
+    /**
+     * Minimum characters required before showing suggestions.
+     */
+    minchars?: number;
+    /**
+     * The unique name of the chips widget (required).
+     */
+    name: string;
+    /**
+     * Field(s) to order the dataset by.
+     */
+    orderby?: string;
+    /**
+     * Placeholder text shown in the input.
+     */
+    placeholder?: string;
+    /**
+     * Whether the chips input is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * The field(s) to search on when filtering.
+     */
+    searchkey?: string;
+    /**
+     * Whether to show a search icon in the input.
+     */
+    showsearchicon?: boolean;
+    /**
+     * Type of input behavior.
+     */
+    type?: "search" | "autocomplete";
+    /**
+     * Debounce time in milliseconds for search input.
+     */
+    debouncetime?: number;
+    /**
+     * Message shown when all items are selected.
+     */
+    datacompletemsg?: string;
+    /**
+     * Field used for comparing chip values.
+     */
+    compareby?: string;
+    /**
+     * Additional data options for the chips widget.
+     */
+    dataoptions?: Record<string, unknown>;
+    /**
+     * Data source configuration.
+     */
+    datasource?: Record<string, unknown>;
+    /**
+     * Data value source for binding.
+     */
+    datavaluesource?: Record<string, unknown>;
+    /**
+     * Data path for nested data access.
+     */
+    dataPath?: string;
+    /**
+     * Callback invoked when a chip is added.
+     */
+    onAdd?: (event: Event, widget: Record<string, unknown>, item: ChipItem) => void;
+    /**
+     * Callback invoked before a chip is added. Return `false` to prevent adding.
+     */
+    onBeforeadd?: (event: Event, widget: Record<string, unknown>, newItem: DataSetItem) => boolean | void;
+    /**
+     * Callback invoked before a chip is removed. Return `false` to prevent removal.
+     */
+    onBeforeremove?: (event: Event, widget: Record<string, unknown>, item: ChipItem | ChipItem[]) => boolean | void;
+    /**
+     * Callback invoked before chips are reordered. Return `false` to prevent reordering.
+     */
+    onBeforereorder?: (event: Event, widget: Record<string, unknown>, data: ChipItem[], changedItem: {
+        oldIndex: number;
+        newIndex: number;
+        item: ChipItem;
+    }) => boolean | void;
+    /**
+     * Callback invoked before a service call is made.
+     */
+    onBeforeservicecall?: (widget: Record<string, unknown>, inputData: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when a chip is clicked.
+     */
+    onChipclick?: (event: Event, widget: Record<string, unknown>, item: ChipItem) => void;
+    /**
+     * Callback invoked when a chip is selected.
+     */
+    onChipselect?: (event: Event, widget: Record<string, unknown>, item: ChipItem) => void;
+    /**
+     * Callback invoked when the selected chips change.
+     */
+    onChange?: (event: Event, widget: Record<string, unknown>, newVal: unknown[], oldVal: unknown[]) => void;
+    /**
+     * Callback invoked when a chip is removed.
+     */
+    onRemove?: (event: Event, widget: Record<string, unknown>, item: ChipItem | ChipItem[]) => void;
+    /**
+     * Callback invoked after chips are reordered.
+     */
+    onReorder?: (event: Event, widget: Record<string, unknown>, data: ChipItem[], changedItem: {
+        oldIndex: number;
+        newIndex: number;
+        item: ChipItem;
+    }) => void;
+}
+/**
+ * Combined props for the WmChips component, including base WaveMaker props.
+ */
+export type WmChipsProps = Prettify<ChipsProps & BaseProps>;

package/components/input/chips/utils.d.ts

@@ -0,0 +1,27 @@
+import { ChipItem, DataSetItem } from "./props";
+export declare function generateStableKey(item: unknown, index: number, datafield: string): string;
+export declare function processDataset(data: any, displayfield: string, displayexpression: ((data: any) => string) | undefined, displayimagesrc: string | undefined, datafield: string, generateStableKeyFn: (item: any, index: number) => string): {
+    key: string;
+    value: any;
+    label: string;
+    displayValue: string;
+    displayImage: string;
+    dataObject: any;
+}[];
+export declare function getChipDisplayValue(chip: ChipItem, datafield: string): string | number | boolean;
+export declare function getItemDisplayValue(item: DataSetItem | string, datafield: string): string | number | boolean;
+export declare function isDuplicate(chipsList: ChipItem[], item: DataSetItem | string, datafield: string): boolean;
+export declare function updateMaxSize(maxsize: number, chipsList: ChipItem[], setSaturate: (val: boolean) => void): void;
+export declare function updateChipsListAndTriggerEvents(newChipsList: ChipItem[], newModelByValue: any[], setChipsList: (chips: ChipItem[]) => void, setModelByValue: (model: any[]) => void, updateMaxSizeFn: (length: number) => void, listener: any, name: string, event: any, onChange?: any, onAdd?: any, onRemove?: any, chipItem?: ChipItem, oldModelByValue?: any[], props?: any): void;
+export declare function validateBeforeOperation(listener: any, name: string, beforeHandler: any, event: any, item: any): boolean;
+export declare function createChipItem(itemToAdd: DataSetItem | string, generateUniqueKey: () => string, datafield: string, displayfield: string, createCustomDataModel: (val: string) => any): DataSetItem;
+export declare function createChipItemWithStructure(itemToAdd: DataSetItem): ChipItem;
+/**
+ * Resolves a search selection to a DataSetItem with the correct `value` for the datafield.
+ * may pass either that item or the raw `dataObject` via `getSelectedItem`.
+ */
+export declare function resolveItemToAdd(selectedValue: DataSetItem | string | Record<string, unknown>, datasetItems: DataSetItem[], datafield: string): DataSetItem | string;
+export declare function validateAddItem(newItem: DataSetItem | string, chipsList: ChipItem[], maxsize: number, datafield: string): boolean;
+export declare function validateSearchInput(query: string, allowonlyselect: boolean, maxsize: number, chipsList: ChipItem[]): boolean;
+export declare function performAddItem(newItem: DataSetItem | string, chipsList: ChipItem[], modelByValue: any[], setChipsList: (chips: ChipItem[]) => void, setModelByValue: (model: any[]) => void, setSearchQuery: (query: string) => void, updateMaxSizeFn: (length: number) => void, listener: any, name: string, datafield: string, displayfield: string, createCustomDataModel: (val: string) => any, generateUniqueKey: () => string, maxsize: number, onBeforeadd?: any, onChange?: any, onAdd?: any, props?: any): boolean;
+export declare function performRemoveItem(event: React.MouseEvent, item: ChipItem, index: number, chipsList: ChipItem[], modelByValue: any[], setChipsList: (chips: ChipItem[]) => void, setModelByValue: (model: any[]) => void, updateMaxSizeFn: (length: number) => void, listener: any, name: string, onBeforeremove?: any, onChange?: any, onRemove?: any, props?: any): boolean;

package/components/input/chips/utils.js

@@ -0,0 +1,330 @@
+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 a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { isObject, isEqual, toString } from "lodash";
+function generateStableKey(item, index, datafield) {
+  if (typeof item === "string" || typeof item === "number" || item === null) {
+    return `chip_${index}_${String(item)}`;
+  }
+  if (isObject(item)) {
+    const rec = item;
+    const dataObj = rec.dataObject;
+    if (dataObj == null ? void 0 : dataObj.key) {
+      return `chip_${index}_${String(dataObj.key)}`;
+    }
+    if (datafield !== "All Fields" && rec[datafield] !== void 0) {
+      return `chip_${index}_${String(rec[datafield])}`;
+    }
+    return `chip_${index}_${String(index)}`;
+  }
+  return `chip_${index}_${String(index)}`;
+}
+function processDataset(data, displayfield, displayexpression, displayimagesrc, datafield, generateStableKeyFn) {
+  if (!data) return [];
+  let normalizedData = [];
+  if (typeof data === "string") {
+    normalizedData = data.split(",").map((item) => item.trim());
+  } else if (Array.isArray(data)) {
+    normalizedData = data;
+  } else {
+    normalizedData = [data];
+  }
+  return normalizedData.map((item, index) => {
+    var _a, _b;
+    if (typeof item === "object" && item !== null) {
+      const itemRec = item;
+      const displayKey = displayfield || Object.keys(itemRec)[0];
+      let finalValue;
+      if (datafield === "All Fields") {
+        finalValue = item;
+      } else {
+        if (Object.prototype.hasOwnProperty.call(itemRec, datafield)) {
+          finalValue = itemRec[datafield];
+        } else if (Object.prototype.hasOwnProperty.call(itemRec, "key")) {
+          finalValue = itemRec.key;
+        } else {
+          finalValue = item;
+        }
+      }
+      return {
+        key: generateStableKeyFn(item, index),
+        value: finalValue,
+        label: String((_a = itemRec[displayKey]) != null ? _a : ""),
+        displayValue: displayexpression ? displayexpression(item) : String((_b = itemRec[displayKey]) != null ? _b : ""),
+        displayImage: displayimagesrc ? itemRec[displayimagesrc] : null,
+        dataObject: item
+      };
+    } else {
+      return {
+        key: generateStableKeyFn(item, index),
+        value: item,
+        label: String(item),
+        displayValue: String(item),
+        displayImage: null,
+        dataObject: item
+      };
+    }
+  });
+}
+function getChipDisplayValue(chip, datafield) {
+  if (datafield === "All Fields") {
+    return chip.label || chip.displayValue;
+  }
+  return chip.value;
+}
+function getItemDisplayValue(item, datafield) {
+  if (typeof item === "string") {
+    return item;
+  }
+  if (datafield === "All Fields") {
+    return item.label || item.displayValue;
+  }
+  return item.value;
+}
+function isDuplicate(chipsList, item, datafield) {
+  const itemDisplayValue = getItemDisplayValue(item, datafield);
+  return chipsList.some((chip) => {
+    const chipDisplayValue = getChipDisplayValue(chip, datafield);
+    if (datafield === "All Fields") {
+      return toString(chipDisplayValue).toLowerCase() === toString(itemDisplayValue).toLowerCase();
+    } else {
+      if (typeof item === "string") {
+        return toString(chipDisplayValue) === toString(itemDisplayValue);
+      } else {
+        const itemVal = itemDisplayValue;
+        const item_dataObject = (itemVal == null ? void 0 : itemVal.dataObject) ? itemVal.dataObject : itemDisplayValue;
+        return isEqual(chipDisplayValue, item_dataObject);
+      }
+    }
+  });
+}
+function updateMaxSize(maxsize, chipsList, setSaturate) {
+  setSaturate(maxsize > 0 && chipsList.length === maxsize);
+}
+function updateChipsListAndTriggerEvents(newChipsList, newModelByValue, setChipsList, setModelByValue, updateMaxSizeFn, listener, name, event, onChange, onAdd, onRemove, chipItem, oldModelByValue, props) {
+  setChipsList(newChipsList);
+  setModelByValue(newModelByValue);
+  updateMaxSizeFn(newChipsList.length);
+  if (onChange && (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets) {
+    onChange(event, listener.Widgets[name], newModelByValue, oldModelByValue);
+  }
+  if (listener == null ? void 0 : listener.onChange) {
+    listener.onChange(props.fieldName || name, {
+      // ...props,
+      datavalue: newModelByValue
+    });
+  }
+  if (onAdd && chipItem && (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets) {
+    onAdd(event, listener.Widgets[name], chipItem);
+  }
+  if (onRemove && chipItem && (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets) {
+    onRemove(event, listener.Widgets[name], chipItem);
+  }
+}
+function validateBeforeOperation(listener, name, beforeHandler, event, item) {
+  if (beforeHandler && (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets) {
+    const allowOperation = beforeHandler(event, listener.Widgets[name], item);
+    if (allowOperation === false) {
+      return false;
+    }
+  }
+  return true;
+}
+function createChipItem(itemToAdd, generateUniqueKey, datafield, displayfield, createCustomDataModel) {
+  if (typeof itemToAdd === "string") {
+    if (datafield === "All Fields") {
+      const dataObj = createCustomDataModel(itemToAdd);
+      if (!dataObj) throw new Error("Failed to create custom data model");
+      const newItem = {
+        key: generateUniqueKey(),
+        value: dataObj,
+        label: itemToAdd,
+        displayValue: itemToAdd,
+        displayImage: null,
+        dataObject: dataObj
+      };
+      newItem.iscustom = true;
+      return newItem;
+    } else {
+      const newItem = {
+        key: generateUniqueKey(),
+        value: itemToAdd,
+        label: itemToAdd,
+        displayValue: itemToAdd,
+        displayImage: null,
+        dataObject: itemToAdd
+      };
+      newItem.iscustom = true;
+      return newItem;
+    }
+  } else {
+    return itemToAdd;
+  }
+}
+function createChipItemWithStructure(itemToAdd) {
+  return __spreadProps(__spreadValues({}, itemToAdd), {
+    active: false,
+    isDuplicate: false,
+    imgSrc: itemToAdd.displayImage,
+    iscustom: itemToAdd.iscustom || false
+  });
+}
+function resolveItemToAdd(selectedValue, datasetItems, datafield) {
+  var _a, _b, _c, _d, _e, _f;
+  if (typeof selectedValue === "string") {
+    return selectedValue;
+  }
+  const asDataSetItem = selectedValue;
+  const dataObj = (_a = asDataSetItem.dataObject) != null ? _a : selectedValue;
+  const found = datasetItems.find((item) => isEqual(item.dataObject, dataObj));
+  if (found) {
+    return found;
+  }
+  if (datafield !== "All Fields" && isObject(dataObj)) {
+    const rec = dataObj;
+    if (Object.prototype.hasOwnProperty.call(rec, datafield)) {
+      const raw = (_c = (_b = asDataSetItem.displayValue) != null ? _b : asDataSetItem.label) != null ? _c : rec[datafield];
+      const displayText = raw != null ? String(raw) : "";
+      return {
+        key: (_d = asDataSetItem.key) != null ? _d : String(rec[datafield]),
+        value: rec[datafield],
+        label: String((_e = asDataSetItem.label) != null ? _e : displayText),
+        displayValue: displayText,
+        displayImage: (_f = asDataSetItem.displayImage) != null ? _f : null,
+        dataObject: dataObj
+      };
+    }
+  }
+  return asDataSetItem;
+}
+function validateAddItem(newItem, chipsList, maxsize, datafield) {
+  var _a, _b;
+  if (maxsize && chipsList.length >= maxsize) {
+    return false;
+  }
+  if (newItem && typeof newItem === "object") {
+    if (datafield === "All Fields") {
+      const text = toString((_b = (_a = newItem.label) != null ? _a : newItem.displayValue) != null ? _b : "").trim();
+      if (!text) {
+        return false;
+      }
+    } else {
+      const val = newItem.value;
+      if (val === void 0 || val === null || toString(val).trim() === "") {
+        return false;
+      }
+    }
+  }
+  if (isDuplicate(chipsList, newItem, datafield)) {
+    return false;
+  }
+  return true;
+}
+function validateSearchInput(query, allowonlyselect, maxsize, chipsList) {
+  const trimmedQuery = query.trim();
+  if (!trimmedQuery) return false;
+  if (allowonlyselect) return false;
+  if (maxsize && chipsList.length >= maxsize) return false;
+  return true;
+}
+function performAddItem(newItem, chipsList, modelByValue, setChipsList, setModelByValue, setSearchQuery, updateMaxSizeFn, listener, name, datafield, displayfield, createCustomDataModel, generateUniqueKey, maxsize, onBeforeadd, onChange, onAdd, props) {
+  var _a, _b;
+  if (!validateAddItem(newItem, chipsList, maxsize, datafield)) {
+    setSearchQuery("");
+    return false;
+  }
+  const itemToAdd = createChipItem(
+    newItem,
+    generateUniqueKey,
+    datafield,
+    displayfield,
+    createCustomDataModel
+  );
+  if (!validateBeforeOperation(listener, name, onBeforeadd, new MouseEvent("click"), itemToAdd)) {
+    return false;
+  }
+  const chipItem = createChipItemWithStructure(itemToAdd);
+  const newChipsList = [...chipsList, chipItem];
+  const newModelByValue = [
+    ...modelByValue,
+    (_b = (_a = itemToAdd == null ? void 0 : itemToAdd.dataObject) == null ? void 0 : _a.value) != null ? _b : itemToAdd.value
+  ];
+  updateChipsListAndTriggerEvents(
+    newChipsList,
+    newModelByValue,
+    setChipsList,
+    setModelByValue,
+    updateMaxSizeFn,
+    listener,
+    name,
+    new MouseEvent("change"),
+    onChange,
+    onAdd,
+    void 0,
+    chipItem,
+    modelByValue,
+    props
+  );
+  setSearchQuery("");
+  return true;
+}
+function performRemoveItem(event, item, index, chipsList, modelByValue, setChipsList, setModelByValue, updateMaxSizeFn, listener, name, onBeforeremove, onChange, onRemove, props) {
+  event.stopPropagation();
+  if (!validateBeforeOperation(listener, name, onBeforeremove, event, item)) {
+    return false;
+  }
+  const newChipsList = [...chipsList];
+  const newModelByValue = [...modelByValue];
+  newChipsList.splice(index, 1);
+  newModelByValue.splice(index, 1);
+  updateChipsListAndTriggerEvents(
+    newChipsList,
+    newModelByValue,
+    setChipsList,
+    setModelByValue,
+    updateMaxSizeFn,
+    listener,
+    name,
+    event,
+    onChange,
+    void 0,
+    onRemove,
+    item,
+    modelByValue,
+    props
+  );
+  return true;
+}
+export {
+  createChipItem,
+  createChipItemWithStructure,
+  generateStableKey,
+  getChipDisplayValue,
+  getItemDisplayValue,
+  isDuplicate,
+  performAddItem,
+  performRemoveItem,
+  processDataset,
+  resolveItemToAdd,
+  updateChipsListAndTriggerEvents,
+  updateMaxSize,
+  validateAddItem,
+  validateBeforeOperation,
+  validateSearchInput
+};