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

package/components/input/default/switch/index.js

@@ -1,29 +1,54 @@
-"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.WmSwitch = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _lodashEs = require("lodash-es");
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _material = require("@mui/material");
-var _transformedDatasetUtils = require("@wavemaker-ai/react-runtime/utils/transformedDataset-utils");
-var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
-var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
-var _excluded = ["dataset", "datasetItems", "multiple", "disabled", "required", "name", "hint", "iconclass", "checkediconclass", "displayfield", "datafield", "value", "onChange", "onClick", "onMouseEnter", "onMouseLeave", "onBlur", "compareby", "toBeProcessedValue", "show", "tabindex", "arialabel", "className", "datavalue", "displayExpression", "orderby", "displayValue", "listener", "styles", "dataPath", "hidden", "fieldName"];
-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_CLS = "app-switch";
-var defaultProps = {
+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));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  memo,
+  useMemo
+} from "react";
+import { find, findIndex, forEach, toString } from "lodash-es";
+import {
+  withBaseWrapper
+} from "../../../../higherOrder/withBaseWrapper";
+import Box from "@mui/material/Box";
+import { InputBase } from "@mui/material";
+import { transformDataset } from "../../../../utils/transformedDataset-utils";
+import withFormController from "../../../data/form/form-controller/withFormController";
+import withStandalone from "../../../../higherOrder/withStandalone";
+const DEFAULT_CLS = "app-switch";
+const defaultProps = {
   show: true,
   tabindex: 0,
   checkediconclass: "",
@@ -35,485 +60,496 @@ var defaultProps = {
   acceptsArray: false,
   dataset: "yes, no, maybe"
 };
-var useSwitch = function useSwitch(props) {
-  var _props$dataset = props.dataset,
-    dataset = _props$dataset === void 0 ? defaultProps.dataset : _props$dataset,
-    propDatasetItems = props.datasetItems,
-    _props$multiple = props.multiple,
-    multiple = _props$multiple === void 0 ? defaultProps.multiple : _props$multiple,
-    value = props.value,
-    toBeProcessedValue = props.toBeProcessedValue,
-    onChange = props.onChange,
-    onClick = props.onClick,
-    onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave,
-    onBlur = props.onBlur,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? defaultProps.disabled : _props$disabled,
-    compareby = props.compareby,
-    datafield = props.datafield,
-    _props$allowempty = props.allowempty,
-    allowempty = _props$allowempty === void 0 ? defaultProps.allowempty : _props$allowempty,
-    _props$acceptsArray = props.acceptsArray,
-    acceptsArray = _props$acceptsArray === void 0 ? defaultProps.acceptsArray : _props$acceptsArray,
-    datavalue = props.datavalue,
-    listener = props.listener,
-    displayfield = props.displayfield,
-    orderby = props.orderby,
-    displayExpression = props.displayExpression,
-    name = props.name,
-    dataPath = props.dataPath;
-
-  // Consolidated dataset transformation - handles both initial value and updates
-  var transformedDataset = (0, _react.useMemo)(function () {
-    if (propDatasetItems !== null && propDatasetItems !== void 0 && propDatasetItems.length) return propDatasetItems;
-    // Check if dataset is a function and call it to get the actual dataset value
-    var resolvedDataset = typeof dataset === "function" ? dataset() : dataset;
-    return (0, _transformedDatasetUtils.transformDataset)(resolvedDataset, datafield, displayfield, undefined, displayExpression, orderby, null, dataPath);
+const useSwitch = (props) => {
+  const {
+    dataset = defaultProps.dataset,
+    datasetItems: propDatasetItems,
+    multiple = defaultProps.multiple,
+    value,
+    toBeProcessedValue,
+    onChange,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onBlur,
+    disabled = defaultProps.disabled,
+    compareby,
+    datafield,
+    allowempty = defaultProps.allowempty,
+    acceptsArray = defaultProps.acceptsArray,
+    datavalue,
+    listener,
+    displayfield,
+    orderby,
+    displayExpression,
+    name,
+    dataPath
+  } = props;
+  const transformedDataset = useMemo(() => {
+    if (propDatasetItems == null ? void 0 : propDatasetItems.length) return propDatasetItems;
+    const resolvedDataset = typeof dataset === "function" ? dataset() : dataset;
+    return transformDataset(
+      resolvedDataset,
+      datafield,
+      displayfield,
+      void 0,
+      displayExpression,
+      orderby,
+      null,
+      dataPath
+    );
   }, [dataset, datafield, displayfield, displayExpression, orderby, propDatasetItems]);
-  var _useState = (0, _react.useState)(transformedDataset),
-    datasetItems = _useState[0],
-    setDatasetItems = _useState[1];
-  var _useState2 = (0, _react.useState)(null),
-    selectedItem = _useState2[0],
-    setSelectedItem = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
-    modelByValue = _useState3[0],
-    setModelByValue = _useState3[1];
-  var _useState4 = (0, _react.useState)(null),
-    modelByKey = _useState4[0],
-    setModelByKey = _useState4[1];
-  var _useState5 = (0, _react.useState)(""),
-    CHDisplayValue = _useState5[0],
-    setDisplayValue = _useState5[1];
-  var switchRef = (0, _react.useRef)(null);
-  var overlayRef = (0, _react.useRef)(null);
-
-  // This flag helps us distinguish between programmatic updates and user clicks
-  var _useState6 = (0, _react.useState)(false),
-    isUserInteraction = _useState6[0],
-    setIsUserInteraction = _useState6[1];
-  var btnWidth = (0, _react.useMemo)(function () {
-    return datasetItems !== null && datasetItems !== void 0 && datasetItems.length && !multiple ? 100 / datasetItems.length : 0;
-  }, [datasetItems === null || datasetItems === void 0 ? void 0 : datasetItems.length, multiple]);
-  var updateHighlighter = (0, _react.useCallback)(function () {
-    var skipAnimation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    if (!overlayRef.current || !switchRef.current) return;
-    var index = selectedItem ? (0, _lodashEs.findIndex)(datasetItems, {
-      key: selectedItem.key
-    }) : -1;
-    if (index === -1) return;
-    var left = index * btnWidth;
-    if (skipAnimation) {
-      overlayRef.current.style.left = "".concat(left, "%");
-    } else {
-      overlayRef.current.style.left = "".concat(left, "%");
-    }
-  }, [btnWidth, datasetItems, selectedItem]);
-  (0, _react.useEffect)(function () {
+  const [datasetItems, setDatasetItems] = useState(
+    transformedDataset
+  );
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [modelByValue, setModelByValue] = useState(null);
+  const [modelByKey, setModelByKey] = useState(null);
+  const [CHDisplayValue, setDisplayValue] = useState("");
+  const switchRef = useRef(null);
+  const overlayRef = useRef(null);
+  const [isUserInteraction, setIsUserInteraction] = useState(false);
+  const btnWidth = useMemo(() => {
+    return (datasetItems == null ? void 0 : datasetItems.length) && !multiple ? 100 / datasetItems.length : 0;
+  }, [datasetItems == null ? void 0 : datasetItems.length, multiple]);
+  const updateHighlighter = useCallback(
+    (skipAnimation = false) => {
+      if (!overlayRef.current || !switchRef.current) return;
+      const index = selectedItem ? findIndex(datasetItems, { key: selectedItem.key }) : -1;
+      if (index === -1) return;
+      const left = index * btnWidth;
+      if (skipAnimation) {
+        overlayRef.current.style.left = `${left}%`;
+      } else {
+        overlayRef.current.style.left = `${left}%`;
+      }
+    },
+    [btnWidth, datasetItems, selectedItem]
+  );
+  useEffect(() => {
     if (overlayRef.current && btnWidth > 0) {
-      overlayRef.current.style.width = "".concat(btnWidth, "%");
+      overlayRef.current.style.width = `${btnWidth}%`;
     }
   }, [btnWidth]);
-
-  // Update datasetItems when transformedDataset changes
-  (0, _react.useEffect)(function () {
-    setDatasetItems(function (prevItems) {
-      // Only update if actually different
+  useEffect(() => {
+    setDatasetItems((prevItems) => {
       if (JSON.stringify(prevItems) !== JSON.stringify(transformedDataset)) {
         return transformedDataset;
       }
       return prevItems;
     });
   }, [transformedDataset]);
-
-  // This is the key fix: we only run the value update logic when it's NOT a user interaction
-  // This prevents the useEffect from overriding user clicks
-  var onValueUpdateFn = (0, _react.useCallback)(function () {
+  const onValueUpdateFn = useCallback(() => {
     if (isUserInteraction) {
-      return; // Don't override user interactions
+      return;
     }
-    if (value !== undefined || toBeProcessedValue !== undefined || datavalue !== undefined) {
-      var selected = (0, _lodashEs.find)(datasetItems, function (item) {
-        return item.value === (value || toBeProcessedValue || datavalue) || (0, _lodashEs.toString)(item.key) === (0, _lodashEs.toString)(value || toBeProcessedValue || datavalue);
-      });
+    if (value !== void 0 || toBeProcessedValue !== void 0 || datavalue !== void 0) {
+      const selected = find(
+        datasetItems,
+        (item) => item.value === (value || toBeProcessedValue || datavalue) || toString(item.key) === toString(value || toBeProcessedValue || datavalue)
+      );
       if (selected) {
-        var updatedItems = datasetItems.map(function (item) {
-          return _objectSpread(_objectSpread({}, item), {}, {
-            selected: (0, _lodashEs.toString)(item.key) === (0, _lodashEs.toString)(selected.key)
-          });
-        });
+        const updatedItems = datasetItems.map((item) => __spreadProps(__spreadValues({}, item), {
+          selected: toString(item.key) === toString(selected.key)
+        }));
         setDatasetItems(updatedItems);
         setSelectedItem(selected);
         setModelByKey(selected.key);
         setModelByValue(selected.value);
       }
-    } else if ((datasetItems === null || datasetItems === void 0 ? void 0 : datasetItems.length) > 0 && !selectedItem && datavalue) {
-      var firstItem = datasetItems[0];
-      var _updatedItems = datasetItems.map(function (item, idx) {
-        return _objectSpread(_objectSpread({}, item), {}, {
-          selected: idx === 0
-        });
-      });
-      setDatasetItems(_updatedItems);
+    } else if ((datasetItems == null ? void 0 : datasetItems.length) > 0 && !selectedItem && datavalue) {
+      const firstItem = datasetItems[0];
+      const updatedItems = datasetItems.map((item, idx) => __spreadProps(__spreadValues({}, item), {
+        selected: idx === 0
+      }));
+      setDatasetItems(updatedItems);
       setSelectedItem(firstItem);
       setModelByKey(firstItem.key);
       setModelByValue(firstItem.value);
-    } else if ((datasetItems === null || datasetItems === void 0 ? void 0 : datasetItems.length) > 0 && datavalue === undefined && selectedItem) {
-      var _updatedItems2 = datasetItems.map(function (item) {
-        return _objectSpread(_objectSpread({}, item), {}, {
-          selected: false
-        });
-      });
-      setDatasetItems(_updatedItems2);
+    } else if ((datasetItems == null ? void 0 : datasetItems.length) > 0 && datavalue === void 0 && selectedItem) {
+      const updatedItems = datasetItems.map((item) => __spreadProps(__spreadValues({}, item), {
+        selected: false
+      }));
+      setDatasetItems(updatedItems);
       setSelectedItem(null);
       setModelByKey(null);
       setModelByValue(null);
     }
   }, [datasetItems, value, toBeProcessedValue, datavalue, selectedItem, isUserInteraction]);
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     onValueUpdateFn();
-  }, [value, toBeProcessedValue, datavalue, datasetItems === null || datasetItems === void 0 ? void 0 : datasetItems.length]);
-  (0, _react.useEffect)(function () {
+  }, [value, toBeProcessedValue, datavalue, datasetItems == null ? void 0 : datasetItems.length]);
+  useEffect(() => {
     if (selectedItem) {
       updateHighlighter(true);
     }
   }, [selectedItem, updateHighlighter]);
-  var selectOpt = (0, _react.useCallback)(function (event, index, option) {
-    event.preventDefault();
-    if (disabled) return;
-    var selectedValue = {
-      datavalue: props.datavalue,
-      displayValue: props.displayValue
-    };
-
-    // Mark this as a user interaction to prevent useEffect interference
-    setIsUserInteraction(true);
-    if (multiple) {
-      var updatedItems = datasetItems.map(function (item, idx) {
-        return _objectSpread(_objectSpread({}, item), {}, {
+  const selectOpt = useCallback(
+    (event, index, option) => {
+      event.preventDefault();
+      if (disabled) return;
+      const selectedValue = {
+        datavalue: props.datavalue,
+        displayValue: props.displayValue
+      };
+      setIsUserInteraction(true);
+      if (multiple) {
+        const updatedItems = datasetItems.map((item, idx) => __spreadProps(__spreadValues({}, item), {
           selected: idx === index ? !item.selected : item.selected
+        }));
+        const keys = [];
+        forEach(updatedItems, (item) => {
+          if (item.selected) {
+            keys.push(item.key);
+          }
         });
-      });
-      var keys = [];
-      (0, _lodashEs.forEach)(updatedItems, function (item) {
-        if (item.selected) {
-          keys.push(item.key);
-        }
-      });
-
-      // Use a single state update to avoid conflicts
-      setDatasetItems(updatedItems);
-      setModelByKey(keys);
-      setModelByValue(keys.map(function (key) {
-        var _find;
-        return (_find = (0, _lodashEs.find)(updatedItems, {
-          key: key
-        })) === null || _find === void 0 ? void 0 : _find.value;
-      }));
-      setSelectedItem((0, _lodashEs.find)(updatedItems, {
-        selected: true
-      }) || null);
-      var datavalueArray = keys.map(function (key) {
-        var _find2;
-        return (_find2 = (0, _lodashEs.find)(updatedItems, {
-          key: key
-        })) === null || _find2 === void 0 ? void 0 : _find2.value;
-      });
-      var displayValueArray = keys.map(function (key) {
-        var _find3;
-        return (_find3 = (0, _lodashEs.find)(updatedItems, {
-          key: key
-        })) === null || _find3 === void 0 ? void 0 : _find3.label;
-      });
-      selectedValue.datavalue = datavalueArray;
-      selectedValue.displayValue = displayValueArray;
-      if (listener !== null && listener !== void 0 && listener.onChange) {
-        listener.onChange(name, _objectSpread(_objectSpread({}, props), {}, {
-          datavalue: datavalueArray,
-          displayValue: displayValueArray
+        setDatasetItems(updatedItems);
+        setModelByKey(keys);
+        setModelByValue(keys.map((key) => {
+          var _a;
+          return (_a = find(updatedItems, { key })) == null ? void 0 : _a.value;
         }));
-      }
-      if (onChange) {
-        onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], keys.map(function (key) {
-          var _find4;
-          return (_find4 = (0, _lodashEs.find)(updatedItems, {
-            key: key
-          })) === null || _find4 === void 0 ? void 0 : _find4.value;
-        }), keys);
-      }
-    } else {
-      // Handle single selection logic - clicking already-selected option keeps it selected
-      var targetIndex = index;
-      if (!multiple && selectedItem && index === (0, _lodashEs.findIndex)(datasetItems, {
-        key: selectedItem.key
-      })) {
-        // No change when user clicks the already-selected option
-        setIsUserInteraction(false);
-        return;
-      }
-      var _updatedItems3 = (0, _toConsumableArray2["default"])(datasetItems);
-      _updatedItems3.forEach(function (item) {
-        return item.selected = false;
-      });
-      _updatedItems3[targetIndex].selected = true;
-      var selectedOption = _updatedItems3[targetIndex];
-
-      // Batch all state updates together to ensure they happen atomically
-      setDatasetItems(_updatedItems3);
-      setSelectedItem(selectedOption);
-      setModelByKey(selectedOption.key);
-      setModelByValue(selectedOption.value);
-
-      // Update overlay position immediately for immediate visual feedback
-      if (overlayRef.current) {
-        overlayRef.current.style.transition = "left 300ms";
-        var left = targetIndex * btnWidth;
-        overlayRef.current.style.left = "".concat(left, "%");
-      }
-      selectedValue.datavalue = selectedOption.value;
-      selectedValue.displayValue = selectedOption.label;
-      if (listener !== null && listener !== void 0 && listener.onChange) {
-        listener.onChange((props === null || props === void 0 ? void 0 : props.fieldName) || name, {
-          datavalue: selectedOption.value,
-          displayValue: selectedOption.label
+        setSelectedItem(find(updatedItems, { selected: true }) || null);
+        const datavalueArray = keys.map((key) => {
+          var _a;
+          return (_a = find(updatedItems, { key })) == null ? void 0 : _a.value;
         });
+        const displayValueArray = keys.map((key) => {
+          var _a;
+          return (_a = find(updatedItems, { key })) == null ? void 0 : _a.label;
+        });
+        selectedValue.datavalue = datavalueArray;
+        selectedValue.displayValue = displayValueArray;
+        if (listener == null ? void 0 : listener.onChange) {
+          listener.onChange(name, __spreadProps(__spreadValues({}, props), {
+            datavalue: datavalueArray,
+            displayValue: displayValueArray
+          }));
+        }
+        if (onChange) {
+          onChange(
+            event,
+            listener == null ? void 0 : listener.Widgets[name],
+            keys.map((key) => {
+              var _a;
+              return (_a = find(updatedItems, { key })) == null ? void 0 : _a.value;
+            }),
+            keys
+          );
+        }
+      } else {
+        let targetIndex = index;
+        if (!multiple && selectedItem && index === findIndex(datasetItems, { key: selectedItem.key })) {
+          setIsUserInteraction(false);
+          return;
+        }
+        const updatedItems = [...datasetItems];
+        updatedItems.forEach((item) => item.selected = false);
+        updatedItems[targetIndex].selected = true;
+        const selectedOption = updatedItems[targetIndex];
+        setDatasetItems(updatedItems);
+        setSelectedItem(selectedOption);
+        setModelByKey(selectedOption.key);
+        setModelByValue(selectedOption.value);
+        if (overlayRef.current) {
+          overlayRef.current.style.transition = "left 300ms";
+          const left = targetIndex * btnWidth;
+          overlayRef.current.style.left = `${left}%`;
+        }
+        selectedValue.datavalue = selectedOption.value;
+        selectedValue.displayValue = selectedOption.label;
+        if (listener == null ? void 0 : listener.onChange) {
+          listener.onChange((props == null ? void 0 : props.fieldName) || name, {
+            datavalue: selectedOption.value,
+            displayValue: selectedOption.label
+          });
+        }
+        if (onChange) {
+          onChange(
+            event,
+            listener == null ? void 0 : listener.Widgets[name],
+            selectedOption.value,
+            selectedItem == null ? void 0 : selectedItem.label
+          );
+        }
       }
-      if (onChange) {
-        onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], selectedOption.value, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label);
+      setTimeout(() => {
+        setIsUserInteraction(false);
+      }, 100);
+      if (onBlur) {
+        onBlur();
       }
-    }
-
-    // Reset the user interaction flag after a short delay to allow for programmatic updates again
-    setTimeout(function () {
-      setIsUserInteraction(false);
-    }, 100);
-    if (onBlur) {
-      onBlur();
-    }
-    return selectedValue;
-  }, [datasetItems, disabled, multiple, onChange, onBlur, onClick, selectedItem, btnWidth, listener]);
-  var handleOnMouseEnter = function handleOnMouseEnter(event, option) {
+      return selectedValue;
+    },
+    [datasetItems, disabled, multiple, onChange, onBlur, onClick, selectedItem, btnWidth, listener]
+  );
+  const handleOnMouseEnter = (event, option) => {
     if (disabled || !onMouseEnter) return;
-    onMouseEnter(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    onMouseEnter(event, listener == null ? void 0 : listener.Widgets[name]);
   };
-  var handleOnMouseLeave = function handleOnMouseLeave(event, option) {
+  const handleOnMouseLeave = (event, option) => {
     if (disabled || !onMouseLeave) return;
-    onMouseLeave(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    onMouseLeave(event, listener == null ? void 0 : listener.Widgets[name]);
   };
-  var handleOnClick = function handleOnClick(event, index, option) {
-    var selectedValue = selectOpt(event, index, option);
+  const handleOnClick = (event, index, option) => {
+    const selectedValue = selectOpt(event, index, option);
     if (disabled || !onClick) return;
-    onClick(event, Object.assign({}, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], selectedValue));
+    onClick(event, Object.assign({}, listener == null ? void 0 : listener.Widgets[name], selectedValue));
   };
   return {
-    datasetItems: datasetItems,
-    selectedItem: selectedItem,
-    btnWidth: btnWidth,
-    switchRef: switchRef,
-    overlayRef: overlayRef,
-    selectOpt: selectOpt,
-    updateHighlighter: updateHighlighter,
-    modelByValue: modelByValue,
-    modelByKey: modelByKey,
-    CHDisplayValue: CHDisplayValue,
-    handleOnMouseEnter: handleOnMouseEnter,
-    handleOnMouseLeave: handleOnMouseLeave,
-    handleOnClick: handleOnClick
+    datasetItems,
+    selectedItem,
+    btnWidth,
+    switchRef,
+    overlayRef,
+    selectOpt,
+    updateHighlighter,
+    modelByValue,
+    modelByKey,
+    CHDisplayValue,
+    handleOnMouseEnter,
+    handleOnMouseLeave,
+    handleOnClick
   };
 };
-var SwitchOption = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var _opt$dataObject, _opt$dataObject2;
-  var opt = _ref.opt,
-    index = _ref.index,
-    getHint = _ref.getHint,
-    selectOpt = _ref.selectOpt,
-    handleOnMouseEnter = _ref.handleOnMouseEnter,
-    handleOnMouseLeave = _ref.handleOnMouseLeave,
-    handleOnClick = _ref.handleOnClick,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    iconclass = _ref.iconclass,
-    checkediconclass = _ref.checkediconclass,
-    displayfield = _ref.displayfield;
-  return __jsx(_Box["default"], {
-    component: "a",
-    key: opt.key,
-    href: "javascript:void(0);",
-    className: "btn btn-default ".concat(opt.selected ? "selected" : "", " ").concat(disabled ? "disabled" : ""),
-    title: getHint(opt, index),
-    role: "button",
-    "aria-pressed": opt.selected ? "true" : "false",
-    onClick: function onClick(e) {
-      return handleOnClick(e, index, opt);
-    },
-    onMouseEnter: function onMouseEnter(e) {
-      return handleOnMouseEnter(e, opt);
-    },
-    onMouseLeave: function onMouseLeave(e) {
-      return handleOnMouseLeave(e, opt);
-    },
-    name: "wm-switch-".concat(opt.key)
-  }, iconclass && ((_opt$dataObject = opt.dataObject) === null || _opt$dataObject === void 0 ? void 0 : _opt$dataObject[iconclass]) && (!opt.selected || !checkediconclass) && __jsx(_Box["default"], {
-    component: "i",
-    "aria-hidden": "true",
-    className: "app-icon ".concat(((_opt$dataObject2 = opt.dataObject) === null || _opt$dataObject2 === void 0 ? void 0 : _opt$dataObject2[iconclass]) || opt["icon"])
-  }), opt.selected && checkediconclass && __jsx(_Box["default"], {
-    component: "i",
-    "aria-hidden": "true",
-    className: checkediconclass
-  }), __jsx(_Box["default"], {
-    component: "span",
-    className: "caption"
-  }, displayfield && opt[displayfield] || opt.label));
-});
+const SwitchOption = memo(
+  ({
+    opt,
+    index,
+    getHint,
+    selectOpt,
+    handleOnMouseEnter,
+    handleOnMouseLeave,
+    handleOnClick,
+    disabled = false,
+    iconclass,
+    checkediconclass,
+    displayfield
+  }) => {
+    var _a, _b;
+    return /* @__PURE__ */ jsxs(
+      Box,
+      __spreadProps(__spreadValues({
+        component: "a",
+        href: "javascript:void(0);",
+        className: `btn btn-default ${opt.selected ? "selected" : ""} ${disabled ? "disabled" : ""}`,
+        title: getHint(opt, index),
+        role: "button",
+        "aria-pressed": opt.selected ? "true" : "false",
+        onClick: (e) => handleOnClick(e, index, opt),
+        onMouseEnter: (e) => handleOnMouseEnter(e, opt),
+        onMouseLeave: (e) => handleOnMouseLeave(e, opt)
+      }, {
+        name: `wm-switch-${opt.key}`
+      }), {
+        children: [
+          iconclass && ((_a = opt.dataObject) == null ? void 0 : _a[iconclass]) && (!opt.selected || !checkediconclass) && /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "i",
+              "aria-hidden": "true",
+              className: `app-icon ${((_b = opt.dataObject) == null ? void 0 : _b[iconclass]) || opt["icon"]}`
+            }
+          ),
+          opt.selected && checkediconclass && /* @__PURE__ */ jsx(Box, { component: "i", "aria-hidden": "true", className: checkediconclass }),
+          /* @__PURE__ */ jsx(Box, { component: "span", className: "caption", children: displayfield && opt[displayfield] || opt.label })
+        ]
+      }),
+      opt.key
+    );
+  }
+);
 SwitchOption.displayName = "SwitchOption";
-var WmSwitch = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
-  var dataset = _ref2.dataset,
-    propDatasetItems = _ref2.datasetItems,
-    _ref2$multiple = _ref2.multiple,
-    multiple = _ref2$multiple === void 0 ? defaultProps.multiple : _ref2$multiple,
-    _ref2$disabled = _ref2.disabled,
-    disabled = _ref2$disabled === void 0 ? defaultProps.disabled : _ref2$disabled,
-    _ref2$required = _ref2.required,
-    required = _ref2$required === void 0 ? defaultProps.required : _ref2$required,
-    name = _ref2.name,
-    hint = _ref2.hint,
-    iconclass = _ref2.iconclass,
-    _ref2$checkediconclas = _ref2.checkediconclass,
-    checkediconclass = _ref2$checkediconclas === void 0 ? defaultProps.checkediconclass : _ref2$checkediconclas,
-    _ref2$displayfield = _ref2.displayfield,
-    displayfield = _ref2$displayfield === void 0 ? defaultProps.displayfield : _ref2$displayfield,
-    datafield = _ref2.datafield,
-    value = _ref2.value,
-    onChange = _ref2.onChange,
-    onClick = _ref2.onClick,
-    onMouseEnter = _ref2.onMouseEnter,
-    onMouseLeave = _ref2.onMouseLeave,
-    onBlur = _ref2.onBlur,
-    compareby = _ref2.compareby,
-    toBeProcessedValue = _ref2.toBeProcessedValue,
-    _ref2$show = _ref2.show,
-    show = _ref2$show === void 0 ? defaultProps.show : _ref2$show,
-    _ref2$tabindex = _ref2.tabindex,
-    tabindex = _ref2$tabindex === void 0 ? defaultProps.tabindex : _ref2$tabindex,
-    _ref2$arialabel = _ref2.arialabel,
-    arialabel = _ref2$arialabel === void 0 ? "Switch choose options" : _ref2$arialabel,
-    className = _ref2.className,
-    datavalue = _ref2.datavalue,
-    displayExpression = _ref2.displayExpression,
-    orderby = _ref2.orderby,
-    displayValue = _ref2.displayValue,
-    listener = _ref2.listener,
-    styles = _ref2.styles,
-    dataPath = _ref2.dataPath,
-    hidden = _ref2.hidden,
-    fieldName = _ref2.fieldName,
-    rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
-  var _useSwitch = useSwitch({
-      dataset: dataset,
+const WmSwitch = memo(
+  (_a) => {
+    var _b = _a, {
+      dataset,
       datasetItems: propDatasetItems,
-      multiple: multiple,
-      value: value,
-      toBeProcessedValue: toBeProcessedValue,
-      onChange: onChange,
-      onClick: onClick,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onBlur: onBlur,
-      disabled: disabled,
-      compareby: compareby,
-      datafield: datafield,
-      datavalue: datavalue,
-      name: name,
-      displayfield: displayfield,
-      displayExpression: displayExpression,
-      orderby: orderby,
-      listener: listener,
-      dataPath: dataPath,
-      fieldName: fieldName
-    }),
-    datasetItems = _useSwitch.datasetItems,
-    selectedItem = _useSwitch.selectedItem,
-    switchRef = _useSwitch.switchRef,
-    overlayRef = _useSwitch.overlayRef,
-    selectOpt = _useSwitch.selectOpt,
-    updateHighlighter = _useSwitch.updateHighlighter,
-    handleOnMouseEnter = _useSwitch.handleOnMouseEnter,
-    handleOnMouseLeave = _useSwitch.handleOnMouseLeave,
-    handleOnClick = _useSwitch.handleOnClick,
-    modelByValue = _useSwitch.modelByValue,
-    modelByKey = _useSwitch.modelByKey,
-    CHDisplayValue = _useSwitch.CHDisplayValue,
-    btnWidth = _useSwitch.btnWidth;
-  var getHint = (0, _react.useCallback)(function (opt, index) {
-    if (!hint) return opt[displayfield] || opt.label;
-    if (Array.isArray(hint)) {
-      return hint[index - 1] || hint[0] || opt[displayfield] || opt.label;
-    }
-    return hint;
-  }, [hint, displayfield]);
-  return __jsx(_Box["default"], {
-    hidden: hidden,
-    className: "".concat(DEFAULT_CLS, " wm-switch-root"),
-    name: name,
-    "aria-label": arialabel,
-    datavalue: datavalue,
-    style: styles
-  }, __jsx(_Box["default"], {
-    ref: switchRef,
-    role: "group",
-    className: "btn-group btn-group-justified wm-switch-inner ".concat(multiple ? "multi-select" : "", " ").concat(className || ""),
-    style: styles,
-    tabIndex: tabindex,
-    "aria-label": arialabel
-  }, datasetItems && datasetItems.map(function (opt, index) {
-    return __jsx(SwitchOption, {
-      key: opt.key,
-      opt: opt,
-      index: index,
-      getHint: getHint,
-      selectOpt: selectOpt,
-      disabled: disabled,
-      iconclass: iconclass,
-      checkediconclass: checkediconclass,
-      displayfield: displayfield,
-      handleOnMouseEnter: handleOnMouseEnter,
-      handleOnMouseLeave: handleOnMouseLeave,
-      handleOnClick: handleOnClick
+      multiple = defaultProps.multiple,
+      disabled = defaultProps.disabled,
+      required = defaultProps.required,
+      name,
+      hint,
+      iconclass,
+      checkediconclass = defaultProps.checkediconclass,
+      displayfield = defaultProps.displayfield,
+      datafield,
+      value,
+      onChange,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      onBlur,
+      compareby,
+      toBeProcessedValue,
+      show = defaultProps.show,
+      tabindex = defaultProps.tabindex,
+      arialabel = "Switch choose options",
+      className,
+      datavalue,
+      displayExpression,
+      orderby,
+      displayValue,
+      listener,
+      styles,
+      dataPath,
+      hidden,
+      fieldName
+    } = _b, rest = __objRest(_b, [
+      "dataset",
+      "datasetItems",
+      "multiple",
+      "disabled",
+      "required",
+      "name",
+      "hint",
+      "iconclass",
+      "checkediconclass",
+      "displayfield",
+      "datafield",
+      "value",
+      "onChange",
+      "onClick",
+      "onMouseEnter",
+      "onMouseLeave",
+      "onBlur",
+      "compareby",
+      "toBeProcessedValue",
+      "show",
+      "tabindex",
+      "arialabel",
+      "className",
+      "datavalue",
+      "displayExpression",
+      "orderby",
+      "displayValue",
+      "listener",
+      "styles",
+      "dataPath",
+      "hidden",
+      "fieldName"
+    ]);
+    const {
+      datasetItems,
+      selectedItem,
+      switchRef,
+      overlayRef,
+      selectOpt,
+      updateHighlighter,
+      handleOnMouseEnter,
+      handleOnMouseLeave,
+      handleOnClick,
+      modelByValue,
+      modelByKey,
+      CHDisplayValue,
+      btnWidth
+    } = useSwitch({
+      dataset,
+      datasetItems: propDatasetItems,
+      multiple,
+      value,
+      toBeProcessedValue,
+      onChange,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      onBlur,
+      disabled,
+      compareby,
+      datafield,
+      datavalue,
+      name,
+      displayfield,
+      displayExpression,
+      orderby,
+      listener,
+      dataPath,
+      fieldName
     });
-  })), !multiple && __jsx(_Box["default"], {
-    component: "span",
-    ref: overlayRef,
-    title: selectedItem ? selectedItem.label : modelByKey,
-    "aria-hidden": "true",
-    className: "btn btn-primary app-switch-overlay switch-handle"
-  }, checkediconclass && __jsx(_Box["default"], {
-    component: "i",
-    className: checkediconclass
-  }), __jsx(_Box["default"], {
-    component: "span",
-    className: "caption"
-  }, selectedItem ? selectedItem.label : modelByKey)), __jsx(_material.InputBase, {
-    name: name,
-    className: "model-holder ng-hide",
-    disabled: disabled,
-    value: modelByKey || "",
-    required: required,
-    "aria-hidden": "true",
-    readOnly: true
-  }));
-});
+    const getHint = useCallback(
+      (opt, index) => {
+        if (!hint) return opt[displayfield] || opt.label;
+        if (Array.isArray(hint)) {
+          return hint[index - 1] || hint[0] || opt[displayfield] || opt.label;
+        }
+        return hint;
+      },
+      [hint, displayfield]
+    );
+    return /* @__PURE__ */ jsxs(
+      Box,
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+        hidden,
+        className: `${DEFAULT_CLS} wm-switch-root`
+      }, { name }), {
+        "aria-label": arialabel
+      }), { datavalue }), {
+        style: styles,
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              ref: switchRef,
+              role: "group",
+              className: `btn-group btn-group-justified wm-switch-inner ${multiple ? "multi-select" : ""} ${className || ""}`,
+              style: styles,
+              tabIndex: tabindex,
+              "aria-label": arialabel,
+              children: datasetItems && datasetItems.map((opt, index) => /* @__PURE__ */ jsx(
+                SwitchOption,
+                {
+                  opt,
+                  index,
+                  getHint,
+                  selectOpt,
+                  disabled,
+                  iconclass,
+                  checkediconclass,
+                  displayfield,
+                  handleOnMouseEnter,
+                  handleOnMouseLeave,
+                  handleOnClick
+                },
+                opt.key
+              ))
+            }
+          ),
+          !multiple && /* @__PURE__ */ jsxs(
+            Box,
+            {
+              component: "span",
+              ref: overlayRef,
+              title: selectedItem ? selectedItem.label : modelByKey,
+              "aria-hidden": "true",
+              className: "btn btn-primary app-switch-overlay switch-handle",
+              children: [
+                checkediconclass && /* @__PURE__ */ jsx(Box, { component: "i", className: checkediconclass }),
+                /* @__PURE__ */ jsx(Box, { component: "span", className: "caption", children: selectedItem ? selectedItem.label : modelByKey })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InputBase,
+            {
+              name,
+              className: "model-holder ng-hide",
+              disabled,
+              value: modelByKey || "",
+              required,
+              "aria-hidden": "true",
+              readOnly: true
+            }
+          )
+        ]
+      })
+    );
+  }
+);
 WmSwitch.displayName = "WmSwitch";
-var WithForm = (0, _withFormController["default"])(WmSwitch);
-var WmSwitchStandalone = exports.WmSwitch = (0, _withStandalone["default"])(WithForm);
-/**
- * The WmSwitch component provides a toggle switch input with multiple selection modes.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-switch--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-switch--docs)
- *
- * @param props - {@link WmSwitchProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WithForm);
+const WithForm = withFormController(WmSwitch);
+const WmSwitchStandalone = withStandalone(WithForm);
+var switch_default = withBaseWrapper(WithForm);
+export {
+  WmSwitchStandalone as WmSwitch,
+  switch_default as default
+};