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

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

@@ -0,0 +1,105 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Props specific to the WmCalendar component.
+ */
+export interface CalendarProps {
+    /**
+     * The data source bound to the calendar (array of events).
+     */
+    dataset?: unknown[] | Record<string, unknown>;
+    /**
+     * The currently selected data value / date.
+     */
+    datavalue?: string | Date | null;
+    /**
+     * Field in the dataset used as the event title.
+     */
+    eventtitle?: string;
+    /**
+     * Field in the dataset used as the event start date.
+     */
+    eventstart?: string;
+    /**
+     * Field in the dataset used as the event end date.
+     */
+    eventend?: string;
+    /**
+     * Field in the dataset indicating if the event is all-day.
+     */
+    eventallday?: string;
+    /**
+     * Field in the dataset used for the event CSS class.
+     */
+    eventclass?: string;
+    /**
+     * Calendar controls to display (e.g., navigation buttons).
+     */
+    controls?: string;
+    /**
+     * Type of calendar.
+     */
+    calendartype?: string;
+    /**
+     * Default calendar view.
+     * @example "month", "week", "day"
+     */
+    view?: string;
+    /**
+     * Selection mode for the calendar.
+     */
+    selectionmode?: string;
+    /**
+     * Callback invoked when a date or event is selected.
+     */
+    onSelect?: ($start: Date, $end: Date, $view: string, $data: unknown[]) => void;
+    /**
+     * Callback invoked before the calendar is rendered.
+     */
+    onBeforerender?: (event: React.SyntheticEvent, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when an event is dropped (drag-and-drop).
+     */
+    onEventdrop?: ($event: React.SyntheticEvent, $newData: unknown[], $oldData: unknown[], $delta: unknown, $revertFunc: () => void, $ui: unknown, $view: string) => void;
+    /**
+     * Callback invoked when an event is resized.
+     */
+    onEventresize?: ($event: React.SyntheticEvent, $newData: unknown[], $oldData: unknown[], $delta: unknown, $revertFunc: () => void, $ui: unknown, $view: string) => void;
+    /**
+     * Callback invoked when an event is clicked.
+     */
+    onEventclick?: ($event: React.SyntheticEvent, $data: unknown[], $view: string) => void;
+    /**
+     * Callback invoked when an event is rendered.
+     */
+    onEventrender?: ($event: React.SyntheticEvent, $data: unknown[], $view: string) => void;
+    /**
+     * Callback invoked when the calendar view changes.
+     */
+    onViewrender?: ($view: unknown) => void;
+    /**
+     * Callback invoked when a date cell is clicked.
+     */
+    onDateclick?: (event: React.SyntheticEvent, widget?: Record<string, unknown>) => void;
+    /**
+     * Tab index for keyboard navigation.
+     */
+    tabindex?: number;
+}
+/**
+ * Combined props for the WmCalendar component, including base WaveMaker props.
+ */
+export type WmCalendarProps = Prettify<CalendarProps & BaseProps>;
+declare global {
+    interface Window {
+        app?: {
+            subscribe: (event: string, handler: (data: Record<string, unknown>) => void) => () => void;
+            appLocale?: {
+                LABEL_CALENDAR_YEAR?: string;
+                LABEL_CALENDAR_MONTH?: string;
+                LABEL_CALENDAR_WEEK?: string;
+                LABEL_CALENDAR_DAY?: string;
+                LABEL_CALENDAR_TODAY?: string;
+            };
+        };
+    }
+}

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

@@ -0,0 +1,51 @@
+import moment from "moment-timezone";
+export declare const getEventMomentValue: (value: any, key: string) => moment.Moment;
+export declare const getUTCDateTime: (dateObj: any) => Date;
+export declare const calculateHeight: (height: any) => any;
+export declare const VIEW_TYPES: {
+    BASIC: string;
+    AGENDA: string;
+    LIST: string;
+};
+export declare const defaultHeaderOptions: {
+    start: string;
+    center: string;
+    end: string;
+};
+export declare const BUTTON_TEXT: {
+    YEAR: string;
+    MONTH: string;
+    WEEK: string;
+    DAY: string;
+    TODAY: string;
+};
+export declare const SELECTION_MODES: {
+    NONE: string;
+    SINGLE: string;
+    MULTIPLE: string;
+};
+export declare const NEXT_DAY_THRESHOLD: {
+    START: string;
+    END: string;
+};
+export declare const getViewType: (viewKey: string, type: string) => string;
+export declare const getSessionLocale: () => string;
+export declare const convertEventObj: (eventObj: any) => any;
+export declare const convertEventObjForOldAndNewData: (eventObj: any) => any;
+export declare const filterEventsByDateRange: (dataset: any, start: Date, end: Date, eventstart?: string, eventend?: string) => any[];
+export declare const constructCalendarDataset: (eventSource: any[], eventtitle?: string, eventallday?: string, eventstart?: string, eventend?: string, eventclass?: string) => any[];
+export declare const selectDate: (calendarInstance: any, datavalue: any) => void;
+export declare const gotoDate: (calendarInstance: any, datavalue: any) => void;
+export declare const gotoNextYear: (calendarInstance: any) => void;
+export declare const gotoPrevYear: (calendarInstance: any) => void;
+export declare const gotoMonth: (calendarInstance: any, monthVal: number) => void;
+export declare const gotoNextMonth: (calendarInstance: any) => void;
+export declare const gotoPrevMonth: (calendarInstance: any) => void;
+export declare const unselect: (calendarInstance: any) => void;
+export declare const rerenderEvents: (calendarInstance: any) => void;
+export declare const addEventSource: (calendarInstance: any, eventObject: any) => void;
+export declare const overrideDefaults: (calendarInstance: any, options: any) => void;
+export declare const getDefaultDate: (datavalue: any) => Date;
+export declare const getLib: () => string;
+export declare const getDefaultOptions: (calendarOptions: any) => any;
+export declare const applyCalendarOptions: (calendarInstance: any, operationType: string, argumentKey?: any, argumentValue?: any, getViewType?: any, calendartype?: string) => void;

package/components/input/calendar/utils.js

@@ -0,0 +1,328 @@
+var __defProp = Object.defineProperty;
+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;
+};
+import moment from "moment-timezone";
+import { includes, isEmpty, get, mapKeys, cloneDeep, extend, isObject, isDate } from "lodash";
+import { getSessionLocaleSafe } from "../../../core/util";
+const dateFormats = [
+  "yyyy-MM-dd",
+  "yyyy-M-dd",
+  "M-dd-yyyy",
+  "MM-dd-yy",
+  "yyyy, dd MMMM",
+  "yyyy, MMM dd",
+  "MM/dd/yyyy",
+  "M/d/yyyy",
+  "EEE, dd MMM yyyy",
+  "EEE MMM dd yyyy",
+  "EEEE, MMMM dd, yyyy",
+  "timestamp"
+];
+const getEventMomentValue = (value, key) => {
+  let isDateValue = false;
+  dateFormats.forEach((format) => {
+    if (moment(value, format.toUpperCase(), true).isValid()) {
+      isDateValue = true;
+      return false;
+    }
+  });
+  if (isDateValue && key === "end") {
+    return moment(value).endOf("day");
+  }
+  return moment(value);
+};
+const getUTCDateTime = (dateObj) => {
+  dateObj = moment(dateObj);
+  const year = dateObj.format("YYYY"), month = dateObj.format("MM") - 1, day = dateObj.format("DD"), hours = dateObj.format("HH"), minutes = dateObj.format("mm"), seconds = dateObj.format("ss");
+  return new Date(year, month, day, hours, minutes, seconds);
+};
+const calculateHeight = (height) => {
+  if (!height) return 600;
+  let computedHeight;
+  if (typeof height === "string" && includes(height, "%")) {
+    computedHeight = 600;
+  } else {
+    computedHeight = parseInt(String(height).replace(/px/g, ""), 10) || 600;
+  }
+  return computedHeight;
+};
+const VIEW_TYPES = {
+  BASIC: "basic",
+  AGENDA: "agenda",
+  LIST: "list"
+};
+const defaultHeaderOptions = {
+  start: "prev next today",
+  center: "title",
+  end: "dayGridMonth dayGridWeek dayGridDay"
+};
+const BUTTON_TEXT = {
+  YEAR: "Year",
+  MONTH: "Month",
+  WEEK: "Week",
+  DAY: "Day",
+  TODAY: "Today"
+};
+const SELECTION_MODES = {
+  NONE: "none",
+  SINGLE: "single",
+  MULTIPLE: "multiple"
+};
+const NEXT_DAY_THRESHOLD = {
+  START: "00:00",
+  END: "24:00"
+};
+const getViewType = (viewKey, type) => {
+  let result;
+  if (viewKey === "month") {
+    result = type === VIEW_TYPES.LIST ? "listMonth" : "dayGridMonth";
+  } else if (viewKey === "week") {
+    result = type === VIEW_TYPES.BASIC ? "dayGridWeek" : type === VIEW_TYPES.LIST ? "listWeek" : "timeGridWeek";
+  } else if (viewKey === "day") {
+    result = type === VIEW_TYPES.BASIC ? "dayGridDay" : type === VIEW_TYPES.LIST ? "listDay" : "timeGridDay";
+  } else if (viewKey === "year") {
+    result = type === VIEW_TYPES.LIST ? "listYear" : "";
+  } else {
+    result = viewKey;
+  }
+  return result;
+};
+const getSessionLocale = () => {
+  return getSessionLocaleSafe() || "en";
+};
+const convertEventObj = (eventObj) => {
+  var _a;
+  if (!((_a = eventObj.extendedProps) == null ? void 0 : _a._eventMetadata)) {
+    return eventObj;
+  }
+  const _eventMetadata = eventObj.extendedProps._eventMetadata;
+  Object.setPrototypeOf(_eventMetadata, eventObj);
+  return _eventMetadata;
+};
+const convertEventObjForOldAndNewData = (eventObj) => {
+  const _eventMetadata = eventObj.extendedProps || {};
+  const result = __spreadValues({}, eventObj);
+  extend(result, _eventMetadata);
+  return result;
+};
+const filterEventsByDateRange = (dataset, start, end, eventstart = "start", eventend = "end") => {
+  if (!dataset) {
+    return [];
+  }
+  const filteredDates = [];
+  const eventStartKey = eventstart || "start";
+  const eventEndKey = eventend || "end";
+  const startDate = moment(new Date(start)).format("MM/DD/YYYY");
+  const endDate = moment(new Date(end)).subtract(1, "days").format("MM/DD/YYYY");
+  const datasetArray = dataset.data || dataset;
+  if (Array.isArray(datasetArray)) {
+    datasetArray.forEach((value) => {
+      if (!value[eventStartKey]) {
+        return;
+      }
+      const eventStartDate = moment(new Date(value[eventStartKey])).format("MM/DD/YYYY");
+      const eventEndDate = moment(new Date(value[eventEndKey] || value[eventStartKey])).format(
+        "MM/DD/YYYY"
+      );
+      const eventExists = moment(eventStartDate).isSameOrAfter(startDate) && moment(eventEndDate).isSameOrBefore(endDate);
+      if (eventExists) {
+        filteredDates.push(value);
+      }
+    });
+  }
+  return filteredDates;
+};
+const constructCalendarDataset = (eventSource, eventtitle = "title", eventallday = "allday", eventstart = "start", eventend = "end", eventclass = "className") => {
+  if (!eventSource || !Array.isArray(eventSource)) return [];
+  const properties = {
+    title: eventtitle || "title",
+    allDay: eventallday || "allday",
+    start: eventstart || "start",
+    end: eventend || "end",
+    className: eventclass || "className"
+  };
+  const processedEvents = eventSource.map((obj) => {
+    const newObj = __spreadValues({}, obj);
+    newObj._eventMetadata = cloneDeep(obj);
+    if (isEmpty(newObj._eventMetadata.url)) {
+      delete newObj._eventMetadata.url;
+    }
+    if (isEmpty(newObj.url)) {
+      delete newObj.url;
+    }
+    mapKeys(properties, (value, key) => {
+      let objVal;
+      if (key === "title") {
+        objVal = get(newObj, value);
+      } else if (key === "allDay") {
+        objVal = !!get(newObj, value);
+      } else {
+        objVal = get(newObj, value);
+      }
+      if (objVal !== void 0 && objVal !== null && objVal !== "") {
+        newObj[key] = objVal;
+      }
+    });
+    return newObj;
+  });
+  return processedEvents;
+};
+const selectDate = (calendarInstance, datavalue) => {
+  if (!calendarInstance || !datavalue) return;
+  let start, end;
+  if (isObject(datavalue) && !isDate(datavalue)) {
+    start = moment(datavalue.start);
+    end = moment(datavalue.end);
+  } else {
+    start = moment(datavalue);
+    end = moment(datavalue).add(1, "day").startOf("day");
+  }
+  calendarInstance.gotoDate(moment(start).toDate());
+  calendarInstance.select(start.toDate(), end.toDate());
+};
+const gotoDate = (calendarInstance, datavalue) => {
+  if (!calendarInstance || !datavalue) return;
+  calendarInstance.gotoDate(moment(datavalue).toDate());
+};
+const gotoNextYear = (calendarInstance) => {
+  if (!calendarInstance) return;
+  const date = moment(calendarInstance.getDate()).add(1, "year").toDate();
+  calendarInstance.gotoDate(date);
+};
+const gotoPrevYear = (calendarInstance) => {
+  if (!calendarInstance) return;
+  const date = moment(calendarInstance.getDate()).subtract(1, "year").toDate();
+  calendarInstance.gotoDate(date);
+};
+const gotoMonth = (calendarInstance, monthVal) => {
+  if (!calendarInstance) return;
+  const presentDay = calendarInstance.getDate();
+  const presentMonthVal = presentDay.getMonth();
+  const presentDayMoment = moment(presentDay);
+  if (presentMonthVal < monthVal) {
+    calendarInstance.gotoDate(presentDayMoment.add(monthVal - presentMonthVal - 1, "M").toDate());
+  } else {
+    calendarInstance.gotoDate(
+      presentDayMoment.subtract(presentMonthVal - monthVal + 1, "M").toDate()
+    );
+  }
+};
+const gotoNextMonth = (calendarInstance) => {
+  if (!calendarInstance) return;
+  const presentDay = moment(calendarInstance.getDate());
+  calendarInstance.gotoDate(presentDay.add(1, "M").toDate());
+};
+const gotoPrevMonth = (calendarInstance) => {
+  if (!calendarInstance) return;
+  const presentDay = moment(calendarInstance.getDate());
+  calendarInstance.gotoDate(presentDay.subtract(1, "M").toDate());
+};
+const unselect = (calendarInstance) => {
+  if (!calendarInstance) return;
+  calendarInstance.unselect();
+};
+const rerenderEvents = (calendarInstance) => {
+  if (!calendarInstance) return;
+  calendarInstance.render();
+};
+const addEventSource = (calendarInstance, eventObject) => {
+  if (!calendarInstance || isEmpty(eventObject)) {
+    console.warn(
+      "addEventSource method requires an object as a parameter or calendar is not initialized."
+    );
+    return;
+  }
+  if (eventObject.source === "google") {
+    if (!eventObject.googleCalendarApiKey || !eventObject.googleCalendarId) {
+      console.warn(
+        "For google calendar integration, 'googleCalendarApiKey' and 'googleCalendarId' should be passed in the parameter object."
+      );
+      return;
+    }
+    calendarInstance.setOption("googleCalendarApiKey", eventObject.googleCalendarApiKey);
+    calendarInstance.addEventSource({
+      googleCalendarId: eventObject.googleCalendarId
+    });
+  }
+};
+const overrideDefaults = (calendarInstance, options) => {
+  if (!calendarInstance || !isObject(options)) return;
+  Object.entries(options).forEach(([key, value]) => {
+    calendarInstance.setOption(key, value);
+  });
+};
+const getDefaultDate = (datavalue) => {
+  if (datavalue) {
+    return new Date(datavalue);
+  }
+  return null;
+};
+const getLib = () => {
+  return "fullcalendar";
+};
+const getDefaultOptions = (calendarOptions) => {
+  return calendarOptions;
+};
+const applyCalendarOptions = (calendarInstance, operationType, argumentKey, argumentValue, getViewType2, calendartype) => {
+  if (!calendarInstance) {
+    return;
+  }
+  switch (operationType) {
+    case "render":
+      calendarInstance.render();
+      break;
+    case "option":
+      calendarInstance.setOption(argumentKey, argumentValue);
+      break;
+    case "changeView":
+      if (getViewType2 && calendartype) {
+        const view = getViewType2(argumentKey, calendartype);
+        calendarInstance.changeView(view);
+      }
+      break;
+  }
+};
+export {
+  BUTTON_TEXT,
+  NEXT_DAY_THRESHOLD,
+  SELECTION_MODES,
+  VIEW_TYPES,
+  addEventSource,
+  applyCalendarOptions,
+  calculateHeight,
+  constructCalendarDataset,
+  convertEventObj,
+  convertEventObjForOldAndNewData,
+  defaultHeaderOptions,
+  filterEventsByDateRange,
+  getDefaultDate,
+  getDefaultOptions,
+  getEventMomentValue,
+  getLib,
+  getSessionLocale,
+  getUTCDateTime,
+  getViewType,
+  gotoDate,
+  gotoMonth,
+  gotoNextMonth,
+  gotoNextYear,
+  gotoPrevMonth,
+  gotoPrevYear,
+  overrideDefaults,
+  rerenderEvents,
+  selectDate,
+  unselect
+};

