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

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,336 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unselect = exports.selectDate = exports.rerenderEvents = exports.overrideDefaults = exports.gotoPrevYear = exports.gotoPrevMonth = exports.gotoNextYear = exports.gotoNextMonth = exports.gotoMonth = exports.gotoDate = exports.getViewType = exports.getUTCDateTime = exports.getSessionLocale = exports.getLib = exports.getEventMomentValue = exports.getDefaultOptions = exports.getDefaultDate = exports.filterEventsByDateRange = exports.defaultHeaderOptions = exports.convertEventObjForOldAndNewData = exports.convertEventObj = exports.constructCalendarDataset = exports.calculateHeight = exports.applyCalendarOptions = exports.addEventSource = exports.VIEW_TYPES = exports.SELECTION_MODES = exports.NEXT_DAY_THRESHOLD = exports.BUTTON_TEXT = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _lodash = require("lodash");
+var _util = require("@wavemaker-ai/react-runtime/core/util");
+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; }
+// Helper functions
+
+var 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"];
+var getEventMomentValue = exports.getEventMomentValue = function getEventMomentValue(value, key) {
+  var isDateValue = false;
+  dateFormats.forEach(function (format) {
+    if ((0, _momentTimezone["default"])(value, format.toUpperCase(), true).isValid()) {
+      isDateValue = true;
+      return false;
+    }
+  });
+  // if the value is date then for end date the value should be end of the day as the calendar is approximating it to the start.
+  if (isDateValue && key === "end") {
+    return (0, _momentTimezone["default"])(value).endOf("day");
+  }
+  return (0, _momentTimezone["default"])(value);
+};
+var getUTCDateTime = exports.getUTCDateTime = function getUTCDateTime(dateObj) {
+  dateObj = (0, _momentTimezone["default"])(dateObj);
+  var 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);
+};
+
+// Helper function to calculate height for event limit
+var calculateHeight = exports.calculateHeight = function calculateHeight(height) {
+  if (!height) return 600;
+  var computedHeight;
+  if (typeof height === "string" && (0, _lodash.includes)(height, "%")) {
+    // Handle percentage heights - for now, use a default pixel value
+    computedHeight = 600;
+  } else {
+    computedHeight = parseInt(String(height).replace(/px/g, ""), 10) || 600;
+  }
+  return computedHeight;
+};
+
+// View types constants
+var VIEW_TYPES = exports.VIEW_TYPES = {
+  BASIC: "basic",
+  AGENDA: "agenda",
+  LIST: "list"
+};
+var defaultHeaderOptions = exports.defaultHeaderOptions = {
+  start: "prev next today",
+  center: "title",
+  end: "dayGridMonth dayGridWeek dayGridDay"
+};
+var BUTTON_TEXT = exports.BUTTON_TEXT = {
+  YEAR: "Year",
+  MONTH: "Month",
+  WEEK: "Week",
+  DAY: "Day",
+  TODAY: "Today"
+};
+var SELECTION_MODES = exports.SELECTION_MODES = {
+  NONE: "none",
+  SINGLE: "single",
+  MULTIPLE: "multiple"
+};
+var NEXT_DAY_THRESHOLD = exports.NEXT_DAY_THRESHOLD = {
+  START: "00:00",
+  END: "24:00"
+};
+
+// Helper function to get view type based on view key and calendar type
+var getViewType = exports.getViewType = function getViewType(viewKey, type) {
+  var 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;
+};
+
+// Get the current locale from app-scoped session storage
+var getSessionLocale = exports.getSessionLocale = function getSessionLocale() {
+  return (0, _util.getSessionLocaleSafe)() || "en";
+};
+
+// Helper function to convert event object for backward compatibility
+var convertEventObj = exports.convertEventObj = function convertEventObj(eventObj) {
+  var _eventObj$extendedPro;
+  if (!((_eventObj$extendedPro = eventObj.extendedProps) !== null && _eventObj$extendedPro !== void 0 && _eventObj$extendedPro._eventMetadata)) {
+    return eventObj;
+  }
+  var _eventMetadata = eventObj.extendedProps._eventMetadata;
+  Object.setPrototypeOf(_eventMetadata, eventObj);
+  return _eventMetadata;
+};
+
+// Helper function to convert event object for old and new data
+var convertEventObjForOldAndNewData = exports.convertEventObjForOldAndNewData = function convertEventObjForOldAndNewData(eventObj) {
+  var _eventMetadata = eventObj.extendedProps || {};
+  var result = _objectSpread({}, eventObj);
+  (0, _lodash.extend)(result, _eventMetadata);
+  return result;
+};
+
+// Helper function to filter events based on selected date range
+var filterEventsByDateRange = exports.filterEventsByDateRange = function filterEventsByDateRange(dataset, start, end) {
+  var eventstart = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "start";
+  var eventend = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "end";
+  if (!dataset) {
+    return [];
+  }
+  var filteredDates = [];
+  var eventStartKey = eventstart || "start";
+  var eventEndKey = eventend || "end";
+  var startDate = (0, _momentTimezone["default"])(new Date(start)).format("MM/DD/YYYY");
+  var endDate = (0, _momentTimezone["default"])(new Date(end)).subtract(1, "days").format("MM/DD/YYYY");
+  var datasetArray = dataset.data || dataset;
+  if (Array.isArray(datasetArray)) {
+    datasetArray.forEach(function (value) {
+      if (!value[eventStartKey]) {
+        return;
+      }
+      var eventStartDate = (0, _momentTimezone["default"])(new Date(value[eventStartKey])).format("MM/DD/YYYY");
+      var eventEndDate = (0, _momentTimezone["default"])(new Date(value[eventEndKey] || value[eventStartKey])).format("MM/DD/YYYY");
+      var eventExists = (0, _momentTimezone["default"])(eventStartDate).isSameOrAfter(startDate) && (0, _momentTimezone["default"])(eventEndDate).isSameOrBefore(endDate);
+      if (eventExists) {
+        filteredDates.push(value);
+      }
+    });
+  }
+  return filteredDates;
+};
+
+// Construct calendar dataset
+var constructCalendarDataset = exports.constructCalendarDataset = function constructCalendarDataset(eventSource) {
+  var eventtitle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "title";
+  var eventallday = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "allday";
+  var eventstart = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "start";
+  var eventend = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "end";
+  var eventclass = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : "className";
+  if (!eventSource || !Array.isArray(eventSource)) return [];
+  var properties = {
+    title: eventtitle || "title",
+    allDay: eventallday || "allday",
+    start: eventstart || "start",
+    end: eventend || "end",
+    className: eventclass || "className"
+  };
+  var processedEvents = eventSource.map(function (obj) {
+    var newObj = _objectSpread({}, obj);
+    newObj._eventMetadata = (0, _lodash.cloneDeep)(obj);
+    if ((0, _lodash.isEmpty)(newObj._eventMetadata.url)) {
+      delete newObj._eventMetadata.url;
+    }
+    if ((0, _lodash.isEmpty)(newObj.url)) {
+      delete newObj.url;
+    }
+    (0, _lodash.mapKeys)(properties, function (value, key) {
+      var objVal;
+      if (key === "title") {
+        objVal = (0, _lodash.get)(newObj, value);
+      } else if (key === "allDay") {
+        objVal = !!(0, _lodash.get)(newObj, value);
+      } else {
+        objVal = (0, _lodash.get)(newObj, value);
+      }
+      if (objVal !== undefined && objVal !== null && objVal !== "") {
+        newObj[key] = objVal;
+      }
+    });
+    return newObj;
+  });
+  return processedEvents;
+};
+
+// Calendar utility functions
+var selectDate = exports.selectDate = function selectDate(calendarInstance, datavalue) {
+  if (!calendarInstance || !datavalue) return;
+  var start, end;
+  if ((0, _lodash.isObject)(datavalue) && !(0, _lodash.isDate)(datavalue)) {
+    start = (0, _momentTimezone["default"])(datavalue.start);
+    end = (0, _momentTimezone["default"])(datavalue.end);
+  } else {
+    start = (0, _momentTimezone["default"])(datavalue);
+    end = (0, _momentTimezone["default"])(datavalue).add(1, "day").startOf("day");
+  }
+  calendarInstance.gotoDate((0, _momentTimezone["default"])(start).toDate());
+  calendarInstance.select(start.toDate(), end.toDate());
+};
+
+// Go to a specific date
+var gotoDate = exports.gotoDate = function gotoDate(calendarInstance, datavalue) {
+  if (!calendarInstance || !datavalue) return;
+  calendarInstance.gotoDate((0, _momentTimezone["default"])(datavalue).toDate());
+};
+
+// Go to the next year
+var gotoNextYear = exports.gotoNextYear = function gotoNextYear(calendarInstance) {
+  if (!calendarInstance) return;
+  var date = (0, _momentTimezone["default"])(calendarInstance.getDate()).add(1, "year").toDate();
+  calendarInstance.gotoDate(date);
+};
+
+// Go to the previous year
+var gotoPrevYear = exports.gotoPrevYear = function gotoPrevYear(calendarInstance) {
+  if (!calendarInstance) return;
+  var date = (0, _momentTimezone["default"])(calendarInstance.getDate()).subtract(1, "year").toDate();
+  calendarInstance.gotoDate(date);
+};
+
+// Go to a specific month
+var gotoMonth = exports.gotoMonth = function gotoMonth(calendarInstance, monthVal) {
+  if (!calendarInstance) return;
+  var presentDay = calendarInstance.getDate();
+  var presentMonthVal = presentDay.getMonth();
+  var presentDayMoment = (0, _momentTimezone["default"])(presentDay);
+  if (presentMonthVal < monthVal) {
+    calendarInstance.gotoDate(presentDayMoment.add(monthVal - presentMonthVal - 1, "M").toDate());
+  } else {
+    calendarInstance.gotoDate(presentDayMoment.subtract(presentMonthVal - monthVal + 1, "M").toDate());
+  }
+};
+
+// Go to the next month
+var gotoNextMonth = exports.gotoNextMonth = function gotoNextMonth(calendarInstance) {
+  if (!calendarInstance) return;
+  var presentDay = (0, _momentTimezone["default"])(calendarInstance.getDate());
+  calendarInstance.gotoDate(presentDay.add(1, "M").toDate());
+};
+
+// Go to the previous month
+var gotoPrevMonth = exports.gotoPrevMonth = function gotoPrevMonth(calendarInstance) {
+  if (!calendarInstance) return;
+  var presentDay = (0, _momentTimezone["default"])(calendarInstance.getDate());
+  calendarInstance.gotoDate(presentDay.subtract(1, "M").toDate());
+};
+
+// Unselect all selected dates
+var unselect = exports.unselect = function unselect(calendarInstance) {
+  if (!calendarInstance) return;
+  calendarInstance.unselect();
+};
+
+// Re-render events
+var rerenderEvents = exports.rerenderEvents = function rerenderEvents(calendarInstance) {
+  if (!calendarInstance) return;
+  calendarInstance.render();
+};
+
+// Add external event source
+var addEventSource = exports.addEventSource = function addEventSource(calendarInstance, eventObject) {
+  if (!calendarInstance || (0, _lodash.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
+    });
+  }
+};
+
+// Override default options
+var overrideDefaults = exports.overrideDefaults = function overrideDefaults(calendarInstance, options) {
+  if (!calendarInstance || !(0, _lodash.isObject)(options)) return;
+  Object.entries(options).forEach(function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    calendarInstance.setOption(key, value);
+  });
+};
+
+// Get default date
+var getDefaultDate = exports.getDefaultDate = function getDefaultDate(datavalue) {
+  if (datavalue) {
+    return new Date(datavalue);
+  }
+  return null;
+};
+
+// Get calendar library
+var getLib = exports.getLib = function getLib() {
+  return "fullcalendar";
+};
+
+// Get default options
+var getDefaultOptions = exports.getDefaultOptions = function getDefaultOptions(calendarOptions) {
+  return calendarOptions;
+};
+
+// Apply calendar options
+var applyCalendarOptions = exports.applyCalendarOptions = function applyCalendarOptions(calendarInstance, operationType, argumentKey, argumentValue, getViewType, calendartype) {
+  if (!calendarInstance) {
+    return;
+  }
+  switch (operationType) {
+    case "render":
+      calendarInstance.render();
+      break;
+    case "option":
+      calendarInstance.setOption(argumentKey, argumentValue);
+      break;
+    case "changeView":
+      if (getViewType && calendartype) {
+        var view = getViewType(argumentKey, calendartype);
+        calendarInstance.changeView(view);
+      }
+      break;
+  }
+};

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,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _utilities = require("@dnd-kit/utilities");
+var _sortable = require("@dnd-kit/sortable");
+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 SortableChip = function SortableChip(_ref) {
+  var chip = _ref.chip,
+    index = _ref.index,
+    readonly = _ref.readonly,
+    disabled = _ref.disabled,
+    chipclass = _ref.chipclass,
+    enablereorder = _ref.enablereorder,
+    handleChipClick = _ref.handleChipClick,
+    handleChipSelect = _ref.handleChipSelect,
+    handleKeyDown = _ref.handleKeyDown,
+    removeItem = _ref.removeItem,
+    chipsList = _ref.chipsList,
+    setChipsList = _ref.setChipsList;
+  var _useSortable = (0, _sortable.useSortable)({
+      id: chip.key
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition,
+    isDragging = _useSortable.isDragging;
+  var sortableStyle = {
+    transform: _utilities.CSS.Transform.toString(transform),
+    transition: transition
+  };
+  var canGrabReorder = enablereorder && !readonly && !disabled;
+
+  // Keyboard navigation handlers
+  var handleOnKeyDown = function handleOnKeyDown(event, index) {
+    if (event.key === "Delete" || event.key === "Backspace") {
+      removeItem(event, chip, index);
+    }
+    event.preventDefault();
+    handleKeyDown(event, index);
+  };
+  var handleChipFocus = function handleChipFocus(event) {
+    handleChipSelect(chip, index);
+  };
+  var handleChipBlur = function handleChipBlur(event) {
+    if (readonly) return;
+    var newChipsList = chipsList.map(function (item, i) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        active: i === index ? false : item.active
+      });
+    });
+    setChipsList(newChipsList);
+  };
+  var handleDeleteClick = function handleDeleteClick(event) {
+    event.stopPropagation();
+    removeItem(event, chip, index);
+  };
+  return __jsx(_material.Box, (0, _extends2["default"])({
+    key: chip.key,
+    ref: setNodeRef,
+    component: "li",
+    className: (0, _clsx["default"])("chip-item wm-chips-chip-item", chipclass && !chipclass.includes("bind") ? chipclass : "", {
+      active: chip.active,
+      disabled: disabled,
+      "wm-chips-chip-grab": canGrabReorder,
+      "wm-chips-chip-dragging": isDragging
+    }),
+    style: sortableStyle
+  }, attributes, listeners), __jsx(_material.Chip, {
+    className: (0, _clsx["default"])("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 ? __jsx(_material.Box, {
+      component: "img",
+      "data-identifier": "img",
+      src: chip.imgSrc,
+      alt: "Chip Image",
+      className: "button-image-icon"
+    }) : undefined,
+    onDelete: !readonly ? handleDeleteClick : undefined,
+    deleteIcon: __jsx(_material.Box, {
+      component: "i",
+      className: "app-icon wi wi-close"
+    }),
+    onClick: function onClick(event) {
+      return handleChipClick(event, chip, index);
+    },
+    onKeyDown: function onKeyDown(event) {
+      return handleOnKeyDown(event, index);
+    },
+    onFocus: handleChipFocus,
+    onBlur: handleChipBlur,
+    tabIndex: readonly ? -1 : 0,
+    role: "button",
+    "aria-disabled": disabled,
+    disabled: disabled
+  }));
+};
+var _default = exports["default"] = SortableChip;

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[]>>;
+}

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});