package/components/input/chips/SortableChip/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SortableChipProps } from "./props";
+declare const SortableChip: React.FC<SortableChipProps>;
+export default SortableChip;

package/components/input/chips/SortableChip/index.js

@@ -0,0 +1,124 @@
+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 { jsx } from "react/jsx-runtime";
+import { Chip, Box } from "@mui/material";
+import clsx from "clsx";
+import { CSS } from "@dnd-kit/utilities";
+import { useSortable } from "@dnd-kit/sortable";
+const SortableChip = ({
+  chip,
+  index,
+  readonly,
+  disabled,
+  chipclass,
+  enablereorder,
+  handleChipClick,
+  handleChipSelect,
+  handleKeyDown,
+  removeItem,
+  chipsList,
+  setChipsList
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: chip.key
+  });
+  const sortableStyle = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  const canGrabReorder = enablereorder && !readonly && !disabled;
+  const handleOnKeyDown = (event, index2) => {
+    if (event.key === "Delete" || event.key === "Backspace") {
+      removeItem(event, chip, index2);
+    }
+    event.preventDefault();
+    handleKeyDown(event, index2);
+  };
+  const handleChipFocus = (event) => {
+    handleChipSelect(chip, index);
+  };
+  const handleChipBlur = (event) => {
+    if (readonly) return;
+    const newChipsList = chipsList.map((item, i) => __spreadProps(__spreadValues({}, item), {
+      active: i === index ? false : item.active
+    }));
+    setChipsList(newChipsList);
+  };
+  const handleDeleteClick = (event) => {
+    event.stopPropagation();
+    removeItem(event, chip, index);
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    __spreadProps(__spreadValues(__spreadValues({
+      ref: setNodeRef,
+      component: "li",
+      className: clsx(
+        "chip-item wm-chips-chip-item",
+        chipclass && !chipclass.includes("bind") ? chipclass : "",
+        {
+          active: chip.active,
+          disabled,
+          "wm-chips-chip-grab": canGrabReorder,
+          "wm-chips-chip-dragging": isDragging
+        }
+      ),
+      style: sortableStyle
+    }, attributes), listeners), {
+      children: /* @__PURE__ */ jsx(
+        Chip,
+        {
+          className: clsx("app-chip", "sortable-chip", {
+            "no-drag": !enablereorder,
+            "chip-duplicate bg-danger": chip.isDuplicate,
+            "chip-picture": chip.imgSrc,
+            active: chip.active
+          }),
+          label: chip.displayValue || chip.label,
+          avatar: chip.imgSrc ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "img",
+              "data-identifier": "img",
+              src: chip.imgSrc,
+              alt: "Chip Image",
+              className: "button-image-icon"
+            }
+          ) : void 0,
+          onDelete: !readonly ? handleDeleteClick : void 0,
+          deleteIcon: /* @__PURE__ */ jsx(Box, { component: "i", className: "app-icon wi wi-close" }),
+          onClick: (event) => handleChipClick(event, chip, index),
+          onKeyDown: (event) => handleOnKeyDown(event, index),
+          onFocus: handleChipFocus,
+          onBlur: handleChipBlur,
+          tabIndex: readonly ? -1 : 0,
+          role: "button",
+          "aria-disabled": disabled,
+          disabled
+        }
+      )
+    }),
+    chip.key
+  );
+};
+var SortableChip_default = SortableChip;
+export {
+  SortableChip_default as default
+};

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

@@ -0,0 +1,16 @@
+import { ChipItem } from "../props";
+export interface SortableChipProps {
+    chip: ChipItem;
+    index: number;
+    readonly: boolean;
+    disabled: boolean;
+    chipclass: string;
+    enablereorder: boolean;
+    handleChipClick: (event: React.MouseEvent, chip: ChipItem, index: number) => void;
+    handleChipSelect: (chip: ChipItem, index: number) => void;
+    handleKeyDown: (event: React.KeyboardEvent, index: number) => void;
+    removeItem: (event: React.MouseEvent, chip: ChipItem, index: number) => void;
+    setSelectedChipIndex?: (index: number) => void;
+    chipsList: ChipItem[];
+    setChipsList: React.Dispatch<React.SetStateAction<ChipItem[]>>;
+}